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

package/HiSelect/SelectInput.js

@@ -0,0 +1,329 @@
+'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 _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _ArrowDropDown = require('../svg-icons/ArrowDropDown');
+
+var _ArrowDropDown2 = _interopRequireDefault(_ArrowDropDown);
+
+var _Icon = require('material-ui/Icon');
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+var _styles = require('../styles');
+
+var _ButtonBase = require('material-ui/ButtonBase');
+
+var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            width: '100%',
+            height: 40,
+            maxWidth: 500,
+            justifyContent: 'flex-start',
+            padding: 8
+        },
+        underline: {
+            '&:before': {
+                backgroundColor: theme.palette.input.bottomLine,
+                left: 0,
+                bottom: 0,
+                // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+                content: '""',
+                height: 1,
+                position: 'absolute',
+                right: 0,
+                transition: theme.transitions.create('background-color', {
+                    duration: theme.transitions.duration.shorter,
+                    easing: theme.transitions.easing.ease
+                }),
+                pointerEvents: 'none' // Transparent to the hover style.
+            },
+            '&:hover:not($disabled):before': {
+                backgroundColor: theme.palette.input.bottomLine,
+                height: 2
+            },
+            '&$disabled:before': {
+                background: 'transparent',
+                backgroundImage: 'linear-gradient(to right, ' + theme.palette.input.bottomLine + ' 33%, transparent 0%)',
+                backgroundPosition: 'left top',
+                backgroundRepeat: 'repeat-x',
+                backgroundSize: '5px 1px'
+            }
+        },
+        inkbar: {
+            '&:not($disabled)': {
+                '&:after': {
+                    backgroundColor: theme.palette.business.primary.normal,
+                    left: 0,
+                    bottom: 0,
+                    // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+                    content: '""',
+                    height: 1,
+                    position: 'absolute',
+                    right: 0,
+                    transform: 'scaleX(0)',
+                    transition: theme.transitions.create('transform', {
+                        duration: theme.transitions.duration.shorter,
+                        easing: theme.transitions.easing.easeOut
+                    }),
+                    pointerEvents: 'none' // Transparent to the hover style.
+                },
+                '&:hover:after': {
+                    transform: 'scaleX(1)'
+                },
+                '&$focused:after': {
+                    transform: 'scaleX(1)'
+                },
+                '&$error': {
+                    border: '1px solid ' + theme.palette.negative.normal,
+                    borderRadius: 2
+                }
+            }
+        },
+        disabled: {
+            color: '' + theme.palette.action.disabled,
+            backgroundColor: '' + theme.palette.input.disabled,
+            '&:before': {
+                display: 'none'
+            }
+        },
+        focused: {
+            backgroundColor: theme.palette.background3
+        },
+        error: {},
+        label: (0, _extends3.default)({
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            paddingRight: 16
+        }, theme.typography.body1, {
+            display: 'inline-flex',
+            width: '100%'
+        }),
+        icon: {
+            position: 'absolute',
+            display: 'flex',
+            alignItems: 'center',
+            right: 0,
+            height: 40,
+            transition: theme.transitions.create(['opacity', 'transform'], {
+                duration: theme.transitions.duration.shorter
+            })
+        },
+        iconOpen: {
+            transform: 'rotate(90deg)'
+        },
+        iconClose: {
+            transform: 'rotate(0deg)'
+        }
+    };
+};
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = _react2.default.createElement(_ArrowDropDown2.default, null);
+
+var SelectInput = function (_React$PureComponent) {
+    (0, _inherits3.default)(SelectInput, _React$PureComponent);
+
+    function SelectInput(props) {
+        (0, _classCallCheck3.default)(this, SelectInput);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (SelectInput.__proto__ || (0, _getPrototypeOf2.default)(SelectInput)).call(this, props));
+
+        _this.handleKeyDown = function (event) {
+            if (event.key === 'ArrowDown') {
+                _this.props.onClick();
+            } else if (event.key === 'ArrowUp') {
+                _this.props.onClick();
+            }
+        };
+
+        _this.handleKeyDown = _this.handleKeyDown.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(SelectInput, [{
+        key: 'render',
+        value: function render() {
+            var _classNames, _classNames2;
+
+            var _props = this.props,
+                classes = _props.classes,
+                noButton = _props.noButton,
+                disabled = _props.disabled,
+                onClick = _props.onClick,
+                value = _props.value,
+                open = _props.open,
+                focused = _props.focused,
+                error = _props.error,
+                id = _props.id;
+
+            // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+
+            var rootClass = (0, _classnames2.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), (0, _defineProperty3.default)(_classNames, classes.focused, focused), (0, _defineProperty3.default)(_classNames, classes.error, error && !focused), _classNames));
+
+            var iconClass = (0, _classnames2.default)(classes.icon, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.iconOpen, open), (0, _defineProperty3.default)(_classNames2, classes.iconClose, !open), _classNames2));
+
+            var render = noButton ? _react2.default.createElement(
+                'div',
+                {
+                    id: id,
+                    className: rootClass,
+                    onClick: onClick,
+                    disabled: disabled,
+                    onMouseEnter: this.props.onMouseEnter,
+                    onMouseLeave: this.props.onMouseLeave,
+                    onKeyDown: this.handleKeyDown,
+                    onFocus: this.props.onFocus,
+                    onBlur: this.props.onBlur,
+                    role: 'button',
+                    tabIndex: '0'
+                },
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.label },
+                    value
+                ),
+                _react2.default.createElement(_ArrowDropDown2.default, { className: iconClass })
+            ) : _react2.default.createElement(
+                _ButtonBase2.default,
+                {
+                    id: id,
+                    className: rootClass,
+                    onClick: onClick,
+                    disabled: disabled,
+                    onMouseEnter: this.props.onMouseEnter,
+                    onMouseLeave: this.props.onMouseLeave,
+                    onKeyDown: this.handleKeyDown,
+                    onFocus: this.props.onFocus,
+                    onBlur: this.props.onBlur
+                },
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.label },
+                    value
+                ),
+                _react2.default.createElement(
+                    _Icon2.default,
+                    { classes: { root: iconClass } },
+                    _ref
+                )
+            );
+
+            return render;
+        }
+    }]);
+    return SelectInput;
+}(_react2.default.PureComponent);
+
+SelectInput.defaultProps = {
+    autoWidth: true,
+    disabled: false,
+    open: false,
+    focused: false,
+    noButton: false,
+    error: false
+};
+SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * If `true`, the select will be disabled.
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Fonction de callback au blur du bouton
+     */
+    onBlur: _propTypes2.default.func,
+    /**
+     * Fonction de callback au click sur l'input/bouton
+     */
+    onClick: _propTypes2.default.func,
+    /**
+     * Fonction de callback au focus l'input/bouton
+     */
+    onFocus: _propTypes2.default.func,
+    /**
+     * Fonction de callback à la pression de touche
+     */
+    onKeyDown: _propTypes2.default.func,
+    /**
+     * Valeur à afficher (déjà formattée)
+     */
+    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node]),
+    /**
+     * Applique le style open et effectue une rotation de l'icône
+     */
+    open: _propTypes2.default.bool,
+    /**
+     * Affiche sous forme de div à la place d'un bouton.
+     * Si des éléments cliquables sont à l'intérieur.
+     */
+    noButton: _propTypes2.default.bool,
+    /**
+     * Applique le style focused
+     */
+    focused: _propTypes2.default.bool,
+    /**
+     * Applique le style error
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * id du select
+     */
+    id: _propTypes2.default.string
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiSelectInput' })(SelectInput);

