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

package/es/HiSelectableList/HiSelectableList.js

@@ -0,0 +1,195 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CheckboxBlankOutline, CheckboxMarked } from 'mdi-material-ui';
+import { Scrollbars } from 'react-custom-scrollbars';
+import List from 'material-ui/List';
+import withStyles from '../styles/withStyles';
+import HiSelectableListItem from './HiSelectableListItem';
+
+export const styles = theme => ({
+    root: {
+        padding: 0
+    }
+});
+
+/**
+ * Construit une liste d'item sélectionnable (avec checkbox)
+ */
+class HiSelectableList extends React.PureComponent {
+
+    render() {
+        const _props = this.props,
+              {
+            classes,
+            itemList,
+            selectedIdList,
+            onSelect,
+            maxHeight,
+            hierarchySelected,
+            parentItemSelectable,
+            hierarchy,
+            translations,
+            icon,
+            parentIcon,
+            hoverIcon,
+            checkedIcon,
+            allSelected,
+            checkbox,
+            hierarchic
+        } = _props,
+              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
+
+        let parents = [];
+
+        return React.createElement(
+            Scrollbars,
+            { autoHeight: true, autoHeightMax: maxHeight },
+            React.createElement(
+                List,
+                { className: classes.root, onKeyDown: this.props.onKeyDown },
+                itemList.map(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é ?
+                     */
+                    let 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 React.createElement(HiSelectableListItem, _extends({
+                        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));
+                })
+            )
+        );
+    }
+}
+
+HiSelectableList.defaultProps = {
+    checkbox: true,
+    allSelected: false,
+    maxHeight: 360,
+    hierarchySelected: {},
+    parentItemSelectable: false,
+    icon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    parentIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    hoverIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    checkedIcon: React.createElement(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: PropTypes.bool,
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: PropTypes.bool,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: PropTypes.node,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Tableau associatif : parentId => [children objects]
+     */
+    hierarchy: PropTypes.object,
+    /**
+     * partially selected items
+     */
+    hierarchySelected: PropTypes.object,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+     */
+    hoverIcon: PropTypes.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: PropTypes.node,
+    /**
+     * Liste d'éléments
+     */
+    itemList: PropTypes.array.isRequired,
+    /**
+     * Hauteur maximal (px)
+     */
+    maxHeight: PropTypes.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: PropTypes.func.isRequired,
+    /**
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     */
+    parentIcon: PropTypes.node,
+    /**
+     * Les items parents sont sélectionnables
+     */
+    parentItemSelectable: PropTypes.bool,
+    /**
+     * Liste des id des éléments sélectionnés
+     */
+    selectedIdList: PropTypes.array.isRequired,
+    /**
+     * Traductions (par défaut en anglais)
+     */
+    translations: PropTypes.object,
+    /**
+     * Type de l'élément
+     */
+    type: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'HmuiHiSelectableList' })(HiSelectableList);

package/es/HiSelectableList/HiSelectableListItem.js

