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

package/HiTable/HiStickyRow.js

@@ -0,0 +1,300 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.ONCHANGE_ERROR_MESSAGE = exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Table = require('material-ui/Table');
+
+var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
+
+var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
+
+var _Button = require('material-ui/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _HiChip = require('../HiChip');
+
+var _HiChip2 = _interopRequireDefault(_HiChip);
+
+var _styles = require('../styles');
+
+var _constants = require('./constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            width: '100%',
+            zIndex: 15,
+            backgroundColor: theme.palette.background1
+        },
+        rightPaddingDiv: {
+            position: 'absolute',
+            width: '24px',
+            top: 0,
+            right: 24,
+            backgroundColor: theme.palette.background3,
+            zIndex: 11,
+            display: 'none'
+        },
+        label: {
+            position: 'relative',
+            left: 15,
+            paddingRight: 20,
+            top: -3,
+            color: theme.palette.neutral.dark,
+            marginRight: 8
+        },
+        controlLabelRoot: {
+            marginLeft: 0,
+            marginRight: 8
+        },
+        controlLabelLabel: {
+            fontSize: 13
+        },
+        badgeRoot: {
+            position: 'relative',
+            top: -4
+        },
+        button: {
+            top: -3,
+            color: theme.palette.neutral.normal,
+            maxHeight: cst.CELL_HEIGHT - 8,
+            minHeight: cst.CELL_HEIGHT - 8,
+            position: 'relative',
+            lineHeight: '10px',
+            direction: 'rtl'
+        },
+        denseButton: {
+            height: cst.CELL_HEIGHT_DENSE - 2,
+            minHeight: cst.CELL_HEIGHT_DENSE - 2
+        },
+        patchDiv: {
+            position: 'relative',
+            border: 'none',
+            width: 0,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            zIndex: 12,
+            backgroundColor: 'inherit',
+            boxShadow: 'inset 0 6px 7px -7px rgba(0, 0, 0, 0.16)'
+        }
+    };
+};
+
+var ONCHANGE_ERROR_MESSAGE = exports.ONCHANGE_ERROR_MESSAGE = 'Vous devez saisir la propriété "onChange" pour les lignes "selectable"';
+
+var HiStickyRow = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStickyRow, _React$PureComponent);
+
+    function HiStickyRow() {
+        (0, _classCallCheck3.default)(this, HiStickyRow);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStickyRow.__proto__ || (0, _getPrototypeOf2.default)(HiStickyRow)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStickyRow, [{
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                dense = _props.dense,
+                colSpan = _props.colSpan,
+                label = _props.label,
+                length = _props.length,
+                index = _props.index,
+                translations = _props.translations,
+                view = _props.view;
+
+            var buttonClasses = (0, _classnames2.default)(classes.button, (0, _defineProperty3.default)({}, classes.denseButton, dense));
+
+            return _react2.default.createElement(
+                _Table.TableRow,
+                {
+                    className: classes.root + ' stickyGroupBy',
+                    style: {
+                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                        border: 'none',
+                        boxShadow: 'inset 0 6px 7px -7px rgba(0, 0, 0, 0.16)'
+                    }
+                },
+                _react2.default.createElement(_Table.TableCell, {
+                    style: {
+                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                        paddingLeft: cst.DEFAULT_PADDING[view]
+                    },
+                    className: classes.patchDiv
+                }),
+                _react2.default.createElement(
+                    _Table.TableCell,
+                    {
+                        colSpan: colSpan,
+                        style: {
+                            height: '100%',
+                            border: 'none',
+                            padding: 0
+                        },
+                        className: 'noShadow'
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        {
+                            id: 'stickyRowContent',
+                            className: 'stickyRowContent',
+                            style: {
+                                position: 'relative',
+                                top: dense ? 3 : 2
+                            }
+                        },
+                        _react2.default.createElement(
+                            'span',
+                            { id: 'sticky-label', className: classes.label },
+                            label
+                        ),
+                        _react2.default.createElement(
+                            'span',
+                            { id: 'sticky-badge', style: { position: 'relative' } },
+                            _react2.default.createElement(_HiChip2.default, { label: length, classes: { root: classes.badgeRoot } })
+                        ),
+                        _react2.default.createElement(
+                            _Button2.default,
+                            {
+                                classes: { root: buttonClasses },
+                                className: 'stickyRowNextButton',
+                                onClick: function onClick() {
+                                    return _this2.props.onClickNext(index);
+                                }
+                            },
+                            translations.button.next
+                        )
+                    )
+                ),
+                _react2.default.createElement(_Table.TableCell, {
+                    style: {
+                        height: '100%',
+                        paddingLeft: cst.DEFAULT_PADDING[view]
+                    },
+                    className: classes.patchDiv
+                })
+            );
+        }
+    }]);
+    return HiStickyRow;
+}(_react2.default.PureComponent);
+
+HiStickyRow.defaultProps = {
+    dense: false,
+    selectable: false,
+    checked: false,
+    translations: {
+        button: {
+            next: 'next'
+        }
+    }
+};
+HiStickyRow.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Si la ligne est selectable => checkbox cochée ou non
+     */
+    checked: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Nombre de colonnes affichées dans le tableau
+     */
+    colSpan: _propTypes2.default.number.isRequired,
+    /**
+     * Densité d'affichage (joue sur la hauteur des lignes)
+     */
+    dense: _propTypes2.default.bool,
+    /**
+     * Index du sticky row par rapport aux autres
+     */
+    index: _propTypes2.default.number.isRequired,
+    /**
+     * Label à afficher
+     */
+    label: _propTypes2.default.string.isRequired,
+    /**
+     * Nombre d'item pour ce groupBy
+     */
+    length: _propTypes2.default.number,
+    /**
+     * Fonction de callback à appeler si la ligne est selectable
+     */
+    onChange: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.func, function (props) {
+        return props.hasOwnProperty('selectable') && props.selectable === true;
+    }, ONCHANGE_ERROR_MESSAGE),
+    /**
+     * Fonction de callback pour aller au prochain sticky row item
+     *
+     * @param {int} index of sticky row
+     */
+    onClickNext: _propTypes2.default.func.isRequired,
+    /**
+     * Les lignes sont sélectionnables (affichage d'une checkbox)
+     */
+    selectable: _propTypes2.default.bool,
+    /**
+     * Objet contenant les éléments textuels du composant
+     */
+    translations: _propTypes2.default.object.isRequired,
+    /**
+     * Valeur de la ligne
+     */
+    value: _propTypes2.default.string,
+    /**
+     * Taille du tableau (L/M/S),
+     * définit l'espace entre les cellules et leurs tailles par default
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiStickyRow' })(HiStickyRow);