@hipay/hipay-material-ui 1.0.0-beta.4 → 1.0.0-beta.6

package/HI-CHANGELOG.md

@@ -0,0 +1,42 @@
+## HEAD
+
+Changes. Changes everywhere!
+
+## 1.0.0-beta.4
+###### *?? ?? 2018*
+
+- Corrections de styles sur quelques composants
+- Fix sur le composant HiSelect avec une value vide
+
+### Breaking change
+
+- N/A
+
+#### Component Fixes / Enhancements
+
+- [HiTopBar] Ajout d'une props refButtons poutr récupérer la div contenant les boutons "menu" et "back"
+- [HiSelect] Gestion d'une value vide
+- [HiSelect] Ajout du focus sur l'élement SelectInput à la fermeture du select
+- [HiSelectField] Ajout de la props className
+- [HiSuggestSelectField] Ajout de la props className
+- [HiSuggestSelect] Gestion du focus et du open des suggestions
+- [SelectInput] Suppression du soulignage bleu au hover quand champs en erreur
+- [HiFormControl] Stop de l'event click sur error pour ne pas ouvrir le select
+
+## 1.0.0-beta.3
+###### *28 mars 2018*
+
+- Ajout d'un CHANGELOG HiPay ! (HI-CHANGELOG.md)
+- Corrections de styles sur quelques composants
+
+### Breaking change
+
+- [HiTopBar] Ajout d'une props "searchInput" obligatoire
+
+#### Component Fixes / Enhancements
+
+- [HiTopBar] Ajout du style "overflow: 'inherit'" sur le Collapse si pas "hideable", afin de ne pas cacher les suggestions
+- [HiTopBar] Gestion du focus en props plutôt qu'en state
+- [HiTopBar] Ajout d'une props "searchInput" obligatoire
+- [HiChipSwitch] Ajout d'un title sur la sélection
+- [HiDateRangePicker] Correction du focus

package/HiChip/HiChip.js

@@ -124,12 +124,12 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), _classNames))
         },
         img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon }),
+        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 20
+            size: 16
         }),
         _react2.default.createElement(
             'span',
@@ -140,13 +140,13 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 20
+            size: 16
         }),
         onDelete && _react2.default.createElement(_HiIconBuilder2.default, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 20
+            size: 16
         })
     );
 }

package/HiColoredLabel/HiColoredLabel.js

@@ -106,11 +106,12 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {
-    active: false
+    active: false,
+    color: '#737373'
 };
 
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/HiDatePicker/HiDateRangeSelector.js

@@ -164,7 +164,9 @@ var styles = exports.styles = function styles(theme) {
         },
         dateRangePicker: {
             width: 'calc(100% + 8px)'
-        }
+        },
+        smSelect: {},
+        smRangePicker: {}
     };
 };
 
@@ -189,6 +191,9 @@ var HiDateRangeSelector = function (_React$Component) {
                     if (selectedOption) {
                         _this.props.onChange('from', selectedOption.from.toDate());
                         _this.props.onChange('to', selectedOption.to.toDate());
+                        if (_this.props.returnSelectValue === true) {
+                            _this.props.onChange('period', value);
+                        }
                     }
                 }
             };
@@ -262,7 +267,7 @@ var HiDateRangeSelector = function (_React$Component) {
                 },
                 _react2.default.createElement(
                     _Grid2.default,
-                    { item: true, xs: 12, sm: 4 },
+                    { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
                     _react2.default.createElement(_HiSelect.HiSelectField, {
                         disabled: disabled,
                         error: error,
@@ -283,7 +288,7 @@ var HiDateRangeSelector = function (_React$Component) {
                 ),
                 _react2.default.createElement(
                     _Grid2.default,
-                    { item: true, xs: 12, sm: 8 },
+                    { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
                     _react2.default.createElement(_HiDateRangePicker2.default, (0, _extends3.default)({
                         classes: { root: classes.dateRangePicker },
                         id: idRange,
@@ -306,6 +311,7 @@ HiDateRangeSelector.defaultProps = {
     availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
     defaultPreset: 'cd',
     enableTime: false,
+    returnSelectValue: false,
     locale: 'fr-FR',
     format: 'YYYY-DD-MM',
     translations: {
@@ -316,9 +322,7 @@ HiDateRangeSelector.defaultProps = {
         quarter: 'Quarter',
         week: 'Week',
         year: 'Year',
-
         days: 'days',
-
         custom_period: 'Custom Period',
         yesterday: 'Yesterday',
         last_24h: 'Last 24h',
@@ -402,6 +406,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * true si champs obligatoire
      */
     required: _propTypes2.default.bool,
+    /**
+     * Retourne la valeur du select de la période au change du select
+     */
+    returnSelectValue: _propTypes2.default.bool.isRequired,
     /**
      * Date de fin sélectionnée
      */

package/HiForm/HiFormControl.js

@@ -249,7 +249,7 @@ var HiFormControl = function (_React$PureComponent) {
                         label: label,
                         required: required,
                         disabled: disabled,
-                        focused: focused || hovered
+                        focused: !disabled && (focused || hovered)
                     }, InputLabelProps),
                     !disabled && error && _react2.default.createElement(_mdiMaterialUi.Alert, {
                         className: classes.errorIcon,

package/HiSelect/HiSelect.js

@@ -165,14 +165,11 @@ var HiSelect = function (_React$PureComponent) {
         var valueInOptions = false;
         var val = _this.props.value;
         // No options provided.
-        if (!_this.props.options.length && !val.length) {
+        if (!_this.props.options.length || !val.length) {
             valueInOptions = true;
         }
         // Check if an option match value prop.
         _this.props.options.forEach(function (item) {
-            if (!val.length) {
-                valueInOptions = true;
-            }
             if (!valueInOptions && val.indexOf(item.id) !== -1) {
                 valueInOptions = true;
             }
@@ -304,7 +301,7 @@ var HiSelect = function (_React$PureComponent) {
                 display = translations.one_item_selected.replace('%s', selectedIdList.length);
             } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
                 display = translations.n_items_selected.replace('%s', selectedIdList.length);
-            } else if (this.state.nbOptions === selectedIdList.length) {
+            } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions >= 1) {
                 display = translations.all;
             } else if (selectedIdList.length === 1) {
                 if (type !== 'icon') {

package/HiSelectableList/HiSelectableList.js

@@ -99,7 +99,8 @@ var HiSelectableList = function (_React$PureComponent) {
                 allSelected = _props.allSelected,
                 checkbox = _props.checkbox,
                 hierarchic = _props.hierarchic,
-                others = (0, _objectWithoutProperties3.default)(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
+                disabledIds = _props.disabledIds,
+                others = (0, _objectWithoutProperties3.default)(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
 
 
             var parents = [];
@@ -161,7 +162,8 @@ var HiSelectableList = function (_React$PureComponent) {
                             hoverIcon: hoverIcon,
                             checkedIcon: checkedIcon,
                             checkbox: checkbox,
-                            level: parents.length
+                            level: parents.length,
+                            disabled: disabledIds ? disabledIds.includes(item.id) : false
                         }, others));
                     })
                 )
@@ -203,6 +205,10 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
+    /**
+     * Liste des ids des items disabled
+     */
+    disabledIds: _propTypes2.default.array,
     /**
      * Tableau associatif : parentId => [children objects]
      */

package/HiSelectableList/HiSelectableListItem.js

@@ -220,6 +220,7 @@ var HiSelectableListItem = function (_React$Component) {
                 case 'image':
                     var img = '';
                     if (typeof item.img !== 'undefined') {
+
                         img = _react2.default.createElement('img', { src: item.img, className: classes.imgListItem });
                     }
 
@@ -440,18 +441,38 @@ HiSelectableListItem.defaultProps = {
     }
 };
 HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: _propTypes2.default.bool,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: _propTypes2.default.node,
     /**
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
     /**
-     * État de l'élément
+     * Applique le style et désactive le click
      */
-    selected: _propTypes2.default.bool,
+    disabled: _propTypes2.default.bool,
     /**
-     * Type de l'élément
+     * Si "true", liste avec hierarchie
      */
-    type: _propTypes2.default.string,
+    hierarchic: _propTypes2.default.bool,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+     */
+    hoverIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: _propTypes2.default.node,
+    /**
+     * Items sélectionné partiellement
+     */
+    indeterminate: _propTypes2.default.bool,
     /**
      * Élément dont la structure attendue dépend du type
      * paramètres requis:
@@ -459,65 +480,45 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
      * - label: string
      */
     item: _propTypes2.default.object.isRequired,
+    /**
+     * Padding par défaut des éléments
+     */
+    leftPadding: _propTypes2.default.number,
     /**
      * Niveau de l'item
      */
     level: _propTypes2.default.number,
     /**
-     * Affiche l'item en tant qu'item parent d'un groupe
+     * Nombre d'items enfants
      */
-    parentItem: _propTypes2.default.bool,
+    nbChildren: _propTypes2.default.number,
     /**
      * Fonction de callback à la sélection de l'élément
      */
     onSelect: _propTypes2.default.func,
     /**
-     * Applique le style et désactive le click
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
      */
-    disabled: _propTypes2.default.bool,
+    parentIcon: _propTypes2.default.node,
     /**
-     * Items sélectionné partiellement
+     * Affiche l'item en tant qu'item parent d'un groupe
      */
-    indeterminate: _propTypes2.default.bool,
+    parentItem: _propTypes2.default.bool,
     /**
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: _propTypes2.default.bool,
     /**
-     * Nombre d'items enfants
+     * État de l'élément
      */
-    nbChildren: _propTypes2.default.number,
+    selected: _propTypes2.default.bool,
     /**
      * Traductions (par défaut en anglais)
      */
     translations: _propTypes2.default.object,
     /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
-     */
-    icon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
-     */
-    parentIcon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-     */
-    hoverIcon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: _propTypes2.default.node,
-    /**
-     * Affiche une checkbox
-     */
-    checkbox: _propTypes2.default.bool,
-    /**
-     * Si "true", liste avec hierarchie
-     */
-    hierarchic: _propTypes2.default.bool,
-    /**
-     * Padding par défaut des éléments
+     * Type de l'élément
      */
-    leftPadding: _propTypes2.default.number
+    type: _propTypes2.default.string
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);

package/HiTable/BodyCells/CellCountry.js

@@ -112,7 +112,7 @@ var CellCountry = function (_React$PureComponent) {
                 view = _props.view;
 
 
-            var path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
+            var path = '/static/hmus/images/countries/' + isoCode.toLowerCase() + '.svg';
 
             var tooltipContent = _react2.default.createElement(
                 'div',

package/HiTable/HiTable.js

@@ -802,7 +802,7 @@ var HiTable = function (_React$Component) {
                         _react2.default.createElement(
                             _HiButton2.default,
                             {
-                                raised: true,
+                                variant: 'raised',
                                 color: 'primary',
                                 className: classes.backToTopButton,
                                 onClick: function onClick() {

package/HiTable/HiTableFooterScroll.js

@@ -138,7 +138,7 @@ var HiTableFooterScroll = function (_React$Component) {
             ) : _react2.default.createElement(
                 _HiButton2.default,
                 {
-                    raised: true,
+                    variant: 'raised',
                     color: 'primary',
                     className: classes.loadMoreButton,
                     onClick: function onClick() {

package/HiTopBar/HiTopBar.js

@@ -508,10 +508,6 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur l'accountSelector'
      */
     onClickAccountSelector: _propTypes2.default.func,
-    /**
-     * Fonction de callback au click sur le menu
-     */
-    onClickInputButton: _propTypes2.default.func.isRequired,
     /**
      * Fonction de callback au click sur le menu
      */

package/es/HiChip/HiChip.js

@@ -87,12 +87,12 @@ function HiChip(props) {
             })
         },
         img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon }),
+        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 20
+            size: 16
         }),
         React.createElement(
             'span',
@@ -103,13 +103,13 @@ function HiChip(props) {
             className: classNames(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 20
+            size: 16
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 20
+            size: 16
         })
     );
 }

package/es/HiColoredLabel/HiColoredLabel.js

@@ -74,11 +74,12 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {
-    active: false
+    active: false,
+    color: '#737373'
 };
 
 export default withStyles(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -105,7 +105,9 @@ export const styles = theme => ({
     },
     dateRangePicker: {
         width: 'calc(100% + 8px)'
-    }
+    },
+    smSelect: {},
+    smRangePicker: {}
 });
 
 class HiDateRangeSelector extends React.Component {
@@ -125,6 +127,9 @@ class HiDateRangeSelector extends React.Component {
                 if (selectedOption) {
                     this.props.onChange('from', selectedOption.from.toDate());
                     this.props.onChange('to', selectedOption.to.toDate());
+                    if (this.props.returnSelectValue === true) {
+                        this.props.onChange('period', value);
+                    }
                 }
             }
         };
@@ -187,7 +192,7 @@ class HiDateRangeSelector extends React.Component {
             },
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 4 },
+                { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
                 React.createElement(HiSelectField, {
                     disabled: disabled,
                     error: error,
@@ -208,7 +213,7 @@ class HiDateRangeSelector extends React.Component {
             ),
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 8 },
+                { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
                 React.createElement(HiDateRangePicker, _extends({
                     classes: { root: classes.dateRangePicker },
                     id: idRange,
@@ -229,6 +234,7 @@ HiDateRangeSelector.defaultProps = {
     availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
     defaultPreset: 'cd',
     enableTime: false,
+    returnSelectValue: false,
     locale: 'fr-FR',
     format: 'YYYY-DD-MM',
     translations: {
@@ -239,9 +245,7 @@ HiDateRangeSelector.defaultProps = {
         quarter: 'Quarter',
         week: 'Week',
         year: 'Year',
-
         days: 'days',
-
         custom_period: 'Custom Period',
         yesterday: 'Yesterday',
         last_24h: 'Last 24h',
@@ -325,6 +329,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * true si champs obligatoire
      */
     required: PropTypes.bool,
+    /**
+     * Retourne la valeur du select de la période au change du select
+     */
+    returnSelectValue: PropTypes.bool.isRequired,
     /**
      * Date de fin sélectionnée
      */

package/es/HiForm/HiFormControl.js

@@ -176,7 +176,7 @@ class HiFormControl extends React.PureComponent {
                     label: label,
                     required: required,
                     disabled: disabled,
-                    focused: focused || hovered
+                    focused: !disabled && (focused || hovered)
                 }, InputLabelProps),
                 !disabled && error && React.createElement(Alert, {
                     className: classes.errorIcon,

package/es/HiSelect/HiSelect.js

@@ -85,14 +85,11 @@ class HiSelect extends React.PureComponent {
         let valueInOptions = false;
         const val = this.props.value;
         // No options provided.
-        if (!this.props.options.length && !val.length) {
+        if (!this.props.options.length || !val.length) {
             valueInOptions = true;
         }
         // Check if an option match value prop.
         this.props.options.forEach(item => {
-            if (!val.length) {
-                valueInOptions = true;
-            }
             if (!valueInOptions && val.indexOf(item.id) !== -1) {
                 valueInOptions = true;
             }
@@ -216,7 +213,7 @@ class HiSelect extends React.PureComponent {
             display = translations.one_item_selected.replace('%s', selectedIdList.length);
         } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
             display = translations.n_items_selected.replace('%s', selectedIdList.length);
-        } else if (this.state.nbOptions === selectedIdList.length) {
+        } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions >= 1) {
             display = translations.all;
         } else if (selectedIdList.length === 1) {
             if (type !== 'icon') {

package/es/HiSelectableList/HiSelectableList.js

@@ -37,9 +37,10 @@ class HiSelectableList extends React.PureComponent {
             checkedIcon,
             allSelected,
             checkbox,
-            hierarchic
+            hierarchic,
+            disabledIds
         } = _props,
-              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
+              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
 
         let parents = [];
 
@@ -100,7 +101,8 @@ class HiSelectableList extends React.PureComponent {
                         hoverIcon: hoverIcon,
                         checkedIcon: checkedIcon,
                         checkbox: checkbox,
-                        level: parents.length
+                        level: parents.length,
+                        disabled: disabledIds ? disabledIds.includes(item.id) : false
                     }, others));
                 })
             )
@@ -140,6 +142,10 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object,
+    /**
+     * Liste des ids des items disabled
+     */
+    disabledIds: PropTypes.array,
     /**
      * Tableau associatif : parentId => [children objects]
      */