@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

package/es/HiCell/CellRate.js

@@ -11,7 +11,8 @@ export const styles = theme => ({
     justifyContent: 'center',
     overflow: 'hidden',
     position: 'relative',
-    textAlign: 'right'
+    textAlign: 'right',
+    paddingTop: '1em'
   },
   trendChipIcon: {
     width: 14,
@@ -29,7 +30,6 @@ export const styles = theme => ({
     color: theme.palette.neutral.main
   },
   spanIndicator: {
-    fontSize: 11,
     float: 'right',
     color: '#737373',
     position: 'relative',
@@ -92,7 +92,10 @@ class CellRate extends React.PureComponent {
     }, React.createElement("div", {
       className: typeof indicator === 'undefined' && classes.rateDiv || ''
     }, displayedRate, trendIcon), typeof indicator !== 'undefined' && React.createElement("span", {
-      className: classes.spanIndicator
+      className: classes.spanIndicator,
+      style: {
+        fontSize: view !== 'l' ? 10 : 11
+      }
     }, indicator));
   }
 

package/es/HiCell/CellSentinel.js

@@ -25,21 +25,18 @@ class CellSentinel extends React.PureComponent {
       reviewer,
       value
     } = this.props;
-
-    const _label = label ? label : value;
-
-    const _letter = letter ? letter : _label[0];
-
+    const effectiveLabel = label || value;
+    const effectiveLetter = letter || effectiveLabel[0];
     return React.createElement("div", {
       className: classes.flexContent,
-      title: reviewer ? `${_label}\n${reviewer}` : _label
+      title: reviewer ? `${effectiveLabel}\n${reviewer}` : effectiveLabel
     }, React.createElement(HiColoredLabel, {
       active: active,
       classes: {
         root: classes.label
       },
       color: color,
-      label: _letter,
+      label: effectiveLetter,
       outlined: outlined
     }));
   }
@@ -51,14 +48,14 @@ CellSentinel.defaultProps = {
   outlined: false
 };
 CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: PropTypes.bool,
   classes: PropTypes.object,
-  value: PropTypes.string,
   color: PropTypes.string,
   label: PropTypes.string,
   letter: PropTypes.string,
-  active: PropTypes.bool,
+  outlined: PropTypes.bool,
   reviewer: PropTypes.string,
-  outlined: PropTypes.bool
+  value: PropTypes.string
 } : {};
 export default withStyles(styles, {
   name: 'HmuiCellSentinel'

package/es/HiCell/CellTextStyled.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import HiColoredLabel from '../HiColoredLabel';
 const styleRoot = {
   width: '100%',
@@ -43,7 +44,7 @@ const CellTextStyled = ({
   const valueString = label ? label.toString() : value.toString();
   return React.createElement("div", {
     style: styleRoot,
-    title: title ? title : valueString
+    title: title || valueString
   }, color ? React.createElement(HiColoredLabel, {
     style: styleColorLabel,
     label: valueString,
@@ -54,4 +55,30 @@ const CellTextStyled = ({
   }, valueString));
 };
 
+CellTextStyled.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Will forward active prop to HiColoredLabel
+   */
+  active: PropTypes.bool,
+
+  /**
+   * Couleur du text & du background
+   */
+  color: PropTypes.string,
+
+  /**
+   * Label
+   */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Tooltip
+   */
+  title: PropTypes.string,
+
+  /**
+   * Value
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+} : {};
 export default CellTextStyled;

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.b1, {
+  root: _objectSpread({}, theme.typography.b3, {
     display: 'inline-block',
     alignItems: 'baseline',
     maxWidth: '100%',

package/es/HiDatePicker/Caption.js

@@ -2,35 +2,34 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from '../styles/withStyles';
+import HiButton from '../HiButton';
 export const styles = theme => ({
   caption: _objectSpread({
     display: 'table-caption',
     height: 40,
     textAlign: 'center',
-    padding: '10px 0'
+    padding: '4px 0'
   }, theme.typography.body1, {
     color: theme.palette.neutral.main
-  }),
-  clickableSpan: {
-    cursor: 'pointer'
-  }
+  })
 });
 
 const Caption = ({
   classes,
   date,
+  locale = 'en_US',
   localeUtils,
   onMonthClick,
   onYearClick
 }) => {
-  const months = localeUtils.getMonths();
+  const months = localeUtils.getMonths(locale);
   return React.createElement("div", {
     className: classes.caption
-  }, React.createElement("span", {
-    className: classes.clickableSpan,
+  }, React.createElement(HiButton, {
+    size: "small",
     onClick: onMonthClick
-  }, months[date.getMonth()]), "\xA0", React.createElement("span", {
-    className: classes.clickableSpan,
+  }, months[date.getMonth()]), React.createElement(HiButton, {
+    size: "small",
     onClick: onYearClick
   }, date.getFullYear()));
 };
@@ -46,6 +45,11 @@ Caption.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   date: PropTypes.object.isRequired,
 
+  /**
+   * ReactDayPicker prop
+   */
+  locale: PropTypes.string,
+
   /**
    * ReactDayPicker prop
    */

package/es/HiDatePicker/HiDatePicker.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import MomentLocaleUtils from 'react-day-picker/moment';
+import HiLocaleUtils from './hiLocaleUtils';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import withStyles from '../styles/withStyles';
 import Caption from './Caption';
@@ -216,12 +217,13 @@ class HiDatePicker extends React.Component {
       navbarElement: props2 => React.createElement(NavBar, _extends({
         showClockButton: enableTime,
         onClockClick: this.handleClockClick
-      }, props2)),
+      }, props2, {
+        localeUtils: HiLocaleUtils
+      })),
       captionElement: this.renderCaption,
       classNames: classes,
       disabledDays: effectiveDisabledDays,
       selectedDays: typeof value === 'object' ? value : undefined,
-      locale,
       firstDayOfWeek: 1,
       fromMonth: minimumDate,
       modifiers: {
@@ -230,7 +232,10 @@ class HiDatePicker extends React.Component {
       },
       modifiersStyles,
       month: currentMonth
-    }, props);
+    }, props, {
+      locale,
+      localeUtils: HiLocaleUtils
+    });
 
     const inputProps = _objectSpread({}, onReset && {
       onReset: this.handleReset

package/es/HiDatePicker/HiDateRangePicker.js

@@ -1,9 +1,10 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import MomentLocaleUtils from 'react-day-picker/moment';
+import HiLocaleUtils from './hiLocaleUtils';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
@@ -21,7 +22,7 @@ import HiFormControl from '../HiForm/HiFormControl';
 
 class HiDateRangePicker extends React.Component {
   constructor(props) {
-    super();
+    super(props);
 
     this.handleDayChange = (name, day) => {
       if (day) {
@@ -58,12 +59,11 @@ class HiDateRangePicker extends React.Component {
     this.onDayToClick = day => {
       let change = moment(day) >= moment(this.props.from);
 
-      if (change && this.props.disableFutureDays && moment(day) > moment()) {
+      if (change && this.props.disableFutureDays && moment(day).utc() > moment().utc().endOf('day')) {
         change = false;
       }
 
       if (change) {
-        console.log(_objectSpread({}, this.props));
         this.handleDayChange('to', day);
         document.activeElement.blur();
       }
@@ -87,9 +87,9 @@ class HiDateRangePicker extends React.Component {
       const {
         translations
       } = this.props;
-      let date = undefined;
-      let error = undefined;
-      let now = new Date();
+      let date;
+      let error;
+      const now = new Date();
       const {
         minimumDate,
         disableFutureDays,
@@ -99,7 +99,7 @@ class HiDateRangePicker extends React.Component {
       if (day instanceof Date) {
         date = day;
       } else if (day) {
-        let parsedValue = moment(day, this.props.format, true);
+        const parsedValue = moment(day, this.props.format, true);
 
         if (parsedValue.isValid()) {
           date = parsedValue.toDate();
@@ -109,14 +109,14 @@ class HiDateRangePicker extends React.Component {
       }
 
       if (date) {
-        let comparativeDate = name === 'to' ? moment(this.props.from) : moment(this.props.to);
+        const comparativeDate = name === 'to' ? moment(this.props.from) : moment(this.props.to);
 
         if (name === 'to' && comparativeDate > moment(date) || name === 'from' && comparativeDate < moment(date)) {
           error = translations.to_superior_from;
-        } else if (date < minimumDate) {
-          error = translations.date_inferior_min_date.replace("%s", moment(minimumDate).format(format));
-        } else if (disableFutureDays && date > now) {
-          error = translations.date_superior_max_date.replace("%s", moment().format(format));
+        } else if (moment(date).utc() < moment(minimumDate).utc().startOf('day')) {
+          error = translations.date_inferior_min_date.replace('%s', moment(minimumDate).format(format));
+        } else if (disableFutureDays && moment(date).utc() > moment(now).utc().endOf('day')) {
+          error = translations.date_superior_max_date.replace('%s', moment().format(format));
         }
 
         if (!this.props.enableTime) {
@@ -165,10 +165,10 @@ class HiDateRangePicker extends React.Component {
 
     this.handleReset = name => {
       this.handleChange(name, undefined);
-      this.setState({
-        keyFrom: this.state.keyFrom === 1 ? 2 : 1,
-        keyTo: this.state.keyTo === 1 ? 2 : 1
-      });
+      this.setState(prevState => ({
+        keyFrom: prevState.keyFrom === 1 ? 2 : 1,
+        keyTo: prevState.keyTo === 1 ? 2 : 1
+      }));
     };
 
     this.openPanel = panel => {
@@ -197,7 +197,7 @@ class HiDateRangePicker extends React.Component {
         staticPosition
       });
 
-      switch (this.state['openedPanel']) {
+      switch (this.state.openedPanel) {
         case 'time':
           return this.renderTimePickerOverlay(name, rangeOverlayProps);
 
@@ -208,6 +208,7 @@ class HiDateRangePicker extends React.Component {
           return this.renderYearPickerOverlay(name, rangeOverlayProps);
 
         case 'calendar':
+        default:
           return React.createElement(Overlay, rangeOverlayProps);
       }
     };
@@ -222,7 +223,7 @@ class HiDateRangePicker extends React.Component {
 
     this.renderMonthPickerOverlay = (name, propsOverlay) => {
       const monthPickerProps = {
-        value: this.state['currentMonth'],
+        value: this.state.currentMonth,
         onChange: this.handleCurrentMonthChange
       };
       return React.createElement(MonthPickerOverlay, _extends({
@@ -243,7 +244,7 @@ class HiDateRangePicker extends React.Component {
 
     this.renderYearPickerOverlay = (name, propsOverlay) => {
       const yearPickerProps = {
-        value: this.state['currentMonth'],
+        value: this.state.currentMonth,
         onChange: this.handleCurrentMonthChange,
         disabledFutureDays: this.props.disableFutureDays
       };
@@ -343,13 +344,15 @@ class HiDateRangePicker extends React.Component {
       onTodayButtonClick: this.handleCurrentMonthChange,
       navbarElement: this.renderNavBar,
       captionElement: this.renderCaption,
-      disabledDays: _objectSpread({
+      disabledDays: _objectSpread({}, dayPickerProps.disabledDays, {
         before: minimumDate
       }, disableFutureDays && {
         after: now
       }, to && {
         after: to
       }),
+      locale,
+      localeUtils: HiLocaleUtils,
       month: this.state.currentMonth,
       modifiers: _objectSpread({}, modifiers)
     });
@@ -359,13 +362,15 @@ class HiDateRangePicker extends React.Component {
       navbarElement: this.renderNavBar,
       onDayClick: this.onDayToClick,
       captionElement: this.renderCaption,
-      disabledDays: _objectSpread({
+      disabledDays: _objectSpread({}, dayPickerProps.disabledDays, {
         before: minimumDate
       }, disableFutureDays && {
         after: now
       }, from && {
         before: from
       }),
+      locale,
+      localeUtils: HiLocaleUtils,
       month: this.state.currentMonth,
       modifiers: _objectSpread({}, modifiers)
     }); // From & To InputProps
@@ -380,7 +385,7 @@ class HiDateRangePicker extends React.Component {
     }, {
       id: `${id}-from`,
       onChange: this.handleInputChange('from'),
-      disabled: disabled
+      disabled
     });
 
     const toInputProps = _objectSpread({}, onReset && {
@@ -392,7 +397,7 @@ class HiDateRangePicker extends React.Component {
     }, {
       id: `${id}-to`,
       onChange: this.handleInputChange('to'),
-      disabled: disabled
+      disabled
     });
 
     const toClass = classNames(classes.toInput, {
@@ -438,7 +443,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 // onDayChange={(day) => this.handleDayChange('to', day)}
       ,
       placeholder: ''
     })));
@@ -460,7 +465,7 @@ class HiDateRangePicker extends React.Component {
 }
 
 HiDateRangePicker.defaultProps = {
-  disabledDays: [],
+  disabledDays: {},
   disableFutureDays: true,
   staticPosition: false,
   enableTime: false,
@@ -469,6 +474,8 @@ HiDateRangePicker.defaultProps = {
   labelFrom: 'Start',
   labelTo: 'End',
   locale: 'fr-FR',
+  minimumDate: new Date(2013, 4, 1),
+  // by default 1 May 2013
   translations: {
     today: 'today',
     hour: 'Hour',
@@ -494,6 +501,11 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * http://react-day-picker.js.org/api/DayPicker#disabledDays
+   */
+  disabledDays: PropTypes.object,
+
   /**
    * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
    */
@@ -518,7 +530,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]),
+  // from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
 
   /**
    * Erreur sur date from
@@ -564,7 +576,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: PropTypes.instanceOf(Date).isRequired,
+  minimumDate: PropTypes.instanceOf(Date),
 
   /**
    * Callback à la sélection d'une date

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -9,6 +9,49 @@ import withStyles from '../styles/withStyles';
 import HiSelectField from '../HiSelectNew/HiSelectField';
 import HiDateRangePicker from './HiDateRangePicker';
 import HiFormControl from '../HiForm/HiFormControl';
+export function findSeparator(format) {
+  let str = '';
+
+  if (format.search('[/]') >= 0) {
+    str = '/';
+  } else if (format.search('[-]') >= 0) {
+    str = '-';
+  } else if (format.search('[.]') >= 0) {
+    str = '.';
+  }
+
+  return str;
+}
+export function yearAndMonth(format, date) {
+  const findY = el => {
+    return el.toUpperCase().search('Y') >= 0;
+  };
+
+  const findM = el => {
+    return el.toUpperCase().search('M') >= 0;
+  };
+
+  const s = findSeparator(format);
+  const split = format.split(s);
+  const indexY = split.findIndex(findY);
+  const indexM = split.findIndex(findM);
+  return indexY < indexM ? date.format(split[indexY] + s + split[indexM]) : date.format(split[indexM] + s + split[indexY]);
+}
+export function yearAndQuarter(format, date, t) {
+  const findY = el => {
+    return el.toUpperCase().search('Y') >= 0;
+  };
+
+  const findM = el => {
+    return el.toUpperCase().search('M') >= 0;
+  };
+
+  const s = findSeparator(format);
+  const split = format.split(s);
+  const indexY = split.findIndex(findY);
+  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) {
   let from;
   let label;
@@ -68,21 +111,21 @@ export function buildDateRangeOptionByKey(key, t, format) {
       label = t.previous_month;
       from = moment().subtract(1, 'month').startOf('month');
       to = moment().subtract(1, 'month').endOf('month');
-      info = `${from.format(t.yearAndMonth)}, ${from.daysInMonth()} ${t.days}`;
+      info = `${yearAndMonth(format, from)}, ${from.daysInMonth()} ${t.days}`;
       break;
 
     case 'cq':
       label = t.current_quarter;
       from = moment().startOf('quarter');
       to = moment();
-      info = `${from.format(t.yearAndQuarter)}, ${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
+      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');
-      info = `${from.format(t.yearAndQuarter)}, ${to.diff(from, 'days') + 1} ${t.days}`;
+      info = `${yearAndQuarter(format, from, t)}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'cy':
@@ -105,7 +148,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
     type
   };
 }
-export const styles = theme => ({
+export const styles = () => ({
   root: {
     maxWidth: 500,
     marginLeft: -4,
@@ -116,7 +159,8 @@ export const styles = theme => ({
     marginTop: 1
   },
   dateRangePicker: {
-    width: 'calc(100% + 8px)'
+    width: 'calc(100% + 8px)',
+    marginTop: 0
   },
   smSelect: {},
   smRangePicker: {}
@@ -127,17 +171,22 @@ class HiDateRangeSelector extends React.Component {
     super();
     this.options = [];
 
-    this.onBlur = event => {
+    this.handleBlur = event => {
       if (event instanceof Object && this.props.onblur) {
         this.props.onBlur(event);
       }
     };
 
+    this.handleReset = name => {
+      this.props.onChange(name, undefined);
+      this.props.onChange(`${name}Error`, undefined);
+    };
+
     this.handleSelectChange = name => (event, value) => {
-      this.setState({
+      this.setState(prevState => ({
         [name]: value,
-        key: this.state.key === 1 ? 2 : 1
-      });
+        key: prevState.key === 1 ? 2 : 1
+      }));
       const selectedOption = this.options.find(option => option.id === value);
 
       if (selectedOption) {
@@ -152,7 +201,6 @@ class HiDateRangeSelector extends React.Component {
       }
     };
 
-    this.handleReset = this.handleReset.bind(this);
     this.handleSelectChange = this.handleSelectChange.bind(this);
     this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
     this.state = {
@@ -161,8 +209,8 @@ class HiDateRangeSelector extends React.Component {
     };
   }
 
-  static getDerivedStateFromProps(props, state) {
-    if (props.defaultPreset && props.returnSelectValue) {
+  static getDerivedStateFromProps(props) {
+    if (props.returnSelectValue) {
       return {
         selectedPreset: props.defaultPreset
       };
@@ -183,11 +231,6 @@ class HiDateRangeSelector extends React.Component {
     clearTimeout(this.timeout); // TODO : supprimer ?
   }
 
-  handleReset(name) {
-    this.props.onChange(name, undefined);
-    this.props.onChange(`${name}Error`, undefined);
-  }
-
   render() {
     const _this$props = this.props,
           {
@@ -230,7 +273,9 @@ class HiDateRangeSelector extends React.Component {
       container: true,
       spacing: 8,
       className: classes.root,
-      ref: container => this.container = container
+      ref: container => {
+        this.container = container;
+      }
     }, React.createElement(Grid, {
       item: true,
       xs: 12,
@@ -280,7 +325,7 @@ class HiDateRangeSelector extends React.Component {
       disabled: disabled || selectedPreset !== 'custom',
       translations: translations,
       staticPosition: staticPosition,
-      onBlur: this.onBlur,
+      onBlur: this.handleBlur,
       hasSelector: true
     }, props)))));
   }
@@ -294,6 +339,8 @@ HiDateRangeSelector.defaultProps = {
   staticPosition: false,
   locale: 'fr-FR',
   format: 'YYYY-DD-MM',
+  minimumDate: new Date(2013, 4, 1),
+  // by default 1 May 2013
   translations: {
     today: 'Today',
     hour: 'Hour',
@@ -302,6 +349,7 @@ HiDateRangeSelector.defaultProps = {
     quarter: 'Quarter',
     week: 'Week',
     short_week: 'W',
+    short_quarter: 'Q',
     yearAndMonth: 'YYYY[-]MM',
     yearAndQuarter: 'YYYY[-Q]Q',
     year: 'Year',
@@ -404,7 +452,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: PropTypes.instanceOf(Date).isRequired,
+  minimumDate: PropTypes.instanceOf(Date),
 
   /**
    * Callback à la sélection d'une date
@@ -419,7 +467,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Retourne la valeur du select de la période au change du select
    */
-  returnSelectValue: PropTypes.bool.isRequired,
+  returnSelectValue: PropTypes.bool,
 
   /**
    * Props passées au HiSelectField

package/es/HiDatePicker/ListPicker.js

@@ -47,7 +47,7 @@ class ListPicker extends React.PureComponent {
       type
     } = this.props;
     this.position = itemList.indexOf(selectedItem);
-    let now = new Date();
+    const now = new Date();
     return React.createElement(Scrollbars, {
       autoHide: true,
       ref: ref => {