@hipay/hipay-material-ui 1.0.0-beta.27 → 1.0.0-beta.29

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -72,7 +72,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
             label = t.previous_quarter;
             from = moment().subtract(1, 'quarter').startOf('quarter');
             to = moment().subtract(1, 'quarter').endOf('quarter');
-            info = `${from.format('YYYY')}-Q${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
+            info = `${from.format('YYYY')}-${t.short_quarter}${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
             break;
         case 'cy':
             label = t.current_year;
@@ -129,21 +129,38 @@ class HiDateRangeSelector extends React.Component {
                     this.props.onChange('from', selectedOption.from.toDate());
                     this.props.onChange('to', selectedOption.to.toDate());
                 }
+            } else {
+                this.setState({
+                    defaultFrom: undefined,
+                    defaultTo: undefined
+                });
             }
             if (this.props.returnSelectValue === true) {
                 this.props.onChange('period', value);
             }
         };
 
-        this.state = {
-            selectedPreset: props.defaultPreset,
-            containerWidth: 0
-        };
-
         this.handleReset = this.handleReset.bind(this);
         this.handleSelectChange = this.handleSelectChange.bind(this);
 
         this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
+
+        let from;
+        let to;
+        if (props.defaultPreset !== 'custom') {
+            const selectedOption = this.options.find(option => option.id === props.defaultPreset);
+            if (selectedOption) {
+                from = selectedOption.from.toDate();
+                to = selectedOption.to.toDate();
+            }
+        }
+
+        this.state = {
+            selectedPreset: props.defaultPreset,
+            containerWidth: 0,
+            defaultFrom: from,
+            defaultTo: to
+        };
     }
 
     static getDerivedStateFromProps(props, state) {
@@ -192,7 +209,7 @@ class HiDateRangeSelector extends React.Component {
         } = _props,
               props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
 
-        const { selectedPreset } = this.state;
+        const { defaultFrom, defaultTo, selectedPreset } = this.state;
 
         return React.createElement(
             Grid,
@@ -230,8 +247,8 @@ class HiDateRangeSelector extends React.Component {
                 React.createElement(HiDateRangePicker, _extends({
                     classes: { root: classes.dateRangePicker },
                     id: idRange,
-                    from: from,
-                    to: to,
+                    from: from || defaultFrom,
+                    to: to || defaultTo,
                     enableTime: enableTime,
                     onChange: onChange,
                     onReset: this.handleReset,
@@ -260,6 +277,7 @@ HiDateRangeSelector.defaultProps = {
         quarter: 'Quarter',
         week: 'Week',
         short_week: 'W',
+        short_quarter: 'Q',
         year: 'Year',
         days: 'days',
         custom_period: 'Custom Period',

package/es/HiForm/HiSearchField.js

@@ -2,6 +2,7 @@ import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import React from 'react';
 import PropTypes from 'prop-types';
+import isRequiredIf from 'react-proptype-conditional-require';
 import HiInput from '../HiForm/HiInput';
 
 /**
@@ -112,7 +113,7 @@ HiSearchField.propTypes = process.env.NODE_ENV !== "production" ? {
      *
      * @param {array} suggestions
      */
-    callbackFilteredList: PropTypes.func.isRequired,
+    callbackFilteredList: isRequiredIf(PropTypes.func, props => !props.hasOwnProperty('onSearch'), 'callbackFilteredList required'),
     /**
      * Liste des propriété de l'élément sur lesquelles filtrer (par défaut l'item lui même)
      */

package/es/HiSelect/HiSelect.js

@@ -1,4 +1,5 @@
 import _Object$keys from 'babel-runtime/core-js/object/keys';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import _extends from 'babel-runtime/helpers/extends';
 // @inheritedComponent Input
 
@@ -11,6 +12,7 @@ import Paper from 'material-ui/Paper';
 import ClickAwayListener from 'material-ui/utils/ClickAwayListener';
 import { Manager, Target, Popper } from 'react-popper';
 import { CheckboxBlankOutline, CheckboxMarked } from 'mdi-material-ui';
+import isRequiredIf from 'react-proptype-conditional-require';
 import HiSelectableList from '../HiSelectableList';
 import { HiSearchField } from '../HiForm';
 import SelectInput from './SelectInput';
@@ -19,6 +21,8 @@ import { withStyles } from '../styles';
 import { arrayUnique, getNextItemSelectable } from '../utils/hiHelpers';
 import HiIconBuilder from '../utils/HiIconBuilder';
 
+export const INFINITESCROLL_ERROR_MESSAGE = 'La propriété "loadMoreResults" est obligatoire si la prop "infiniteScroll" est à true';
+
 export const styles = theme => ({
     root: {
         backgroundColor: theme.palette.background2,
@@ -78,7 +82,8 @@ class HiSelect extends React.PureComponent {
             hierarchySelected: {},
             hierarchy: {},
             nbOptions: 0,
-            dynamic: props.dynamic || false
+            dynamic: props.dynamic || false,
+            resultsPageNumber: 1
         };
 
         // Check if value is in options
@@ -135,6 +140,21 @@ class HiSelect extends React.PureComponent {
         this.handleBlur = this.handleBlur.bind(this);
     }
 
+    componentDidUpdate(prevProps, prevState, prevContext) {
+        if (this.props.infiniteScroll && !prevState.open && this.state.open && this.optionsContent) {
+            let optionList = this.optionsContent.querySelector('div').querySelector('div');
+            optionList.addEventListener('scroll', event => {
+                if (optionList.scrollTop >= event.target.scrollHeight - optionList.offsetHeight && !this.props.loadingMoreResults && this.props.hasMore) {
+                    this.props.loadMoreResults(this.state.resultsPageNumber + 1);
+                    this.setState({ resultsPageNumber: this.state.resultsPageNumber + 1 });
+                }
+            });
+        } else if (this.optionsContent && this.props.infiniteScroll && !this.state.open && prevState.open) {
+            let optionList = this.optionsContent.querySelector('div').querySelector('div');
+            optionList.removeEventListener('scroll');
+        }
+    }
+
     componentWillReceiveProps(nextProps) {
         if (typeof this.props.onSearch !== 'undefined' && this.props.options && this.props.options.length > 0) {
             this.handleSuggestions(nextProps.options);
@@ -175,6 +195,13 @@ class HiSelect extends React.PureComponent {
         return { hierarchy, hierarchySelected };
     }
 
+    handleReset(event) {
+        if (this.props.onReset) {
+            event.stopPropagation();
+            this.props.onReset(event);
+        }
+    }
+
     // Key down on list items
 
 
@@ -202,7 +229,8 @@ class HiSelect extends React.PureComponent {
 
 
     render() {
-        const {
+        const _props = this.props,
+              {
             classes,
             disabled,
             error,
@@ -224,8 +252,13 @@ class HiSelect extends React.PureComponent {
             placeholder,
             staticPosition,
             pinnedItem,
-            hasAll
-        } = this.props;
+            hasAll,
+            infiniteScroll,
+            loadingMoreResults,
+            showNoResults,
+            showMinLength
+        } = _props,
+              other = _objectWithoutProperties(_props, ['classes', 'disabled', 'error', 'loading', 'options', 'checkbox', 'searchable', 'displayAsChip', 'type', 'value', 'translations', 'parentItemSelectable', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'hierarchic', 'id', 'placeholder', 'staticPosition', 'pinnedItem', 'hasAll', 'infiniteScroll', 'loadingMoreResults', 'showNoResults', 'showMinLength']);
 
         const { open, suggestions, focused, dynamic } = this.state;
 
@@ -239,7 +272,7 @@ class HiSelect extends React.PureComponent {
         }
 
         // If loading
-        if (loading) {
+        if (loading && !loadingMoreResults) {
             _suggestions.unshift({
                 id: '_loading',
                 type: 'loader',
@@ -296,6 +329,28 @@ class HiSelect extends React.PureComponent {
             popperStyle = { width: this.props.containerWidth };
         }
 
+        if (infiniteScroll && loadingMoreResults) {
+            _suggestions.push({
+                id: '_loading',
+                type: 'loader',
+                disabled: true,
+                centered: true,
+                checkbox: false,
+                label: 'loading'
+            });
+        }
+
+        if (!loading && !loadingMoreResults && _suggestions.length === 0 && (showNoResults || showMinLength)) {
+            suggestions.push({
+                id: '_no_result',
+                type: 'text',
+                disabled: true,
+                centered: true,
+                checkbox: false,
+                label: showNoResults ? translations.no_result_match : translations.min_length
+            });
+        }
+
         const content = React.createElement(
             ClickAwayListener,
             { onClickAway: this.handleClickAway },
@@ -317,25 +372,29 @@ class HiSelect extends React.PureComponent {
                         },
                         onKeyDown: this.handleKeyDownSearch
                     }),
-                    React.createElement(HiSelectableList, {
-                        type: type,
-                        parentItemSelectable: parentItemSelectable,
-                        itemList: _suggestions,
-                        onSelect: this.handleSelect,
-                        selectedIdList: selectedIdList,
-                        checkbox: checkbox,
-                        hierarchy: this.state.hierarchy,
-                        hierarchic: hierarchic,
-                        hierarchySelected: this.state.hierarchySelected,
-                        translations: translations,
-                        icon: icon,
-                        parentIcon: parentIcon,
-                        hoverIcon: hoverIcon,
-                        checkedIcon: checkedIcon,
-                        allSelected: allSelected,
-                        value: value,
-                        onKeyDown: this.handleKeyDown
-                    })
+                    React.createElement(
+                        'div',
+                        { ref: content => this.optionsContent = content },
+                        React.createElement(HiSelectableList, _extends({
+                            type: type,
+                            parentItemSelectable: parentItemSelectable,
+                            itemList: _suggestions,
+                            onSelect: this.handleSelect,
+                            selectedIdList: selectedIdList,
+                            checkbox: checkbox,
+                            hierarchy: this.state.hierarchy,
+                            hierarchic: hierarchic,
+                            hierarchySelected: this.state.hierarchySelected,
+                            translations: translations,
+                            icon: icon,
+                            parentIcon: parentIcon,
+                            hoverIcon: hoverIcon,
+                            checkedIcon: checkedIcon,
+                            allSelected: allSelected,
+                            value: value,
+                            onKeyDown: this.handleKeyDown
+                        }, other))
+                    )
                 )
             )
         );
@@ -370,7 +429,9 @@ class HiSelect extends React.PureComponent {
                         onMouseLeave: this.props.onMouseLeave,
                         refElement: el => {
                             this.selectInputElement = el;
-                        }
+                        },
+                        onSubmit: this.props.onSubmit,
+                        onReset: this.props.onReset
                     })
                 ),
                 open && (staticPosition ? React.createElement(
@@ -405,12 +466,14 @@ HiSelect.defaultProps = {
     parentItemSelectable: false,
     displayAsChip: false,
     dynamic: false,
+    infiniteScroll: 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: {
         all: 'All',
+        min_length: 'Veuillez saisir 3 caractères minimum',
         no_result_match: 'No result match',
         search: 'Search',
         n_items_selected: '%s items selected',
@@ -418,7 +481,9 @@ HiSelect.defaultProps = {
         n_children: '%s items',
         one_child: '%s item'
     },
-    staticPosition: false
+    staticPosition: false,
+    loadingMoreResults: false,
+    hasMore: false
 };
 
 var _initialiseProps = function () {
@@ -438,13 +503,7 @@ var _initialiseProps = function () {
             }
 
             // Gestion du focus
-            if (this.searchField) {
-                // si searchable, focus sur le champs de recherche
-                const searchField = this.searchField;
-                setTimeout(() => {
-                    searchField.focus();
-                }, 1);
-            } else if (this.overlay) {
+            if (!this.props.searchable) {
                 // sinon focus sur le dernier élément selectionné
                 this.focusOnSelectedItem();
             }
@@ -505,6 +564,8 @@ var _initialiseProps = function () {
     this.handleKeyDownSearch = event => {
         if (this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
             this.focusOnSelectedItem();
+        } else if (event.key === 'Enter' && this.props.onSubmit) {
+            this.props.onSubmit(event);
         }
     };
 
@@ -645,9 +706,9 @@ var _initialiseProps = function () {
     };
 
     this.handleSuggestions = suggestions => {
-        const { options, hasAll, iconAll, translations, multiple } = this.props;
+        const { options, hasAll, iconAll, translations, multiple, showNoResults, showMinLength } = this.props;
 
-        if (suggestions.length === 0) {
+        if (suggestions.length === 0 && (showNoResults || showMinLength)) {
             // Handle No Result
             // FIX to remove all item
             suggestions = [];
@@ -657,7 +718,7 @@ var _initialiseProps = function () {
                 disabled: true,
                 centered: true,
                 checkbox: false,
-                label: translations.no_result_match
+                label: showNoResults ? translations.no_result_match : translations.min_length
             });
         } else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
             // Handle 'All'
@@ -724,6 +785,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Les items sont hiérarchisés
      */
     hierarchic: PropTypes.bool,
+    /**
+     * Indique si l'infinite scroll doit rechercher de nouveaux résultats
+     */
+    hasMore: PropTypes.bool,
     /**
      * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
      */
@@ -740,10 +805,26 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id du select
      */
     id: PropTypes.string,
+    /**
+     * Infinite scroll dans le select dans le cas où il y a beaucoup de résultats à afficher
+     * afin d'éviter un lag du navigateur
+     */
+    infiniteScroll: PropTypes.bool.isRequired,
     /**
      * Ajoute un loader
      */
     loading: PropTypes.bool,
+    /**
+     * Ajoute un loader en bas pour l'infiniteScroll
+     */
+    loadingMoreResults: PropTypes.bool,
+    /**
+     * Fonction de callback appelée lorsque l'utilisateur arrive en bas de la liste des options
+     * afin de charger les nouvelles options
+     *
+     * @param {int} pageNumber
+     */
+    loadMoreResults: isRequiredIf(PropTypes.func, props => props.hasOwnProperty('infiniteScroll') && props.infiniteScroll === true, INFINITESCROLL_ERROR_MESSAGE),
     /**
      * Autorise la sélection de plusieurs valeurs
      */
@@ -771,6 +852,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback appelée lorsque le curseur quitte le champs
      */
     onMouseLeave: PropTypes.func,
+    /**
+     * Fonction de callback appelée lorsqu'on vide le champs
+     */
+    onReset: PropTypes.func,
     /**
      * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
      * A utiliser pour les selects avec des données dynamiques
@@ -779,6 +864,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * @param {string} value
      */
     onSearch: PropTypes.func,
+    /**
+     * Fonction de callback à la pression de la touche "Entrée"
+     */
+    onSubmit: PropTypes.func,
     /**
      * Listes des options du select
      */
@@ -808,6 +897,14 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Si true, le contenu du select sera dans une div static plutot que dans une popper absolute
      */
     staticPosition: PropTypes.bool,
+    /**
+     * Permet d'afficher un message si pas assez de caractères
+     */
+    showMinLength: PropTypes.bool,
+    /**
+     * Permet d'afficher un message si aucune options n'est présente
+     */
+    showNoResults: PropTypes.bool,
     /**
      * Traductions (par défaut en anglais)
      */

package/es/HiSelect/HiSuggestSelect.js

@@ -45,6 +45,7 @@ class HiSuggestSelect extends React.PureComponent {
             if (textInput) {
                 setTimeout(() => {
                     textInput.focus();
+                    textInput.scrollLeft = textInput.scrollWidth;
                 }, 1);
             }
         };
@@ -90,12 +91,20 @@ class HiSuggestSelect extends React.PureComponent {
         this.handleSelect = this.handleSelect.bind(this);
         this.handleBlur = this.handleBlur.bind(this);
         this.handleFocus = this.handleFocus.bind(this);
+        this.getInputElement = this.getInputElement.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
         this.setState({ options: nextProps.options });
     }
 
+    getInputElement(el) {
+        this.textInput = el;
+        if (this.props.inputRef) {
+            this.props.inputRef(this.textInput);
+        }
+    }
+
     // Key down on list items
 
 
@@ -116,24 +125,35 @@ class HiSuggestSelect extends React.PureComponent {
 
     render() {
         const _props = this.props,
-              { classes, id, showMinLength, showNoResults, onSearch, translations } = _props,
-              otherProps = _objectWithoutProperties(_props, ['classes', 'id', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
+              { classes, id, loading, showMinLength, showNoResults, onSearch, translations } = _props,
+              otherProps = _objectWithoutProperties(_props, ['classes', 'id', 'loading', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
 
         const { focused, options } = this.state;
 
         let optionsShown = options;
 
-        // If no results match
-        if (options.length === 0 && (showNoResults || showMinLength)) {
+        // If loading
+        if (loading) {
             optionsShown = [{
-                id: '_no_result',
-                type: 'text',
+                id: '_loading',
+                type: 'loader',
                 disabled: true,
                 centered: true,
                 checkbox: false,
-                label: showNoResults ? translations.no_result_match : translations.min_length
+                label: 'loading'
             }];
         }
+        // If no results match
+        else if (options.length === 0 && (showNoResults || showMinLength)) {
+                optionsShown = [{
+                    id: '_no_result',
+                    type: 'text',
+                    disabled: true,
+                    centered: true,
+                    checkbox: false,
+                    label: showNoResults ? translations.no_result_match : translations.min_length
+                }];
+            }
 
         const open = !!optionsShown.length && focused;
 
@@ -155,9 +175,7 @@ class HiSuggestSelect extends React.PureComponent {
 
                         inputId: id,
                         focused: focused,
-                        inputRef: input => {
-                            this.textInput = input;
-                        },
+                        inputRef: this.getInputElement,
                         onChange: onSearch,
                         onKeyDown: this.handleKeyDownSearch,
                         onBlur: this.handleBlur,
@@ -211,6 +229,14 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id de l'élément input
      */
     id: PropTypes.string,
+    /**
+     * Passe une ref callback au composant input
+     */
+    inputRef: PropTypes.func,
+    /**
+     * Ajoute un loader
+     */
+    loading: PropTypes.bool,
     /**
      * Fonction de callback appelée lorsqu'on écrit dans le champ
      */

package/es/HiSelect/SelectInput.js

@@ -2,12 +2,13 @@ import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import ArrowDropDownIcon from '../svg-icons/ArrowDropDown';
+import keycode from 'keycode';
 import Icon from 'material-ui/Icon';
-import { withStyles } from '../styles';
-
+import IconButton from 'material-ui/IconButton';
 import ButtonBase from 'material-ui/ButtonBase';
+import ArrowDropDownIcon from '../svg-icons/ArrowDropDown';
+import { withStyles } from '../styles';
+import HiIconBuilder from '../utils/HiIconBuilder';
 
 export const styles = theme => ({
     root: {
@@ -87,6 +88,11 @@ export const styles = theme => ({
         backgroundColor: theme.palette.background3
     },
     error: {},
+    eraseButton: {
+        height: 24,
+        width: 24,
+        display: 'inline-block'
+    },
     label: _extends({
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -120,14 +126,24 @@ class SelectInput extends React.PureComponent {
         super(props);
 
         this.handleKeyDown = event => {
-            if (event.key === 'ArrowDown') {
-                this.props.onClick();
-            } else if (event.key === 'ArrowUp') {
+            const key = keycode(event);
+            if (['up', 'down', 'space'].includes(key)) {
+                event.preventDefault();
                 this.props.onClick();
+            } else if (key === 'enter' && this.props.onSubmit) {
+                event.preventDefault();
+                this.props.onSubmit(event);
+            }
+        };
+
+        this.handleClick = event => {
+            if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
+                this.props.onClick(event);
             }
         };
 
         this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleClick = this.handleClick.bind(this);
     }
 
     render() {
@@ -141,7 +157,9 @@ class SelectInput extends React.PureComponent {
             focused,
             error,
             id,
-            refElement
+            refElement,
+            onReset,
+            theme
         } = this.props;
 
         // On utilise classNames pour variabiliser les styles et merge les classes appliquées
@@ -185,7 +203,7 @@ class SelectInput extends React.PureComponent {
             {
                 id: id,
                 className: rootClass,
-                onClick: onClick,
+                onClick: this.handleClick,
                 disabled: disabled,
                 onMouseEnter: this.props.onMouseEnter,
                 onMouseLeave: this.props.onMouseLeave,
@@ -201,6 +219,20 @@ class SelectInput extends React.PureComponent {
                 { className: classes.label },
                 value
             ),
+            onReset && React.createElement(
+                'div',
+                {
+                    ref: el => {
+                        this.resetIcon = el;
+                    }
+                },
+                React.createElement(HiIconBuilder, {
+                    icon: 'close',
+                    size: 24,
+                    color: theme.palette.neutral.normal,
+                    onClick: onReset
+                })
+            ),
             React.createElement(
                 Icon,
                 { classes: { root: iconClass } },
@@ -262,6 +294,14 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback à la pression de touche
      */
     onKeyDown: PropTypes.func,
+    /**
+     * Fonction de callback appelée lorsqu'on vide le champs
+     */
+    onReset: 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
      */
@@ -275,4 +315,4 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
 } : {};
-export default withStyles(styles, { name: 'HmuiSelectInput' })(SelectInput);
+export default withStyles(styles, { name: 'HmuiSelectInput', withTheme: true })(SelectInput);

package/es/HiSelectableList/HiSelectableListItem.js

@@ -368,7 +368,8 @@ class HiSelectableListItem extends React.Component {
                 checkedIcon: checkedIcon,
                 indeterminate: indeterminate,
                 classes: { checked: classes.listItemIconChecked },
-                className: classes.checkbox
+                className: classes.checkbox,
+                disabled: effectiveDisabled
             }),
             this.buildListItem(),
             !!item.info && React.createElement(