@hipay/hipay-material-ui 1.0.0-beta.1

package/es/HiTable/ChildRow.js

@@ -0,0 +1,345 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import Table, { TableBody, TableRow, TableCell } from 'material-ui/Table';
+import Collapse from 'material-ui/transitions/Collapse';
+import PropTypes from 'prop-types';
+
+import HiPins from '../HiPins';
+import { withStyles, withTheme } from '../styles';
+import BodyRow from './BodyRow';
+import * as cst from "./constants";
+import { capitalizeFirstLetter } from "../utils/helpers";
+import { camelize } from "../utils/hiHelpers";
+import * as mdi from "mdi-material-ui";
+
+export const styles = theme => ({
+    subTable: {
+        position: 'relative',
+        width: '100%',
+        overflow: 'hidden',
+        backgroundColor: theme.palette.background3,
+        zIndex: 10
+    },
+    title: {
+        position: 'absolute',
+        top: -40,
+        cursor: 'pointer',
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        color: theme.palette.neutral.normal,
+        fontSize: 13,
+        height: 40,
+        width: '100%'
+    },
+    indicatorSpan: {
+        position: 'relative'
+    },
+    paddingDefault: {
+        padding: '4px 0px'
+    },
+    titleIcon: {
+        width: '18px',
+        height: '18px',
+        position: 'relative',
+        top: 5,
+        marginRight: 10
+    },
+    innerHeaderDiv: {
+        backgroundColor: '#ECEFF0',
+        color: '#737373',
+        cursor: 'pointer',
+        padding: 0
+    },
+    innerFooterDiv: {
+        backgroundColor: '#ECEFF0',
+        padding: 0
+    },
+    innerPatchDiv: {
+        height: '100%',
+        zIndex: 13,
+        backgroundColor: '#ECEFF0'
+    },
+    parentLabel: _extends({
+        position: 'relative'
+    }, theme.typography.body3, {
+        fontWeight: theme.typography.fontWeightRegular
+    }),
+    parentLabelIcon: {
+        color: theme.palette.neutral.normal,
+        width: 40,
+        height: 40,
+        padding: 11
+    },
+    parentLabelIconDense: {
+        color: theme.palette.neutral.normal,
+        width: 32,
+        height: 32,
+        padding: 7
+    },
+    parentIndicator: _extends({
+        position: 'relative'
+    }, theme.typography.body3, {
+        fontWeight: theme.typography.fontWeightRegular
+    }),
+    innerFixedRightDiv: {
+        right: 0,
+        textAlign: 'right'
+    }
+});
+
+/**
+ * ChildRow est une ligne d'un tableau,
+ * elle est affichée comme un sous-tableau à l'intérieur de la ligne avec une bordure autour
+ * ce sous-tableau contient une ou plusieurs lignes de donnée du MÊME TYPE ou équivalentes que le tableau parent (ex: transactions > opérations)
+ */
+class ChildRow extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.handleClose = () => {
+            this.props.onClose(this.props.parentRowId);
+        };
+
+        this.handleClose = this.handleClose.bind(this);
+    }
+
+    render() {
+        const _props = this.props,
+              {
+            classes, theme, onClose,
+            parentRowId, parentRowDatas,
+            parentIndicatorColumn, parentLabel, parentLabelIcon,
+            children, columns, orderedColumns,
+            selectable, selected,
+            dateLocale, dense, sticky, view
+        } = _props,
+              other = _objectWithoutProperties(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view']);
+
+        let indicator = '';
+        if (parentIndicatorColumn && columns.hasOwnProperty(parentIndicatorColumn)) {
+            switch (columns[parentIndicatorColumn].type) {
+                case cst.TYPE_DATE:
+                    let options = { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" };
+                    indicator = parentRowDatas[parentIndicatorColumn].value.toLocaleString(dateLocale, options);
+                    break;
+            }
+        }
+
+        // Dynamic build of icon component
+        let icon = null;
+        if (parentLabelIcon) {
+            let mdiIcon = capitalizeFirstLetter(camelize(parentLabelIcon));
+            const IconName = mdi[mdiIcon];
+            icon = React.createElement(IconName, { className: dense ? classes.parentLabelIconDense : classes.parentLabelIcon });
+        }
+
+        let childrenRows = () => React.createElement(
+            Table,
+            { className: classes.subTable, id: 'subTable' },
+            React.createElement(
+                TableBody,
+                null,
+                React.createElement(BodyRow, _extends({
+                    row: {
+                        rowId: parentRowId,
+                        datas: parentRowDatas
+                    },
+                    selectable: selectable,
+                    selected: selected,
+                    columns: columns,
+                    orderedColumns: orderedColumns,
+                    view: view,
+                    dense: dense,
+                    onSelect: this.props.onSelect,
+                    sticky: sticky,
+                    innerRow: true
+                }, other)),
+                children.map(child => {
+                    return React.createElement(BodyRow, _extends({
+                        key: parentRowId + '-' + child.rowId,
+                        row: child,
+                        selectable: false,
+                        columns: columns,
+                        orderedColumns: orderedColumns,
+                        view: view,
+                        dense: dense,
+                        sticky: sticky,
+                        innerRow: true
+                    }, other));
+                })
+            )
+        );
+
+        return React.createElement(
+            TableRow,
+            null,
+            React.createElement(
+                TableCell,
+                { colSpan: 1000, style: { padding: 0 } },
+                React.createElement(
+                    'div',
+                    {
+                        className: classes.innerHeaderDiv,
+                        style: {
+                            height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                            paddingLeft: cst.DEFAULT_PADDING[view]
+                        },
+                        onClick: onClose
+                    },
+                    React.createElement(
+                        'div',
+                        {
+                            className: `floating-parent-row-label ${classes.parentLabel}`,
+                            style: {
+                                height: (dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT) + 'px',
+                                lineHeight: (dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT) + 'px',
+                                display: 'inline-flex',
+                                alignItems: 'center'
+                            }
+                        },
+                        icon,
+                        parentLabel,
+                        React.createElement(
+                            HiPins,
+                            { color: theme.palette.neutral.normal },
+                            children.length
+                        )
+                    ),
+                    React.createElement(
+                        'div',
+                        {
+                            style: {
+                                position: 'absolute',
+                                right: 0,
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                height: (dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT) + 'px',
+                                lineHeight: (dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT) + 'px'
+                            }
+                        },
+                        React.createElement(
+                            'div',
+                            {
+                                className: `floating-parent-row-indicator ${classes.parentIndicator}`,
+                                style: {
+                                    marginRight: cst.DEFAULT_PADDING[view]
+                                }
+                            },
+                            indicator
+                        )
+                    )
+                ),
+                React.createElement(Collapse, { component: childrenRows, 'in': true, timeout: 'auto', unmountOnExit: true }),
+                React.createElement('div', {
+                    className: classes.innerFooterDiv,
+                    style: {
+                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                        paddingLeft: cst.DEFAULT_PADDING[view]
+                    }
+                })
+            )
+        );
+    }
+}
+
+ChildRow.defaultProps = {
+    isOpen: false,
+    parentIndicatorColumn: null,
+    parentLabel: '',
+    selectable: false,
+    selected: false,
+    dateLocale: 'en-EN',
+    numberLocale: 'en-EN',
+    dense: false,
+    sticky: true,
+    translations: {},
+    view: 'l'
+};
+ChildRow.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Utile pour surcharger le style appliqué aux composants
+     */
+    classes: PropTypes.object,
+    /**
+     * Détermine si la ligne sera affichée ou non
+     */
+    isOpen: PropTypes.bool.isRequired,
+    /**
+     * Fonction de callback pour collapser la ligne
+     */
+    onClose: PropTypes.func.isRequired,
+    /**
+     * Id de la ligne parente
+     */
+    parentRowId: PropTypes.number.isRequired,
+    /**
+     * Données de la ligne parente
+     */
+    parentRowDatas: PropTypes.object.isRequired,
+    /**
+     * Ligne des détails de la ligne parente
+     */
+    parentDetailRows: PropTypes.array,
+    /**
+     * Indicateur du sous-ensemble (en général la date)
+     */
+    parentIndicatorColumn: PropTypes.string,
+    /**
+     * Label du sous-ensemble
+     */
+    parentLabel: PropTypes.string,
+    /**
+     * Icone associée au label du sous-ensemble
+     */
+    parentLabelIcon: PropTypes.string,
+    /**
+     * Liste des données des enfants
+     */
+    children: PropTypes.array.isRequired,
+    /**
+     * Colonnes du tableau (label, largeur, données, ... )
+     */
+    columns: PropTypes.object.isRequired,
+    /**
+     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
+     */
+    orderedColumns: PropTypes.array.isRequired,
+    /**
+     * Définit si une checkbox est présente en début de ligne
+     */
+    selectable: PropTypes.bool,
+    /**
+     * Fonction de callback appelé au change de la checkbox présente si prop selectable = true
+     */
+    onSelect: PropTypes.func,
+    /**
+     * Définit si la checkbox est cochée
+     */
+    selected: PropTypes.bool,
+    /**
+     * Locale utilisé pour le format des dates
+     */
+    dateLocale: PropTypes.string,
+    /**
+     * Locale utilisé pour le format des nombres
+     */
+    numberLocale: PropTypes.string,
+    /**
+     * Densité d'affichage (joue sur la hauteur des lignes)
+     */
+    dense: PropTypes.bool,
+    /**
+     * Fixe la première colonne
+     */
+    sticky: PropTypes.bool,
+    /**
+     * Traduction des chaînes affichées
+     */
+    translations: PropTypes.object,
+    /**
+     * Taille du tableau (L/M/S), définit l'espace entre les cellules et leurs tailles par default
+     */
+    view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, { withTheme: true, name: 'HmuiChildRow' })(ChildRow);