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

package/HiSelectableList/HiSelectableListItem.js

@@ -0,0 +1,520 @@
+'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 _warning = require('warning');
+
+var _warning2 = _interopRequireDefault(_warning);
+
+var _mdiMaterialUi = require('mdi-material-ui');
+
+var _ListItem = require('material-ui/List/ListItem');
+
+var _ListItem2 = _interopRequireDefault(_ListItem);
+
+var _HiCheckbox = require('../HiCheckbox');
+
+var _HiCheckbox2 = _interopRequireDefault(_HiCheckbox);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _hiHelpers = require('../utils/hiHelpers');
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        listItem: {
+            padding: 9 + 'px 0px',
+            fontWeight: theme.typography.fontWeightRegular
+        },
+        listItemTitle: {
+            padding: 9 + 'px 0px',
+            fontWeight: theme.typography.fontWeightLight
+        },
+        listItemHover: {
+            '&:hover:not($disabled)': {
+                backgroundColor: theme.palette.hover,
+                fontWeight: theme.typography.fontWeightMedium
+            }
+        },
+        disabled: {
+            color: theme.palette.neutral.light,
+            fontWeight: theme.typography.fontWeightLight
+        },
+        centered: {
+            textAlign: 'center',
+            width: '100%'
+        },
+        selected: {
+            backgroundColor: theme.palette.selected
+        },
+        childListItem: {
+            paddingLeft: theme.spacing.unit * 2
+        },
+        listItemIconChecked: {
+            color: theme.palette.business.primary.normal
+        },
+        listItemContent: (0, _extends3.default)({
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        }, theme.typography.body1, {
+            fontWeight: 'inherit',
+            width: '100%'
+        }),
+        listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body4, {
+            fontWeight: theme.typography.fontWeightLight,
+            marginLeft: theme.spacing.unit
+        }),
+        listItemInfoText: (0, _extends3.default)({
+            color: theme.palette.neutral.normal
+        }, theme.typography.body4, {
+            fontWeight: theme.typography.fontWeightRegular,
+            textAlign: 'right',
+            margin: '0 8px',
+            width: '-webkit-fill-available'
+        }),
+        checkbox: {
+            width: 20,
+            height: 20,
+            fontSize: 20,
+            marginRight: 20,
+            marginLeft: 20
+        },
+        imgListItem: {
+            width: 24,
+            height: 'auto',
+            marginRight: 8,
+            verticalAlign: 'middle'
+        },
+        checkboxIcon: {
+            width: 20,
+            height: 20,
+            marginLeft: 2,
+            verticalAlign: 'middle',
+            color: theme.palette.text.icon
+        },
+        icon: {
+            width: 20,
+            height: 20,
+            marginRight: 8,
+            verticalAlign: 'middle',
+            color: theme.palette.text.icon
+        },
+        nbChildrenIndicator: (0, _extends3.default)({
+            position: 'absolute',
+            right: 10,
+            color: theme.palette.neutral.normal
+        }, theme.typography.body3),
+        labelHighlight: {
+            '&>strong': {
+                fontWeight: theme.typography.fontWeightMedium,
+                color: '#000000'
+            }
+        },
+        primaryHighlight: {
+            fontWeight: theme.typography.fontWeightMedium,
+            color: theme.palette.business.primary.normal,
+            textTransform: 'uppercase'
+        }
+    };
+};
+
+/**
+ * Construit un élément de liste sélectionnable (avec checkbox)
+ */
+
+var HiSelectableListItem = function (_React$Component) {
+    (0, _inherits3.default)(HiSelectableListItem, _React$Component);
+
+    function HiSelectableListItem(props) {
+        (0, _classCallCheck3.default)(this, HiSelectableListItem);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiSelectableListItem.__proto__ || (0, _getPrototypeOf2.default)(HiSelectableListItem)).call(this, props));
+
+        _this.buildListItem = function () {
+            var _this$props = _this.props,
+                classes = _this$props.classes,
+                type = _this$props.type,
+                item = _this$props.item,
+                nbChildren = _this$props.nbChildren,
+                translations = _this$props.translations,
+                checkbox = _this$props.checkbox;
+
+            var effectiveType = typeof item.type !== 'undefined' ? item.type : type;
+
+            var childrenIndicator = '';
+            if (nbChildren > 0) {
+                childrenIndicator = _react2.default.createElement(
+                    'span',
+                    { className: classes.nbChildrenIndicator },
+                    nbChildren < 2 ? translations.one_child.replace('%s', nbChildren) : translations.n_children.replace('%s', nbChildren)
+                );
+            }
+            switch (effectiveType) {
+                case 'icon':
+                    process.env.NODE_ENV !== "production" ? (0, _warning2.default)(typeof item.icon !== 'undefined', 'Hipay-Material-UI: item with type icon should have icon parameter') : void 0;
+
+                    var effectiveCheckbox = typeof item.checkbox !== 'undefined' ? item.checkbox : checkbox;
+                    return _react2.default.createElement(
+                        'div',
+                        { className: classes.listItemContent, 'data-id': item.id },
+                        !effectiveCheckbox && _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.icon }),
+                        item.label,
+                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
+                        childrenIndicator
+                    );
+                case 'image':
+                    var img = '';
+                    if (typeof item.img !== 'undefined') {
+                        img = _react2.default.createElement('img', { src: item.img, className: classes.imgListItem });
+                    }
+
+                    return _react2.default.createElement(
+                        'div',
+                        { className: classes.listItemContent, 'data-id': item.id },
+                        img,
+                        item.label,
+                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
+                        childrenIndicator
+                    );
+                case 'primary-highlight':
+                    // used in DateRangeSelector for Custom item
+                    var itemPrimaryHighlightClass = (0, _classnames2.default)(classes.listItemContent, classes.primaryHighlight);
+
+                    return _react2.default.createElement(
+                        'div',
+                        { className: itemPrimaryHighlightClass, 'data-id': item.id },
+                        item.label
+                    );
+                case 'text':
+                default:
+                    var itemTextClass = (0, _classnames2.default)(classes.listItemContent, (0, _defineProperty3.default)({}, classes.centered, item.centered));
+
+                    return _react2.default.createElement(
+                        'div',
+                        { className: itemTextClass, 'data-id': item.id },
+                        item.labelHighlight && _react2.default.createElement('span', {
+                            className: classes.labelHighlight,
+                            dangerouslySetInnerHTML: {
+                                __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
+                            }
+                        }),
+                        !item.labelHighlight && item.label,
+                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
+                        childrenIndicator
+                    );
+            }
+        };
+
+        _this.state = {
+            hover: false
+        };
+
+        _this.buildListItem = _this.buildListItem.bind(_this);
+        _this.toggleHover = _this.toggleHover.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiSelectableListItem, [{
+        key: 'toggleHover',
+        value: function toggleHover() {
+            this.setState({ hover: !this.state.hover });
+        }
+
+        /**
+         * Build list item from type
+         */
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _classNames2;
+
+            var _props = this.props,
+                classes = _props.classes,
+                selected = _props.selected,
+                item = _props.item,
+                onSelect = _props.onSelect,
+                checkbox = _props.checkbox,
+                disabled = _props.disabled,
+                indeterminate = _props.indeterminate,
+                parentItemSelectable = _props.parentItemSelectable,
+                icon = _props.icon,
+                parentIcon = _props.parentIcon,
+                hoverIcon = _props.hoverIcon,
+                checkedIcon = _props.checkedIcon,
+                level = _props.level,
+                hierarchic = _props.hierarchic,
+                leftPadding = _props.leftPadding;
+
+            /**
+             * Item params override inherited props
+             */
+
+            var effectiveCheckbox = typeof item.checkbox !== 'undefined' ? item.checkbox : checkbox;
+            var effectiveDisabled = typeof item.disabled !== 'undefined' ? item.disabled : disabled;
+
+            // build class
+            var listItemClass = (0, _classnames2.default)(classes.listItem, classes.listItemHover, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.disabled, effectiveDisabled), (0, _defineProperty3.default)(_classNames2, classes.selected, selected), _classNames2));
+            if (item.hasChildren && parentItemSelectable === false) {
+                listItemClass = (0, _classnames2.default)(classes.listItemTitle);
+            }
+
+            // build props
+            var listItemProps = {
+                key: item.id,
+                className: listItemClass,
+                onMouseEnter: this.toggleHover,
+                onMouseLeave: this.toggleHover
+            };
+
+            if (!effectiveDisabled) {
+                listItemProps = (0, _extends3.default)({}, listItemProps, {
+                    button: true,
+                    component: 'li',
+                    onClick: function onClick(event) {
+                        return onSelect(event, item);
+                    }
+                });
+            }
+
+            var selectable = true;
+            if (item.hasChildren && parentItemSelectable === false) {
+                selectable = false;
+                listItemProps.onClick = function () {};
+                listItemProps.button = false;
+            }
+
+            var iconAll = void 0;
+            if (item.id === '_all' && item.icon) {
+                iconAll = _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.checkboxIcon });
+            }
+
+            // calcul du padding left
+            var paddingLeft = 0;
+
+            if (leftPadding) {
+                paddingLeft = leftPadding;
+            } else {
+                // Si pas de hiérarchie, padding de 8px
+                if (!hierarchic) {
+                    if (!effectiveCheckbox) {
+                        paddingLeft = 8;
+                    }
+                } else if (selectable) {
+                    // Si item selectionnable
+                    // Si parent selectionnable
+                    if (parentItemSelectable) {
+                        // Si l'item contient une checkbox
+                        if (effectiveCheckbox) {
+                            paddingLeft = 16 * level;
+                        } else {
+                            paddingLeft = 16 * (level + 1);
+                        }
+                    } else if (level > 0) {
+                        if (effectiveCheckbox) {
+                            paddingLeft = 16 * (level - 1);
+                        } else {
+                            paddingLeft = 16 * level;
+                        }
+                    } else if (!effectiveCheckbox) {
+                        if (item.id === '_all') {
+                            paddingLeft = 16;
+                        } else {
+                            paddingLeft = 16 * level;
+                        }
+                    }
+                } else {
+                    paddingLeft = 16; // Padding de 16 par défaut
+                    if (level > 0) {
+                        paddingLeft = 16 * level;
+                    }
+                }
+            }
+
+            listItemProps.style = { paddingLeft: paddingLeft + 'px' };
+
+            var iconDisplay = icon;
+            if (this.state.hover) {
+                iconDisplay = hoverIcon;
+            } else if (item.hasChildren) {
+                iconDisplay = parentIcon;
+            } else if (item.id === '_all') {
+                iconDisplay = iconAll;
+            }
+
+            return _react2.default.createElement(
+                _ListItem2.default,
+                listItemProps,
+                effectiveCheckbox && selectable && _react2.default.createElement(_HiCheckbox2.default, {
+                    checked: selected,
+                    icon: iconDisplay,
+                    checkedIcon: checkedIcon,
+                    indeterminate: indeterminate,
+                    classes: { checked: classes.listItemIconChecked },
+                    className: classes.checkbox
+                }),
+                this.buildListItem(),
+                !!item.info && _react2.default.createElement(
+                    'span',
+                    { className: classes.listItemInfoText },
+                    item.info
+                )
+            );
+        }
+    }]);
+    return HiSelectableListItem;
+}(_react2.default.Component);
+
+HiSelectableListItem.defaultProps = {
+    type: 'text',
+    checkbox: false,
+    parentItem: false,
+    selected: false,
+    indeterminate: false,
+    disabled: false,
+    parentItemSelectable: false,
+    nbChildren: 0,
+    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 } }),
+    hierarchic: false,
+    translations: {
+        n_children: '%s items',
+        one_child: '%s item'
+    }
+};
+HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * État de l'élément
+     */
+    selected: _propTypes2.default.bool,
+    /**
+     * Type de l'élément
+     */
+    type: _propTypes2.default.string,
+    /**
+     * Élément dont la structure attendue dépend du type
+     * paramètres requis:
+     * - id: string/number
+     * - label: string
+     */
+    item: _propTypes2.default.object.isRequired,
+    /**
+     * Niveau de l'item
+     */
+    level: _propTypes2.default.number,
+    /**
+     * Affiche l'item en tant qu'item parent d'un groupe
+     */
+    parentItem: _propTypes2.default.bool,
+    /**
+     * Fonction de callback à la sélection de l'élément
+     */
+    onSelect: _propTypes2.default.func,
+    /**
+     * Applique le style et désactive le click
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Items sélectionné partiellement
+     */
+    indeterminate: _propTypes2.default.bool,
+    /**
+     * Les items parents sont sélectionnables
+     */
+    parentItemSelectable: _propTypes2.default.bool,
+    /**
+     * Nombre d'items enfants
+     */
+    nbChildren: _propTypes2.default.number,
+    /**
+     * Traductions (par défaut en anglais)
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     */
+    parentIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+     */
+    hoverIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: _propTypes2.default.node,
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: _propTypes2.default.bool,
+    /**
+     * Si "true", liste avec hierarchie
+     */
+    hierarchic: _propTypes2.default.bool,
+    /**
+     * Padding par défaut des éléments
+     */
+    leftPadding: _propTypes2.default.number
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);

package/HiSelectableList/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _HiSelectableList = require('./HiSelectableList');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiSelectableList).default;
+  }
+});
+
+var _HiSelectableListItem = require('./HiSelectableListItem');
+
+Object.defineProperty(exports, 'HiSelectableListItem', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiSelectableListItem).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }