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

package/es/HiDatePicker/HiDatePicker.js

@@ -40,6 +40,7 @@ class HiDatePicker extends React.Component {
         this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
         this.renderTimePickerOverlay = this.renderTimePickerOverlay.bind(this);
         this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
     }
 
     componentWillUnmount() {
@@ -51,27 +52,33 @@ class HiDatePicker extends React.Component {
         this.props.onReset();
     }
 
+    handleInputChange(event) {
+        this.props.onChange(event.target.value);
+    }
+
     handleDayChange(day, modifiers) {
-        if (modifiers.selected) {
-            // Deselect day
-            this.props.onChange(undefined);
-        } else {
-            // Keep Time if set
-            if (this.props.enableTime && day !== undefined) {
-                if (this.props.value) {
-                    day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-                } else {
-                    day.setHours(0, 0);
+        if (day) {
+            if (modifiers.selected) {
+                // Deselect day
+                this.props.onChange(undefined);
+            } else {
+                // Keep Time if set
+                if (this.props.enableTime && day !== undefined) {
+                    if (this.props.value) {
+                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                    } else {
+                        day.setHours(0, 0);
+                    }
                 }
+                this.props.onChange(day);
+            }
+            if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
+                // Hide overlay & remove focus on input
+                document.activeElement.blur();
+            } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
+                // Open Time panel after date selection
+                this.openPanel('time');
             }
-            this.props.onChange(day);
-        }
-        if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
-            // Hide overlay & remove focus on input
-            document.activeElement.blur();
-        } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
-            // Open Time panel after date selection
-            this.openPanel('time');
         }
     }
 
@@ -205,7 +212,7 @@ class HiDatePicker extends React.Component {
             captionElement: this.renderCaption,
             classNames: classes,
             disabledDays: effectiveDisabledDays,
-            selectedDays: value,
+            selectedDays: typeof value === 'object' ? value : undefined,
             locale,
             firstDayOfWeek: 1,
             fromMonth: minimumDate,
@@ -221,7 +228,9 @@ class HiDatePicker extends React.Component {
             onReset: this.handleReset
         }, {
             onBlur: this.handleBlur
-        }, props);
+        }, props, {
+            onChange: this.handleInputChange
+        });
 
         return React.createElement(
             'div',
@@ -314,6 +323,6 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date sélectionnée
      */
-    value: PropTypes.instanceOf(Date)
+    value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])
 } : {};
 export default withStyles(styles, { name: 'HmuiHiDatePicker' })(HiDatePicker);

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,6 +26,10 @@ class HiDateRangePicker extends React.Component {
     constructor(props) {
         super();
 
+        this.handleInputChange = inputName => event => {
+            this.props.onChange(inputName, event.target.value);
+        };
+
         this.handleDayPickerFocus = name => () => {
             this.setState({ focusedInput: name });
         };
@@ -58,6 +63,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);
 
@@ -108,38 +114,40 @@ 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') {
+                        document.activeElement.blur();
+                    }
                 }
+            } 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) {
@@ -352,6 +360,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 +383,7 @@ class HiDateRangePicker extends React.Component {
             modifiers,
             modifiersStyles,
             // Both are required ?
-            selectedDays: [from, { from, to }],
+            selectedDays,
             todayButton: translations.today,
             weekdayElement: Weekday
         }, props);
@@ -370,9 +392,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 +421,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 +453,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 +462,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(
@@ -462,7 +483,7 @@ class HiDateRangePicker extends React.Component {
                 },
                 React.createElement(
                     'div',
-                    { className: fromClass },
+                    null,
                     React.createElement(DayPickerInput, {
                         ref: el => {
                             this.fromInput = el;
@@ -560,7 +581,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"
      */
@@ -596,7 +617,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

@@ -301,7 +301,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 +349,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

@@ -230,7 +230,8 @@ class HiInput extends React.PureComponent {
             rows,
             inputClassName,
             onReset,
-            theme
+            theme,
+            startAdornmentColor
         } = this.props;
 
         const { focused } = this.state;
@@ -251,11 +252,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 +459,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

@@ -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/HiSelect/HiSelect.js

@@ -206,6 +206,7 @@ class HiSelect extends React.PureComponent {
             classes,
             disabled,
             error,
+            loading,
             options,
             checkbox,
             searchable,
@@ -231,8 +232,21 @@ class HiSelect extends React.PureComponent {
         const selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
 
         let _suggestions = [...suggestions];
+
         if (pinnedItem) {
-            _suggestions = [pinnedItem, ...suggestions];
+            _suggestions.unshift(pinnedItem);
+        }
+
+        // If loading
+        if (loading) {
+            _suggestions.unshift({
+                id: '_loading',
+                type: 'loader',
+                disabled: true,
+                centered: true,
+                checkbox: false,
+                label: 'loading'
+            });
         }
 
         if (this.state.dynamic && selectedIdList.length === 1) {
@@ -715,6 +729,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/HiSelectableList/HiSelectableListItem.js

@@ -10,6 +10,7 @@ import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/hiHelpers';
 import HiIconBuilder from '../utils/HiIconBuilder';
 import HiColoredLabel from '../HiColoredLabel';
+import HiLoader from '../HiLoader';
 
 export const styles = theme => ({
     listItem: {
@@ -35,6 +36,13 @@ export const styles = theme => ({
         textAlign: 'center',
         width: '100%'
     },
+    loader: {
+        textAlign: 'center',
+        width: 1,
+        height: 22,
+        padding: '8px 0',
+        margin: 'auto'
+    },
     selected: {
         backgroundColor: theme.palette.selected
     },
@@ -182,6 +190,9 @@ class HiSelectableListItem extends React.Component {
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
                         this.getItemLabel(item)
                     );
+                case 'loader':
+                    return React.createElement(HiLoader, { loading: true, className: classes.loader, size: 8 });
+                    break;
                 case 'text':
                 default:
                     const itemTextClass = classNames(classes.listItemContent, {

package/es/HiTable/BodyCells/CellAccount.js

@@ -31,7 +31,7 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Couleur du compte
      */
-    color: PropTypes.string.isRequired,
+    color: PropTypes.string,
     /**
      * Nom du compte
      */

package/es/HiTable/BodyCells/CellStatus.js

@@ -68,7 +68,7 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Code du statut courant de la transaction (détermine la couleur du label)
      */
-    code: PropTypes.number.isRequired,
+    code: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     /**
      * Fonction de callback appelée pour ouvrir les lignes de détails
      */

package/es/HiTable/ColumnFilter.js

@@ -73,7 +73,7 @@ export const styles = theme => ({
         fontSize: 14
     },
     button: {
-        height: 40,
+        minHeight: 40,
         fontSize: 14,
         width: '50%'
     },

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.22
+/** @license Material-UI v1.0.0-beta.23
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.22
+/** @license Material-UI v1.0.0-beta.23
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.23",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {