@hipay/hipay-material-ui 2.0.0-beta.58 → 2.0.0-beta.60

package/HiSelectNew/HiSelectContent.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = exports.filterValue = exports.styles = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -70,6 +70,12 @@ var styles = function styles(theme) {
     })
   };
 };
+
+exports.styles = styles;
+
+var filterValue = function filterValue(item, searchValue) {
+  return searchValue === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(searchValue.toLowerCase())) !== -1;
+};
 /**
  *
  * Utilisé pour tous types de selects dans les formulaires.
@@ -86,7 +92,7 @@ var styles = function styles(theme) {
  */
 
 
-exports.styles = styles;
+exports.filterValue = filterValue;
 
 var HiSelectContent =
 /*#__PURE__*/
@@ -173,7 +179,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
@@ -203,13 +209,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
+          })] : []), (0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -245,22 +251,22 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       // build item list
-      var itemList = (0, _toConsumableArray2.default)(loading ? [{
+      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
-        return item.label && (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
-      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+        return item.label && _this.props.filterFunc(item, search);
+      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []).concat((0, _toConsumableArray2.default)(options))));
+      })] : []), (0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList
       };
@@ -395,7 +401,8 @@ HiSelectContent.defaultProps = {
     n_children: '%s items',
     one_child: '%s item'
   },
-  type: 'text'
+  type: 'text',
+  filterFunc: filterValue
 };
 HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
   autoHeight: _propTypes.default.bool,
@@ -420,6 +427,11 @@ HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   fallbackImage: _propTypes.default.string,
 
+  /*
+   * Fonction de filtrage custom
+   */
+  filterFunc: _propTypes.default.func,
+
   /**
    * Affiche l'élément 'All'
    */

package/HiSelectNew/HiSelectInput.js

@@ -172,8 +172,6 @@ function (_React$PureComponent) {
 
       if (_this.props.onKeyDown) {
         _this.props.onKeyDown(event);
-
-        event.preventDefault();
       } else if (key === 'down' || key === 'up') {
         _this.props.onClick();
       } else if (key === 'enter' && _this.props.onSubmit) {
@@ -215,9 +213,11 @@ function (_React$PureComponent) {
     _this.handleBlur = function (event) {
       if ((!_this.input || !_this.input.contains(event.relatedTarget)) && _this.props.onBlur) {
         _this.props.onBlur(event);
-      } else if (_this.input && (!_this.resetIcon || !_this.resetIcon.contains(event.relatedTarget))) {
-        _this.input.focus();
       }
+      /* else if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
+         this.input.focus();
+      }*/
+
     };
 
     _this.ref = function (el) {

package/HiSelectableList/HiSelectableListItem.js

@@ -71,7 +71,7 @@ var styles = function styles(theme) {
         display: 'block'
       },
       '&$inline': {
-        maxHeight: 40,
+        minHeight: 40,
         '& $secondaryLabel': {
           display: 'inline-block'
         }
@@ -122,12 +122,13 @@ var styles = function styles(theme) {
       minWidth: '50%',
       padding: '5px 0',
       '&$listItemContentSelected': {
-        marginBottom: -3,
+        marginBottom: 1,
         marginLeft: -4
       },
       '& strong': {
         fontWeight: theme.typography.fontWeightMedium
-      }
+      },
+      display: 'contents'
     }),
     listItemContentSelected: {},
     label: {
@@ -157,7 +158,6 @@ var styles = function styles(theme) {
       fontSize: 12,
       textOverflow: 'ellipsis',
       textAlign: 'right',
-      padding: '4px 0px 4px 8px',
       alignSelf: 'center'
     }),
     img: {
@@ -171,9 +171,9 @@ var styles = function styles(theme) {
       verticalAlign: 'middle'
     },
     labelContent: {
-      display: 'flex',
+      display: '-webkit-flex',
       alignItems: 'center',
-      maxWidth: '70%',
+      maxWidth: '85%',
       '&$labelWithoutSecondaryInline': {
         maxWidth: '100%'
       }
@@ -189,9 +189,6 @@ var styles = function styles(theme) {
       },
       '&$infosWithoutSecondaryInline': {
         paddingLeft: 28
-      },
-      '&$infosWithSecondaryInline': {
-        marginTop: -8
       }
     },
     infosInlineWithoutSecondary: {},
@@ -278,7 +275,8 @@ function (_React$PureComponent) {
       }
 
       return _react.default.createElement("div", {
-        className: classes.label
+        className: classes.label,
+        title: label
       }, label);
     }
   }, {

package/README.md

@@ -226,7 +226,7 @@ npm install -g conventional-changelog-cli
 npm install -g cz-conventional-changelog
 ```
 
-1. Changer la version dans packages/hipay-material-ui/package.json
+1. Changer la version dans package.json et dans packages/hipay-material-ui/package.json
 2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
 3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
 4. Build : ```npm run build```

package/es/HiCell/CellNumeric.js

@@ -25,7 +25,7 @@ class CellNumeric extends React.PureComponent {
     let title = '';
 
     if (currency) {
-      displayedValue = formatCurrencyAmount(value, view, locale, currency);
+      displayedValue = formatCurrencyAmount(value, view, locale, currency, precision);
       title = formatCurrencyAmount(value, 'l', locale, currency);
     } else {
       displayedValue = formatNumber(value, view, locale, precision);

package/es/HiColoredLabel/HiColoredLabel.js

@@ -8,7 +8,7 @@ import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 import { fade } from '../styles/colorManipulator';
 export const styles = theme => ({
-  root: _objectSpread({}, theme.typography.b3, {
+  root: {
     display: 'inline-block',
     alignItems: 'baseline',
     maxWidth: '100%',
@@ -18,7 +18,12 @@ export const styles = theme => ({
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     lineHeight: 1
-  }),
+  },
+  body1: _objectSpread({}, theme.typography.b1),
+  body2: _objectSpread({}, theme.typography.b2),
+  body3: _objectSpread({}, theme.typography.b3),
+  body4: _objectSpread({}, theme.typography.b4),
+  body5: _objectSpread({}, theme.typography.b5),
   color: {
     fontWeight: 400
   },
@@ -111,6 +116,7 @@ function HiColoredLabel(props) {
   const {
     classes,
     className,
+    fontSize,
     label,
     color,
     active,
@@ -119,7 +125,7 @@ function HiColoredLabel(props) {
     style,
     theme
   } = props,
-        other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
+        other = _objectWithoutProperties(props, ["classes", "className", "fontSize", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
 
   const isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   const isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
@@ -129,7 +135,12 @@ function HiColoredLabel(props) {
       [classes.activeColor]: active,
       [classes.outlined]: outlined,
       [classes[`activeColor${capitalize(color)}`]]: active && isHiColor,
-      [classes[`color${capitalize(color)}`]]: !active && isHiColor
+      [classes[`color${capitalize(color)}`]]: !active && isHiColor,
+      [classes.body1]: fontSize >= 15,
+      [classes.body2]: fontSize === 14,
+      [classes.body3]: fontSize === 13,
+      [classes.body4]: fontSize === 12,
+      [classes.body5]: fontSize <= 11
     }, className),
     style: _objectSpread({}, style, isHexColor && {
       backgroundColor: active ? color : fade(color, 0.08),
@@ -162,6 +173,11 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   color: PropTypes.string,
 
+  /**
+   * Taille du text
+   */
+  fontSize: PropTypes.number,
+
   /**
    * Graisse du text
    */
@@ -180,6 +196,7 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
 HiColoredLabel.defaultProps = {
   active: false,
   color: 'primary',
+  fontSize: 15,
   outlined: false
 };
 export default withStyles(styles, {

package/es/HiDatePicker/HiDatePicker.js

@@ -169,7 +169,8 @@ class HiDatePicker extends React.Component {
   renderYearPickerOverlay(propsOverlay) {
     const yearPickerProps = {
       value: this.state.currentMonth,
-      onChange: this.handleCurrentMonthChange
+      onChange: this.handleCurrentMonthChange,
+      disableFutureDays: this.props.disableFutureDays
     };
     return React.createElement(YearPickerOverlay, _extends({
       key: 'year-picker-overlay'
@@ -240,7 +241,10 @@ class HiDatePicker extends React.Component {
     const inputProps = _objectSpread({}, onReset && {
       onReset: this.handleReset
     }, props, {
-      onChange: this.handleInputChange
+      onChange: this.handleInputChange,
+      HiInputProps: {
+        onSubmit: this.props.onSubmit
+      }
     });
 
     return React.createElement("div", {
@@ -338,6 +342,11 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onReset: PropTypes.func,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: PropTypes.func,
+
   /**
    * Traductions
    */

package/es/HiDatePicker/HiDateRangePicker.js

@@ -171,6 +171,29 @@ class HiDateRangePicker extends React.Component {
       }));
     };
 
+    this.handleKeyDown = name => event => {
+      if (event.key === 'Tab' && !event.shiftKey) {
+        let nodeName = document.activeElement.nodeName;
+
+        if (this.props[name] && nodeName === 'INPUT' && document.activeElement.nextSibling.children.length > 0) {
+          document.activeElement.nextSibling.focus();
+        } else if (name === 'from') {
+          this.handleDayPickerBlur('from');
+          this.handleDayPickerFocus('to');
+          this.toInput.handleInputFocus();
+          setTimeout(() => {
+            document.getElementById(`${this.props.id}-to`).focus();
+          }, 1);
+        } else if (name === 'to') {
+          this.handleDayPickerBlur('to');
+          this.toInput.handleInputBlur(event);
+          setTimeout(() => {
+            document.activeElement.blur();
+          }, 1);
+        }
+      }
+    };
+
     this.openPanel = panel => {
       this.setState({
         openedPanel: panel
@@ -246,7 +269,7 @@ class HiDateRangePicker extends React.Component {
       const yearPickerProps = {
         value: this.state.currentMonth,
         onChange: this.handleCurrentMonthChange,
-        disabledFutureDays: this.props.disableFutureDays
+        disableFutureDays: this.props.disableFutureDays
       };
       return React.createElement(YearPickerOverlay, _extends({
         key: `${name}-year-picker-overlay`
@@ -385,7 +408,10 @@ class HiDateRangePicker extends React.Component {
     }, {
       id: `${id}-from`,
       onChange: this.handleInputChange('from'),
-      disabled
+      disabled,
+      HiInputProps: {
+        onSubmit: this.props.onSubmit
+      }
     });
 
     const toInputProps = _objectSpread({}, onReset && {
@@ -397,7 +423,10 @@ class HiDateRangePicker extends React.Component {
     }, {
       id: `${id}-to`,
       onChange: this.handleInputChange('to'),
-      disabled
+      disabled,
+      HiInputProps: {
+        onSubmit: this.props.onSubmit
+      }
     });
 
     const toClass = classNames(classes.toInput, {
@@ -408,8 +437,8 @@ class HiDateRangePicker extends React.Component {
       className: classNames(classes.root, classes.rangePickerContainer)
     }, React.createElement("div", {
       className: classes.fromInput,
-      onFocus: () => this.handleDayPickerFocus('from') // onBlur={() => this.handleDayPickerBlur('from')}
-
+      onFocus: () => this.handleDayPickerFocus('from'),
+      onKeyDown: this.handleKeyDown('from')
     }, React.createElement("div", null, React.createElement(DayPickerInput, {
       key: this.state.keyFrom,
       ref: el => {
@@ -429,7 +458,8 @@ class HiDateRangePicker extends React.Component {
     }))), React.createElement("div", {
       className: toClass,
       onFocus: () => this.handleDayPickerFocus('to'),
-      onBlur: () => this.handleDayPickerBlur('to')
+      onBlur: () => this.handleDayPickerBlur('to'),
+      onKeyDown: this.handleKeyDown('to')
     }, React.createElement(DayPickerInput, {
       key: this.state.keyTo,
       ref: el => {
@@ -443,8 +473,7 @@ class HiDateRangePicker extends React.Component {
       inputProps: toInputProps,
       format: enableTime ? `${format} HH:mm` : format,
       formatDate: MomentLocaleUtils.formatDate,
-      parseDate: MomentLocaleUtils.parseDate // onDayChange={(day) => this.handleDayChange('to', day)}
-      ,
+      parseDate: MomentLocaleUtils.parseDate,
       placeholder: ''
     })));
 
@@ -597,6 +626,11 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onReset: PropTypes.func,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: PropTypes.func,
+
   /**
    * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
    */

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -2,7 +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 moment from 'moment';
+import moment from 'moment-timezone';
 import { findDOMNode } from 'react-dom';
 import Grid from '@material-ui/core/Grid';
 import withStyles from '../styles/withStyles';
@@ -52,7 +52,7 @@ export function yearAndQuarter(format, date, t) {
   const indexM = split.findIndex(findM);
   return indexY < indexM ? date.format(`${split[indexY]}${s}[${t.short_quarter}]Q`) : date.format(`[${t.short_quarter}]Q${s}${split[indexY]}`);
 }
-export function buildDateRangeOptionByKey(key, t, format) {
+export function buildDateRangeOptionByKey(key, t, format, timezoneName) {
   let from;
   let label;
   let info;
@@ -67,71 +67,71 @@ export function buildDateRangeOptionByKey(key, t, format) {
   switch (key) {
     case 'custom':
       label = t.custom_period;
-      from = moment().subtract(15, 'day').startOf('day');
-      to = moment().endOf('day');
+      from = moment().tz(timezoneName).subtract(15, 'day').startOf('day');
+      to = moment().tz(timezoneName).endOf('day');
       type = 'primary-highlight';
       break;
 
     case 'cd':
       label = t.today;
-      from = moment().startOf('day');
-      to = moment().endOf('day');
+      from = moment().tz(timezoneName).startOf('day');
+      to = moment().tz(timezoneName).endOf('day');
       info = `${from.format(format)}`;
       break;
 
     case 'pd':
       label = t.yesterday;
-      from = moment().subtract(1, 'day').startOf('day');
-      to = moment().subtract(1, 'day').endOf('day');
+      from = moment().tz(timezoneName).subtract(1, 'day').startOf('day');
+      to = moment().tz(timezoneName).subtract(1, 'day').endOf('day');
       info = `${from.format(format)}`;
       break;
 
     case 'cw':
       label = t.current_week;
-      from = moment().startOf('week');
-      to = moment();
+      from = moment().tz(timezoneName).startOf('week');
+      to = moment().tz(timezoneName);
       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');
+      from = moment().tz(timezoneName).subtract(1, 'week').startOf('week');
+      to = moment().tz(timezoneName).subtract(1, 'week').endOf('week');
       info = `${t.short_week}${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
       break;
 
     case 'cm':
       label = t.current_month;
-      from = moment().startOf('month');
-      to = moment();
+      from = moment().tz(timezoneName).startOf('month');
+      to = moment().tz(timezoneName);
       info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'pm':
       label = t.previous_month;
-      from = moment().subtract(1, 'month').startOf('month');
-      to = moment().subtract(1, 'month').endOf('month');
+      from = moment().tz(timezoneName).subtract(1, 'month').startOf('month');
+      to = moment().tz(timezoneName).subtract(1, 'month').endOf('month');
       info = `${yearAndMonth(format, from)}, ${from.daysInMonth()} ${t.days}`;
       break;
 
     case 'cq':
       label = t.current_quarter;
-      from = moment().startOf('quarter');
-      to = moment();
+      from = moment().tz(timezoneName).startOf('quarter');
+      to = moment().tz(timezoneName);
       info = `${yearAndQuarter(format, from, t)}, ${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'pq':
       label = t.previous_quarter;
-      from = moment().subtract(1, 'quarter').startOf('quarter');
-      to = moment().subtract(1, 'quarter').endOf('quarter');
+      from = moment().tz(timezoneName).subtract(1, 'quarter').startOf('quarter');
+      to = moment().tz(timezoneName).subtract(1, 'quarter').endOf('quarter');
       info = `${yearAndQuarter(format, from, t)}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'cy':
       label = t.current_year;
-      from = moment().startOf('year');
-      to = moment();
+      from = moment().tz(timezoneName).startOf('year');
+      to = moment().tz(timezoneName);
       info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
@@ -190,8 +190,8 @@ class HiDateRangeSelector extends React.Component {
       const selectedOption = this.options.find(option => option.id === value);
 
       if (selectedOption) {
-        this.props.onChange('from', selectedOption.from.toDate());
-        this.props.onChange('to', selectedOption.to.toDate());
+        this.props.onChange('from', new Date(selectedOption.from.format('YYYY-MM-DD HH:mm:ss')));
+        this.props.onChange('to', new Date(selectedOption.to.format('YYYY-MM-DD HH:mm:ss')));
         this.props.onChange('fromError', false);
         this.props.onChange('toError', false);
       }
@@ -201,8 +201,7 @@ class HiDateRangeSelector extends React.Component {
       }
     };
 
-    this.handleSelectChange = this.handleSelectChange.bind(this);
-    this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
+    this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format, props.timezoneName));
     this.state = {
       selectedPreset: props.defaultPreset,
       containerWidth: 0
@@ -299,7 +298,8 @@ class HiDateRangeSelector extends React.Component {
       classes: {
         root: classes.dateSelect
       },
-      staticPosition: staticPosition
+      staticPosition: staticPosition,
+      onSubmit: this.props.onSubmit
     }, selectProps))), React.createElement(Grid, {
       item: true,
       xs: 12,
@@ -341,6 +341,7 @@ HiDateRangeSelector.defaultProps = {
   format: 'YYYY-DD-MM',
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
+  timezoneName: 'Europe/Paris',
   translations: {
     today: 'Today',
     hour: 'Hour',
@@ -459,6 +460,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onChange: PropTypes.func.isRequired,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: PropTypes.func,
+
   /**
    * true si champs obligatoire
    */
@@ -479,6 +485,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   staticPosition: PropTypes.bool,
 
+  /**
+   * Timezone de l'utilisateur
+   */
+  timezoneName: PropTypes.string,
+
   /**
    * Date de fin sélectionnée
    */

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -10,8 +10,15 @@ class YearPickerOverlay extends React.Component {
     super(props);
     this.years = [];
     this.handleYearClick = this.handleYearClick.bind(this);
+    let minDate = props.minimumDate;
+
+    if (!minDate) {
+      let today = new Date();
+      minDate = new Date(today.getFullYear() - 5, today.getMonth(), today.getDate()); // by default 5 years from now
+    }
+
     const currentYear = new Date().getFullYear();
-    const minimumYear = props.minimumDate.getFullYear();
+    const minimumYear = minDate.getFullYear();
     this.years = [currentYear]; // get years from minimum date to now
 
     if (!props.disablePastDays && currentYear > minimumYear) {
@@ -55,8 +62,6 @@ class YearPickerOverlay extends React.Component {
 }
 
 YearPickerOverlay.defaultProps = {
-  minimumDate: new Date(2013, 4, 1),
-  // by default 1 May 2013
   translations: {
     year: 'Year'
   }