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

package/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -0,0 +1,144 @@
+'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 _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _styles = require('../../styles');
+
+var _mdiMaterialUi = require('mdi-material-ui');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        icon: {
+            width: 18,
+            height: 18
+        }
+    };
+};
+
+/**
+ * Cette cellule permet d'afficher une icône représentant le statut du 3DS.
+ */
+// @inheritedComponent CellLayout
+
+var CellThirdPartySecurity = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellThirdPartySecurity, _React$PureComponent);
+
+    function CellThirdPartySecurity() {
+        (0, _classCallCheck3.default)(this, CellThirdPartySecurity);
+        return (0, _possibleConstructorReturn3.default)(this, (CellThirdPartySecurity.__proto__ || (0, _getPrototypeOf2.default)(CellThirdPartySecurity)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(CellThirdPartySecurity, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                theme = _props.theme,
+                code = _props.code,
+                value = _props.value;
+
+
+            var ECI_5 = 0; // authenticated
+            var ECI_6 = 1; // cardholder not enrolled
+            var ECI_7 = 2; //
+            var AUTH_0 = 3; //
+            var AUTH_1 = 4; // ask for 3DS
+            var AUTH_2 = 5; // force 3DS
+
+            var icon = null;
+            switch (code) {
+                case ECI_5:
+                    icon = _react2.default.createElement(_mdiMaterialUi.Lock, { className: classes.icon, style: { color: theme.palette.positive.normal } });
+                    break;
+                case ECI_6:
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.middle.normal } });
+                    break;
+                case AUTH_1:
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpenOutline, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                    break;
+                case AUTH_2:
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                    break;
+                case ECI_7:
+                case AUTH_0:
+                    icon = null;
+                    break;
+            }
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    icon
+                )
+            );
+        }
+    }]);
+    return CellThirdPartySecurity;
+}(_react2.default.PureComponent);
+
+CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Useful to extend the theme applied to components.
+     * Used theme props positive.normal, middle.normal, neutral.light
+     */
+    theme: _propTypes2.default.object,
+    /**
+     * Statut du 3DS
+     * ECI_5 = 0; // authenticated
+     * ECI_6 = 1; // cardholder not enrolled
+     * ECI_7 = 2; //
+     * AUTH_0 = 3; //
+     * AUTH_1 = 4; // ask for 3DS
+     * AUTH_2 = 5; // force 3DS
+     */
+    code: _propTypes2.default.number,
+    /**
+     * Label
+     */
+    value: _propTypes2.default.string
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);

package/HiTable/BodyCells/index.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _CellThirdPartySecurity = require('./CellThirdPartySecurity');
+
+Object.defineProperty(exports, 'CellThirdPartySecurity', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellThirdPartySecurity).default;
+  }
+});
+
+var _CellAccount = require('./CellAccount');
+
+Object.defineProperty(exports, 'CellAccount', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellAccount).default;
+  }
+});
+
+var _CellAccountNumber = require('./CellAccountNumber');
+
+Object.defineProperty(exports, 'CellAccountNumber', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellAccountNumber).default;
+  }
+});
+
+var _CellAddress = require('./CellAddress');
+
+Object.defineProperty(exports, 'CellAddress', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellAddress).default;
+  }
+});
+
+var _CellDate = require('./CellDate');
+
+Object.defineProperty(exports, 'CellDate', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellDate).default;
+  }
+});
+
+var _CellIcon = require('./CellIcon');
+
+Object.defineProperty(exports, 'CellIcon', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellIcon).default;
+  }
+});
+
+var _CellImage = require('./CellImage');
+
+Object.defineProperty(exports, 'CellImage', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellImage).default;
+  }
+});
+
+var _CellLayout = require('./CellLayout');
+
+Object.defineProperty(exports, 'CellLayout', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellLayout).default;
+  }
+});
+
+var _CellNumeric = require('./CellNumeric');
+
+Object.defineProperty(exports, 'CellNumeric', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellNumeric).default;
+  }
+});
+
+var _CellRate = require('./CellRate');
+
+Object.defineProperty(exports, 'CellRate', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellRate).default;
+  }
+});
+
+var _CellStatus = require('./CellStatus');
+
+Object.defineProperty(exports, 'CellStatus', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellStatus).default;
+  }
+});
+
+var _CellSentinel = require('./CellSentinel');
+
+Object.defineProperty(exports, 'CellSentinel', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellSentinel).default;
+  }
+});
+
+var _CellText = require('./CellText');
+
+Object.defineProperty(exports, 'CellText', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellText).default;
+  }
+});
+
+var _CellCountry = require('./CellCountry');
+
+Object.defineProperty(exports, 'CellCountry', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CellCountry).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/HiTable/BodyRow.js