@@ -0,0 +1,441 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import warning from 'warning';
+import { CheckboxBlankOutline, CheckboxMarked } from 'mdi-material-ui';
+import ListItem from 'material-ui/List/ListItem';
+import HiCheckbox from '../HiCheckbox';
+import withStyles from '../styles/withStyles';
+import { escapeHTML } from '../utils/hiHelpers';
+import HiIconBuilder from '../utils/HiIconBuilder';
+
+export const styles = theme => ({
+    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: _extends({
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    }, theme.typography.body1, {
+        fontWeight: 'inherit',
+        width: '100%'
+    }),
+    listItemSecondaryText: _extends({}, theme.typography.body4, {
+        fontWeight: theme.typography.fontWeightLight,
+        marginLeft: theme.spacing.unit
+    }),
+    listItemInfoText: _extends({
+        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: _extends({
+        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)
+ */
+class HiSelectableListItem extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.buildListItem = () => {
+            const { classes, type, item, nbChildren, translations, checkbox } = this.props;
+            const effectiveType = typeof item.type !== 'undefined' ? item.type : type;
+
+            let childrenIndicator = '';
+            if (nbChildren > 0) {
+                childrenIndicator = React.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" ? warning(typeof item.icon !== 'undefined', 'Hipay-Material-UI: item with type icon should have icon parameter') : void 0;
+
+                    const effectiveCheckbox = typeof item.checkbox !== 'undefined' ? item.checkbox : checkbox;
+                    return React.createElement(
+                        'div',
+                        { className: classes.listItemContent, 'data-id': item.id },
+                        !effectiveCheckbox && React.createElement(HiIconBuilder, { icon: item.icon, className: classes.icon }),
+                        item.label,
+                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        childrenIndicator
+                    );
+                case 'image':
+                    let img = '';
+                    if (typeof item.img !== 'undefined') {
+                        img = React.createElement('img', { src: item.img, className: classes.imgListItem });
+                    }
+
+                    return React.createElement(
+                        'div',
+                        { className: classes.listItemContent, 'data-id': item.id },
+                        img,
+                        item.label,
+                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        childrenIndicator
+                    );
+                case 'primary-highlight':
+                    // used in DateRangeSelector for Custom item
+                    const itemPrimaryHighlightClass = classNames(classes.listItemContent, classes.primaryHighlight);
+
+                    return React.createElement(
+                        'div',
+                        { className: itemPrimaryHighlightClass, 'data-id': item.id },
+                        item.label
+                    );
+                case 'text':
+                default:
+                    const itemTextClass = classNames(classes.listItemContent, {
+                        [classes.centered]: item.centered
+                    });
+
+                    return React.createElement(
+                        'div',
+                        { className: itemTextClass, 'data-id': item.id },
+                        item.labelHighlight && React.createElement('span', {
+                            className: classes.labelHighlight,
+                            dangerouslySetInnerHTML: {
+                                __html: escapeHTML(item.labelHighlight)
+                            }
+                        }),
+                        !item.labelHighlight && item.label,
+                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        childrenIndicator
+                    );
+            }
+        };
+
+        this.state = {
+            hover: false
+        };
+
+        this.buildListItem = this.buildListItem.bind(this);
+        this.toggleHover = this.toggleHover.bind(this);
+    }
+
+    toggleHover() {
+        this.setState({ hover: !this.state.hover });
+    }
+
+    /**
+     * Build list item from type
+     */
+
+
+    render() {
+        const {
+            classes,
+            selected,
+            item,
+            onSelect,
+            checkbox,
+            disabled,
+            indeterminate,
+            parentItemSelectable,
+            icon,
+            parentIcon,
+            hoverIcon,
+            checkedIcon,
+            level,
+            hierarchic,
+            leftPadding
+        } = this.props;
+
+        /**
+         * Item params override inherited props
+         */
+        const effectiveCheckbox = typeof item.checkbox !== 'undefined' ? item.checkbox : checkbox;
+        const effectiveDisabled = typeof item.disabled !== 'undefined' ? item.disabled : disabled;
+
+        // build class
+        let listItemClass = classNames(classes.listItem, classes.listItemHover, {
+            [classes.disabled]: effectiveDisabled,
+            [classes.selected]: selected
+        });
+        if (item.hasChildren && parentItemSelectable === false) {
+            listItemClass = classNames(classes.listItemTitle);
+        }
+
+        // build props
+        let listItemProps = {
+            key: item.id,
+            className: listItemClass,
+            onMouseEnter: this.toggleHover,
+            onMouseLeave: this.toggleHover
+        };
+
+        if (!effectiveDisabled) {
+            listItemProps = _extends({}, listItemProps, {
+                button: true,
+                component: 'li',
+                onClick: event => onSelect(event, item)
+            });
+        }
+
+        let selectable = true;
+        if (item.hasChildren && parentItemSelectable === false) {
+            selectable = false;
+            listItemProps.onClick = () => {};
+            listItemProps.button = false;
+        }
+
+        let iconAll;
+        if (item.id === '_all' && item.icon) {
+            iconAll = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
+        }
+
+        // calcul du padding left
+        let 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` };
+
+        let iconDisplay = icon;
+        if (this.state.hover) {
+            iconDisplay = hoverIcon;
+        } else if (item.hasChildren) {
+            iconDisplay = parentIcon;
+        } else if (item.id === '_all') {
+            iconDisplay = iconAll;
+        }
+
+        return React.createElement(
+            ListItem,
+            listItemProps,
+            effectiveCheckbox && selectable && React.createElement(HiCheckbox, {
+                checked: selected,
+                icon: iconDisplay,
+                checkedIcon: checkedIcon,
+                indeterminate: indeterminate,
+                classes: { checked: classes.listItemIconChecked },
+                className: classes.checkbox
+            }),
+            this.buildListItem(),
+            !!item.info && React.createElement(
+                'span',
+                { className: classes.listItemInfoText },
+                item.info
+            )
+        );
+    }
+}
+
+HiSelectableListItem.defaultProps = {
+    type: 'text',
+    checkbox: false,
+    parentItem: false,
+    selected: false,
+    indeterminate: false,
+    disabled: false,
+    parentItemSelectable: false,
+    nbChildren: 0,
+    icon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    parentIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    hoverIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    checkedIcon: React.createElement(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: PropTypes.object,
+    /**
+     * État de l'élément
+     */
+    selected: PropTypes.bool,
+    /**
+     * Type de l'élément
+     */
+    type: PropTypes.string,
+    /**
+     * Élément dont la structure attendue dépend du type
+     * paramètres requis:
+     * - id: string/number
+     * - label: string
+     */
+    item: PropTypes.object.isRequired,
+    /**
+     * Niveau de l'item
+     */
+    level: PropTypes.number,
+    /**
+     * Affiche l'item en tant qu'item parent d'un groupe
+     */
+    parentItem: PropTypes.bool,
+    /**
+     * Fonction de callback à la sélection de l'élément
+     */
+    onSelect: PropTypes.func,
+    /**
+     * Applique le style et désactive le click
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Items sélectionné partiellement
+     */
+    indeterminate: PropTypes.bool,
+    /**
+     * Les items parents sont sélectionnables
+     */
+    parentItemSelectable: PropTypes.bool,
+    /**
+     * Nombre d'items enfants
+     */
+    nbChildren: PropTypes.number,
+    /**
+     * Traductions (par défaut en anglais)
+     */
+    translations: PropTypes.object,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: PropTypes.node,
+    /**
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     */
+    parentIcon: PropTypes.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+     */
+    hoverIcon: PropTypes.node,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: PropTypes.node,
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: PropTypes.bool,
+    /**
+     * Si "true", liste avec hierarchie
+     */
+    hierarchic: PropTypes.bool,
+    /**
+     * Padding par défaut des éléments
+     */
+    leftPadding: PropTypes.number
+} : {};
+export default withStyles(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);

package/es/HiSelectableList/index.js

@@ -0,0 +1,2 @@
+export { default } from './HiSelectableList';
+export { default as HiSelectableListItem } from './HiSelectableListItem';