Create class with common material-ui and React Imports

Question

I would like to create a common class in my application with React and material-ui. I have, for example, to create a series of elements with tables. Every time I use I have to import some libs. For example:

const Table = require('material-ui/lib/table/table');
const TableBody = require('material-ui/lib/table/table-body');
const TableFooter = require('material-ui/lib/table/table-footer');
const TableHeader = require('material-ui/lib/table/table-header');
const TableHeaderColumn = require('material-ui/lib/table/table-header-column');
const TableRow = require('material-ui/lib/table/table-row');
const TableRowColumn = require('material-ui/lib/table/table-row-column');

I would like to do something similar there:

/* <path>/Template/index.jsx */

const React = require('react'),
ReactDOM    = require('react-dom'),
Router      = require('react-router'),
mui         = require('material-ui'),
Icon        = mui.Icon;

class Template extends React.Component {
    render() {
        return (
            {this.props.element}
        );
    }
};

module.exports = Template;

/* <path>/Table/index.jsx */

const Template    = require('../template'),
Table             = require('material-ui/lib/table/table'),
TableBody         = require('material-ui/lib/table/table-body'),
TableFooter       = require('material-ui/lib/table/table-footer'),
TableHeader       = require('material-ui/lib/table/table-header'),
TableHeaderColumn = require('material-ui/lib/table/table-header-column'),
TableRow          = require('material-ui/lib/table/table-row'),
TableRowColumn    = require('material-ui/lib/table/table-row-column');

class Table extends Template {
    render() {
        return (
            <Template element={this.props.element}/>
        );
    }
};

module.exports = Table;

/* <path>/home/index.jsx */

var Table = require('../../../common/table');

var _rows = [];
for (var i = 1; i < 100; i++) {
    _rows.push({
        id: i,
        title: 'Title ' + i,
        count: i * 100
    });
}

class Item extends Table {
    handleOnClick: function(event) {
        event.preventDefault();
        this.props.setApplicationDetails("item", this.props.item);
    },

    render: function() {
        return (
            <TableRow selected={true}>
                <TableRowColumn>
                    <a href="#" onClick={this.handleOnClick}> {this.props.item.id}</a>
                    <i className="fa fa-caret-right"></i>
                </TableRowColumn>
                <TableRowColumn>{this.props.item.Title}</TableRowColumn>
            </TableRow>
        );
    }
};

class ItemItem extends Table{
    mixins: [Router.Navigation, Router.State],
    setApplicationDetails: function(pageData, item) {
        this.transitionTo("/home?id=" + item.id);
    },
    render: function() {
        var self = this;
        var state = {
            fixedHeader: true,
            stripedRows: false,
            showRowHover: false,
            selectable: true,
            multiSelectable: false,
            enableSelectAll: false,
            deselectOnClickaway: true,
            height: '300px',
        };

        var item = _rows.map(function(item, index) {
            return (
                <Item item={item} index={++index} setApplicationDetails={self.setApplicationDetails} key={index} />
            );
        });

        return (
            <Table height={state.height} fixedHeader={state.fixedHeader}
                fixedFooter={state.fixedFooter} selectable={state.selectable}
                multiSelectable={state.multiSelectable}>
                <TableHeader enableSelectAll={state.enableSelectAll}>
                    <TableRow>
                        <TableHeaderColumn colSpan="3" tooltip='Super Header' style={{textAlign: 'center'}}>
                        Super Header
                        </TableHeaderColumn>
                    </TableRow>
                    <TableRow>
                        <TableHeaderColumn tooltip='The ID'>ID</TableHeaderColumn>
                        <TableHeaderColumn tooltip='The Name'>Name</TableHeaderColumn>
                        <TableHeaderColumn tooltip='The Status'>Status</TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody deselectOnClickaway={state.deselectOnClickaway}
                    showRowHover={state.showRowHover} stripedRows={state.stripedRows}>
                    <TableRow selected={true}>
                        <TableRowColumn>1</TableRowColumn>
                        <TableRowColumn>John Smith</TableRowColumn>
                        <TableRowColumn>Employed</TableRowColumn>
                    </TableRow>
                </TableBody>
            </Table>
        );
    }
};

module.exports = ItemItem;

That is, create a class that encapsulates these libs and then in each element that uses table extender that lib.

Any suggestions?

Answer 1

It’s possible but in a way, it’s not recommended, I’ll explain later why, but what you need is something like this:

Put this in a file like components/table/index.js, so you can import it just by using the folder name, but this is optional ok? So there are two options:

export const { Table } = require('material-ui/lib/table/table');
export const { TableBody } = require('material-ui/lib/table/table-body');
export const { TableFooter } = require('material-ui/lib/table/table-footer');
export const { TableHeader } = require('material-ui/lib/table/table-header');
export const { TableHeaderColumn } = require('material-ui/lib/table/table-header-column');
export const { TableRow } = require('material-ui/lib/table/table-row');
export const { TableRowColumn } = require('material-ui/lib/table/table-row-column');

or

export.Table = require('material-ui/lib/table/table');
export.TableBody = require('material-ui/lib/table/table-body');
export.TableFooter = require('material-ui/lib/table/table-footer');
export.TableHeader = require('material-ui/lib/table/table-header');
export.TableHeaderColumn = require('material-ui/lib/table/table-header-column');
export.TableRow = require('material-ui/lib/table/table-row');
export.TableRowColumn = require('material-ui/lib/table/table-row-column');

Then you can carry them like this:

import { * as TableElements } from './components/table'

or

const TableElements = require('./components/table')

And to use them: TableElement.Table, or TableElement.TableBody and so on.

Now because it is not recommended?

If you’re using some Runner task like Gulp or Grunt, this won’t actually make a difference, but if you’re using webpack, you might end up injecting more code into your final project than you should.

Simply put, the webpack is smart enough to import and inject into your project, just the modules you’re using, so if for example, you’re using just a few modules of the material-ui, just the modules you import, will be added to your final project. In the case of Gulp or Grunt, they import the whole ui-material to your project and at the end you will have module that you may not even be using, making an unnecessary volume in your project.

I hope it helped.