@@ -0,0 +1,388 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+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 _Table = require('material-ui/Table');
+
+var _colorManipulator = require('material-ui/styles/colorManipulator');
+
+var _BodyCellBuilder = require('./BodyCellBuilder');
+
+var _BodyCellBuilder2 = _interopRequireDefault(_BodyCellBuilder);
+
+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 }; }
+
+// @inheritedComponent BodyCellBuilder
+var styles = exports.styles = function styles(theme) {
+    return {
+        rootSelected: {
+            backgroundColor: theme.palette.background3
+        },
+        hover: {
+            '&:hover': {
+                backgroundColor: theme.palette.hover,
+                fontWeight: theme.typography.fontWeightMedium
+            }
+        },
+        rootSticky: {
+            position: 'relative',
+            border: 'none',
+            backgroundColor: 'inherit',
+            zIndex: 12,
+            paddingTop: 0,
+            paddingBottom: 0
+        },
+        patchDiv: {
+            position: 'relative',
+            border: 'none',
+            width: 0,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            height: '100%',
+            zIndex: 12,
+            backgroundColor: 'inherit'
+        },
+        patchDivInnerRow: {
+            backgroundColor: '#ECEFF0'
+        }
+    };
+};
+
+var BodyRow = function (_React$PureComponent) {
+    (0, _inherits3.default)(BodyRow, _React$PureComponent);
+
+    function BodyRow(props) {
+        (0, _classCallCheck3.default)(this, BodyRow);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (BodyRow.__proto__ || (0, _getPrototypeOf2.default)(BodyRow)).call(this));
+
+        _this.state = {
+            live: props.live,
+            style: {
+                backgroundColor: props.live ? (0, _colorManipulator.fade)(props.theme.palette.business.primary.normal, 0.08) : props.theme.palette.background3,
+                transition: props.live ? 'background-color 2s' : 'none'
+            }
+        };
+
+        _this.handleClick = _this.handleClick.bind(_this);
+        _this.handleOpenRowDetails = _this.handleOpenRowDetails.bind(_this);
+        _this.handleSelect = _this.handleSelect.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(BodyRow, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            // Live data animation
+            if (this.state.live) {
+                this.setState({
+                    live: false,
+                    style: {
+                        backgroundColor: this.props.theme.palette.background3,
+                        transition: 'background-color 2s'
+                    }
+                });
+            }
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState, prevContext) {
+            var _this2 = this;
+
+            // After animation, reset transition to none to handle background change on row hover
+            if (prevState.live === true && this.state.live === false) {
+                setTimeout(function () {
+                    _this2.setState({
+                        style: {
+                            backgroundColor: _this2.props.theme.palette.background3,
+                            transition: 'none'
+                        }
+                    });
+                }, 2500);
+            }
+        }
+    }, {
+        key: 'handleClick',
+        value: function handleClick(event) {
+            // Prevent click propagation if it's a click on input (checkboxes...)
+            if (this.props.onClick && event.target.tagName !== 'INPUT') {
+                this.props.onClick(this.props.row);
+            }
+        }
+    }, {
+        key: 'handleOpenRowDetails',
+        value: function handleOpenRowDetails() {
+            this.props.onOpenRowDetails(this.props.row.rowId);
+        }
+    }, {
+        key: 'handleSelect',
+        value: function handleSelect() {
+            this.props.onSelect(this.props.row);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this3 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                theme = _props.theme,
+                row = _props.row,
+                columns = _props.columns,
+                orderedColumns = _props.orderedColumns,
+                selectable = _props.selectable,
+                selected = _props.selected,
+                onClick = _props.onClick,
+                view = _props.view,
+                dense = _props.dense,
+                dateLocale = _props.dateLocale,
+                numberLocale = _props.numberLocale,
+                sticky = _props.sticky,
+                innerRow = _props.innerRow,
+                isDetail = _props.isDetail,
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
+            var style = this.state.style;
+
+
+            var firstCol = true;
+            var unfixedCol = true;
+
+            var rowStyle = (0, _extends3.default)({}, style, {
+                cursor: typeof onClick === 'undefined' ? 'auto' : 'pointer',
+                height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+            }, isDetail && { backgroundColor: theme.palette.background1 });
+
+            var patchDivClass = (0, _classnames2.default)(classes.patchDiv, (0, _defineProperty3.default)({}, classes.patchDivInnerRow, innerRow));
+
+            // If there is no datas don't display the row
+            if (!row.hasOwnProperty('datas')) return false;
+
+            return _react2.default.createElement(
+                _Table.TableRow,
+                {
+                    classes: { selected: classes.rootSelected, hover: classes.hover },
+                    onClick: this.handleClick,
+                    hover: true,
+                    style: rowStyle,
+                    selected: selected
+                },
+                _react2.default.createElement(_Table.TableCell, {
+                    style: {
+                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                        paddingLeft: cst.DEFAULT_PADDING[view]
+                    },
+                    key: row.rowId + '-left-cell',
+                    className: patchDivClass
+                }),
+                orderedColumns.map(function (colRef) {
+                    var colRefId = colRef.colId,
+                        displayed = colRef.displayed,
+                        colView = colRef.view,
+                        colRefProps = (0, _objectWithoutProperties3.default)(colRef, ['colId', 'displayed', 'view']);
+
+                    if (displayed !== false) {
+                        // the first column is sticky (except checkbox)
+                        var first = firstCol;
+                        firstCol = false;
+                        var _columns$colRef$colId = columns[colRef.colId],
+                            colId = _columns$colRef$colId.colId,
+                            align = _columns$colRef$colId.align,
+                            datas = _columns$colRef$colId.datas,
+                            ellipsis = _columns$colRef$colId.ellipsis,
+                            fixedWidth = _columns$colRef$colId.fixedWidth,
+                            type = _columns$colRef$colId.type,
+                            width = _columns$colRef$colId.width,
+                            columnProps = (0, _objectWithoutProperties3.default)(_columns$colRef$colId, ['colId', 'align', 'datas', 'ellipsis', 'fixedWidth', 'type', 'width']);
+
+                        var data = row.datas[colRef.colId];
+
+                        var effectiveView = colView || view;
+                        // add clickable badge in cell to open children
+                        var isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
+
+                        // the first non fixed column is the only one not fixed
+                        var unfixed = unfixedCol && fixedWidth !== true;
+                        unfixedCol = unfixedCol && fixedWidth !== true ? false : unfixedCol;
+
+                        var lookedUp = false;
+                        if (_this3.props.lookupColumns && _this3.props.lookupColumns.includes(colId)) {
+                            lookedUp = true;
+                        }
+
+                        return _react2.default.createElement(_BodyCellBuilder2.default, (0, _extends3.default)({}, other, {
+                            key: row.rowId + '-' + colId + '-cell',
+                            ukey: row.rowId + '-' + colId + '-cell',
+                            checkboxValue: row.rowId,
+                            type: type,
+                            datas: data,
+                            ellipsis: ellipsis,
+                            align: align,
+                            view: effectiveView,
+                            padding: cst.DEFAULT_PADDING[view],
+                            width: width,
+                            fixedWidth: !unfixed,
+                            sticky: sticky && first,
+                            selectable: selectable && first,
+                            dateLocale: dateLocale,
+                            numberLocale: numberLocale,
+                            dense: dense,
+                            selected: selected,
+                            onSelect: _this3.handleSelect,
+                            onOpenDetails: _this3.handleOpenRowDetails,
+                            childrenCount: isParentAnchor ? row.children.length : null,
+                            colId: colId,
+                            lookedUp: lookedUp
+                        }, columnProps, colRefProps));
+                    }
+                    return null;
+                }),
+                _react2.default.createElement(_Table.TableCell, {
+                    style: {
+                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                        paddingLeft: cst.DEFAULT_PADDING[view]
+                    },
+                    key: row.rowId + '-right-cell',
+                    className: patchDivClass
+                })
+            );
+        }
+    }]);
+    return BodyRow;
+}(_react2.default.PureComponent);
+
+BodyRow.defaultProps = {
+    selectable: false,
+    selected: false,
+    openedAsParent: false,
+    view: 'l',
+    dense: false,
+    sticky: false,
+    live: false,
+    innerRow: false,
+    lookupColumns: []
+};
+BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Colonnes du tableau (label, largeur, données, ... )
+     */
+    columns: _propTypes2.default.object.isRequired,
+    /**
+     * Densité d'affichage (joue sur la hauteur des lignes)
+     */
+    dense: _propTypes2.default.bool,
+    /**
+     * Applique le style d'une ligne intégrée a un sous-tableau
+     */
+    innerRow: _propTypes2.default.bool,
+    /**
+     * Applique le style d'une ligne de détail
+     */
+    isDetail: _propTypes2.default.bool,
+    /**
+     * Si c'est une nouvelle ligne (live) on lui applique une transition sur le background
+     */
+    live: _propTypes2.default.bool,
+    /**
+     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
+     */
+    lookupColumns: _propTypes2.default.array,
+    /**
+     * Fonction de callback appelée au click sur la ligne
+     */
+    onClick: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée pour ouvrir les lignes de détails
+     * Passe l'id de la ligne (rowId)
+     */
+    onOpenRowDetails: _propTypes2.default.func,
+    /**
+     * Uniquement si selectable, fonction de callback appelée au onChange sur la checkbox
+     */
+    onSelect: _propTypes2.default.func,
+    /**
+     * Uniquement si row a des children, affiche la ligne "ouverte" (avec sous-tableau)
+     */
+    openedAsParent: _propTypes2.default.bool,
+    /**
+     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
+     */
+    orderedColumns: _propTypes2.default.array.isRequired,
+    /**
+     * Objet des valeurs a afficher
+     */
+    row: _propTypes2.default.object.isRequired,
+    /**
+     * Définit si la ligne est sélectionnable
+     */
+    selectable: _propTypes2.default.bool,
+    /**
+     * Uniquement si selectable, définit si la ligne est sélectionnée
+     */
+    selected: _propTypes2.default.bool,
+    /**
+     * Définit si la 1e colonne reste visible à gauche
+     */
+    sticky: _propTypes2.default.bool,
+    /**
+     * 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, { withTheme: true, name: 'HmuiBodyRow' })(BodyRow);