@hipay/hipay-material-ui 2.0.0-beta.36 → 2.0.0-beta.37

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -0,0 +1,432 @@
+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';
+import withStyles from '../styles/withStyles';
+import { HiSelectField } from '../HiSelect';
+import HiDateRangePicker from './HiDateRangePicker';
+export function buildDateRangeOptionByKey(key, t, format) {
+  let from;
+  let label;
+  let info;
+  let to;
+  let type;
+  moment.updateLocale('en', {
+    week: {
+      dow: 1
+    }
+  });
+
+  switch (key) {
+    case 'custom':
+      label = t.custom_period;
+      type = 'primary-highlight';
+      break;
+
+    case 'cd':
+      label = t.today;
+      from = moment().startOf('day');
+      to = moment().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');
+      info = `${from.format(format)}`;
+      break;
+
+    case 'cw':
+      label = t.current_week;
+      from = moment().startOf('week');
+      to = moment();
+      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');
+      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();
+      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${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}`;
+      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}`;
+      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}`;
+      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}`;
+      break;
+
+    default:
+      break;
+  }
+
+  return {
+    id: key,
+    from,
+    info,
+    label,
+    to,
+    type
+  };
+}
+export const styles = theme => ({
+  root: {
+    maxWidth: 500,
+    marginLeft: -4,
+    alignItems: 'flex-start'
+  },
+  dateSelect: {
+    paddingTop: 1,
+    marginTop: 1
+  },
+  dateRangePicker: {
+    width: 'calc(100% + 8px)'
+  },
+  smSelect: {},
+  smRangePicker: {}
+});
+
+class HiDateRangeSelector extends React.Component {
+  constructor(props) {
+    super();
+    this.options = [];
+
+    this.handleSelectChange = name => (event, value) => {
+      this.setState({
+        [name]: 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 (this.props.returnSelectValue === true) {
+        this.props.onChange('period', value);
+      }
+    };
+
+    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
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.defaultPreset && props.returnSelectValue) {
+      return {
+        selectedPreset: props.defaultPreset
+      };
+    }
+
+    return null;
+  }
+
+  componentDidMount() {
+    if (this.container) {
+      this.setState({
+        containerWidth: findDOMNode(this.container).clientWidth
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout); // TODO : supprimer ?
+  }
+
+  handleReset(name) {
+    this.props.onChange(name, undefined);
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      disabled,
+      enableTime,
+      error,
+      errorText,
+      helperIcon,
+      helperText,
+      idRange,
+      idSelect,
+      label,
+      from,
+      onChange,
+      required,
+      to,
+      translations,
+      classes,
+      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"]);
+
+    const {
+      defaultFrom,
+      defaultTo,
+      selectedPreset
+    } = this.state;
+    return React.createElement(Grid, {
+      container: true,
+      spacing: 8,
+      className: classes.root,
+      ref: container => {
+        this.container = container;
+      }
+    }, React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      sm: 4,
+      classes: {
+        'grid-sm-4': classes.smSelect
+      }
+    }, React.createElement(HiSelectField, _extends({
+      disabled: disabled,
+      error: error,
+      errorText: errorText,
+      helperIcon: helperIcon,
+      helperText: helperText,
+      id: idSelect,
+      label: label,
+      name: 'selectedPreset',
+      options: this.options,
+      onChange: this.handleSelectChange('selectedPreset'),
+      required: required,
+      translations: translations,
+      value: selectedPreset,
+      containerWidth: this.state.containerWidth,
+      classes: {
+        root: classes.dateSelect
+      },
+      staticPosition: staticPosition
+    }, selectProps))), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      sm: 8,
+      classes: {
+        'grid-sm-8': classes.smRangePicker
+      }
+    }, React.createElement(HiDateRangePicker, _extends({
+      classes: {
+        root: classes.dateRangePicker
+      },
+      id: idRange,
+      from: from || defaultFrom,
+      to: to || defaultTo,
+      enableTime: enableTime,
+      onChange: onChange,
+      onReset: this.handleReset,
+      disabled: disabled || selectedPreset !== 'custom',
+      translations: translations,
+      staticPosition: staticPosition
+    }, props))));
+  }
+
+}
+
+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',
+  translations: {
+    today: 'Today',
+    hour: 'Hour',
+    minute: 'Minute',
+    month: 'Month',
+    quarter: 'Quarter',
+    week: 'Week',
+    short_week: 'W',
+    short_quarter: 'Q',
+    year: 'Year',
+    days: 'days',
+    custom_period: 'Custom Period',
+    yesterday: 'Yesterday',
+    to: 'to',
+    to_now: 'to now',
+    current_week: 'Current Week',
+    previous_week: 'Previous Week',
+    current_month: 'Current Month',
+    previous_month: 'Previous Month',
+    current_quarter: 'Current Quarter',
+    previous_quarter: 'Previous Quarter',
+    current_year: 'Current Year'
+  }
+};
+HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Liste des ids des options disponibles
+   */
+  availableOptionKeys: PropTypes.array,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Valeur du select par default
+   */
+  defaultPreset: PropTypes.string,
+
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Ajoute la gestion de l'heure
+   */
+  enableTime: PropTypes.bool,
+
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: PropTypes.bool,
+
+  /**
+   * Texte de l'erreur
+   */
+  errorText: PropTypes.string,
+
+  /**
+   * Format de date utilisé
+   */
+  format: PropTypes.string,
+
+  /**
+   * Date de début sélectionnée
+   */
+  from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: PropTypes.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: PropTypes.string,
+
+  /**
+   * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
+   */
+  idRange: PropTypes.string.isRequired,
+
+  /**
+   * id du champs select
+   */
+  idSelect: PropTypes.string.isRequired,
+
+  /**
+   * Label du champs
+   */
+  label: PropTypes.string,
+
+  /**
+   * Locale utilisée
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Callback à la sélection d'une date
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * true si champs obligatoire
+   */
+  required: PropTypes.bool,
+
+  /**
+   * Retourne la valeur du select de la période au change du select
+   */
+  returnSelectValue: PropTypes.bool.isRequired,
+
+  /**
+   * Props passées au HiSelectField
+   */
+  selectProps: PropTypes.object,
+
+  /**
+   * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+   */
+  staticPosition: PropTypes.bool,
+
+  /**
+   * Date de fin sélectionnée
+   */
+  to: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+  /**
+   * Traductions
+   */
+  translations: PropTypes.object
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiHiDateRangeSelector'
+})(HiDateRangeSelector);

