@hipay/hipay-material-ui 1.0.0-beta.22 → 1.0.0-beta.25

package/es/HiDatePicker/HiDateRangePicker.js

@@ -1,3 +1,4 @@
+import _Object$values from 'babel-runtime/core-js/object/values';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import _extends from 'babel-runtime/helpers/extends';
 //  weak
@@ -25,10 +26,22 @@ class HiDateRangePicker extends React.Component {
     constructor(props) {
         super();
 
+        this.handleInputChange = inputName => event => {
+            this.event = event;
+            this.props.onChange(inputName, event.target.value);
+        };
+
         this.handleDayPickerFocus = name => () => {
             this.setState({ focusedInput: name });
         };
 
+        this.handleDayPickerBlur = name => () => {
+            this.setState({ focusedInput: '' });
+            if (this.props.onBlur) {
+                this.props.onBlur(name);
+            }
+        };
+
         this.state = {
             fromCurrentMonth: props.from ? props.from : new Date(),
             toCurrentMonth: props.to ? props.to : new Date(),
@@ -58,6 +71,7 @@ class HiDateRangePicker extends React.Component {
         this.handleYearClickTo = this.handleYearClickTo.bind(this);
         this.handleDayPickerFocus = this.handleDayPickerFocus.bind(this);
         this.handleDayPickerBlur = this.handleDayPickerBlur.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
 
         this.openPanel = this.openPanel.bind(this);
 
@@ -94,11 +108,7 @@ class HiDateRangePicker extends React.Component {
     }
 
     handleReset(name) {
-        if (name === 'from') {
-            this.handleCurrentMonthChange(name, new Date());
-        } else {
-            this.handleCurrentMonthChange(name, this.props.from);
-        }
+        this.handleCurrentMonthChange(name, new Date());
 
         this.timeout = setTimeout(() => {
             if (this.props.onReset) {
@@ -108,38 +118,45 @@ class HiDateRangePicker extends React.Component {
     }
 
     handleDayChange(name, day, modifiers) {
-        // if time disabled, focus TO input
-        // else focus current input
-        if (!this.props.enableTime) {
-            if (day instanceof Date) {
-                if (name === 'from' && this.toInput) {
-                    this.toInput.getInput().focus();
-                } else if (name === 'to') {
-                    document.activeElement.blur();
+        if (day) {
+            // if time disabled, focus TO input
+            // else focus current input
+            if (!this.props.enableTime) {
+                if (day instanceof Date) {
+                    if (name === 'from' && this.toInput) {
+                        this.toInput.getInput().focus();
+                    } else if (name === 'to') {
+                        if (typeof this.event === 'undefined' || this.event && this.event.type !== 'change') {
+                            // trigger blur only if user clicks on date into calendar
+                            // else keep focus to see day selection into calendar
+                            document.activeElement.blur();
+                        }
+                        delete this.event;
+                    }
                 }
+            } else {
+                this.timeout = setTimeout(() => {
+                    if (this[`${name}Input`].getInput()) {
+                        this[`${name}Input`].getInput().focus();
+                    }
+                }, 10);
             }
-        } else {
-            this.timeout = setTimeout(() => {
-                if (this[`${name}Input`].getInput()) {
-                    this[`${name}Input`].getInput().focus();
-                }
-            }, 10);
-        }
 
-        if (this.props.onChange) {
-            // Keep Time if set
-            if (this.props.enableTime) {
-                if (this.props[name]) {
-                    day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
-                } else {
-                    day.setHours(0, 0);
+            if (this.props.onChange) {
+                // Keep Time if set
+                if (this.props.enableTime) {
+                    if (this.props[name]) {
+                        day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
+                    } else {
+                        day.setHours(0, 0);
+                    }
                 }
+                this.props.onChange(name, day);
             }
-            this.props.onChange(name, day);
-        }
 
-        if (this.props.enableTime) {
-            this.openPanel(name, 'time');
+            if (this.props.enableTime) {
+                this.openPanel(name, 'time');
+            }
         }
     }
     handleDayChangeFrom(day, modifiers) {
@@ -214,10 +231,6 @@ class HiDateRangePicker extends React.Component {
         }
     }
 
-    handleDayPickerBlur() {
-        this.setState({ focusedInput: '' });
-    }
-
     openPanel(name, panel) {
         this.setState({
             [`${name}OpenedPanel`]: panel
@@ -352,6 +365,20 @@ class HiDateRangePicker extends React.Component {
             }
         };
 
+        let selectedDays = [];
+        let selected = {};
+        if (from instanceof Date) {
+            selectedDays.push(from);
+            selected.from = from;
+        }
+        if (to instanceof Date) {
+            selectedDays.push(to);
+            selected.to = to;
+        }
+        if (_Object$values(selected).length > 0) {
+            selectedDays.push(selected);
+        }
+
         const dayPickerProps = _extends({
             classNames: classes,
             disabledDays,
@@ -361,7 +388,7 @@ class HiDateRangePicker extends React.Component {
             modifiers,
             modifiersStyles,
             // Both are required ?
-            selectedDays: [from, { from, to }],
+            selectedDays,
             todayButton: translations.today,
             weekdayElement: Weekday
         }, props);
@@ -370,9 +397,9 @@ class HiDateRangePicker extends React.Component {
         // Disable days after 'to' date if define
 
         let after;
-        if (to && disableFutureDays) {
+        if (to instanceof Date && disableFutureDays) {
             after = to < now ? now : to;
-        } else if (to) {
+        } else if (to instanceof Date) {
             after = to;
         } else if (disableFutureDays) {
             after = now;
@@ -399,9 +426,9 @@ class HiDateRangePicker extends React.Component {
         // Disable days before 'from' date if define
 
         let before;
-        if (from && disablePastDays) {
+        if (from instanceof Date && disablePastDays) {
             before = from < now ? now : from;
-        } else if (from) {
+        } else if (from instanceof Date) {
             before = from;
         } else if (disablePastDays) {
             before = now;
@@ -431,7 +458,8 @@ class HiDateRangePicker extends React.Component {
         }, props, labelFrom && {
             label: labelFrom
         }, {
-            id: `${id}-from`
+            id: `${id}-from`,
+            onChange: this.handleInputChange('from')
         });
 
         const toInputProps = _extends({}, onReset && {
@@ -439,15 +467,13 @@ class HiDateRangePicker extends React.Component {
         }, props, labelTo && {
             label: labelTo
         }, {
-            id: `${id}-to`
+            id: `${id}-to`,
+            onChange: this.handleInputChange('to')
         });
 
-        let fromClass = classNames({
-            [classes.absolute]: staticPosition === true && this.state.focusedInput === 'to',
-            [classes.dayPickerMargin]: staticPosition === true && this.state.focusedInput === 'to'
-        });
         let toClass = classNames(classes.toInput, {
-            [classes.absolute]: staticPosition === true && this.state.focusedInput === 'from'
+            [classes.absolute]: staticPosition === true && this.state.focusedInput === 'from',
+            [classes.right4]: staticPosition === true && this.state.focusedInput === 'from'
         });
 
         return React.createElement(
@@ -458,11 +484,11 @@ class HiDateRangePicker extends React.Component {
                 {
                     className: classes.fromInput,
                     onFocus: this.handleDayPickerFocus('from'),
-                    onBlur: this.handleDayPickerBlur
+                    onBlur: this.handleDayPickerBlur('from')
                 },
                 React.createElement(
                     'div',
-                    { className: fromClass },
+                    null,
                     React.createElement(DayPickerInput, {
                         ref: el => {
                             this.fromInput = el;
@@ -486,7 +512,7 @@ class HiDateRangePicker extends React.Component {
                 {
                     className: toClass,
                     onFocus: this.handleDayPickerFocus('to'),
-                    onBlur: this.handleDayPickerBlur
+                    onBlur: this.handleDayPickerBlur('to')
                 },
                 React.createElement(DayPickerInput, {
                     ref: el => {
@@ -560,7 +586,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de début sélectionnée
      */
-    from: PropTypes.instanceOf(Date),
+    from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
     /**
      * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
      */
@@ -583,10 +609,18 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     minimumDate: PropTypes.instanceOf(Date),
     /**
      * Callback à la sélection d'une date
+     * @param {string} nom de l'input
+     */
+    onBlur: PropTypes.func,
+    /**
+     * Callback à la sélection d'une date
+     * @param {string} nom du champs
+     * @param {string} nouvelle valeur du champs
      */
     onChange: PropTypes.func,
     /**
      * Callback au reset de l'input
+     * @param {string} nom du champs réinitialisé
      */
     onReset: PropTypes.func,
     /**
@@ -596,7 +630,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de fin sélectionnée
      */
-    to: PropTypes.instanceOf(Date),
+    to: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
     /**
      * Traductions
      */

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -42,13 +42,13 @@ export function buildDateRangeOptionByKey(key, t, format) {
             label = t.current_week;
             from = moment().startOf('week');
             to = moment();
-            info = `${t.week} ${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
+            info = `${t.short_week}${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
             break;
         case 'pw':
             label = t.previous_week;
             from = moment().subtract(1, 'week').startOf('week');
             to = moment().subtract(1, 'week').endOf('week');
-            info = `${t.week} ${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
+            info = `${t.short_week}${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
             break;
         case 'cm':
             label = t.current_month;
@@ -146,6 +146,15 @@ class HiDateRangeSelector extends React.Component {
         this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
     }
 
+    static getDerivedStateFromProps(props, state) {
+        if (props.defaultPreset && props.returnSelectValue) {
+            return {
+                selectedPreset: props.defaultPreset
+            };
+        }
+        return null;
+    }
+
     componentDidMount() {
         if (this.container) {
             this.setState({ containerWidth: findDOMNode(this.container).clientWidth });
@@ -250,6 +259,7 @@ HiDateRangeSelector.defaultProps = {
         month: 'Month',
         quarter: 'Quarter',
         week: 'Week',
+        short_week: 'W',
         year: 'Year',
         days: 'days',
         custom_period: 'Custom Period',
@@ -301,7 +311,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de début sélectionnée
      */
-    from: PropTypes.instanceOf(Date),
+    from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
     /**
      * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
      */
@@ -349,7 +359,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de fin sélectionnée
      */
-    to: PropTypes.instanceOf(Date),
+    to: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
     /**
      * Traductions
      */

package/es/HiDatePicker/Overlays/Overlay.js

@@ -80,7 +80,7 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
      * ReactDayPicker prop
      * The currently selected day or selected days
      */
-    selectedDay: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    selectedDay: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
     /**
      * Définit comment construire le Paper dans le cas d'un double input
      */

package/es/HiDatePicker/stylesheet.js

@@ -22,6 +22,9 @@ export default (theme => ({
     absolute: {
         position: 'absolute'
     },
+    right4: {
+        right: 4
+    },
     dayPickerMargin: {
         top: -337,
         width: 'calc(100% - 4px)'

package/es/HiForm/HiInput.js

@@ -153,6 +153,7 @@ class HiInput extends React.PureComponent {
         if (this.props.onReset) {
             this.props.onReset();
         }
+        this.inputElement.focus();
     }
 
     handleBlur(event) {
@@ -230,7 +231,8 @@ class HiInput extends React.PureComponent {
             rows,
             inputClassName,
             onReset,
-            theme
+            theme,
+            startAdornmentColor
         } = this.props;
 
         const { focused } = this.state;
@@ -251,11 +253,15 @@ class HiInput extends React.PureComponent {
         });
 
         let leftIcon;
+        let startAdornmentStyle = { padding: 8 };
+        if (startAdornmentColor) {
+            startAdornmentStyle.color = startAdornmentColor;
+        }
         if (startAdornment) {
             leftIcon = React.createElement(HiIconBuilder, {
                 icon: startAdornment,
                 size: 36,
-                style: { padding: '8px' },
+                style: startAdornmentStyle,
                 onClick: this.props.onLeftIconClick,
                 className: classNames(classes.startAdornment, {
                     [classes.startAdornmentFocus]: focused,
@@ -454,6 +460,10 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icône à afficher à gauche de l'input
      */
     startAdornment: PropTypes.string,
+    /**
+     * Couleur de l'icône à afficher à gauche de l'input
+     */
+    startAdornmentColor: PropTypes.string,
     /**
      * @ignore
      */

package/es/HiForm/HiPasswordField.js

@@ -11,9 +11,9 @@ import HiTextField from './HiTextField';
 export const styles = theme => ({
     inputPassword: {
         fontWeight: 'bolder',
-        fontFamily: 'Verdana, sans-serif',
+        fontFamily: 'inherit',
         letterSpacing: '4px',
-        fontSize: 25
+        fontSize: '1.6rem'
     }
 });
 
@@ -52,7 +52,12 @@ class HiPasswordField extends React.Component {
         return React.createElement(HiTextField, _extends({}, otherProps, {
             type: type,
             onRightIconClick: this.handlePasswordToggle,
-            HiInputProps: _extends({}, HiInputProps, { endAdornment, placeholder: '', inputClassName })
+            HiInputProps: _extends({}, HiInputProps, {
+                endAdornment,
+                placeholder: '',
+                inputClassName,
+                autocomplete: 'on'
+            })
         }));
     }
 }

package/es/HiLoader/HiLoader.js

@@ -6,14 +6,14 @@ import withStyles from '../styles/withStyles';
 export const styles = () => ({});
 
 function HiLoader(props) {
-    const { theme, loading } = props;
+    const { className, theme, loading, size = 12 } = props;
 
     return React.createElement(
         'div',
-        { id: 'hi-loader' },
+        { id: 'hi-loader', className: className },
         React.createElement(PropagateLoader, {
             loading: loading,
-            size: 12,
+            size: size,
             color: theme.palette.business.primary.normal
         })
     );

package/es/HiPins/HiPins.js

@@ -10,7 +10,7 @@ export const styles = theme => ({
         display: 'inline-block',
         padding: '0 9px',
         height: 16,
-        lineHeight: '16px',
+        lineHeight: '18px',
         minWidth: 25,
         textAlign: 'center',
         borderRadius: '45px',
@@ -33,9 +33,9 @@ export const styles = theme => ({
  *
  */
 function HiPins(props) {
-    const { classes, children, color, onClick, className } = props;
+    const { classes, theme, children, color = props.theme.palette.business.primary.normal, onClick, className } = props;
 
-    const textColor = getContrastedTextColor(color, props.theme.palette.neutral.dark, '#FFF');
+    const textColor = getContrastedTextColor(color, theme.palette.neutral.dark, '#FFF');
 
     const divProps = {
         style: { backgroundColor: color, color: textColor }
@@ -59,7 +59,7 @@ HiPins.propTypes = process.env.NODE_ENV !== "production" ? {
     children: PropTypes.node.isRequired,
     classes: PropTypes.object.isRequired,
     className: PropTypes.string,
-    color: PropTypes.string.isRequired,
+    color: PropTypes.string,
     onClick: PropTypes.func
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiPins' })(HiPins);

package/es/HiSelect/HiSelect.js

@@ -206,6 +206,7 @@ class HiSelect extends React.PureComponent {
             classes,
             disabled,
             error,
+            loading,
             options,
             checkbox,
             searchable,
@@ -222,24 +223,38 @@ class HiSelect extends React.PureComponent {
             id,
             placeholder,
             staticPosition,
-            pinnedItem
+            pinnedItem,
+            hasAll
         } = this.props;
 
-        const { open, suggestions, focused } = this.state;
+        const { open, suggestions, focused, dynamic } = this.state;
 
         let display = '';
         const selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
 
         let _suggestions = [...suggestions];
+
         if (pinnedItem) {
-            _suggestions = [pinnedItem, ...suggestions];
+            _suggestions.unshift(pinnedItem);
         }
 
-        if (this.state.dynamic && selectedIdList.length === 1) {
+        // If loading
+        if (loading) {
+            _suggestions.unshift({
+                id: '_loading',
+                type: 'loader',
+                disabled: true,
+                centered: true,
+                checkbox: false,
+                label: 'loading'
+            });
+        }
+
+        if ((dynamic || loading) && selectedIdList.length === 1) {
             display = translations.one_item_selected.replace('%s', selectedIdList.length);
-        } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
+        } else if ((this.state.nbOptions !== selectedIdList.length || !hasAll) && selectedIdList.length > 1) {
             display = translations.n_items_selected.replace('%s', selectedIdList.length);
-        } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions >= 1) {
+        } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions > 1) {
             display = translations.all;
         } else if (selectedIdList.length === 1) {
             if (type !== 'icon') {
@@ -715,6 +730,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id du select
      */
     id: PropTypes.string,
+    /**
+     * Ajoute un loader
+     */
+    loading: PropTypes.bool,
     /**
      * Autorise la sélection de plusieurs valeurs
      */

package/es/HiSelect/HiSuggestSelect.js

@@ -134,6 +134,7 @@ class HiSuggestSelect extends React.PureComponent {
                 label: showNoResults ? translations.no_result_match : translations.min_length
             }];
         }
+
         const open = !!optionsShown.length && focused;
 
         return React.createElement(
@@ -196,7 +197,7 @@ HiSuggestSelect.defaultProps = {
     showMinLength: false,
     showNoResults: false,
     translations: {
-        no_result_match: 'No result match',
+        no_result_match: 'Aucun résultat correspondant',
         min_length: 'Veuillez saisir 3 caractères minimum'
     },
     options: []

package/es/HiSelect/SelectInput.js

@@ -14,7 +14,8 @@ export const styles = theme => ({
         width: '100%',
         height: 40,
         maxWidth: 500,
-        justifyContent: 'flex-start',
+        display: 'flex',
+        justifyContent: 'center',
         padding: 8,
         cursor: 'pointer'
     },
@@ -89,18 +90,12 @@ export const styles = theme => ({
     label: _extends({
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        paddingRight: 16
+        textOverflow: 'ellipsis'
     }, 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
         })