package/HiSelect/index.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HiSuggestSelectField = exports.HiSuggestSelect = exports.SelectInput = exports.HiSelectField = exports.HiSelect = exports.default = undefined;
+
+var _HiSelect2 = require('./HiSelect');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiSelect2).default;
+  }
+});
+
+var _HiSelect3 = _interopRequireDefault(_HiSelect2);
+
+var _HiSelectField2 = require('./HiSelectField');
+
+var _HiSelectField3 = _interopRequireDefault(_HiSelectField2);
+
+var _SelectInput2 = require('./SelectInput');
+
+var _SelectInput3 = _interopRequireDefault(_SelectInput2);
+
+var _HiSuggestSelect2 = require('./HiSuggestSelect');
+
+var _HiSuggestSelect3 = _interopRequireDefault(_HiSuggestSelect2);
+
+var _HiSuggestSelectField2 = require('./HiSuggestSelectField');
+
+var _HiSuggestSelectField3 = _interopRequireDefault(_HiSuggestSelectField2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.HiSelect = _HiSelect3.default;
+exports.HiSelectField = _HiSelectField3.default;
+exports.SelectInput = _SelectInput3.default;
+exports.HiSuggestSelect = _HiSuggestSelect3.default;
+exports.HiSuggestSelectField = _HiSuggestSelectField3.default;

package/HiSelectableList/HiSelectableList.js

@@ -0,0 +1,258 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+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 _mdiMaterialUi = require('mdi-material-ui');
+
+var _reactCustomScrollbars = require('react-custom-scrollbars');
+
+var _List = require('material-ui/List');
+
+var _List2 = _interopRequireDefault(_List);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _HiSelectableListItem = require('./HiSelectableListItem');
+
+var _HiSelectableListItem2 = _interopRequireDefault(_HiSelectableListItem);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            padding: 0
+        }
+    };
+};
+
+/**
+ * Construit une liste d'item sélectionnable (avec checkbox)
+ */
+
+var HiSelectableList = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiSelectableList, _React$PureComponent);
+
+    function HiSelectableList() {
+        (0, _classCallCheck3.default)(this, HiSelectableList);
+        return (0, _possibleConstructorReturn3.default)(this, (HiSelectableList.__proto__ || (0, _getPrototypeOf2.default)(HiSelectableList)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiSelectableList, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                itemList = _props.itemList,
+                selectedIdList = _props.selectedIdList,
+                onSelect = _props.onSelect,
+                maxHeight = _props.maxHeight,
+                hierarchySelected = _props.hierarchySelected,
+                parentItemSelectable = _props.parentItemSelectable,
+                hierarchy = _props.hierarchy,
+                translations = _props.translations,
+                icon = _props.icon,
+                parentIcon = _props.parentIcon,
+                hoverIcon = _props.hoverIcon,
+                checkedIcon = _props.checkedIcon,
+                allSelected = _props.allSelected,
+                checkbox = _props.checkbox,
+                hierarchic = _props.hierarchic,
+                others = (0, _objectWithoutProperties3.default)(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
+
+
+            var parents = [];
+
+            return _react2.default.createElement(
+                _reactCustomScrollbars.Scrollbars,
+                { autoHeight: true, autoHeightMax: maxHeight },
+                _react2.default.createElement(
+                    _List2.default,
+                    { className: classes.root, onKeyDown: this.props.onKeyDown },
+                    itemList.map(function (item) {
+                        /**
+                         * Calcul du level de l'item
+                         */
+                        if (hierarchic) {
+                            // On stocke l'id des parents dans un tableau
+                            if (item.parentId && !parents.includes(item.parentId)) {
+                                parents.push(item.parentId);
+                            } else if (item.parentId && parents.includes(item.parentId)) {
+                                // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
+                                // Et si le parentId n'est pas le dernier inseré
+                                if (item.parentId !== parents[parents.length - 1]) {
+                                    // On est donc redescendu d'un niveau
+                                    // donc on supprime le dernier parent
+                                    parents.pop();
+                                }
+                            } else if (!item.parentId && parents.length > 0) {
+                                // Si l'item n'a pas de parent et que le tableau des parent
+                                // n'est pas vide => on le réinitialise
+                                parents = [];
+                            }
+                        }
+
+                        /**
+                         * L'élément est-il selectionné ?
+                         */
+                        var selected = false;
+                        if (item.id === '_all') {
+                            selected = allSelected;
+                        } else if (!item.hasChildren) {
+                            selected = selectedIdList.includes(item.id);
+                        } else if (hierarchic && parentItemSelectable) {
+                            selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
+                        }
+
+                        return _react2.default.createElement(_HiSelectableListItem2.default, (0, _extends3.default)({
+                            key: item.id,
+                            item: item,
+                            selected: selected,
+                            indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
+                            onSelect: onSelect,
+                            hierarchySelected: hierarchySelected,
+                            parentItemSelectable: parentItemSelectable,
+                            nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
+                            hierarchic: hierarchic,
+                            translations: translations,
+                            icon: icon,
+                            parentIcon: parentIcon,
+                            hoverIcon: hoverIcon,
+                            checkedIcon: checkedIcon,
+                            checkbox: checkbox,
+                            level: parents.length
+                        }, others));
+                    })
+                )
+            );
+        }
+    }]);
+    return HiSelectableList;
+}(_react2.default.PureComponent);
+
+HiSelectableList.defaultProps = {
+    checkbox: true,
+    allSelected: false,
+    maxHeight: 360,
+    hierarchySelected: {},
+    parentItemSelectable: false,
+    icon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    parentIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    hoverIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    checkedIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxMarked, { style: { width: 20, height: 20 } }),
+    translations: {
+        n_children: '%s items',
+        one_child: '%s item'
+    }
+};
+HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Définit si tous les items de la liste sont sélectionnés
+     */
+    allSelected: _propTypes2.default.bool,
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: _propTypes2.default.bool,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: _propTypes2.default.node,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Tableau associatif : parentId => [children objects]
+     */
+    hierarchy: _propTypes2.default.object,
+    /**
+     * partially selected items
+     */
+    hierarchySelected: _propTypes2.default.object,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+     */
+    hoverIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: _propTypes2.default.node,
+    /**
+     * Liste d'éléments
+     */
+    itemList: _propTypes2.default.array.isRequired,
+    /**
+     * Hauteur maximal (px)
+     */
+    maxHeight: _propTypes2.default.number,
+    /**
+     * Fonction de callback à la sélection d'un item, renvoie l'id de l'item
+     *
+     * @param {object} event The event source of the callback
+     * @param {object} item selected/unselected
+     */
+    onSelect: _propTypes2.default.func.isRequired,
+    /**
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     */
+    parentIcon: _propTypes2.default.node,
+    /**
+     * Les items parents sont sélectionnables
+     */
+    parentItemSelectable: _propTypes2.default.bool,
+    /**
+     * Liste des id des éléments sélectionnés
+     */
+    selectedIdList: _propTypes2.default.array.isRequired,
+    /**
+     * Traductions (par défaut en anglais)
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * Type de l'élément
+     */
+    type: _propTypes2.default.string
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSelectableList' })(HiSelectableList);