@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/es/HiSelectNew/HiSelectInput.js

@@ -0,0 +1,307 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import Icon from '@material-ui/core/Icon';
+import withStyles from '../styles/withStyles';
+import keycode from 'keycode';
+export const styles = theme => ({
+  root: {
+    width: '100%',
+    height: 40,
+    maxWidth: 500,
+    display: 'flex',
+    justifyContent: 'center',
+    padding: 8,
+    cursor: 'pointer'
+  },
+  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)': {
+      '&:not($error):after': {
+        backgroundColor: theme.palette.primary.main,
+        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.main}`,
+        borderRadius: 2
+      }
+    }
+  },
+  disabled: {
+    color: `${theme.palette.action.disabled}`,
+    '&:before': {
+      display: 'none'
+    }
+  },
+  focused: {
+    backgroundColor: theme.palette.background3
+  },
+  error: {},
+  label: _objectSpread({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }, theme.typography.b1, {
+    display: 'inline-flex',
+    width: '100%'
+  }),
+  placeholder: {
+    color: theme.palette.grey[400]
+  },
+  icon: {
+    transition: theme.transitions.create(['opacity', 'transform'], {
+      duration: theme.transitions.duration.shorter
+    })
+  },
+  iconOpen: {
+    transform: 'rotate(90deg)',
+    color: theme.palette.primary.main
+  },
+  iconClose: {
+    transform: 'rotate(0deg)'
+  }
+});
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement(ArrowDropDownIcon, null);
+
+class HiSelectInput extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleKeyDown = event => {
+      const key = keycode(event);
+
+      if (this.props.onKeyDown) {
+        this.props.onKeyDown(event);
+      } else if (key === 'down' || key === 'up') {
+        this.props.onClick();
+      } else if (key === 'enter' && this.props.onSubmit) {
+        event.preventDefault();
+        this.props.onSubmit(event);
+      }
+    };
+
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  render() {
+    const {
+      classes,
+      noButton,
+      disabled,
+      onClick,
+      value,
+      open,
+      focused,
+      error,
+      id,
+      placeholder,
+      refElement
+    } = this.props; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
+
+    const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
+      [classes.disabled]: disabled,
+      [classes.focused]: focused,
+      [classes.error]: error && !focused
+    });
+    const iconClass = classNames(classes.icon, {
+      [classes.iconOpen]: open,
+      [classes.iconClose]: !open
+    });
+    return noButton ? React.createElement("div", {
+      id: id,
+      className: rootClass,
+      onClick: onClick,
+      onMouseEnter: this.props.onMouseEnter,
+      onMouseLeave: this.props.onMouseLeave,
+      onKeyDown: this.handleKeyDown,
+      onFocus: this.props.onFocus,
+      onBlur: this.props.onBlur,
+      role: "button",
+      tabIndex: "0",
+      ref: el => {
+        if (refElement) refElement(el);
+      }
+    }, React.createElement("span", {
+      className: classNames(classes.label, {
+        [classes.placeholder]: value === undefined
+      })
+    }, value || placeholder), React.createElement(ArrowDropDownIcon, {
+      className: iconClass
+    })) : React.createElement(ButtonBase, {
+      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,
+      buttonRef: el => {
+        if (refElement) refElement(el);
+      }
+    }, React.createElement("span", {
+      className: classNames(classes.label, {
+        [classes.placeholder]: value === undefined
+      })
+    }, value || placeholder), React.createElement(Icon, {
+      classes: {
+        root: iconClass
+      }
+    }, _ref));
+  }
+
+}
+
+HiSelectInput.defaultProps = {
+  disabled: false,
+  open: false,
+  focused: false,
+  noButton: false,
+  error: false
+};
+HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * If `true`, the select will be disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Applique le style error
+   */
+  error: PropTypes.bool,
+
+  /**
+   * Applique le style focused
+   */
+  focused: PropTypes.bool,
+
+  /**
+   * id du select
+   */
+  id: PropTypes.string,
+
+  /**
+   * Affiche sous forme de div à la place d'un bouton.
+   * Si des éléments cliquables sont à l'intérieur.
+   */
+  noButton: PropTypes.bool,
+
+  /**
+   * Fonction de callback au blur du bouton
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Fonction de callback au click sur l'input/bouton
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Fonction de callback au focus l'input/bouton
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * Fonction de callback à la pression de touche
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Fonction de callback au survol de l'input
+   */
+  onMouseEnter: PropTypes.func,
+
+  /**
+   * Fonction de callback à la sortie du survol de l'input
+   */
+  onMouseLeave: PropTypes.func,
+
+  /**
+   * Fonction de callback à la pression de la touche "Entrée"
+   */
+  onSubmit: PropTypes.func,
+
+  /**
+   * Applique le style open et effectue une rotation de l'icône
+   */
+  open: PropTypes.bool,
+
+  /**
+   * Placeholder
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Use that property to pass a ref callback to the native component.
+   */
+  refElement: PropTypes.func,
+
+  /**
+   * Valeur à afficher (déjà formattée)
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelectInput'
+})(HiSelectInput);

package/es/HiSelectNew/index.js

@@ -0,0 +1,4 @@
+export { default } from './HiSelect';
+export { default as HiNestedSelect } from './HiNestedSelect';
+export { default as HiSelectField } from './HiSelectField';
+export { default as HiSelectInput } from './HiSelectInput';

package/es/HiSelectableList/HiSelectableList.js

@@ -1,201 +1,161 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+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 List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
-
-export const styles = theme => ({
-    root: {
-        padding: 0
-    }
+export const styles = () => ({
+  root: {}
 });
-
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)
  */
+
 class HiSelectableList extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    this.handleSelect = item => event => {
+      this.props.onSelect(event, item);
+    };
+
+    this.buildRecursiveListItem = (item, level = 0) => {
+      const _this$props = this.props,
+            {
+        checkedIcon,
+        disabled,
+        disabledItemIdList,
+        hideCheckbox,
+        hoverIcon,
+        icon,
+        selectedItemIdList,
+        sort
+      } = _this$props,
+            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort"]);
+
+      if (sort && item.children) {
+        item.children.sort(this.compareItem);
+      }
 
-    render() {
-        const _props = this.props,
-              {
-            classes,
-            itemList,
-            selectedIdList,
-            onSelect,
-            maxHeight,
-            hierarchySelected,
-            parentItemSelectable,
-            hierarchy,
-            translations,
-            icon,
-            parentIcon,
-            hoverIcon,
-            checkedIcon,
-            allSelected,
-            checkbox,
-            hierarchic,
-            disabledIds
-        } = _props,
-              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
-
-        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,
-                        disabled: disabledIds ? disabledIds.includes(item.id) : false
-                    }, others));
-                })
-            )
-        );
+      return React.createElement(React.Fragment, {
+        key: item.id
+      }, React.createElement(HiSelectableListItem, _extends({}, others, {
+        checkedIcon: checkedIcon,
+        disabled: disabled || disabledItemIdList.includes(item.id),
+        hideCheckbox: hideCheckbox,
+        hoverIcon: hoverIcon,
+        icon: icon,
+        level: level,
+        onSelect: this.handleSelect(item),
+        selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
+
+      }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, level + 1)));
+    };
+
+    this.compareItem = (a, b) => {
+      if (a.label === undefined || b.label === undefined) {
+        return 0;
+      }
+
+      return a.label.toString().toLowerCase() > b.label.toString().toLowerCase();
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      itemList,
+      onKeyDown,
+      sort
+    } = this.props;
+
+    if (sort) {
+      itemList.sort(this.compareItem);
     }
+
+    return React.createElement(List, {
+      className: classes.root,
+      onKeyDown: onKeyDown
+    }, itemList.filter(item => !(item.displayed === false)) // don't remove if undefined
+    .map(item => this.buildRecursiveListItem(item)));
+  }
+
 }
 
 HiSelectableList.defaultProps = {
-    checkbox: true,
-    allSelected: false,
-    maxHeight: 400,
-    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'
-    }
+  allSelected: false,
+  disabled: false,
+  disabledItemIdList: [],
+  hideCheckbox: false,
+  selectedItemIdList: [],
+  sort: false
 };
 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,
-    /**
-     * Liste des ids des items disabled
-     */
-    disabledIds: PropTypes.array,
-    /**
-     * 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
+  /**
+   * Définit si tous les items de la liste sont sélectionnés
+   */
+  allSelected: PropTypes.bool,
+
+  /**
+   * Icon affiché lorsque l'item est sélectionné
+   */
+  checkedIcon: PropTypes.node,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Désactive la listes
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Liste des ids des items disabled
+   */
+  disabledItemIdList: PropTypes.array,
+
+  /**
+   * N'affiche pas de checkboxes
+   */
+  hideCheckbox: PropTypes.bool,
+
+  /**
+   * 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 ([ { id: '', label: '', ... } ])
+   */
+  itemList: PropTypes.array.isRequired,
+
+  /**
+   * Fonction de callback à la sélection d'un item, renvoie l'item sélectionné
+   *
+   * @param {object} event The event source of the callback
+   * @param {object} item selected/unselected
+   */
+  onSelect: PropTypes.func.isRequired,
+
+  /**
+   * Liste des id des éléments sélectionnés
+   */
+  selectedItemIdList: PropTypes.array,
+
+  /**
+   * Tri des éléments selon leur label
+   */
+  sort: PropTypes.bool
 } : {};
-export default withStyles(styles, { name: 'HmuiHiSelectableList' })(HiSelectableList);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelectableList'
+})(HiSelectableList);