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

package/HiDatePicker/HiDateRangeSelector.js

@@ -0,0 +1,495 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildDateRangeOptionByKey = buildDateRangeOptionByKey;
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _reactDom = require("react-dom");
+
+var _core = require("@material-ui/core");
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _HiSelect = require("../HiSelect");
+
+var _HiDateRangePicker = _interopRequireDefault(require("./HiDateRangePicker"));
+
+// @inheritedComponent HiDateRangePicker
+function buildDateRangeOptionByKey(key, t, format) {
+  var from;
+  var label;
+  var info;
+  var to;
+  var type;
+
+  _moment.default.updateLocale('en', {
+    week: {
+      dow: 1
+    }
+  });
+
+  switch (key) {
+    case 'custom':
+      label = t.custom_period;
+      type = 'primary-highlight';
+      break;
+
+    case 'cd':
+      label = t.today;
+      from = (0, _moment.default)().startOf('day');
+      to = (0, _moment.default)().endOf('day');
+      info = "".concat(from.format(format));
+      break;
+
+    case 'pd':
+      label = t.yesterday;
+      from = (0, _moment.default)().subtract(1, 'day').startOf('day');
+      to = (0, _moment.default)().subtract(1, 'day').endOf('day');
+      info = "".concat(from.format(format));
+      break;
+
+    case 'cw':
+      label = t.current_week;
+      from = (0, _moment.default)().startOf('week');
+      to = (0, _moment.default)();
+      info = "".concat(t.short_week).concat(from.format('w'), ", \n ").concat(from.format(format), " ").concat(t.to_now);
+      break;
+
+    case 'pw':
+      label = t.previous_week;
+      from = (0, _moment.default)().subtract(1, 'week').startOf('week');
+      to = (0, _moment.default)().subtract(1, 'week').endOf('week');
+      info = "".concat(t.short_week).concat(from.format('w'), ", ").concat(from.format(format), " ").concat(t.to, " ").concat(to.format(format));
+      break;
+
+    case 'cm':
+      label = t.current_month;
+      from = (0, _moment.default)().startOf('month');
+      to = (0, _moment.default)();
+      info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+      break;
+
+    case 'pm':
+      label = t.previous_month;
+      from = (0, _moment.default)().subtract(1, 'month').startOf('month');
+      to = (0, _moment.default)().subtract(1, 'month').endOf('month');
+      info = "".concat(from.format('YYYY-MM'), ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+      break;
+
+    case 'cq':
+      label = t.current_quarter;
+      from = (0, _moment.default)().startOf('quarter');
+      to = (0, _moment.default)();
+      info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+      break;
+
+    case 'pq':
+      label = t.previous_quarter;
+      from = (0, _moment.default)().subtract(1, 'quarter').startOf('quarter');
+      to = (0, _moment.default)().subtract(1, 'quarter').endOf('quarter');
+      info = "".concat(from.format('YYYY'), "-").concat(t.short_quarter).concat(from.format('Q'), ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+      break;
+
+    case 'cy':
+      label = t.current_year;
+      from = (0, _moment.default)().startOf('year');
+      to = (0, _moment.default)();
+      info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days'), " ").concat(t.days);
+      break;
+
+    default:
+      break;
+  }
+
+  return {
+    id: key,
+    from: from,
+    info: info,
+    label: label,
+    to: to,
+    type: type
+  };
+}
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      maxWidth: 500,
+      marginLeft: -4,
+      alignItems: 'flex-start'
+    },
+    dateSelect: {
+      paddingTop: 1,
+      marginTop: 1
+    },
+    dateRangePicker: {
+      width: 'calc(100% + 8px)'
+    },
+    smSelect: {},
+    smRangePicker: {}
+  };
+};
+
+exports.styles = styles;
+
+var HiDateRangeSelector =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiDateRangeSelector, _React$Component);
+
+  function HiDateRangeSelector(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiDateRangeSelector);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDateRangeSelector).call(this));
+    _this.options = [];
+
+    _this.handleSelectChange = function (name) {
+      return function (event, value) {
+        _this.setState((0, _defineProperty2.default)({}, name, value));
+
+        if (value !== 'custom') {
+          var selectedOption = _this.options.find(function (option) {
+            return 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((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSelectChange = _this.handleSelectChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.options = props.availableOptionKeys.map(function (key) {
+      return buildDateRangeOptionByKey(key, props.translations, props.format);
+    });
+    var from;
+    var to;
+
+    if (props.defaultPreset !== 'custom') {
+      var selectedOption = _this.options.find(function (option) {
+        return 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
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiDateRangeSelector, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.container) {
+        this.setState({
+          containerWidth: (0, _reactDom.findDOMNode)(this.container).clientWidth
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.timeout); // TODO : supprimer ?
+    }
+  }, {
+    key: "handleReset",
+    value: function handleReset(name) {
+      this.props.onChange(name, undefined);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          disabled = _this$props.disabled,
+          enableTime = _this$props.enableTime,
+          error = _this$props.error,
+          errorText = _this$props.errorText,
+          helperIcon = _this$props.helperIcon,
+          helperText = _this$props.helperText,
+          idRange = _this$props.idRange,
+          idSelect = _this$props.idSelect,
+          label = _this$props.label,
+          from = _this$props.from,
+          onChange = _this$props.onChange,
+          required = _this$props.required,
+          to = _this$props.to,
+          translations = _this$props.translations,
+          classes = _this$props.classes,
+          selectProps = _this$props.selectProps,
+          staticPosition = _this$props.staticPosition,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["disabled", "enableTime", "error", "errorText", "helperIcon", "helperText", "idRange", "idSelect", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
+      var _this$state = this.state,
+          defaultFrom = _this$state.defaultFrom,
+          defaultTo = _this$state.defaultTo,
+          selectedPreset = _this$state.selectedPreset;
+      return _react.default.createElement(_core.Grid, {
+        container: true,
+        spacing: 8,
+        className: classes.root,
+        ref: function ref(container) {
+          _this2.container = container;
+        }
+      }, _react.default.createElement(_core.Grid, {
+        item: true,
+        xs: 12,
+        sm: 4,
+        classes: {
+          'grid-sm-4': classes.smSelect
+        }
+      }, _react.default.createElement(_HiSelect.HiSelectField, (0, _extends2.default)({
+        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.default.createElement(_core.Grid, {
+        item: true,
+        xs: 12,
+        sm: 8,
+        classes: {
+          'grid-sm-8': classes.smRangePicker
+        }
+      }, _react.default.createElement(_HiDateRangePicker.default, (0, _extends2.default)({
+        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))));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.defaultPreset && props.returnSelectValue) {
+        return {
+          selectedPreset: props.defaultPreset
+        };
+      }
+
+      return null;
+    }
+  }]);
+  return HiDateRangeSelector;
+}(_react.default.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',
+  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.default.array,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Valeur du select par default
+   */
+  defaultPreset: _propTypes.default.string,
+
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Ajoute la gestion de l'heure
+   */
+  enableTime: _propTypes.default.bool,
+
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: _propTypes.default.bool,
+
+  /**
+   * Texte de l'erreur
+   */
+  errorText: _propTypes.default.string,
+
+  /**
+   * Format de date utilisé
+   */
+  format: _propTypes.default.string,
+
+  /**
+   * Date de début sélectionnée
+   */
+  from: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: _propTypes.default.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: _propTypes.default.string,
+
+  /**
+   * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
+   */
+  idRange: _propTypes.default.string.isRequired,
+
+  /**
+   * id du champs select
+   */
+  idSelect: _propTypes.default.string.isRequired,
+
+  /**
+   * Label du champs
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * Locale utilisée
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Callback à la sélection d'une date
+   */
+  onChange: _propTypes.default.func.isRequired,
+
+  /**
+   * true si champs obligatoire
+   */
+  required: _propTypes.default.bool,
+
+  /**
+   * Retourne la valeur du select de la période au change du select
+   */
+  returnSelectValue: _propTypes.default.bool.isRequired,
+
+  /**
+   * Props passées au HiSelectField
+   */
+  selectProps: _propTypes.default.object,
+
+  /**
+   * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+   */
+  staticPosition: _propTypes.default.bool,
+
+  /**
+   * Date de fin sélectionnée
+   */
+  to: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
+
+  /**
+   * Traductions
+   */
+  translations: _propTypes.default.object
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiHiDateRangeSelector'
+})(HiDateRangeSelector);
+
+exports.default = _default;

package/HiDatePicker/ListPicker.js

@@ -33,7 +33,6 @@ var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
-// @flow weak
 var styles = function styles(theme) {
   return {
     itemRoot: {

package/HiDatePicker/ListPicker.spec.js

@@ -8,13 +8,12 @@ var _chai = require("chai");
 
 var _sinon = require("sinon");
 
-var _Menu = require("material-ui/Menu");
+var _Menu = require("@material-ui/core/Menu");
 
 var _index = require("../test-utils/index");
 
 var _ListPicker = _interopRequireDefault(require("./ListPicker"));
 
-// @flow
 describe('<ListPicker />', function () {
   var shallow;
   var mount;

package/HiDatePicker/NavBar.js

@@ -23,7 +23,6 @@ var _AccessTime = _interopRequireDefault(require("@material-ui/icons/AccessTime"
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
-// @flow weak
 var styles = function styles(theme) {
   return {
     root: {
@@ -140,7 +139,8 @@ NavBar.defaultProps = {
 };
 
 var _default = (0, _withStyles.default)(styles, {
-  name: 'HmuiNavbar'
+  hiComponent: true,
+  name: 'HmuiNavBar'
 })(NavBar);
 
 exports.default = _default;

package/HiDatePicker/NavBar.spec.js

@@ -10,14 +10,13 @@ var _sinon = require("sinon");
 
 var _moment = _interopRequireDefault(require("react-day-picker/moment"));
 
-var _IconButton = _interopRequireDefault(require("material-ui/IconButton"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
 var _index = require("../test-utils/index");
 
-var _Navbar = _interopRequireDefault(require("./Navbar"));
+var _NavBar = _interopRequireDefault(require("./NavBar"));
 
-// @flow
-describe('<Navbar />', function () {
+describe('<NavBar />', function () {
   var shallow;
   before(function () {
     shallow = (0, _index.createShallow)({
@@ -30,7 +29,7 @@ describe('<Navbar />', function () {
     var handlerClockClick = (0, _sinon.spy)();
     var nextMonth = new Date(2018, 3, 1);
     var prevMonth = new Date(2018, 1, 1);
-    var wrapper = shallow(_react.default.createElement(_Navbar.default, {
+    var wrapper = shallow(_react.default.createElement(_NavBar.default, {
       nextMonth: nextMonth,
       previousMonth: prevMonth,
       onNextClick: handlerNextClick,

package/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -23,7 +23,6 @@ var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 
 var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));
 
-// @flow weak
 var styles = function styles(theme) {
   return {
     paper: {

package/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -31,7 +31,6 @@ var _CustomOverlayLayout = _interopRequireDefault(require("./CustomOverlayLayout
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
-// @flow weak
 var MonthPickerOverlay =
 /*#__PURE__*/
 function (_React$Component) {

package/HiDatePicker/Overlays/MonthPickerOverlay.spec.js

@@ -16,7 +16,6 @@ var _MonthPickerOverlay = _interopRequireDefault(require("./MonthPickerOverlay")
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
-// @flow
 var _ref = _react.default.createElement("span", null, "children");
 
 var _ref2 = _react.default.createElement("span", null, "children");

package/HiDatePicker/Overlays/Overlay.js

@@ -23,7 +23,6 @@ var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 
 var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));
 
-// @flow weak
 var styles = function styles() {
   return {
     paper: {

package/HiDatePicker/Overlays/Overlay.spec.js

@@ -6,15 +6,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _chai = require("chai");
 
-var _sinon = require("sinon");
-
-var _DayPickerInput = _interopRequireDefault(require("react-day-picker/DayPickerInput"));
-
 var _index = require("../../test-utils/index");
 
 var _Overlay = _interopRequireDefault(require("./Overlay"));
 
-// @flow
 var _ref = _react.default.createElement(_Overlay.default, null);
 
 var _ref2 = _react.default.createElement(_Overlay.default, null, _react.default.createElement("span", null, "children"));

package/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -37,7 +37,6 @@ var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
 var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));
 
-// @flow weak
 var styles = function styles(theme) {
   return {
     paper: {

package/HiDatePicker/Overlays/TimePickerOverlay.spec.js

@@ -14,7 +14,6 @@ var _TimePickerOverlay = _interopRequireDefault(require("./TimePickerOverlay"));
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
-// @flow
 var _ref = _react.default.createElement("span", null, "children");
 
 var _ref2 = _react.default.createElement("span", null, "children");

package/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -31,7 +31,6 @@ var _CustomOverlayLayout = _interopRequireDefault(require("./CustomOverlayLayout
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
-// @flow weak
 var YearPickerOverlay =
 /*#__PURE__*/
 function (_React$Component) {

package/HiDatePicker/Overlays/YearPickerOverlay.spec.js

@@ -14,7 +14,6 @@ var _YearPickerOverlay = _interopRequireDefault(require("./YearPickerOverlay"));
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
-// @flow
 var _ref = _react.default.createElement("span", null, "children");
 
 var _ref2 = _react.default.createElement("span", null, "children");

package/HiDatePicker/Weekday.js

@@ -11,7 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-// @flow weak
 var Weekday = function Weekday(_ref) {
   var weekday = _ref.weekday,
       className = _ref.className,

package/HiDatePicker/stylesheet.js

@@ -80,7 +80,6 @@ var _default = function _default(theme) {
     // The month's main table
     month: {
       display: 'table',
-      borderCollapse: 'collapse',
       borderSpacing: 0,
       userSelect: 'none' // margin: '0 1rem',
       // marginTop: '1rem',
@@ -172,7 +171,10 @@ var _default = function _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: "".concat(theme.palette.neutral.dark, " !important"),
       fontWeight: theme.typography.fontWeightMedium
     },
     // Added to the day's cell outside the current month
@@ -197,7 +199,9 @@ var _default = function _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'
     }
   };
 };