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

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

@@ -7,10 +7,15 @@ import Paper from '@material-ui/core/Paper';
 import withStyles from '../../styles/withStyles';
 export const styles = theme => ({
   paper: {
-    position: 'absolute',
     width: '100%',
     zIndex: 10
   },
+  absolute: {
+    position: 'absolute'
+  },
+  relative: {
+    position: 'relative'
+  },
   left: {
     width: '200%',
     left: 0
@@ -56,30 +61,35 @@ const CustomOverlayLayout = (_ref) => {
     headerElement,
     footerElement,
     absoluteElement,
-    side
+    side,
+    staticPosition
   } = _ref,
-      props = _objectWithoutProperties(_ref, ["classes", "children", "headerElement", "footerElement", "absoluteElement", "side"]);
+      props = _objectWithoutProperties(_ref, ["classes", "children", "headerElement", "footerElement", "absoluteElement", "side", "staticPosition"]);
 
   const paperClass = classNames(classes.paper, {
     [classes.left]: side === 'from',
-    [classes.right]: side === 'to'
+    [classes.right]: side === 'to',
+    [classes.absolute]: staticPosition !== true,
+    [classes.relative]: staticPosition === true
   });
 
-  let paperProps = _objectSpread({}, props);
+  const paperProps = _objectSpread({}, props);
 
-  return 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), React.createElement("div", {
-    className: classes.footer
-  }, footerElement), absoluteElement));
+  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), React.createElement("div", {
+      className: classes.footer
+    }, footerElement), absoluteElement))
+  );
 };
 
 CustomOverlayLayout.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -96,7 +106,8 @@ CustomOverlayLayout.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Définit comment construire le Paper dans le cas d'un double input
    */
-  side: PropTypes.string
+  side: PropTypes.string,
+  staticPosition: PropTypes.bool
 } : {};
 export default withStyles(styles, {
   name: 'HmuiCustomOverlayLayout'

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) {
@@ -31,9 +31,9 @@ class MonthPickerOverlay extends React.Component {
     } = _this$props,
           props = _objectWithoutProperties(_this$props, ["value", "translations"]);
 
-    let now = new Date();
-    let currentMonth = props.localeUtils ? props.localeUtils.getMonths()[now.getMonth()] : props.children.props.localeUtils.getMonths()[now.getMonth()];
-    return React.createElement(CustomOverlayLayout, _extends({
+    const now = new Date();
+    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/MonthPickerOverlay.spec.js

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

package/es/HiDatePicker/Overlays/Overlay.js

@@ -45,15 +45,17 @@ const Overlay = (_ref) => {
     [classes.relative]: staticPosition === true
   });
 
-  let paperProps = _objectSpread({}, props);
+  const paperProps = _objectSpread({}, props);
 
-  return React.createElement(Paper, {
-    onBlur: paperProps.onBlur,
-    onFocus: paperProps.onFocus,
-    className: paperClass
-  }, React.createElement("div", {
-    className: classes.overlay
-  }, children));
+  return (// eslint-disable-next-line react/jsx-handler-names
+    React.createElement(Paper, {
+      onBlur: paperProps.onBlur,
+      onFocus: paperProps.onFocus,
+      className: paperClass
+    }, React.createElement("div", {
+      className: classes.overlay
+    }, children))
+  );
 };
 
 Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -88,7 +90,12 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Définit comment construire le Paper dans le cas d'un double input
    */
-  side: PropTypes.string
+  side: PropTypes.string,
+
+  /**
+   * Display overlay with position static
+   */
+  staticPosition: PropTypes.bool
 } : {};
 export default withStyles(styles, {
   name: 'HmuiOverlay'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import { assert } from 'chai';
 import { createShallow, getClasses } from '../../test-utils/index';

package/es/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -81,7 +81,7 @@ export const styles = theme => ({
     bottom: 0,
     height: 32,
     width: 32,
-    margin: '0px 24px'
+    margin: '4px 24px'
   },
   calendarButton: {
     fontWeight: theme.typography.fontWeightMedium
@@ -92,7 +92,7 @@ var _ref = React.createElement(CalendarIcon, null);
 
 class TimePickerOverlay extends React.Component {
   constructor(props) {
-    super();
+    super(props);
     this.hours = Array.from(Array(24).keys());
     this.minutes = Array.from(Array(60).keys());
     this.handleHourClick = this.handleHourClick.bind(this);

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

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

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -2,12 +2,12 @@ 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 {
   constructor(props) {
-    super();
+    super(props);
     this.years = [];
     this.handleYearClick = this.handleYearClick.bind(this);
     const currentYear = new Date().getFullYear();
@@ -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,
@@ -55,8 +55,6 @@ class YearPickerOverlay extends React.Component {
 }
 
 YearPickerOverlay.defaultProps = {
-  // disableFutureDays: true,
-  // disablePastDays: false,
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
   translations: {
@@ -92,7 +90,7 @@ YearPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: PropTypes.instanceOf(Date).isRequired,
+  minimumDate: PropTypes.instanceOf(Date),
 
   /**
    * Fonction de callback

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

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

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,36 +141,60 @@ 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,
-    border: '2px solid #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: {
     backgroundColor: '#F8F9FB',
-    color: theme.palette.neutral.main
+    color: theme.palette.neutral.main,
+    cursor: 'default'
   },
   // Added to the day's cell specified in the "disabledDays" prop
   disabled: {

package/es/HiDotsStepper/HiDot.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import HiIcon from '../HiIcon';
+import HiIconButton from '../HiIconButton';
+export const styles = () => ({
+  dot: {
+    padding: 4,
+    '&:hover': {
+      backgroundColor: 'transparent !important'
+    }
+  }
+});
+
+var _ref = React.createElement(HiIcon, {
+  size: 24
+}, "radio_button_checked");
+
+var _ref2 = React.createElement(HiIcon, {
+  size: 12
+}, "lens");
+
+class HiDot extends React.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      active,
+      status,
+      classes,
+      onClick
+    } = _this$props,
+          props = _objectWithoutProperties(_this$props, ["active", "status", "classes", "onClick"]);
+
+    let dotColor;
+
+    if (!status || status === 'unreviewed') {
+      dotColor = 'default';
+    } else {
+      dotColor = status === 'refused' ? 'negative' : 'positive';
+    }
+
+    return React.createElement(HiIconButton, _extends({
+      className: classes.dot,
+      color: dotColor,
+      onClick: onClick
+    }, props), active ? _ref : _ref2);
+  }
+
+}
+
+HiDot.defaultProps = {
+  active: false,
+  status: 'unreviewed'
+};
+HiDot.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: PropTypes.bool,
+  classes: PropTypes.object,
+  onClick: PropTypes.func,
+  status: PropTypes.oneOf(['refused', 'validated', 'unreviewed'])
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDot'
+})(HiDot);