package/es/HiDatePicker/ListPicker.js

@@ -1,4 +1,3 @@
-// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

package/es/HiDatePicker/ListPicker.spec.js

@@ -1,8 +1,7 @@
-// @flow
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';
-import { MenuList, MenuItem } from 'material-ui/Menu';
+import { MenuList, MenuItem } from '@material-ui/core/Menu';
 import { createShallow, createMount } from '../test-utils/index';
 import ListPicker from './ListPicker';
 describe('<ListPicker />', () => {

package/es/HiDatePicker/NavBar.js

@@ -1,4 +1,3 @@
-// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -113,5 +112,6 @@ NavBar.defaultProps = {
   showClockButton: false
 };
 export default withStyles(styles, {
-  name: 'HmuiNavbar'
+  hiComponent: true,
+  name: 'HmuiNavBar'
 })(NavBar);

package/es/HiDatePicker/NavBar.spec.js

@@ -1,12 +1,11 @@
-// @flow
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';
 import MomentLocaleUtils from 'react-day-picker/moment';
-import IconButton from 'material-ui/IconButton';
+import IconButton from '@material-ui/core/IconButton';
 import { createShallow } from '../test-utils/index';
-import Navbar from './Navbar';
-describe('<Navbar />', () => {
+import NavBar from './NavBar';
+describe('<NavBar />', () => {
   let shallow;
   before(() => {
     shallow = createShallow({
@@ -19,7 +18,7 @@ describe('<Navbar />', () => {
     const handlerClockClick = spy();
     const nextMonth = new Date(2018, 3, 1);
     const prevMonth = new Date(2018, 1, 1);
-    const wrapper = shallow(React.createElement(Navbar, {
+    const wrapper = shallow(React.createElement(NavBar, {
       nextMonth: nextMonth,
       previousMonth: prevMonth,
       onNextClick: handlerNextClick,

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -1,6 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
-// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

package/es/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import CustomOverlayLayout from './CustomOverlayLayout';

package/es/HiDatePicker/Overlays/MonthPickerOverlay.spec.js

@@ -1,4 +1,3 @@
-// @flow
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';

package/es/HiDatePicker/Overlays/Overlay.js

@@ -1,6 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

package/es/HiDatePicker/Overlays/Overlay.spec.js

@@ -1,8 +1,5 @@
-// @flow
 import React from 'react';
 import { assert } from 'chai';
-import { spy } from 'sinon';
-import DayPickerInput from 'react-day-picker/DayPickerInput';
 import { createShallow, getClasses } from '../../test-utils/index';
 import Overlay from './Overlay';
 

package/es/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
-// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '@material-ui/core/IconButton';

package/es/HiDatePicker/Overlays/TimePickerOverlay.spec.js

@@ -1,4 +1,3 @@
-// @flow
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import CustomOverlayLayout from './CustomOverlayLayout';

package/es/HiDatePicker/Overlays/YearPickerOverlay.spec.js

@@ -1,4 +1,3 @@
-// @flow
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';

package/es/HiDatePicker/Overlays/index.js

@@ -1,4 +1,3 @@
-// @flow
 export { default as Overlay } from './Overlay';
 export { default as CustomOverlayLayout } from './CustomOverlayLayout';
 export { default as MonthPickerOverlay } from './MonthPickerOverlay';

package/es/HiDatePicker/Weekday.js

@@ -1,4 +1,3 @@
-// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 

package/es/HiDatePicker/stylesheet.js

@@ -69,7 +69,6 @@ export default (theme => ({
   // The month's main table
   month: {
     display: 'table',
-    borderCollapse: 'collapse',
     borderSpacing: 0,
     userSelect: 'none' // margin: '0 1rem',
     // marginTop: '1rem',
@@ -161,7 +160,10 @@ export default (theme => ({
   /* default modifiers */
   // Added to the day's cell for the current day
   today: {
-    color: theme.palette.primary.light,
+    // color: theme.palette.primary.light,
+    border: '2px solid #8b9898',
+    borderRadius: '50%',
+    color: `${theme.palette.neutral.dark} !important`,
     fontWeight: theme.typography.fontWeightMedium
   },
   // Added to the day's cell outside the current month
@@ -186,6 +188,8 @@ export default (theme => ({
   selected: {
     // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
     backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText
+    color: theme.palette.primary.contrastText,
+    borderRadius: '0%',
+    border: 'none'
   }
 }));

package/es/HiForm/HiFormControl.js

@@ -12,6 +12,7 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import withStyles from '../styles/withStyles';
 import HiFormLabel from './HiFormLabel';
 import { escapeHTML } from '../utils/helpers';
+import keycode from 'keycode/index';
 export const styles = theme => ({
   helperTextClassName: {
     color: theme.palette.neutral.main,
@@ -97,6 +98,14 @@ class HiFormControl extends React.PureComponent {
       }
     };
 
+    this.handleKeyDown = event => {
+      const key = keycode(event);
+
+      if (['space', 'enter'].includes(key)) {
+        this.handleHelperClick(event);
+      }
+    };
+
     this.handleHover = value => () => {
       this.setState({
         hovered: value
@@ -121,6 +130,7 @@ class HiFormControl extends React.PureComponent {
       hovered: false
     };
     this.handleHelperClick = this.handleHelperClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleHover = this.handleHover.bind(this);
   }
@@ -163,7 +173,12 @@ class HiFormControl extends React.PureComponent {
       className: classes.errorDiv
     }, React.createElement("div", {
       className: classNames(classes.arrowDown, classes.errorDivArrowDown)
-    }), errorText), helperIcon && helperText && !error && helperOpen && React.createElement("div", {
+    }), React.createElement("span", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: escapeHTML(errorText)
+      }
+    })), helperIcon && helperText && !error && helperOpen && React.createElement("div", {
       className: classes.helperDiv
     }, React.createElement("div", {
       className: classNames(classes.arrowDown, classes.helperDivArrowDown)
@@ -180,12 +195,16 @@ class HiFormControl extends React.PureComponent {
       focused: !disabled && (focused || hovered)
     }, InputLabelProps), error && React.createElement(Warning, {
       className: classes.errorIcon,
-      onClick: this.handleHelperClick
+      onClick: this.handleHelperClick,
+      tabIndex: 0,
+      onKeyDown: this.handleKeyDown
     }), helperIcon && helperText && !error && React.createElement(Info, {
       className: classNames(classes.helperIcon, {
         [classes.helperIconActive]: helperOpen
       }),
-      onClick: this.handleHelperClick
+      onClick: this.handleHelperClick,
+      tabIndex: 0,
+      onKeyDown: this.handleKeyDown
     })), React.createElement("div", {
       onMouseEnter: this.handleHover(true),
       onMouseLeave: this.handleHover(false),

package/es/HiForm/HiInput.js

@@ -56,8 +56,8 @@ export const styles = theme => ({
   startAdornment: {
     color: theme.palette.neutral.main,
     zIndex: 1,
-    marginLeft: 8,
-    marginRight: 16
+    marginLeft: 0,
+    marginRight: 8
   },
   startAdornmentFocus: {
     color: theme.palette.neutral.dark

package/es/HiSelect/HiSelect.js

@@ -27,7 +27,7 @@ export const styles = theme => ({
     position: 'relative'
   },
   popper: {
-    width: '100%',
+    width: '100% !important',
     zIndex: 1200
   },
   paper: {