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

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-// @inheritedComponent HiDateRangePicker
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { findDOMNode } from 'react-dom';
 import Grid from '@material-ui/core/Grid';
 import withStyles from '../styles/withStyles';
-import HiSelectField from '../HiSelect/HiSelectField';
+import HiSelectField from '../HiSelectNew/HiSelectField';
 import HiDateRangePicker from './HiDateRangePicker';
+import HiFormControl from '../HiForm/HiFormControl';
 export function buildDateRangeOptionByKey(key, t, format) {
   let from;
   let label;
@@ -24,6 +24,8 @@ 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');
       type = 'primary-highlight';
       break;
 
@@ -59,35 +61,35 @@ export function buildDateRangeOptionByKey(key, t, format) {
       label = t.current_month;
       from = moment().startOf('month');
       to = moment();
-      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
+      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');
-      info = `${from.format('YYYY-MM')}, ${to.diff(from, 'days')} ${t.days}`;
+      info = `${from.format(t.yearAndMonth)}, ${from.daysInMonth()} ${t.days}`;
       break;
 
     case 'cq':
       label = t.current_quarter;
       from = moment().startOf('quarter');
       to = moment();
-      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
+      info = `${from.format(t.yearAndQuarter)}, ${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('YYYY')}-${t.short_quarter}${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
+      info = `${from.format(t.yearAndQuarter)}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'cy':
       label = t.current_year;
       from = moment().startOf('year');
       to = moment();
-      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
+      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     default:
@@ -125,23 +127,24 @@ class HiDateRangeSelector extends React.Component {
     super();
     this.options = [];
 
+    this.onBlur = event => {
+      if (event instanceof Object && this.props.onblur) {
+        this.props.onBlur(event);
+      }
+    };
+
     this.handleSelectChange = name => (event, value) => {
       this.setState({
-        [name]: value
+        [name]: value,
+        key: this.state.key === 1 ? 2 : 1
       });
+      const selectedOption = this.options.find(option => option.id === value);
 
-      if (value !== 'custom') {
-        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());
-        }
-      } else {
-        this.setState({
-          defaultFrom: undefined,
-          defaultTo: undefined
-        });
+      if (selectedOption) {
+        this.props.onChange('from', selectedOption.from.toDate());
+        this.props.onChange('to', selectedOption.to.toDate());
+        this.props.onChange('fromError', false);
+        this.props.onChange('toError', false);
       }
 
       if (this.props.returnSelectValue === true) {
@@ -152,23 +155,9 @@ 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));
-    let from;
-    let to;
-
-    if (props.defaultPreset !== 'custom') {
-      const selectedOption = this.options.find(option => option.id === props.defaultPreset);
-
-      if (selectedOption) {
-        from = selectedOption.from.toDate();
-        to = selectedOption.to.toDate();
-      }
-    }
-
     this.state = {
       selectedPreset: props.defaultPreset,
-      containerWidth: 0,
-      defaultFrom: from,
-      defaultTo: to
+      containerWidth: 0
     };
   }
 
@@ -185,8 +174,9 @@ class HiDateRangeSelector extends React.Component {
   componentDidMount() {
     if (this.container) {
       this.setState({
-        containerWidth: findDOMNode(this.container).clientWidth
+        containerWidth: findDOMNode(this.container).clientWidth - 5
       });
+      this.handleSelectChange('selectedPreset')(undefined, this.state.selectedPreset);
     }
   }
 
@@ -196,6 +186,7 @@ class HiDateRangeSelector extends React.Component {
 
   handleReset(name) {
     this.props.onChange(name, undefined);
+    this.props.onChange(`${name}Error`, undefined);
   }
 
   render() {
@@ -203,12 +194,14 @@ class HiDateRangeSelector extends React.Component {
           {
       disabled,
       enableTime,
-      error,
       errorText,
+      fromError,
+      toError,
       helperIcon,
       helperText,
       idRange,
       idSelect,
+      minimumDate,
       label,
       from,
       onChange,
@@ -219,20 +212,26 @@ class HiDateRangeSelector extends React.Component {
       selectProps,
       staticPosition
     } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["disabled", "enableTime", "error", "errorText", "helperIcon", "helperText", "idRange", "idSelect", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
+          props = _objectWithoutProperties(_this$props, ["disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
 
     const {
-      defaultFrom,
-      defaultTo,
       selectedPreset
     } = this.state;
-    return React.createElement(Grid, {
+    const hiSelectableListProps = {
+      hideCheckbox: true
+    };
+    return React.createElement(HiFormControl, {
+      disabled: disabled,
+      helperIcon: helperIcon,
+      helperText: helperText,
+      errorText: errorText,
+      error: !!(fromError || toError),
+      label: ' '
+    }, React.createElement(Grid, {
       container: true,
       spacing: 8,
       className: classes.root,
-      ref: container => {
-        this.container = container;
-      }
+      ref: container => this.container = container
     }, React.createElement(Grid, {
       item: true,
       xs: 12,
@@ -242,12 +241,10 @@ class HiDateRangeSelector extends React.Component {
       }
     }, React.createElement(HiSelectField, _extends({
       disabled: disabled,
-      error: error,
-      errorText: errorText,
-      helperIcon: helperIcon,
-      helperText: helperText,
       id: idSelect,
       label: label,
+      hideCheckbox: true,
+      hiSelectableListProps: hiSelectableListProps,
       name: 'selectedPreset',
       options: this.options,
       onChange: this.handleSelectChange('selectedPreset'),
@@ -267,19 +264,26 @@ class HiDateRangeSelector extends React.Component {
         'grid-sm-8': classes.smRangePicker
       }
     }, React.createElement(HiDateRangePicker, _extends({
+      key: this.state.key,
       classes: {
         root: classes.dateRangePicker
       },
       id: idRange,
-      from: from || defaultFrom,
-      to: to || defaultTo,
+      from: from,
+      to: to,
       enableTime: enableTime,
       onChange: onChange,
+      toError: toError,
+      fromError: fromError,
+      minimumDate: minimumDate,
+      errorText: null,
       onReset: this.handleReset,
       disabled: disabled || selectedPreset !== 'custom',
       translations: translations,
-      staticPosition: staticPosition
-    }, props))));
+      staticPosition: staticPosition,
+      onBlur: this.onBlur,
+      hasSelector: true
+    }, props)))));
   }
 
 }
@@ -300,7 +304,8 @@ HiDateRangeSelector.defaultProps = {
     quarter: 'Quarter',
     week: 'Week',
     short_week: 'W',
-    short_quarter: 'Q',
+    yearAndMonth: 'YYYY[-]MM',
+    yearAndQuarter: 'YYYY[-Q]Q',
     year: 'Year',
     days: 'days',
     custom_period: 'Custom Period',
@@ -313,7 +318,13 @@ HiDateRangeSelector.defaultProps = {
     previous_month: 'Previous Month',
     current_quarter: 'Current Quarter',
     previous_quarter: 'Previous Quarter',
-    current_year: 'Current Year'
+    current_year: 'Current Year',
+    invalid_format: 'The date format is not valid',
+    to_superior_from: 'Date from cannot be greater than date to',
+    date_superior_max_date: 'Date from cannot be greater than %s',
+    date_inferior_min_date: 'Date from cannot be before than %s',
+    missing_date_from: 'Missing date from',
+    missing_date_to: 'Missing date to'
   }
 };
 HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -350,7 +361,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Texte de l'erreur
    */
-  errorText: PropTypes.string,
+  errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
   /**
    * Format de date utilisé
@@ -392,6 +403,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   locale: PropTypes.string,
 
+  /**
+   * Date minimale sélectionnable
+   */
+  minimumDate: PropTypes.instanceOf(Date).isRequired,
+
   /**
    * Callback à la sélection d'une date
    */

package/es/HiDatePicker/NavBar.js

@@ -17,7 +17,8 @@ export const styles = theme => ({
   button: {
     height: 32,
     width: 32,
-    margin: '4px 24px'
+    margin: '4px 24px',
+    padding: 0
   },
   left: {
     float: 'left'

package/es/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -81,7 +81,7 @@ export const styles = theme => ({
     bottom: 0,
     height: 32,
     width: 32,
-    margin: '4px 24px'
+    margin: '0px 24px'
   },
   calendarButton: {
     fontWeight: theme.typography.fontWeightMedium

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -55,8 +55,8 @@ class YearPickerOverlay extends React.Component {
 }
 
 YearPickerOverlay.defaultProps = {
-  disableFutureDays: false,
-  disablePastDays: false,
+  // disableFutureDays: true,
+  // disablePastDays: false,
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
   translations: {
@@ -92,7 +92,7 @@ YearPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: PropTypes.instanceOf(Date),
+  minimumDate: PropTypes.instanceOf(Date).isRequired,
 
   /**
    * Fonction de callback

package/es/HiForm/HiFormControl.js

@@ -25,6 +25,7 @@ export const styles = theme => ({
     position: 'absolute',
     right: 5,
     cursor: 'pointer',
+    zIndex: 1,
     top: '-5px',
     '&$iconButtonError': {
       color: theme.palette.negative.main
@@ -194,7 +195,7 @@ class HiFormControl extends React.PureComponent {
       required: required,
       disabled: disabled,
       focused: !disabled && (focused || hovered)
-    }, InputLabelProps), error && React.createElement(HiIconButton, {
+    }, InputLabelProps), error && errorText && React.createElement(HiIconButton, {
       className: classNames(classes.iconButton, classes.iconButtonError),
       onClick: this.handleHelperClick,
       onKeyDown: this.handleKeyDown
@@ -227,8 +228,8 @@ HiFormControl.defaultProps = {
   required: true,
   disabled: false,
   error: false,
-  errorText: '',
-  helperText: '',
+  errorText: undefined,
+  helperText: undefined,
   helperIcon: false,
   multiline: false,
   nbChars: 0,
@@ -263,7 +264,7 @@ HiFormControl.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Texte de l'erreur
    */
-  errorText: PropTypes.string,
+  errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
   /**
    * Propriétés appliquées au composant FormHelperText

package/es/HiSelectNew/HiSelect.js

@@ -434,7 +434,7 @@ class HiSelect extends React.PureComponent {
 
     const popperClass = classNames(classes.popper, {
       [classes.popperWidth]: !this.props.containerWidth,
-      [classes.popperRightAlign]: this.props.containerWidth
+      [classes.popperRightAlign]: this.props.containerWidth && this.props.align === 'right'
     });
     const content = React.createElement(ClickAwayListener, {
       onClickAway: this.handleClickAway
@@ -515,6 +515,7 @@ class HiSelect extends React.PureComponent {
 }
 
 HiSelect.defaultProps = {
+  align: 'left',
   disabled: false,
   displayAsChip: false,
   error: false,
@@ -537,6 +538,8 @@ HiSelect.defaultProps = {
   type: 'text'
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  align: PropTypes.oneOf(['left', 'right']),
+
   /**
    * Useful to extend the style applied to components.
    */

package/es/HiSwitch/HiSwitch.js

@@ -12,7 +12,8 @@ export const styles = theme => ({
     display: 'inline-flex',
     width: 62,
     position: 'relative',
-    flexShrink: 0
+    flexShrink: 0,
+    zIndex: 0
   },
   bar: {
     borderRadius: 7,

package/es/HiTable/HiCellBuilder.js

@@ -8,6 +8,7 @@ import CellIcon from '@hipay/hipay-material-ui/HiCell/CellIcon';
 import CellImage from '@hipay/hipay-material-ui/HiCell/CellImage';
 import CellNumeric from '@hipay/hipay-material-ui/HiCell/CellNumeric';
 import CellSentinel from '@hipay/hipay-material-ui/HiCell/CellSentinel';
+import CellSentinelScore from '@hipay/hipay-material-ui/HiCell/CellSentinelScore';
 import CellText from '@hipay/hipay-material-ui/HiCell/CellText';
 import CellRate from '@hipay/hipay-material-ui/HiCell/CellRate';
 import CellPinToAction from '@hipay/hipay-material-ui/HiCell/CellPinToAction';
@@ -109,13 +110,18 @@ class HiCellBuilder extends React.PureComponent {
 
           case cst.TYPE_SENTINEL:
             return React.createElement(CellSentinel, {
-              automaticFraudReviewResult: datacell.automaticFraudReviewResult,
-              fraudResult: datacell.value,
-              hideFraudResult: datacell.hideFraudResult,
-              pendingManualAction: datacell.pendingManualAction,
-              score: datacell.score,
-              smartDecision: datacell.smartDecision,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              color: datacell.color,
+              label: datacell.label,
+              letter: datacell.label2,
+              active: datacell.active,
+              reviewer: datacell.reviewer,
+              outlined: datacell.outlined
+            });
+
+          case cst.TYPE_SENTINEL_SCORE:
+            return React.createElement(CellSentinelScore, {
+              value: datacell.value,
+              result: datacell.result
             });
 
           case cst.TYPE_PIN_TO_ACTION:

package/es/HiTable/constants.js

@@ -26,6 +26,7 @@ export const TYPE_IMAGE = 'image';
 export const TYPE_NUMERIC = 'numeric';
 export const TYPE_RATE = 'rate';
 export const TYPE_SENTINEL = 'sentinel';
+export const TYPE_SENTINEL_SCORE = 'sentinel_score';
 export const TYPE_STATUS = 'status';
 export const TYPE_COUNTRY = 'country';
 export const TYPE_TEXT = 'text';
@@ -123,6 +124,11 @@ export const DEFAULT_WIDTHS = {
     [VIEWS.SMALL]: 80
   },
   [TYPE_SENTINEL]: {
+    [VIEWS.LARGE]: 64,
+    [VIEWS.MEDIUM]: 64,
+    [VIEWS.SMALL]: 64
+  },
+  [TYPE_SENTINEL_SCORE]: {
     [VIEWS.LARGE]: 80,
     [VIEWS.MEDIUM]: 80,
     [VIEWS.SMALL]: 80
@@ -160,6 +166,7 @@ export const DEFAULT_VIEWS = {
   [TYPE_NUMERIC]: VIEWS.LARGE,
   [TYPE_RATE]: VIEWS.LARGE,
   [TYPE_SENTINEL]: VIEWS.LARGE,
+  [TYPE_SENTINEL_SCORE]: VIEWS.LARGE,
   [TYPE_STATUS]: VIEWS.LARGE,
   [TYPE_TEXT]: VIEWS.LARGE,
   [TYPE_THIRD_PARTY_SECURITY]: VIEWS.LARGE
@@ -179,4 +186,4 @@ export const DEFAULT_PADDING = {
  * @type {*[]}
  */
 
-export const ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL];
+export const ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL, TYPE_SENTINEL_SCORE];

package/es/styles/createPalette.js

@@ -120,7 +120,7 @@ export default function createPalette(palette) {
       contrastText: '#FFFFFF'
     },
     secondary = {
-      light: '#ffcf21',
+      light: '#ffd94f',
       main: '#ffcf21',
       dark: '#E9BE30',
       contrastText: '#FFFFFF'
@@ -161,7 +161,7 @@ export default function createPalette(palette) {
       main: '#EDED14'
     },
     type = 'light',
-    contrastThreshold = 2.8,
+    contrastThreshold = 2.2,
     // max light contrast
     tonalOffset = 0.2,
     context = 'local'
@@ -176,7 +176,7 @@ export default function createPalette(palette) {
 
     if (process.env.NODE_ENV !== 'production') {
       const contrast = getContrastRatio(background, contrastText);
-      process.env.NODE_ENV !== "production" ? warning(contrast >= 2.8, [`Material-UI: the contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
+      process.env.NODE_ENV !== "production" ? warning(contrast >= 2.2, [`Material-UI: the contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
     }
 
     return contrastText;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.53",
+  "version": "2.0.0-beta.54",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -72,4 +72,4 @@
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}

package/styles/createPalette.js

@@ -141,7 +141,7 @@ function createPalette(palette) {
   } : _palette$primary,
       _palette$secondary = palette.secondary,
       secondary = _palette$secondary === void 0 ? {
-    light: '#ffcf21',
+    light: '#ffd94f',
     main: '#ffcf21',
     dark: '#E9BE30',
     contrastText: '#FFFFFF'
@@ -190,7 +190,7 @@ function createPalette(palette) {
       _palette$type = palette.type,
       type = _palette$type === void 0 ? 'light' : _palette$type,
       _palette$contrastThre = palette.contrastThreshold,
-      contrastThreshold = _palette$contrastThre === void 0 ? 2.8 : _palette$contrastThre,
+      contrastThreshold = _palette$contrastThre === void 0 ? 2.2 : _palette$contrastThre,
       _palette$tonalOffset = palette.tonalOffset,
       tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
       _palette$context = palette.context,
@@ -205,7 +205,7 @@ function createPalette(palette) {
 
     if (process.env.NODE_ENV !== 'production') {
       var contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText);
-      process.env.NODE_ENV !== "production" ? (0, _warning.default)(contrast >= 2.8, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
+      process.env.NODE_ENV !== "production" ? (0, _warning.default)(contrast >= 2.2, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
     }
 
     return contrastText;