@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.56

package/es/HiCell/CellImage.js

@@ -17,12 +17,21 @@ export const styles = () => ({
     alignItems: 'center'
   }
 });
+
+const handleError = fallbackImage => e => {
+  if (fallbackImage) {
+    e.target.src = `${fallbackImage}`;
+  } else {
+    e.target.style.display = 'none';
+  }
+};
 /**
  * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
  * En vue large, aucun tooltip n'est affiché
  * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
  */
 
+
 class CellImage extends React.PureComponent {
   render() {
     const {
@@ -31,7 +40,9 @@ class CellImage extends React.PureComponent {
       label,
       shortLabel,
       view,
-      size
+      size,
+      fallbackImage,
+      title
     } = this.props;
     if (!path || path === '') return '';
     return React.createElement("div", {
@@ -40,8 +51,10 @@ class CellImage extends React.PureComponent {
     }, React.createElement("img", {
       src: path,
       alt: label,
+      title: title,
       className: classes.img,
-      width: size
+      width: size,
+      onError: handleError(fallbackImage)
     }), shortLabel && view === 'm' && React.createElement("span", {
       className: classes.label
     }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && React.createElement("span", {
@@ -61,6 +74,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: PropTypes.object,
 
+  /**
+   * Fallback image path
+   */
+  fallbackImage: PropTypes.string,
+
   /**
    * Label
    */
@@ -81,6 +99,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   size: PropTypes.number,
 
+  /**
+   * Title.
+   */
+  title: PropTypes.string,
+
   /**
    * View (L/M/S)
    */

package/es/HiCell/CellNumeric.js

@@ -4,8 +4,7 @@ import withStyles from '../styles/withStyles';
 import { formatNumber, formatCurrencyAmount } from '../utils/helpers';
 export const styles = () => ({
   wrapper: {
-    textAlign: 'right',
-    direction: 'rtl'
+    textAlign: 'right'
   }
 });
 /**

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/CellSentinelScore.js

@@ -15,7 +15,6 @@ export const sentinelColorById = {
   AUTHENTICATE: '#484A4B',
   FORCE_AUTHENTICATE: '#20272B',
   PENDING: '#3987AD',
-  TO_BE_REVIEWED: '#FF8F01',
   CHALLENGED: '#FF8F01',
   BLOCKED: '#D50000',
   ALLOWED: '#00AF01',
@@ -28,6 +27,7 @@ export const sentinelColorById = {
 class CellSentinelScore extends React.PureComponent {
   render() {
     const {
+      active,
       classes,
       result,
       value
@@ -35,7 +35,7 @@ class CellSentinelScore extends React.PureComponent {
     return React.createElement("div", {
       className: classes.flexContent
     }, React.createElement(HiColoredLabel, {
-      active: result === 'TO_BE_REVIEWED',
+      active: active,
       classes: {
         root: classes.label
       },
@@ -47,10 +47,10 @@ class CellSentinelScore extends React.PureComponent {
 }
 
 CellSentinelScore.defaultProps = {
-  active: false,
-  outlined: false
+  active: false
 };
 CellSentinelScore.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: PropTypes.bool,
   classes: PropTypes.object,
   result: PropTypes.string,
   value: PropTypes.number

package/es/HiCell/CellTextStyled.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiColoredLabel from '../HiColoredLabel';
+const styleRoot = {
+  width: '100%',
+  height: 19,
+  margin: 'auto 0',
+  display: 'flex',
+  lineHeight: '15px'
+};
+const styleColorLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre'
+};
+const styleLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre',
+  width: '100%'
+};
+/**
+ * CellText functional component
+ * (don't includes complex ellipsis: middle, after-first-word...)
+ *
+ * @param label
+ * @param color
+ * @param value
+ * @param active
+ * @param title
+ * @returns {*}
+ * @constructor
+ */
+
+const CellTextStyled = ({
+  label,
+  color,
+  value = '',
+  active = false,
+  title = ''
+}) => {
+  const valueString = label ? label.toString() : value.toString();
+  return React.createElement("div", {
+    style: styleRoot,
+    title: title || valueString
+  }, color ? React.createElement(HiColoredLabel, {
+    style: styleColorLabel,
+    label: valueString,
+    color: color,
+    active: active
+  }) : React.createElement("div", {
+    style: styleLabel
+  }, 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/HiCell/index.js

@@ -5,4 +5,5 @@ export { default as CellImage } from './CellImage';
 export { default as CellNumeric } from './CellNumeric';
 export { default as CellRate } from './CellRate';
 export { default as CellSentinel } from './CellSentinel';
-export { default as CellText } from './CellText';
+export { default as CellText } from './CellText';
+export { default as CellTextStyled } from './CellTextStyled';

package/es/HiChip/HiChip.js

@@ -63,6 +63,7 @@ export const styles = theme => ({
     textOverflow: 'ellipsis'
   },
   prefix: {
+    whiteSpace: 'nowrap',
     color: theme.palette.neutral.dark,
     paddingRight: 4
   },

package/es/HiDatePicker/Caption.js

@@ -2,18 +2,16 @@ 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 = ({
@@ -26,11 +24,11 @@ const Caption = ({
   const months = localeUtils.getMonths();
   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()));
 };

package/es/HiDatePicker/HiDateRangePicker.js

@@ -21,7 +21,7 @@ import HiFormControl from '../HiForm/HiFormControl';
 
 class HiDateRangePicker extends React.Component {
   constructor(props) {
-    super();
+    super(props);
 
     this.handleDayChange = (name, day) => {
       if (day) {
@@ -56,8 +56,16 @@ class HiDateRangePicker extends React.Component {
     };
 
     this.onDayToClick = day => {
-      this.handleDayChange('to', day);
-      document.activeElement.blur();
+      let change = moment(day) >= moment(this.props.from);
+
+      if (change && this.props.disableFutureDays && moment(day) > moment()) {
+        change = false;
+      }
+
+      if (change) {
+        this.handleDayChange('to', day);
+        document.activeElement.blur();
+      }
     };
 
     this.handleTimeChange = (name, date, precision) => {
@@ -78,9 +86,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,
@@ -90,7 +98,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();
@@ -100,14 +108,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));
+          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));
+          error = translations.date_superior_max_date.replace('%s', moment().format(format));
         }
 
         if (!this.props.enableTime) {
@@ -156,10 +164,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 => {
@@ -188,7 +196,7 @@ class HiDateRangePicker extends React.Component {
         staticPosition
       });
 
-      switch (this.state['openedPanel']) {
+      switch (this.state.openedPanel) {
         case 'time':
           return this.renderTimePickerOverlay(name, rangeOverlayProps);
 
@@ -199,6 +207,7 @@ class HiDateRangePicker extends React.Component {
           return this.renderYearPickerOverlay(name, rangeOverlayProps);
 
         case 'calendar':
+        default:
           return React.createElement(Overlay, rangeOverlayProps);
       }
     };
@@ -213,7 +222,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({
@@ -234,7 +243,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
       };
@@ -334,7 +343,7 @@ 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
@@ -350,7 +359,7 @@ 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
@@ -371,7 +380,7 @@ class HiDateRangePicker extends React.Component {
     }, {
       id: `${id}-from`,
       onChange: this.handleInputChange('from'),
-      disabled: disabled
+      disabled
     });
 
     const toInputProps = _objectSpread({}, onReset && {
@@ -383,7 +392,7 @@ class HiDateRangePicker extends React.Component {
     }, {
       id: `${id}-to`,
       onChange: this.handleInputChange('to'),
-      disabled: disabled
+      disabled
     });
 
     const toClass = classNames(classes.toInput, {
@@ -429,7 +438,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: ''
     })));
@@ -451,7 +460,7 @@ class HiDateRangePicker extends React.Component {
 }
 
 HiDateRangePicker.defaultProps = {
-  disabledDays: [],
+  disabledDays: {},
   disableFutureDays: true,
   staticPosition: false,
   enableTime: false,
@@ -460,6 +469,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',
@@ -485,6 +496,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)
    */
@@ -509,7 +525,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
@@ -555,7 +571,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

@@ -105,7 +105,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
     type
   };
 }
-export const styles = theme => ({
+export const styles = () => ({
   root: {
     maxWidth: 500,
     marginLeft: -4,
@@ -116,7 +116,8 @@ export const styles = theme => ({
     marginTop: 1
   },
   dateRangePicker: {
-    width: 'calc(100% + 8px)'
+    width: 'calc(100% + 8px)',
+    marginTop: 1
   },
   smSelect: {},
   smRangePicker: {}
@@ -127,17 +128,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 +158,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 +166,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
       };
@@ -176,7 +181,6 @@ class HiDateRangeSelector extends React.Component {
       this.setState({
         containerWidth: findDOMNode(this.container).clientWidth - 5
       });
-      this.handleSelectChange('selectedPreset')(undefined, this.state.selectedPreset);
     }
   }
 
@@ -184,11 +188,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,
           {
@@ -231,7 +230,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,
@@ -269,8 +270,8 @@ class HiDateRangeSelector extends React.Component {
         root: classes.dateRangePicker
       },
       id: idRange,
-      from: from,
-      to: to,
+      from: selectedPreset ? from : undefined,
+      to: selectedPreset ? to : undefined,
       enableTime: enableTime,
       onChange: onChange,
       toError: toError,
@@ -281,7 +282,7 @@ class HiDateRangeSelector extends React.Component {
       disabled: disabled || selectedPreset !== 'custom',
       translations: translations,
       staticPosition: staticPosition,
-      onBlur: this.onBlur,
+      onBlur: this.handleBlur,
       hasSelector: true
     }, props)))));
   }
@@ -290,12 +291,13 @@ class HiDateRangeSelector extends React.Component {
 
 HiDateRangeSelector.defaultProps = {
   availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
-  defaultPreset: 'cd',
   enableTime: false,
   returnSelectValue: false,
   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',
@@ -406,7 +408,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
@@ -421,7 +423,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 => {