1

Gostaria de criar uma classe comum em minha aplicação com react e material-ui. Tenho, por exemplo, que criar uma série de elementos com tabelas. Toda vez que uso tenho que importar algumas libs. Por exemplo:

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');

Gostaria de fazer algo similar há:

/* <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;

Ou seja, criar uma classe que encapsule essas libs e depois em cada elemento que use tabela extender essa lib.

Alguma sugestão?

1 Resposta 1

1

É possível mas de certa forma, não é recomendável, vou explicar depois o porque, mas o que você precisa é algo assim:

Coloque isso em um arquivo como components/table/index.js, assim você consegue importa-lo apenas usando o nome da pasta, mas isso é opcional ok? Sendo assim, tem duas opções:

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');

ou

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');

Depois você pode carrega-los assim:

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

ou

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

E para usa-los: TableElement.Table, ou TableElement.TableBody e por ai vai.

Agora porque não é recomendável?

Se você estiver usando algum task runner como gulp ou grunt, isso de fato, não vai fazer diferênça, porém, se você estiver usando webpack, você pode acabar injetando mais código no seu projeto final do que deveria.

De modo simples, o webpack é inteligente o suficiente para importar e injetar no seu projeto, apenas os módulos que você esteja usando, então se por exemplo, você esteja usando apenas alguns módulos do material-ui, apenas os módulos que você importar, serão adicionados no seu projeto final. No caso do gulp ou grunt, eles importam o material-ui inteiro para o seu projeto e no fim você vai ter módulo que você talvez nem esteja usando, fazendo um volume desnecessário no seu projeto.

Espero que tenha ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .