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

package/es/HiChip/HiChip.js

@@ -27,14 +27,24 @@ export const styles = theme => ({
         },
         '&$deletable': {
             paddingRight: 4
+        },
+        '&$leftIccon': {
+            paddingLeft: 4
         }
     }),
     leftNavigation: {},
     rightNavigation: {},
     deletable: {},
+    leftIccon: {},
     icon: {
         marginRight: 4
     },
+    iconClickable: {
+        cursor: 'pointer',
+        '&:hover, &:focus': {
+            color: theme.palette.business.primary.normal
+        }
+    },
     eraseIcon: {
         // Remove grey highlight
         WebkitTapHighlightColor: 'transparent',
@@ -78,7 +88,23 @@ export const styles = theme => ({
 });
 
 function HiChip(props) {
-    const { label, classes, icon, id, img, onPrevious, onNext, onDelete, prefix } = props;
+    const {
+        label,
+        classes,
+        icon,
+        id,
+        img,
+        onPrevious,
+        onNext,
+        onDelete,
+        prefix,
+        onIconClick,
+        titleDelete,
+        titleIcon,
+        titleImg,
+        titleNext,
+        titlePrevious
+    } = props;
 
     return React.createElement(
         'div',
@@ -87,7 +113,8 @@ function HiChip(props) {
             className: classNames(classes.root, {
                 [classes.leftNavigation]: onPrevious,
                 [classes.rightNavigation]: onNext,
-                [classes.deletable]: onDelete
+                [classes.deletable]: onDelete,
+                [classes.leftIccon]: icon
             })
         },
         prefix && React.createElement(
@@ -96,13 +123,22 @@ function HiChip(props) {
             prefix,
             ' : '
         ),
-        img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 16 }),
+        img && React.createElement('img', { className: classes.badge, src: img, alt: img, title: titleImg }),
+        icon && React.createElement(HiIconBuilder, {
+            className: classNames(classes.icon, {
+                [classes.iconClickable]: onIconClick
+            }),
+            icon: icon,
+            size: 16,
+            onClick: onIconClick,
+            titleAccess: titleIcon
+        }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 16
+            size: 16,
+            titleAccess: titlePrevious
         }),
         React.createElement(
             'span',
@@ -113,13 +149,15 @@ function HiChip(props) {
             className: classNames(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 16
+            size: 16,
+            titleAccess: titleNext
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 16
+            size: 16,
+            titleAccess: titleDelete
         })
     );
 }
@@ -149,6 +187,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au clic sur l'icon close si cancelable = true
      */
     onDelete: PropTypes.func,
+    /**
+     * Fonction de callback au clic sur l'icon à gauche
+     */
+    onIconClick: PropTypes.func,
     /**
      * Fonction de callback au clic sur l'icon next
      */
@@ -156,7 +198,31 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Fonction de callback au clic sur l'icon previous
      */
-    onPrevious: PropTypes.func
+    onPrevious: PropTypes.func,
+    /**
+     * Préfixe dans le HiChip
+     */
+    prefix: PropTypes.string,
+    /**
+     * Titre de l'icône supprimer
+     */
+    titleDelete: PropTypes.string,
+    /**
+     * Titre de l'icône
+     */
+    titleIcon: PropTypes.string,
+    /**
+     * Titre de la balise img
+     */
+    titleImg: PropTypes.string,
+    /**
+     * Titre de la navigation suivante
+     */
+    titleNext: PropTypes.string,
+    /**
+     * Titre de la navigation précédente
+     */
+    titlePrevious: PropTypes.string
 } : {};
 
 export default withStyles(styles, { name: 'HmuiHiChip' })(HiChip);

package/es/HiDatePicker/HiDateRangePicker.js

@@ -27,6 +27,7 @@ class HiDateRangePicker extends React.Component {
         super();
 
         this.handleInputChange = inputName => event => {
+            this.event = event;
             this.props.onChange(inputName, event.target.value);
         };
 
@@ -34,6 +35,13 @@ class HiDateRangePicker extends React.Component {
             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(),
@@ -100,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) {
@@ -122,7 +126,12 @@ class HiDateRangePicker extends React.Component {
                     if (name === 'from' && this.toInput) {
                         this.toInput.getInput().focus();
                     } else if (name === 'to') {
-                        document.activeElement.blur();
+                        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 {
@@ -222,10 +231,6 @@ class HiDateRangePicker extends React.Component {
         }
     }
 
-    handleDayPickerBlur() {
-        this.setState({ focusedInput: '' });
-    }
-
     openPanel(name, panel) {
         this.setState({
             [`${name}OpenedPanel`]: panel
@@ -479,7 +484,7 @@ class HiDateRangePicker extends React.Component {
                 {
                     className: classes.fromInput,
                     onFocus: this.handleDayPickerFocus('from'),
-                    onBlur: this.handleDayPickerBlur
+                    onBlur: this.handleDayPickerBlur('from')
                 },
                 React.createElement(
                     'div',
@@ -507,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 => {
@@ -604,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,
     /**

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',

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) {

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'
     }
 });
 

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

@@ -223,10 +223,11 @@ 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] : [];
@@ -249,11 +250,11 @@ class HiSelect extends React.PureComponent {
             });
         }
 
-        if (this.state.dynamic && selectedIdList.length === 1) {
+        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') {

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
         })

package/es/HiSelectableList/HiSelectableList.js

@@ -51,59 +51,61 @@ class HiSelectableList extends React.PureComponent {
                 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();
+                    if (item.displayed !== false) {
+                        /**
+                         * 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 = [];
                             }
-                        } 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;
-                    }
+                        /**
+                         * 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(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));
+                    }
                 })
             )
         );

package/es/HiSelectableList/HiSelectableListItem.js

@@ -14,9 +14,11 @@ import HiLoader from '../HiLoader';
 
 export const styles = theme => ({
     listItem: {
-        padding: `${9}px 0px`,
+        padding: '9px 0px',
         fontWeight: theme.typography.fontWeightRegular,
-        maxHeight: 40
+        maxHeight: 40,
+        display: 'flex',
+        alignItems: 'flex-start'
     },
     listItemTitle: {
         padding: `${9}px 0px`,

package/es/HiTable/BodyCellBuilder.js

@@ -1,5 +1,6 @@
 import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ContextMenuTrigger } from 'react-contextmenu';
@@ -11,7 +12,7 @@ import { formatRate } from '../utils/hiHelpers';
 /**
  * Construit la cellule correspondante au type demandé
  */
-export default class BodyCellBuilder extends React.PureComponent {
+export default class BodyCellBuilder extends React.Component {
 
     constructor(props) {
         super(props);
@@ -19,6 +20,10 @@ export default class BodyCellBuilder extends React.PureComponent {
         this.collectContextMenuDatas = this.collectContextMenuDatas.bind(this);
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
+
     /**
      * CollecContextMenuDatas
      *
@@ -151,7 +156,8 @@ export default class BodyCellBuilder extends React.PureComponent {
                         locale: dateLocale,
                         view: view,
                         displayTime: props.displayTime,
-                        sticky: sticky
+                        sticky: sticky,
+                        formatShort: this.props.formatShort
                     });
                     break;
 

package/es/HiTable/BodyCells/CellAccount.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../Tooltip';
@@ -9,7 +10,11 @@ export const styles = theme => ({});
 /**
  * Cette cellule permet d'afficher le nom d'un compte sous la forme d'un label coloré.
  */
-class CellAccount extends React.PureComponent {
+class CellAccount extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { value, color } = this.props;

package/es/HiTable/BodyCells/CellAccountNumber.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Circle } from 'mdi-material-ui';
@@ -44,7 +45,11 @@ export const styles = theme => ({
  * Cette cellule permet d'afficher un numéro de compte
  * Le tooltip affiche les informations complémentaires (country, expiration date..)
  */
-class CellAccountNumber extends React.PureComponent {
+class CellAccountNumber extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const {

package/es/HiTable/BodyCells/CellAddress.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 // @inheritedComponent CellLayout
 
 import React from 'react';
@@ -23,7 +24,11 @@ export const styles = theme => ({
  * - sinon on affiche la ville et le pays
  * - tous les champs définis sont affichés dans le tooltip
  */
-class CellAddress extends React.PureComponent {
+class CellAddress extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, streetAddress, name, city, postalCode, view, country, isoCountry } = this.props;

package/es/HiTable/BodyCells/CellCountry.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -44,7 +45,11 @@ export const styles = theme => ({
  * en vue small : Affiche la valeur courte (id),  tooltip = Image + Value
  *
  */
-class CellCountry extends React.PureComponent {
+class CellCountry extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { label, path, value, view } = this.props;