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

package/es/HiDatePicker/Caption.js

@@ -17,11 +17,12 @@ export const styles = theme => ({
 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(HiButton, {
@@ -44,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

@@ -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 classNames from 'classnames';
 import withStyles from '../styles/withStyles';
@@ -58,7 +59,7 @@ 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;
       }
 
@@ -112,9 +113,9 @@ class HiDateRangePicker extends React.Component {
 
         if (name === 'to' && comparativeDate > moment(date) || name === 'from' && comparativeDate < moment(date)) {
           error = translations.to_superior_from;
-        } else if (date < minimumDate) {
+        } 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 && date > now) {
+        } else if (disableFutureDays && moment(date).utc() > moment(now).utc().endOf('day')) {
           error = translations.date_superior_max_date.replace('%s', moment().format(format));
         }
 
@@ -350,6 +351,8 @@ class HiDateRangePicker extends React.Component {
       }, to && {
         after: to
       }),
+      locale,
+      localeUtils: HiLocaleUtils,
       month: this.state.currentMonth,
       modifiers: _objectSpread({}, modifiers)
     });
@@ -366,6 +369,8 @@ class HiDateRangePicker extends React.Component {
       }, from && {
         before: from
       }),
+      locale,
+      localeUtils: HiLocaleUtils,
       month: this.state.currentMonth,
       modifiers: _objectSpread({}, modifiers)
     }); // From & To InputProps

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':
@@ -117,7 +160,7 @@ export const styles = () => ({
   },
   dateRangePicker: {
     width: 'calc(100% + 8px)',
-    marginTop: 1
+    marginTop: 0
   },
   smSelect: {},
   smRangePicker: {}
@@ -306,6 +349,7 @@ HiDateRangeSelector.defaultProps = {
     quarter: 'Quarter',
     week: 'Week',
     short_week: 'W',
+    short_quarter: 'Q',
     yearAndMonth: 'YYYY[-]MM',
     yearAndQuarter: 'YYYY[-Q]Q',
     year: 'Year',

package/es/HiDatePicker/NavBar.js

@@ -41,6 +41,7 @@ var _ref3 = React.createElement(AccessTime, null);
 
 const NavBar = ({
   classes,
+  locale = 'en_US',
   localeUtils,
   nextMonth,
   onClockClick,
@@ -49,7 +50,7 @@ const NavBar = ({
   previousMonth,
   showClockButton
 }) => {
-  const months = localeUtils.getMonths();
+  const months = localeUtils.getMonths(locale);
   const prev = `${months[previousMonth.getMonth()]} ${previousMonth.getFullYear()}`;
   const next = `${months[nextMonth.getMonth()]} ${nextMonth.getFullYear()}`;
   return React.createElement("div", {
@@ -74,6 +75,11 @@ NavBar.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: PropTypes.object,
 
+  /**
+   * ReactDayPicker prop
+   */
+  locale: PropTypes.string,
+
   /**
    * ReactDayPicker prop
    */

package/es/HiDatePicker/Overlays/CustomOverlayLayoutWithoutFooter.js

@@ -0,0 +1,106 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Paper from '@material-ui/core/Paper';
+import withStyles from '../../styles/withStyles';
+export const styles = theme => ({
+  paper: {
+    width: '100%',
+    zIndex: 10
+  },
+  absolute: {
+    position: 'absolute'
+  },
+  relative: {
+    position: 'relative'
+  },
+  left: {
+    width: '200%',
+    left: 0
+  },
+  right: {
+    width: '200%',
+    left: '-100%'
+  },
+  overlay: _objectSpread({
+    padding: 0,
+    height: 325,
+    textAlign: 'center'
+  }, theme.typography.body2, {
+    fontWeight: theme.typography.fontWeightRegular
+  }),
+  header: _objectSpread({
+    display: 'block',
+    height: 40,
+    textAlign: 'center',
+    padding: '10px 0'
+  }, theme.typography.body1, {
+    color: theme.palette.neutral.main,
+    borderBottom: '1px solid',
+    borderBottomColor: theme.palette.divider
+  }),
+  body: {
+    height: 285,
+    width: 224,
+    margin: 'auto'
+  }
+});
+
+const CustomOverlayLayoutWithoutFooter = (_ref) => {
+  let {
+    classes,
+    children,
+    headerElement,
+    footerElement,
+    absoluteElement,
+    side,
+    staticPosition
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["classes", "children", "headerElement", "footerElement", "absoluteElement", "side", "staticPosition"]);
+
+  const paperClass = classNames(classes.paper, {
+    [classes.left]: side === 'from',
+    [classes.right]: side === 'to',
+    [classes.absolute]: staticPosition !== true,
+    [classes.relative]: staticPosition === true
+  });
+
+  const paperProps = _objectSpread({}, props);
+
+  return (// eslint-disable-next-line react/jsx-handler-names
+    React.createElement(Paper, {
+      className: paperClass,
+      onBlur: paperProps.onBlur,
+      onFocus: paperProps.onFocus
+    }, React.createElement("div", {
+      className: classes.overlay
+    }, React.createElement("div", {
+      className: classes.header
+    }, headerElement), React.createElement("div", {
+      className: classes.body
+    }, children), absoluteElement))
+  );
+};
+
+CustomOverlayLayoutWithoutFooter.propTypes = process.env.NODE_ENV !== "production" ? {
+  absoluteElement: PropTypes.any,
+  children: PropTypes.any,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+  footerElement: PropTypes.any,
+  headerElement: PropTypes.any,
+
+  /**
+   * Définit comment construire le Paper dans le cas d'un double input
+   */
+  side: PropTypes.string,
+  staticPosition: PropTypes.bool
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCustomOverlayLayoutWithoutFooter'
+})(CustomOverlayLayoutWithoutFooter);

package/es/HiDatePicker/Overlays/MonthPickerOverlay.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 CustomOverlayLayout from './CustomOverlayLayout';
+import CustomOverlayLayoutWithoutFooter from './CustomOverlayLayoutWithoutFooter';
 import ListPicker from '../ListPicker';
 
 class MonthPickerOverlay extends React.Component {
@@ -10,7 +10,7 @@ class MonthPickerOverlay extends React.Component {
     super();
     this.months = [];
     this.handleMonthClick = this.handleMonthClick.bind(this);
-    this.months = props.localeUtils ? props.localeUtils.getMonths() : props.children.props.localeUtils.getMonths();
+    this.months = props.localeUtils ? props.localeUtils.getMonths(props.children.props.locale) : props.children.props.localeUtils.getMonths(props.children.props.locale);
   }
 
   handleMonthClick(month) {
@@ -32,8 +32,8 @@ class MonthPickerOverlay extends React.Component {
           props = _objectWithoutProperties(_this$props, ["value", "translations"]);
 
     const now = new Date();
-    const currentMonth = props.localeUtils ? props.localeUtils.getMonths()[now.getMonth()] : props.children.props.localeUtils.getMonths()[now.getMonth()];
-    return React.createElement(CustomOverlayLayout, _extends({
+    const currentMonth = props.localeUtils ? props.localeUtils.getMonths(props.children.props.locale)[now.getMonth()] : props.children.props.localeUtils.getMonths(props.children.props.locale)[now.getMonth()];
+    return React.createElement(CustomOverlayLayoutWithoutFooter, _extends({
       headerElement: translations.month
     }, props), React.createElement(ListPicker, {
       itemList: this.months,

package/es/HiDatePicker/Overlays/YearPickerOverlay.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 CustomOverlayLayout from './CustomOverlayLayout';
+import CustomOverlayLayoutWithoutFooter from './CustomOverlayLayoutWithoutFooter';
 import ListPicker from '../ListPicker';
 
 class YearPickerOverlay extends React.Component {
@@ -42,7 +42,7 @@ class YearPickerOverlay extends React.Component {
     } = _this$props,
           props = _objectWithoutProperties(_this$props, ["value", "translations"]);
 
-    return React.createElement(CustomOverlayLayout, _extends({
+    return React.createElement(CustomOverlayLayoutWithoutFooter, _extends({
       headerElement: translations.year
     }, props), React.createElement(ListPicker, {
       itemList: this.years,

package/es/HiDatePicker/hiLocaleUtils.js

@@ -0,0 +1,131 @@
+const WEEKDAYS_LONG = {
+  en_US: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+  fr_FR: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
+};
+const WEEKDAYS_SHORT = {
+  en_US: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+  fr_FR: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']
+};
+const MONTHS = {
+  en_US: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  fr_FR: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
+};
+const FIRST_DAY = {
+  en_US: 0,
+  fr_FR: 1 // Use Monday as first day of the week
+
+};
+/**
+ * Format Date as day
+ *
+ * @param Date d
+ * @param string locale
+ *
+ * @returns string
+ */
+
+function formatDay(d, locale = 'en_US') {
+  const loc = this.formatLocale(locale);
+  return `${WEEKDAYS_LONG[loc][d.getDay()]}, ${d.getDate()} ${MONTHS[loc][d.getMonth()]} ${d.getFullYear()}`;
+}
+/**
+ * Format Date as month title
+ *
+ * @param Date d
+ * @param string locale
+ *
+ * @returns string
+ */
+
+
+function formatMonthTitle(d, locale = 'en_US') {
+  const loc = this.formatLocale(locale);
+  return `${MONTHS[loc][d.getMonth()]} ${d.getFullYear()}`;
+}
+/**
+ * Get the short version of a week day
+ *
+ * @param int i
+ * @param string locale
+ *
+ * @returns string
+ */
+
+
+function formatWeekdayShort(i, locale = 'en_US') {
+  const loc = this.formatLocale(locale);
+  return WEEKDAYS_SHORT[loc][i];
+}
+/**
+ * Get the long version of a week day
+ *
+ * @param int i
+ * @param string locale
+ *
+ * @returns string
+ */
+
+
+function formatWeekdayLong(i, locale = 'en_US') {
+  const loc = this.formatLocale(locale);
+  return WEEKDAYS_LONG[loc][i];
+}
+/**
+ * Get first day of the week
+ * @param string locale
+ *
+ * @returns integer
+ */
+
+
+function getFirstDayOfWeek(locale = 'en_US') {
+  const loc = this.formatLocale(locale);
+  return FIRST_DAY[loc];
+}
+/**
+ * Get List of Months
+ *
+ * @param string locale
+ *
+ * @returns array
+ */
+
+
+function getMonths(locale = 'en_US') {
+  const loc = this.formatLocale(locale);
+  return MONTHS[loc];
+}
+/**
+ * Format locale
+ *
+ * @param string locale
+ *
+ * @return string
+ */
+
+
+function formatLocale(locale) {
+  let loc = locale.split('-');
+
+  if (loc.length !== 2) {
+    loc = locale.split('_');
+
+    if (loc.length !== 2) {
+      return false;
+    }
+  }
+
+  loc[1] = loc[1].toUpperCase();
+  return loc.join('_');
+}
+
+const HiLocaleUtils = {
+  formatDay,
+  formatMonthTitle,
+  formatWeekdayShort,
+  formatWeekdayLong,
+  getFirstDayOfWeek,
+  getMonths,
+  formatLocale
+};
+export default HiLocaleUtils;

package/es/HiDatePicker/stylesheet.js

@@ -1,4 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import { fade } from '../styles/colorManipulator';
 export default (theme => ({
   root: {
     position: 'relative',
@@ -140,31 +141,54 @@ export default (theme => ({
   footer: {
     marginTop: 12,
     borderTop: '1px solid',
-    borderTopColor: theme.palette.divider
+    borderTopColor: theme.palette.divider,
+    padding: '5px',
+    width: '100%'
   },
   // The today button (only with todayButton prop)
   todayButton: _objectSpread({
-    width: '100%',
+    display: 'table',
+    minWidth: 230,
+    margin: '0 auto',
     border: 'none',
     backgroundImage: 'none',
     backgroundColor: 'transparent',
     boxShadow: 'none',
     cursor: 'pointer',
-    height: 40
+    height: 30
   }, theme.typography.body2, {
     color: theme.palette.neutral.main,
     fontWeight: theme.typography.fontWeightMedium,
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    '&:hover': {
+      backgroundColor: fade(theme.palette.neutral.dark, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    },
+    borderRadius: 4
   }),
 
   /* default modifiers */
   // Added to the day's cell for the current day
   today: {
     // color: theme.palette.primary.light,
-    boxShadow: 'inset 0 0 0 2px #8b9898',
+    position: 'relative',
     borderRadius: '50%',
     color: `${theme.palette.neutral.dark} !important`,
-    fontWeight: theme.typography.fontWeightMedium
+    fontWeight: theme.typography.fontWeightMedium,
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      display: 'inline-block',
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      boxShadow: `inset 0 0 0 2px ${theme.palette.neutral.main}`
+    }
   },
   // Added to the day's cell outside the current month
   outside: {

package/es/HiForm/HiFormControl.js

@@ -27,6 +27,8 @@ export const styles = theme => ({
     cursor: 'pointer',
     zIndex: 1,
     top: '-5px',
+    height: 24,
+    width: 24,
     '&$iconButtonError': {
       color: theme.palette.negative.main
     },
@@ -197,16 +199,14 @@ class HiFormControl extends React.PureComponent {
       focused: !disabled && (focused || hovered)
     }, InputLabelProps), error && errorText && React.createElement(HiIconButton, {
       className: classNames(classes.iconButton, classes.iconButtonError),
-      onClick: this.handleHelperClick,
-      onKeyDown: this.handleKeyDown
+      onClick: this.handleHelperClick
     }, React.createElement(Warning, {
       className: classNames(classes.icon)
     })), helperIcon && helperText && !error && React.createElement(HiIconButton, {
       className: classNames(classes.iconButton, classes.iconButtonInfo, {
         [classes.iconButtonInfoActive]: helperOpen
       }),
-      onClick: this.handleHelperClick,
-      onKeyDown: this.handleKeyDown
+      onClick: this.handleHelperClick
     }, React.createElement(Info, {
       className: classNames(classes.icon)
     }))), React.createElement("div", {

package/es/HiForm/HiInput.js

@@ -89,10 +89,10 @@ export const styles = theme => ({
     padding: 0
   }),
   inputText: {
-    height: 39
+    height: 40
   },
   inputTextArea: {
-    minHeight: 39,
+    minHeight: 40,
     paddingTop: 8
   },
   iconPointer: {
@@ -100,7 +100,7 @@ export const styles = theme => ({
     cursor: 'pointer'
   },
   eraseButton: {
-    height: 39,
+    height: 40,
     width: 40,
     display: 'inline-block'
   },
@@ -177,10 +177,15 @@ class HiInput extends React.PureComponent {
     // Si on click sur un élément de HiInput, on garde le focus
     // Par exemple sur l'icone reset
     if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
-      if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
+      // If blur came from erase icon => stay focused and don't call onBlur props
+      if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
         this.props.onBlur(event);
       }
 
+      event.preventDefault();
       event.stopPropagation();
     } else {
       this.setState({
@@ -201,9 +206,13 @@ class HiInput extends React.PureComponent {
         this.setState({
           focused: true
         });
-      }
+      } // If focus came from erase icon => stay focused and don't call onFocus props
+
 
-      if (this.props.onFocus) {
+      if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (this.props.onFocus) {
         this.props.onFocus(event);
       }
     }
@@ -306,7 +315,10 @@ class HiInput extends React.PureComponent {
         label: classes.eraseButtonLabel
       },
       onClick: this.handleReset,
-      onBlur: this.handleBlur
+      onBlur: this.handleBlur,
+      buttonRef: el => {
+        this.eraseIconNode = el;
+      }
     }, _ref);
     let endAdornment = endAdornmentProps;
 

package/es/HiForm/HiUploadField.js

@@ -22,7 +22,8 @@ export const styles = theme => ({
     fontSize: '80px'
   },
   inputContainer: {
-    flex: '1'
+    flex: '1',
+    width: 'calc(100% - 88px)'
   },
   empty: {
     border: `1px solid ${theme.palette.input.bottomLine}`,