@hipay/hipay-material-ui 2.3.1-rc2 → 2.3.1-rc4

package/HiDatePicker/HiDateRangeSelector.js

@@ -1,51 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.findSeparator = findSeparator;
-exports.yearAndMonth = yearAndMonth;
-exports.yearAndQuarter = yearAndQuarter;
-exports.buildDateRangeOptionByKey = buildDateRangeOptionByKey;
-exports.default = exports.styles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-
-var _reactDom = require("react-dom");
-
-var _styles = require("@material-ui/core/styles");
-
-var _HiSelectField = _interopRequireDefault(require("../HiSelect/HiSelectField"));
-
-var _HiDateRangePicker = _interopRequireDefault(require("./HiDateRangePicker"));
-
-var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
-
-var _reactDeviceDetect = require("react-device-detect");
-
-function findSeparator(format) {
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import moment from 'moment-timezone';
+import { findDOMNode } from 'react-dom';
+import { withStyles } from '@material-ui/core/styles';
+import HiSelectField from '../HiSelect/HiSelectField';
+import HiDateRangePicker from './HiDateRangePicker';
+import HiFormControl from '../HiForm/HiFormControl';
+import { isMobile } from 'react-device-detect';
+export function findSeparator(format) {
   var str = '';
 
   if (format.search('[/]') >= 0) {
@@ -58,8 +27,7 @@ function findSeparator(format) {
 
   return str;
 }
-
-function yearAndMonth(format, date) {
+export function yearAndMonth(format, date) {
   var findY = function findY(el) {
     return el.toUpperCase().search('Y') >= 0;
   };
@@ -74,8 +42,7 @@ function yearAndMonth(format, date) {
   var indexM = split.findIndex(findM);
   return indexY < indexM ? date.format(split[indexY] + s + split[indexM]) : date.format(split[indexM] + s + split[indexY]);
 }
-
-function yearAndQuarter(format, date, t) {
+export function yearAndQuarter(format, date, t) {
   var findY = function findY(el) {
     return el.toUpperCase().search('Y') >= 0;
   };
@@ -90,15 +57,13 @@ function yearAndQuarter(format, date, t) {
   var indexM = split.findIndex(findM);
   return indexY < indexM ? date.format("".concat(split[indexY]).concat(s, "[").concat(t.short_quarter, "]Q")) : date.format("[".concat(t.short_quarter, "]Q").concat(s).concat(split[indexY]));
 }
-
-function buildDateRangeOptionByKey(key, t, format, timezoneName) {
+export function buildDateRangeOptionByKey(key, t, format, timezoneName) {
   var from;
   var label;
   var info;
   var to;
   var type;
-
-  _momentTimezone.default.updateLocale('en', {
+  moment.updateLocale('en', {
     week: {
       dow: 1
     }
@@ -107,71 +72,71 @@ function buildDateRangeOptionByKey(key, t, format, timezoneName) {
   switch (key) {
     case 'custom':
       label = t.custom_period;
-      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(15, 'day').startOf('day');
-      to = (0, _momentTimezone.default)().tz(timezoneName).endOf('day');
+      from = moment().tz(timezoneName).subtract(15, 'day').startOf('day');
+      to = moment().tz(timezoneName).endOf('day');
       type = 'primary-highlight';
       break;
 
     case 'cd':
       label = t.today;
-      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('day');
-      to = (0, _momentTimezone.default)().tz(timezoneName).endOf('day');
+      from = moment().tz(timezoneName).startOf('day');
+      to = moment().tz(timezoneName).endOf('day');
       info = "".concat(from.format(format));
       break;
 
     case 'pd':
       label = t.yesterday;
-      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'day').startOf('day');
-      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'day').endOf('day');
+      from = moment().tz(timezoneName).subtract(1, 'day').startOf('day');
+      to = moment().tz(timezoneName).subtract(1, 'day').endOf('day');
       info = "".concat(from.format(format));
       break;
 
     case 'cw':
       label = t.current_week;
-      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('week');
-      to = (0, _momentTimezone.default)().tz(timezoneName);
+      from = moment().tz(timezoneName).startOf('week');
+      to = moment().tz(timezoneName);
       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, _momentTimezone.default)().tz(timezoneName).subtract(1, 'week').startOf('week');
-      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'week').endOf('week');
+      from = moment().tz(timezoneName).subtract(1, 'week').startOf('week');
+      to = moment().tz(timezoneName).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, _momentTimezone.default)().tz(timezoneName).startOf('month');
-      to = (0, _momentTimezone.default)().tz(timezoneName);
+      from = moment().tz(timezoneName).startOf('month');
+      to = moment().tz(timezoneName);
       info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
     case 'pm':
       label = t.previous_month;
-      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'month').startOf('month');
-      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'month').endOf('month');
+      from = moment().tz(timezoneName).subtract(1, 'month').startOf('month');
+      to = moment().tz(timezoneName).subtract(1, 'month').endOf('month');
       info = "".concat(yearAndMonth(format, from), ", ").concat(from.daysInMonth(), " ").concat(t.days);
       break;
 
     case 'cq':
       label = t.current_quarter;
-      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('quarter');
-      to = (0, _momentTimezone.default)().tz(timezoneName);
+      from = moment().tz(timezoneName).startOf('quarter');
+      to = moment().tz(timezoneName);
       info = "".concat(yearAndQuarter(format, from, t), ", ").concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
     case 'pq':
       label = t.previous_quarter;
-      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'quarter').startOf('quarter');
-      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'quarter').endOf('quarter');
+      from = moment().tz(timezoneName).subtract(1, 'quarter').startOf('quarter');
+      to = moment().tz(timezoneName).subtract(1, 'quarter').endOf('quarter');
       info = "".concat(yearAndQuarter(format, from, t), ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
     case 'cy':
       label = t.current_year;
-      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('year');
-      to = (0, _momentTimezone.default)().tz(timezoneName);
+      from = moment().tz(timezoneName).startOf('year');
+      to = moment().tz(timezoneName);
       info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
@@ -188,8 +153,7 @@ function buildDateRangeOptionByKey(key, t, format, timezoneName) {
     type: type
   };
 }
-
-var styles = function styles() {
+export var styles = function styles() {
   return {
     root: {
       maxWidth: 500,
@@ -231,40 +195,44 @@ var styles = function styles() {
   };
 };
 
-exports.styles = styles;
-
 var HiDateRangeSelector =
 /*#__PURE__*/
 function (_React$Component) {
-  (0, _inherits2.default)(HiDateRangeSelector, _React$Component);
+  _inherits(HiDateRangeSelector, _React$Component);
 
   function HiDateRangeSelector(props) {
     var _this;
 
-    (0, _classCallCheck2.default)(this, HiDateRangeSelector);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDateRangeSelector).call(this));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "options", []);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlur", function (event) {
+    _classCallCheck(this, HiDateRangeSelector);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(HiDateRangeSelector).call(this));
+
+    _defineProperty(_assertThisInitialized(_this), "options", []);
+
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
       if (event instanceof Object && _this.props.onblur) {
         _this.props.onBlur(event);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReset", function (name) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleReset", function (name) {
       _this.props.onChange(name, undefined);
 
       _this.props.onChange("".concat(name, "Error"), undefined);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectChange", function (name) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleSelectChange", function (name) {
       return function (event, value) {
         _this.setState(function (prevState) {
           var _ref;
 
-          return _ref = {}, (0, _defineProperty2.default)(_ref, name, value), (0, _defineProperty2.default)(_ref, "key", prevState.key === 1 ? 2 : 1), _ref;
+          return _ref = {}, _defineProperty(_ref, name, value), _defineProperty(_ref, "key", prevState.key === 1 ? 2 : 1), _ref;
         });
 
         _this.updateDates(value);
       };
     });
+
     _this.options = props.availableOptionKeys.map(function (key) {
       return buildDateRangeOptionByKey(key, props.translations, props.format, props.timezoneName);
     });
@@ -275,12 +243,12 @@ function (_React$Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(HiDateRangeSelector, [{
+  _createClass(HiDateRangeSelector, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (this.container) {
         this.setState({
-          containerWidth: (0, _reactDom.findDOMNode)(this.container).clientWidth - 5
+          containerWidth: findDOMNode(this.container).clientWidth - 5
         });
       }
     }
@@ -344,14 +312,15 @@ function (_React$Component) {
           classes = _this$props.classes,
           selectProps = _this$props.selectProps,
           staticPosition = _this$props.staticPosition,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "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"]);
+
       var _this$state = this.state,
           selectedPreset = _this$state.selectedPreset,
           containerWidth = _this$state.containerWidth;
       var hiSelectableListProps = {
         hideCheckbox: true
       };
-      return _react.default.createElement(_HiFormControl.default, {
+      return React.createElement(HiFormControl, {
         disabled: disabled,
         helperIcon: helperIcon,
         helperText: helperText,
@@ -361,7 +330,7 @@ function (_React$Component) {
         InputLabelProps: {
           className: classes.formControlLabel
         }
-      }, _react.default.createElement("div", {
+      }, React.createElement("div", {
         className: classes.root,
         style: containerWidth < 364 ? {
           flexDirection: 'column'
@@ -369,14 +338,14 @@ function (_React$Component) {
         ref: function ref(container) {
           _this3.container = container;
         }
-      }, _react.default.createElement("div", {
+      }, React.createElement("div", {
         className: classes.select,
         style: containerWidth < 364 ? {
           minWidth: '100%',
           paddingBottom: 8,
           paddingRight: 0
         } : {}
-      }, _react.default.createElement(_HiSelectField.default, (0, _extends2.default)({
+      }, React.createElement(HiSelectField, Object.assign({
         disabled: disabled,
         id: idSelect,
         label: label,
@@ -391,12 +360,12 @@ function (_React$Component) {
         containerWidth: this.state.containerWidth,
         staticPosition: staticPosition,
         onSubmit: this.props.onSubmit
-      }, selectProps))), (_reactDeviceDetect.isMobile && selectedPreset === 'custom' || !_reactDeviceDetect.isMobile) && _react.default.createElement("div", {
+      }, selectProps))), (isMobile && selectedPreset === 'custom' || !isMobile) && React.createElement("div", {
         className: classes.input,
         style: containerWidth < 364 ? {
           width: '100%'
         } : {}
-      }, _react.default.createElement(_HiDateRangePicker.default, (0, _extends2.default)({
+      }, React.createElement(HiDateRangePicker, Object.assign({
         key: this.state.key,
         classes: {
           root: classes.dateRangePicker
@@ -430,10 +399,11 @@ function (_React$Component) {
       return null;
     }
   }]);
+
   return HiDateRangeSelector;
-}(_react.default.Component);
+}(React.Component);
 
-(0, _defineProperty2.default)(HiDateRangeSelector, "defaultProps", {
+_defineProperty(HiDateRangeSelector, "defaultProps", {
   availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
   enableTime: false,
   returnSelectValue: false,
@@ -476,8 +446,6 @@ function (_React$Component) {
   }
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   name: 'HmuiHiDateRangeSelector'
-})(HiDateRangeSelector);
-
-exports.default = _default;
+})(HiDateRangeSelector);

package/HiDatePicker/HiDateRangeSelector.test.js

@@ -0,0 +1,193 @@
+/* eslint-disable */
+import React from 'react';
+import { assert } from 'chai';
+import moment from 'moment';
+import { spy, useFakeTimers } from 'sinon';
+import { createMount, createShallow } from '../test-utils';
+import HiDateRangeSelector from './HiDateRangeSelector';
+import { HiSelectField } from '../HiSelect';
+import HiDateRangePicker from './HiDateRangePicker';
+import { HiInput } from '../HiForm';
+describe('<HiDateRangeSelector />', function () {
+  var shallow;
+  var mount;
+  before(function () {
+    shallow = createShallow({
+      dive: true
+    });
+    mount = createMount();
+  });
+  after(function () {
+    mount.cleanUp();
+  }); //
+  // describe('shallow', () => {
+  //     it('renders a div containing 1 HiSelectField & 1 DateRangePicker', () => {
+  //         const wrapper = shallow(
+  //             <HiDateRangeSelector
+  //                 idSelect="idSelect"
+  //                 idRange="idRange"
+  //                 onChange={() => {}}
+  //             />,
+  //         );
+  //
+  //         assert.strictEqual(
+  //             wrapper.find(HiSelectField).length,
+  //             1,
+  //             'should render a HiSelectField',
+  //         );
+  //         assert.strictEqual(
+  //             wrapper.find(HiDateRangePicker).length,
+  //             1,
+  //             'should render a DateRangePicker',
+  //         );
+  //     });
+  //
+  //     it('should handle 2 input day picker interface', () => {
+  //         const from = new Date(2018, 1, 17);
+  //         const to = new Date(2019, 2, 18);
+  //         const handleChange = spy();
+  //
+  //         moment.updateLocale('en', { week: { dow: 1 } });
+  //
+  //         const wrapper = shallow(
+  //             <HiDateRangeSelector
+  //                 idSelect="idSelect"
+  //                 idRange="idRange"
+  //                 from={from}
+  //                 to={to}
+  //                 labelFrom={'Start'}
+  //                 labelTo={'End'}
+  //                 onChange={handleChange}
+  //             />,
+  //         );
+  //
+  //         wrapper
+  //             .find(HiSelectField)
+  //             .dive()
+  //             .childAt(0)
+  //             .props()
+  //             .onChange('selectedPreset', 'pm');
+  //
+  //         // OnChange is call twice because it set from and to date
+  //         assert.strictEqual(
+  //             handleChange.calledTwice,
+  //             true,
+  //             'should call onChange callback twice',
+  //         );
+  //         assert.strictEqual(
+  //             handleChange.calledWith(
+  //                 'from',
+  //                 moment()
+  //                     .subtract(1, 'month')
+  //                     .startOf('month')
+  //                     .toDate(),
+  //             ),
+  //             true,
+  //             'should call onChange callback once',
+  //         );
+  //         assert.strictEqual(
+  //             handleChange.calledWith(
+  //                 'to',
+  //                 moment()
+  //                     .subtract(1, 'month')
+  //                     .endOf('month')
+  //                     .toDate(),
+  //             ),
+  //             true,
+  //             'should call onChange callback once',
+  //         );
+  //     });
+  //
+  //     it('should ignore unknown options', () => {
+  //         const handleChange = spy();
+  //
+  //         moment.updateLocale('en', { week: { dow: 1 } });
+  //
+  //         const wrapper = shallow(
+  //             <HiDateRangeSelector
+  //                 idSelect="idSelect"
+  //                 idRange="idRange"
+  //                 labelFrom={'Start'}
+  //                 labelTo={'End'}
+  //                 onChange={handleChange}
+  //                 availableOptionKeys={['unknown']}
+  //             />,
+  //         );
+  //
+  //         wrapper
+  //             .find(HiSelectField)
+  //             .dive()
+  //             .childAt(0)
+  //             .props()
+  //             .onChange('selectedPreset', 'pm');
+  //
+  //         // OnChange is call twice because it set from and to date
+  //         assert.strictEqual(handleChange.callCount, 0, 'should not call onChange callback');
+  //     });
+  // });
+  //
+  // describe('mount', () => {
+  //     let clock;
+  //
+  //     before(() => {
+  //         clock = useFakeTimers();
+  //     });
+  //
+  //     after(() => {
+  //         clock.restore();
+  //     });
+  //
+  //     it('should mount', () => {
+  //         const handleChange = spy();
+  //         const handleReset = spy();
+  //         const wrapper = mount(
+  //             <HiDateRangeSelector
+  //                 idSelect="idSelect"
+  //                 idRange="idRange"
+  //                 label={'Order date'}
+  //                 onChange={handleChange}
+  //             />,
+  //         );
+  //
+  //         assert.strictEqual(
+  //             wrapper.find(HiSelectField).length,
+  //             1,
+  //             'should render a HiSelectField',
+  //         );
+  //         assert.strictEqual(
+  //             wrapper.find(HiDateRangePicker).length,
+  //             1,
+  //             'should render a DateRangePicker',
+  //         );
+  //
+  //         wrapper
+  //             .find(HiSelectField)
+  //             .props()
+  //             .onChange('selectedPreset', 'pm');
+  //
+  //         // OnChange is call twice because it set from and to date
+  //         assert.strictEqual(
+  //             handleChange.calledTwice,
+  //             true,
+  //             'should call onChange callback twice',
+  //         );
+  //
+  //         wrapper
+  //             .find(HiSelectField)
+  //             .props()
+  //             .onChange('selectedPreset', 'custom');
+  //
+  //         assert.strictEqual(handleChange.calledTwice, true, 'should not call onChange callback');
+  //
+  //         wrapper
+  //             .find(HiInput)
+  //             .at(0)
+  //             .props()
+  //             .onReset();
+  //
+  //         assert.strictEqual(handleReset.callCount, 0);
+  //         clock.tick(1);
+  //         assert.strictEqual(handleChange.callCount, 3);
+  //     });
+  // });
+});