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

package/HiTable/BodyCells/CellLayout.js

@@ -0,0 +1,281 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+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 _TableCell = require('material-ui/Table/TableCell');
+
+var _TableCell2 = _interopRequireDefault(_TableCell);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _HiCheckbox = require('../../HiCheckbox');
+
+var _HiCheckbox2 = _interopRequireDefault(_HiCheckbox);
+
+var _styles = require('../../styles');
+
+var _constants = require('../constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+var _HiPins = require('../../HiPins');
+
+var _HiPins2 = _interopRequireDefault(_HiPins);
+
+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: {
+            padding: 0,
+            backgroundColor: 'inherit',
+            border: 'none'
+        },
+        flexContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            position: 'relative'
+        },
+        checkbox: {
+            float: 'left',
+            position: 'relative'
+        },
+        lookedUp: {
+            background: 'linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)',
+            borderRadius: '45%'
+        }
+    };
+};
+
+/**
+ * Construit une cellule du body d'AdvancedTable
+ * Définit la largeur et le padding effectif
+ * Intègre la checkbox de sélection si besoin
+ * Gère le comportement sticky
+ */
+
+var CellLayout = function (_React$Component) {
+    (0, _inherits3.default)(CellLayout, _React$Component);
+
+    function CellLayout() {
+        (0, _classCallCheck3.default)(this, CellLayout);
+        return (0, _possibleConstructorReturn3.default)(this, (CellLayout.__proto__ || (0, _getPrototypeOf2.default)(CellLayout)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellLayout, [{
+        key: 'shouldComponentUpdate',
+
+
+        /**
+         * * Should not update if selected has changed but cell isn't selectable anyway
+         * @param nextProps
+         * @param nextState
+         * @param nextContext
+         * @returns {boolean}
+         */
+        value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
+            if (nextProps.selected === !this.props.selected && !this.props.selectable && !nextProps.selectable) {
+                return false;
+            }
+            return true;
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                type = _props.type,
+                children = _props.children,
+                _props$align = _props.align,
+                align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
+                view = _props.view,
+                dense = _props.dense,
+                _props$width = _props.width,
+                width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
+                fixedWidth = _props.fixedWidth,
+                sticky = _props.sticky,
+                selectable = _props.selectable,
+                selected = _props.selected,
+                onSelect = _props.onSelect,
+                childrenCount = _props.childrenCount,
+                theme = _props.theme,
+                padding = _props.padding,
+                lookedUp = _props.lookedUp;
+
+
+            var offset = selectable ? dense ? 32 : 40 : 0;
+
+            // Inclus le padding et/ou la checkbox dans la largeur de la cellule
+            var _width = width + offset + (selectable ? padding : 2 * padding);
+
+            var lookedUpClassName = (0, _classnames2.default)(classes.flexContent, (0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
+
+            return _react2.default.createElement(
+                _TableCell2.default,
+                {
+                    className: classes.root,
+                    style: {
+                        maxWidth: _width,
+                        minWidth: _width,
+                        width: _width,
+                        // la cellule sticky doit être au dessus des autres cellules du body
+                        zIndex: sticky ? 12 : 11,
+                        textAlign: align,
+                        position: sticky ? 'relative' : 'inherit',
+                        border: 'none',
+                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+                    }
+                },
+                !!selectable && _react2.default.createElement(_HiCheckbox2.default, {
+                    classes: { root: classes.checkbox },
+                    style: { margin: dense ? 6 : 10 },
+                    size: 18,
+                    onChange: onSelect,
+                    checked: selected
+                }),
+                _react2.default.createElement(
+                    'div',
+                    {
+                        className: lookedUpClassName,
+                        style: {
+                            width: 'calc(100% - ' + offset + 'px)',
+                            paddingLeft: selectable ? 0 : padding,
+                            paddingRight: padding,
+                            height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+                        }
+                    },
+                    children,
+                    childrenCount && _react2.default.createElement(
+                        'div',
+                        {
+                            style: {
+                                position: 'absolute',
+                                top: dense ? 2 : 6,
+                                right: 0
+                            }
+                        },
+                        _react2.default.createElement(
+                            _HiPins2.default,
+                            { color: theme.palette.business.primary.normal },
+                            childrenCount
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return CellLayout;
+}(_react2.default.Component);
+
+CellLayout.defaultProps = {
+    view: 'l',
+    selectable: false,
+    selected: false,
+    dense: false,
+    fixedWidth: false,
+    sticky: false,
+    padding: 8
+};
+CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu de la cellule
+     */
+    children: _propTypes2.default.element,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Densité, défini la hauteur de la ligne
+     */
+    dense: _propTypes2.default.bool,
+    /**
+     * Recherche lookup sur cette colonne
+     */
+    lookedUp: _propTypes2.default.bool,
+    /**
+     * Type de cellule
+     */
+    type: _propTypes2.default.string.isRequired,
+    /**
+     * View (L/M/S)
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's']),
+    /**
+     * Largeur de la cellule (hors padding), est déduit de view par défaut
+     */
+    width: _propTypes2.default.number,
+    /**
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     */
+    fixedWidth: _propTypes2.default.bool,
+    /**
+     * Title alignement, est déduit de type par défaut
+     */
+    align: _propTypes2.default.string,
+    /**
+     * Padding de la cellule (px)
+     */
+    padding: _propTypes2.default.number,
+    /**
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
+     */
+    sticky: _propTypes2.default.bool,
+    /**
+     * Ajoute une checkbox
+     */
+    selectable: _propTypes2.default.bool,
+    /**
+     * État de la checkbox
+     */
+    selected: _propTypes2.default.oneOf([true, false, 'mixed']),
+    /**
+     * Fonction de callback au click du select
+     */
+    onSelect: _propTypes2.default.func,
+    /**
+     * Nombre d'enfants
+     */
+    childrenCount: _propTypes2.default.number
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellLayout' })(CellLayout);

package/HiTable/BodyCells/CellNumeric.js

@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+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 _withStyles = require('../../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _hiHelpers = require('../../utils/hiHelpers');
+
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+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 {
+        spanNumeric: {
+            direction: 'rtl'
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher un volume ou un montant avec devise
+ */
+
+var CellNumeric = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellNumeric, _React$PureComponent);
+
+    function CellNumeric() {
+        (0, _classCallCheck3.default)(this, CellNumeric);
+        return (0, _possibleConstructorReturn3.default)(this, (CellNumeric.__proto__ || (0, _getPrototypeOf2.default)(CellNumeric)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellNumeric, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                value = _props.value,
+                locale = _props.locale,
+                currency = _props.currency,
+                view = _props.view;
+
+
+            var displayedValue = '';
+            var titleValue = '';
+
+            if (currency) {
+                displayedValue = (0, _hiHelpers.formatCurrencyAmount)(value, view, locale, currency);
+                if (view === cst.VIEWS.LARGE) {
+                    titleValue = displayedValue;
+                } else {
+                    titleValue = (0, _hiHelpers.formatCurrencyAmount)(value, cst.VIEWS.LARGE, locale, currency);
+                }
+            } else {
+                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale);
+            }
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.spanNumeric },
+                    displayedValue
+                )
+            );
+        }
+    }]);
+    return CellNumeric;
+}(_react2.default.PureComponent);
+
+CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Volume/Amount
+     */
+    value: _propTypes2.default.number.isRequired,
+    /**
+     * Locale BCP 47
+     */
+    locale: _propTypes2.default.string,
+    /**
+     * Code de la devise (ISO 4217)
+     */
+    currency: _propTypes2.default.string,
+    /**
+     * View (L/M/S)
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellNumeric' })(CellNumeric);

package/HiTable/BodyCells/CellRate.js

@@ -0,0 +1,197 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+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 _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _mdiMaterialUi = require('mdi-material-ui');
+
+var _hiHelpers = require('../../utils/hiHelpers');
+
+var _withStyles = require('../../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+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 {
+        flexContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            overflow: 'hidden',
+            position: 'relative'
+        },
+        trendChipIcon: {
+            width: 14,
+            height: 14,
+            position: 'relative',
+            top: 2
+        },
+        positive: {
+            color: theme.palette.positive.normal
+        },
+        negative: {
+            color: theme.palette.negative.normal
+        },
+        middle: {
+            color: theme.palette.middle.normal
+        },
+        spanIndicator: {
+            fontSize: 11,
+            float: 'right',
+            color: '#737373',
+            position: 'relative',
+            right: 3
+        },
+        rateDiv: {
+            position: 'relative'
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher un pourcentage
+ * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
+ */
+
+var CellRate = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellRate, _React$PureComponent);
+
+    function CellRate() {
+        (0, _classCallCheck3.default)(this, CellRate);
+        return (0, _possibleConstructorReturn3.default)(this, (CellRate.__proto__ || (0, _getPrototypeOf2.default)(CellRate)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellRate, [{
+        key: 'render',
+        value: function render() {
+            var _classNames, _classNames2;
+
+            var _props = this.props,
+                classes = _props.classes,
+                value = _props.value,
+                trendchip = _props.trendchip,
+                isPositive = _props.isPositive,
+                indicator = _props.indicator,
+                locale = _props.locale,
+                view = _props.view;
+
+
+            var trendIcon = void 0,
+                displayedRate = (0, _hiHelpers.formatRate)(value, view, locale);
+
+            switch (trendchip) {
+                case cst.NO_EVOLUTION:
+                    trendIcon = _react2.default.createElement(_mdiMaterialUi.Equal, { className: classes.trendChipIcon + ' ' + classes.middle });
+                    break;
+                case cst.EVOLUTION_UP:
+                    trendIcon = _react2.default.createElement(_mdiMaterialUi.ArrowTopRight, {
+                        className: (0, _classnames2.default)(classes.trendChipIcon, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.positive, isPositive), (0, _defineProperty3.default)(_classNames, classes.negative, !isPositive), _classNames))
+                    });
+                    break;
+                case cst.EVOLUTION_DOWN:
+                    trendIcon = _react2.default.createElement(_mdiMaterialUi.ArrowBottomRight, {
+                        className: (0, _classnames2.default)(classes.trendChipIcon, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.positive, !isPositive), (0, _defineProperty3.default)(_classNames2, classes.negative, isPositive), _classNames2))
+                    });
+                    break;
+            }
+
+            return _react2.default.createElement(
+                'div',
+                { className: classes.flexContent },
+                _react2.default.createElement(
+                    'div',
+                    { className: typeof indicator === 'undefined' && classes.rateDiv || '' },
+                    displayedRate,
+                    trendIcon
+                ),
+                typeof indicator !== 'undefined' && _react2.default.createElement(
+                    'span',
+                    { className: classes.spanIndicator },
+                    indicator
+                )
+            );
+        }
+    }]);
+    return CellRate;
+}(_react2.default.PureComponent);
+
+CellRate.defaultProps = {
+    isPositive: true
+};
+CellRate.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Rate
+     */
+    value: _propTypes2.default.number.isRequired,
+    /**
+     * Évolution par rapport à la période précédente, détermine l'icône associée
+     */
+    trendchip: _propTypes2.default.oneOf(['up', 'down', 'equal']).isRequired,
+    /**
+     * True si une augmentation est considérée comme positive, détermine la couleur de l'icône
+     */
+    isPositive: _propTypes2.default.bool,
+    /**
+     * Spécifie le type de donnée évalué (ex: 'volume', 'amount', ...)
+     */
+    indicator: _propTypes2.default.string,
+    /**
+     * Locale BCP 47
+     */
+    locale: _propTypes2.default.string,
+    /**
+     * View (L/M/S)
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellRate' })(CellRate);