Merge pull request #9 from ZBoxApp/componentes

Componentes

src/components/alert.jsx

+import React from 'react';
+
+export default class Alert extends React.Component {
+    constructor() {
+        super();
+
+        this.withCloseClassName = '';
+        this.btnClose = '';
+        this.toggle = {
+            display: 'block'
+        };
+    }
+
+    componentWillMount() {
+        if (this.props.withClose) {
+            this.btnClose = (
+                <button
+                    type='button'
+                    className='close'
+                    data-dismissible='alert'
+                    aria-label='Close'
+                >
+                    <span
+                        aria-hidden='true'
+                        style={{color: '#000'}}
+                    >{'x'}</span>
+                </button>
+            );
+        }
+    }
+
+    render() {
+        return (
+            <div
+                id='flash'
+                style={this.toggle}
+            >
+                <div
+                    className={this.props.className + this.withCloseClassName}
+                    role='alert'
+                >
+                    {this.btnClose}
+                    <i className={this.props.iconClass}></i>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+Alert.propTypes = {
+    className: React.PropTypes.string,
+    iconClass: React.PropTypes.string,
+    withClose: React.PropTypes.bool,
+    children: React.PropTypes.any
+};
+
+Alert.defaultProps = {
+    className: 'alert flash-success',
+    iconClass: 'fa fa-check-circle-o',
+    withClose: false,
+    children: ''
+};

src/components/button.jsx

+import React from 'react';
+
+export default class Button extends React.Component {
+    render() {
+        return (
+            <a {...this.props.btnAttrs}>{this.props.children}</a>
+        );
+    }
+}
+
+Button.propTypes = {
+    btnAttrs: React.PropTypes.object,
+    children: React.PropTypes.any
+};
+
+Button.defaultProps = {
+};

src/components/label.jsx

+import React from 'react';
+
+export default class Label extends React.Component {
+    render() {
+        return (
+            <span className={this.props.classes}>
+                {this.props.children}
+            </span>
+        );
+    }
+}
+
+Label.propTypes = {
+    classes: React.PropTypes.string,
+    children: React.PropTypes.any
+};
+
+Label.defaultProps = {
+    classes: '',
+    children: ''
+};

src/components/link.jsx

+import React from 'react';
+import If from './if.jsx';
+
+export default class Link extends React.Component {
+    render() {
+        return (
+            <li {...this.props.attrs}>
+                <a href={this.props.url}>
+                    <span className='nav-label'>
+                        {this.props.label}
+                    </span>
+                    <If condition={this.props.isBadge}>
+                        <span className={this.props.badgeClass}>
+                            {this.props.badgeName}
+                        </span>
+                    </If>
+                </a>
+            </li>
+        );
+    }
+}
+
+Link.propTypes = {
+    badgeName: React.PropTypes.string,
+    isBadge: React.PropTypes.bool,
+    badgeClass: React.PropTypes.string,
+    url: React.PropTypes.string,
+    label: React.PropTypes.string,
+    attrs: React.PropTypes.object
+};
+
+Link.defaultProps = {
+    badgeName: '',
+    isBadge: false,
+    badgeClass: '',
+    url: '#!',
+    label: '',
+    attrs: {}
+};

src/components/page_info.jsx

+import React from 'react';
+
+export default class PageInfo extends React.Component {
+    render() {
+        return (
+            <div className='normalheader transition animated fadeIn small-header'>
+                <div className='hpanel'>
+                    <div className='panel-body'>
+                        <h2 className='font-light m-b-xs'>
+                            {this.props.titlePage}
+                        </h2>
+                        <small>{this.props.descriptionPage}</small>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+PageInfo.propTypes = {
+    titlePage: React.PropTypes.string.isRequired,
+    descriptionPage: React.PropTypes.string
+};
+
+PageInfo.defaultProps = {
+    descriptionPage: ''
+};

src/components/pagination.jsx

+import React from 'react';
+import Link from './link.jsx';
+
+export default class Pagination extends React.Component {
+    render() {
+        return (
+            <div
+                className={this.props.classes}
+                id={this.props.id}
+            >
+                <ul className={this.props.ulClasses}>
+                    {this.props.linksArray.map((link, i) => {
+                        return (
+                          <Link
+                              key={i}
+                              url={link.url}
+                              label={link.label}
+                              attrs={link.props}
+                          />
+                        );
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}
+
+Pagination.propTypes = {
+    classes: React.PropTypes.string,
+    id: React.PropTypes.string,
+    ulClasses: React.PropTypes.string,
+    linksArray: React.PropTypes.array
+};
+
+Pagination.defaultProps = {
+    classes: '',
+    id: 'pagination',
+    ulClasses: 'pagination',
+    linksArray: []
+};

src/components/panel.jsx

+import React from 'react';
+import Button from './button.jsx';
+
+export default class Panel extends React.Component {
+    render() {
+        const btns = this.props.btnsHeader.map((btn, i) => {
+            return (
+                <Button
+                    btnAttrs={btn.props}
+                    key={i}
+                >
+                    {btn.label}
+                </Button>
+            );
+        });
+
+        return (
+            <div className='hpanel'>
+                <div className='panel-heading hbuilt clearfix'>
+                    <div className='pull-right'>{btns}</div>
+                    <div className='heading-buttons'>
+                        {this.props.title}
+                    </div>
+                </div>
+                <div className='panel-body'>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+Panel.propTypes = {
+    btnsHeader: React.PropTypes.array,
+    title: React.PropTypes.string,
+    children: React.PropTypes.any
+};
+
+Panel.defaultProps = {
+    btnsHeader: [],
+    title: ''
+};

src/components/panelForm.jsx

+import React from 'react';
+
+export default class PanelForm extends React.Component {
+    render() {
+        return (
+            <form {...this.props.formAttrs}>
+                <input
+                    type='hidden'
+                    name='utf8'
+                    value='✓'
+                />
+                <div className='input-group'>
+                    <input {...this.props.hiddenAttrs}/>
+                    <input {...this.props.inputAttrs}/>
+                    <span className='input-group-btn'>
+                        <button
+                            className='btn btn-default'
+                            type='submit'
+                        >
+                            <span className={this.props.iconClasses}></span>
+                        </button>
+                    </span>
+                </div>
+            </form>
+        );
+    }
+}
+
+PanelForm.propTypes = {
+    formAttrs: React.PropTypes.object,
+    hiddenAttrs: React.PropTypes.object,
+    inputAttrs: React.PropTypes.object,
+    iconClasses: React.PropTypes.string
+};
+
+PanelForm.defaultProps = {
+    iconClasses: 'fa fa-search',
+    formAttrs: {name: 'search_domain'},
+    hiddenAttrs: {type: 'hidden'},
+    inputAttrs: {}
+};

src/components/panelTable.jsx

+import React from 'react';
+import Button from './button.jsx';
+import PanelForm from './panelForm.jsx';
+import Pagination from './pagination.jsx';
+import Alert from './alert.jsx';
+
+export default class PanelTable extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: false,
+            data: [
+                {name: 'zbox', casillas: '2', descripcion: 'Caracas', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'Nombre', casillas: '2NNS', descripcion: 'Descripción', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'microsoft', casillas: '34NS', descripcion: 'Solteros', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'descargasnsn', casillas: '2NNS', descripcion: 'Descripción', estado: 'migrando', props: {className: 'domain-row'}},
+                {name: 'Nombre', casillas: '2NNS', descripcion: 'Descripción', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'machinesoft', casillas: '', descripcion: 'Hola que tal', estado: 'inactive', props: {className: 'domain-row'}},
+                {name: 'Nombre', casillas: '2S', descripcion: 'Descripción', estado: 'active', props: {className: 'domain-row'}},
+                {name: 'getonboard', casillas: '45NS', descripcion: 'Casados', estado: 'inactive', props: {className: 'domain-row'}}
+            ],
+            pagination: [
+                {url: './domains/1', label: '1', active: 'active'},
+                {url: './domains/2', label: '2'},
+                {url: './domains/3', label: '3'},
+                {url: './domains/prev', label: 'prev'},
+                {url: './domains/next', label: 'next'}
+            ]
+        };
+    }
+
+    render() {
+        const btns = this.props.btnsHeader.map((btn, i) => {
+            return (
+                <Button
+                    btnAttrs={btn.props}
+                    key={i}
+                >
+                    {btn.label}
+                </Button>
+            );
+        });
+
+        let content;
+
+        if (this.state.data.length <= 0) {
+            content = <div className='empty-search'>Sin resultados para tu búsqueda</div>;
+        } else {
+            const rows = this.state.data.map((row, i) => {
+                return (
+                    <tr
+                        key={i}
+                        {...row.props}
+                    >
+                        <td>
+                            {row.name}
+                        </td>
+
+                        <td>
+                            {row.casillas}
+                        </td>
+
+                        <td>
+                            {row.descripcion}
+                        </td>
+
+                        <td>
+                            <span className={'label-fat label-domain-status-' + row.estado}>
+                                {row.estado}
+                            </span>
+                        </td>
+                    </tr>
+                );
+            });
+
+            content = (
+                <div>
+                    <div
+                        id='index-domains-table'
+                        className='table-responsive'
+                    >
+                        <table className='table table-condensed table-striped vertical-align'>
+                            <thead>
+                                <tr>
+                                    <th>Nombre</th>
+                                    <th>Casillas Usadas</th>
+                                    <th>Descripción</th>
+                                    <th>Estado</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {rows}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <Pagination linksArray={this.state.pagination}/>
+                </div>
+            );
+        }
+
+        return (
+            <div>
+                <Alert
+                    className='alert alert-success'
+                    withClose={true}
+                >
+                    <a href='./goTo'>Tu datos han sido guardados!.</a>
+                </Alert>
+                <div className='hpanel'>
+                    <div className='panel-heading hbuilt clearfix'>
+                        <div className='pull-right'>{btns}</div>
+                        <div className='panel-header-search'>
+                            <PanelForm
+                                formAttrs={{name: 'search_name', 'data-remote': true}}
+                                inputAttrs={{type: 'text', name: 'search[query]', id: 'search_query', className: 'form-control', placeholder: 'Buscar Dominio Por Nombre'}}
+                            />
+                        </div>
+                    </div>
+                    <div className='panel-body'>
+                        {content}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+PanelTable.propTypes = {
+    btnsHeader: React.PropTypes.array
+};
+
+PanelTable.defaultProps = {
+    btnsHeader: []
+};

src/components/panelTabs.jsx

+import React from 'react';
+import Button from './button.jsx';
+import PanelForm from './panelForm.jsx';
+import Pagination from './pagination.jsx';
+import Alert from './alert.jsx';
+import Link from './link.jsx';
+
+export default class Panel extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: false,
+            data: [
+                {email: '@zbox', name: '2', type: 'Caracas', actions: [
+                    {
+                        props: {
+                            href: '/mailboxes/8758658/edit',
+                            className: 'btn btn-primary btn-xs'
+                        },
+                        label: 'Editar'
+                    },
+
+                    {
+                        props: {
+                            href: '/mailboxes/8758658/delete',
+                            className: 'btn btn-danger btn-xs'
+                        },
+                        label: 'Eliminar'
+                    }
+                ], props: {className: 'domain-row'}},
+                {email: '@Nombre', name: '2NNS', type: 'Descripción', actions: [
+                    {
+                        props: {
+                            href: '/mailboxes/86767676/edit',
+                            className: 'btn btn-danger btn-xs'
+                        },
+                        label: 'Editar'
+                    }
+                ], props: {className: 'domain-row'}},
+                {email: '@microsoft', name: '34NS', type: 'Solteros', actions: [], props: {className: 'domain-row'}},
+                {email: '@descargasnsn', name: '2NNS', type: 'Descripción', actions: [], props: {className: 'domain-row'}},
+                {email: '@Nombre', name: '2NNS', type: 'Descripción', actions: [], props: {className: 'domain-row'}},
+                {email: '@machinesoft', name: '', type: 'Hola que tal', actions: [], props: {className: 'domain-row'}},
+                {email: '@Nombre', name: '2S', type: 'Descripción', actions: [], props: {className: 'domain-row'}},
+                {email: '@getonboard', name: '45NS', type: 'Casados', actions: [], props: {className: 'domain-row'}}
+            ],
+            pagination: [
+                {url: './domains/1', label: '1', props: {className: 'active'}},
+                {url: './domains/2', label: '2'},
+                {url: './domains/3', label: '3'},
+                {url: './domains/prev', label: 'prev'},
+                {url: './domains/next', label: 'next'}
+            ],
+
+            tabs: [
+                {url: '/mailboxes', label: 'Todas (100)', props: {id: 'tab-all'}},
+                {url: '/archiving', label: 'Archiving', props: {id: 'tab-archiving'}},
+                {url: '/tab-basic', label: 'Básico', props: {style: {display: 'none'}}},
+                {url: '/professional', label: 'Professional', props: {style: {display: 'none'}}},
+                {url: '/premium', label: 'Premium', props: {style: {display: 'none'}}},
+                {url: '/unknown', label: 'Sin Plan (130)', props: {id: 'tab-unknown'}},
+                {url: '/locked', label: 'bloqueada (1)', props: {id: 'tab-locked'}}
+            ]
+        };
+    }
+
+    render() {
+        const btns = this.props.btnsHeader.map((btn, i) => {
+            return (
+                <Button
+                    btnAttrs={btn.props}
+                    key={i}
+                >
+                    {btn.label}
+                </Button>
+            );
+        });
+
+        let content;
+
+        if (this.state.data.length <= 0) {
+            content = <div className='empty-search'>Sin resultados para tu búsqueda</div>;
+        } else {
+            const rows = this.state.data.map((row, i) => {
+                return (
+                    <tr
+                        key={i}
+                        {...row.props}
+                    >
+                        <td>
+                            {row.email}
+                        </td>
+
+                        <td>
+                            {row.name}
+                        </td>
+
+                        <td>
+                            {row.type}
+                        </td>
+
+                        <td>
+                            {row.actions.map((btn, j) => {
+                                return (
+                                    <Button
+                                        key={j}
+                                        btnAttrs={btn.props}
+                                    >
+                                        {btn.label}
+                                    </Button>
+                                );
+                            })}
+                        </td>
+                    </tr>
+                );
+            });
+
+            content = (
+                <div>
+                    <div
+                        id='index-domains-table'
+                        className='table-responsive'
+                    >
+                        <table className='table table-condensed table-striped vertical-align'>
+                            <thead>
+                                <tr>
+                                    <th>Email</th>
+                                    <th>Nombre</th>
+                                    <th>Tipo</th>
+                                    <th>Acciones</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                            {rows}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            );
+        }
+
+        const tab = this.state.tabs.map((li, i) => {
+            return (
+                <Link
+                    key={i}
+                    attrs={li.props}
+                    url={li.url}
+                    label={li.label}
+                />
+            );
+        });
+
+        let tabs = (
+            <ul className='nav nav-tabs'>
+                {tab}
+            </ul>
+        );
+
+        return (
+            <div
+                id='index-mailboxes'
+                className='col-md-12 panel-width-tabs mailboxes-index'
+                data-domain=''
+            >
+                <Alert
+                    className='alert alert-success'
+                    withClose={true}
+                >
+                    <button>Tu datos han sido guardados! ok .</button>
+                </Alert>
+
+                <div className='hpanel'>
+                    {tabs}
+                    <div className='tab-content'>
+                        <div
+                            id='tab-index-mailboxes'
+                            className='tab-pane active'
+                        >
+                            <div className='panel-body'>
+                                <div className='panel-heading hbuilt clearfix'>
+                                    <div className='pull-right'>{btns}</div>
+                                    <div className='panel-header-search'>
+                                        <PanelForm
+                                            formAttrs={{name: 'search_name', 'data-remote': true}}
+                                            inputAttrs={{type: 'text', name: 'search[query]', id: 'search_query', className: 'form-control', placeholder: 'Buscar Dominio Por Nombre'}}
+                                        />
+                                    </div>
+                                </div>
+
+                                {content}
+
+                                <Pagination linksArray={this.state.pagination}/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Panel.propTypes = {
+    btnsHeader: React.PropTypes.array
+};
+
+Panel.defaultProps = {
+    btnsHeader: []
+};

src/index.jsx

@@ -103,6 +103,8 @@ function renderRootComponent() {
 }
 
 global.window.setup_root = () => {
+    // Do the pre-render setup and call renderRootComponent when done
+    // preRenderSetup(renderRootComponent);];
     // Do the pre-render setup and call renderRootComponent when done
     preRenderSetup(renderRootComponent);
 };