@zohodesk/components 1.0.0-alpha-249 → 1.0.0-alpha-250

package/lib/DateTime/YearView.module.css

@@ -0,0 +1,81 @@
+[dir=ltr] .boxPadding {
+  padding-right: var(--zd_size19);
+  padding-left: var(--zd_size19);
+}[dir=rtl] .boxPadding {
+  padding-left: var(--zd_size19);
+  padding-right: var(--zd_size19);
+}
+.month {
+  width: 30.333%;
+  font-size: var(--zd_font_size12);
+  line-height: var(--zd_size26);
+  height: var(--zd_size26);
+  color: var(--zdt_yearview_month_text);
+  text-align: center;
+  margin: 0 0 var(--zd_size1);
+  cursor: pointer;
+  background-color: var(--zdt_yearview_month_bg);
+  border-radius: 20px;
+}
+.month:hover {
+  background-color: var(--zdt_yearview_month_hover_bg);
+}
+.currentMonth,
+.currentMonth:hover {
+  color: var(--zdt_yearview_currentmonth_text);
+}
+.currentMonth, .currentMonth:hover {
+  background-color: var(--zdt_yearview_currentmonth_bg);
+}
+.yearBox {
+  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
+}
+.year {
+  padding: var(--zd_size7) 0;
+  cursor: pointer;
+}
+.year:hover .yearText,
+.year:hover .arrow {
+  color: var(--zdt_yearview_year_hover_text);
+}
+.yearText {
+  color: var(--zdt_yearview_yeartext_text);
+  font-size: var(--zd_font_size11);
+}
+.arrow {
+  color: var(--zdt_yearview_yeartext_text);
+  transition: transform var(--zd_transition1);
+}
+.isActive {
+  cursor: default;
+}
+.isActive .yearText {
+  font-family: var(--zd_semibold);
+  color: var(--zdt_yearview_year_hover_text);
+}
+.arrowActive {
+  color: var(--zdt_yearview_year_hover_text);
+}
+[dir=ltr] .arrowActive {
+  transform: rotate(180deg);
+}
+[dir=rtl] .arrowActive {
+  transform: rotate(-180deg);
+}
+.container {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  composes: boxPadding;
+  background-color: var(--zdt_yearview_default_bg);
+}
+.yearContainer {
+  height: var(--zd_size135);
+  overflow: hidden;
+  transition: height var(--zd_transition1);
+  padding-bottom: var(--zd_size5);
+}
+.toggleYear {
+  height: 0;
+  padding: 0;
+}

package/lib/DateTime/__tests__/CalendarView.spec.js

@@ -0,0 +1,45 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+var _CalendarView = _interopRequireWildcard(require("../CalendarView"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable no-undef */
+
+/*eslint-disable no-unused-vars*/
+var defaultProps = {
+  onSelect: jest.fn(),
+  handleSelect: jest.fn(),
+  incremday: 27,
+  userSeeYear: 2018,
+  userSeeMonth: 12,
+  i: 1
+};
+describe('CalendarView testing', function () {
+  it('Should set date onSelecting date', function () {
+    var _setup = setup(_CalendarView.Span, defaultProps),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
+    var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'calendar-view');
+    TestUtils.Simulate.click(component);
+    expect(props.handleSelect).toHaveBeenCalled();
+  });
+  it('Should call handleSelect with specified arguments', function () {
+    var _setup2 = setup(_CalendarView.Span, defaultProps),
+        props = _setup2.props,
+        renderedDOM = _setup2.renderedDOM;
+
+    var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'calendar-view');
+    TestUtils.Simulate.click(component);
+    expect(props.handleSelect).toHaveBeenLastCalledWith(props.incremday, props.userSeeMonth, props.userSeeYear);
+  });
+});

package/lib/DateTime/__tests__/DateTime.spec.js

@@ -0,0 +1,127 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+var _DateTime = _interopRequireWildcard(require("../DateTime"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable no-undef */
+
+/*eslint-disable no-unused-vars*/
+var defaultProps = {
+  value: '2018-12-27T12:02:07.000Z',
+  isDateTimeField: false,
+  onSelect: jest.fn(),
+  timeZone: '',
+  min: '',
+  max: '',
+  maxErrorText: '',
+  minErrorText: '',
+  position: 'bottomLeft',
+  isActive: true,
+  onError: jest.fn(),
+  isReady: true
+};
+describe('DateTime testing', function () {
+  it('Should call handleSelect onSetting date', function () {
+    var _setup = setup(_DateTime["default"], defaultProps),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
+    var component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dateTime_saveBtn')[0];
+    TestUtils.Simulate.click(component);
+    expect(props.onSelect).toHaveBeenCalled();
+  });
+  it('Should call handleSelect onClearing date', function () {
+    var _setup2 = setup(_DateTime["default"], defaultProps),
+        props = _setup2.props,
+        renderedDOM = _setup2.renderedDOM;
+
+    var component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dateTime_clearBtn')[0];
+    TestUtils.Simulate.click(component);
+    expect(props.onSelect).toHaveBeenCalled();
+  });
+  it('Should display Time field if isDateTimeField is true', function () {
+    var _setup3 = setup(_DateTime["default"], Object.assign({}, defaultProps, {
+      isDateTimeField: true
+    })),
+        props = _setup3.props,
+        renderedDOM = _setup3.renderedDOM;
+
+    var selectComponents = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dateTime_timeContainer');
+    expect(selectComponents.length).toBe(1);
+  });
+  it('Should not  display Time field if isDateTimeField is false', function () {
+    var _setup4 = setup(_DateTime["default"], Object.assign({}, defaultProps, {
+      isDateTimeField: false
+    })),
+        props = _setup4.props,
+        renderedDOM = _setup4.renderedDOM;
+
+    var selectComponents = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dateTime_timeContainer');
+    expect(selectComponents.length).toBe(0);
+  });
+  it('Should navigate to prevYear onClicking prevYear(<<)', function () {
+    var _setup5 = setup(_DateTime.Span, Object.assign({}, defaultProps, {
+      dataId: 'prevYear',
+      type: 'll',
+      modifyCalendar: jest.fn()
+    })),
+        props = _setup5.props,
+        renderedDOM = _setup5.renderedDOM;
+
+    var prevYearComponents = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'prevYear');
+    TestUtils.Simulate.click(prevYearComponents);
+    expect(props.modifyCalendar).toHaveBeenCalled();
+    expect(props.modifyCalendar).toHaveBeenLastCalledWith(props.type);
+  });
+  it('Should navigate to prevMonth onClicking prevMonth(<)', function () {
+    var _setup6 = setup(_DateTime.Span, Object.assign({}, defaultProps, {
+      dataId: 'prevMonth',
+      type: 'l',
+      modifyCalendar: jest.fn()
+    })),
+        props = _setup6.props,
+        renderedDOM = _setup6.renderedDOM;
+
+    var prevMonthComponents = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'prevMonth');
+    TestUtils.Simulate.click(prevMonthComponents);
+    expect(props.modifyCalendar).toHaveBeenCalled();
+    expect(props.modifyCalendar).toHaveBeenLastCalledWith(props.type);
+  });
+  it('Should navigate to nextMonth onClicking nextMonth(>)', function () {
+    var _setup7 = setup(_DateTime.Span, Object.assign({}, defaultProps, {
+      dataId: 'nextMonth',
+      type: 'g',
+      modifyCalendar: jest.fn()
+    })),
+        props = _setup7.props,
+        renderedDOM = _setup7.renderedDOM;
+
+    var nextMonthComponents = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'nextMonth');
+    TestUtils.Simulate.click(nextMonthComponents);
+    expect(props.modifyCalendar).toHaveBeenCalled();
+    expect(props.modifyCalendar).toHaveBeenLastCalledWith(props.type);
+  });
+  it('Should navigate to nextYear onClicking nextYear(>>)', function () {
+    var _setup8 = setup(_DateTime.Span, Object.assign({}, defaultProps, {
+      dataId: 'nextyear',
+      type: 'gg',
+      modifyCalendar: jest.fn()
+    })),
+        props = _setup8.props,
+        renderedDOM = _setup8.renderedDOM;
+
+    var nextyearComponents = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'nextyear');
+    TestUtils.Simulate.click(nextyearComponents);
+    expect(props.modifyCalendar).toHaveBeenCalled();
+    expect(props.modifyCalendar).toHaveBeenLastCalledWith(props.type);
+  });
+});

package/lib/DateTime/__tests__/DateWidget.spec.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _DateWidget = _interopRequireDefault(require("../DateWidget"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable no-undef */
+
+/*eslint-disable no-unused-vars*/
+var defaultProps = {
+  children: null,
+  closePopupOnly: jest.fn(),
+  dateTimeSelect: jest.fn(),
+  defaultPosition: 'top',
+  displayFormat: 'M/D/YYYY',
+  getContainerRef: jest.fn(),
+  getRef: jest.fn(),
+  getTargetRef: jest.fn(),
+  id: '',
+  isDateTime: true,
+  isDisabled: true,
+  isPopupOpen: true,
+  isPopupReady: true,
+  isReadOnly: true,
+  max: '',
+  maxErrorText: '',
+  min: '',
+  minErrorText: '',
+  onFailValidation: jest.fn(),
+  onPassValidation: jest.fn(),
+  onSelect: jest.fn(),
+  placeholder: '',
+  position: 'bottomLeft',
+  removeClose: jest.fn(),
+  textBoxSize: 'xmedium',
+  textBoxVariant: 'primary',
+  timeZone: '',
+  togglePopup: jest.fn(),
+  validation: {
+    validate: true,
+    validateOn: '',
+    rulesOrder: [''],
+    rules: {},
+    messages: {}
+  },
+  value: ''
+};
+describe('DateWidgetComponent testing', function () {
+  it('Should not  render dateTime if isReadOnly is true', function () {
+    var _setup = setup(_DateWidget["default"], Object.assign({}, defaultProps, {
+      isReadOnly: true
+    })),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
+    var dropboxComponent = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dateWidget_dateBoxContainer');
+    expect(dropboxComponent.length).toBe(0);
+  }); // it('Should render dateTime if isReadOnly is false', () => {
+  //   const { props, renderedDOM } = setup(DateWidget, Object.assign({}, defaultProps, { isReadOnly: false }));
+  //   let dropboxComponent = TestUtils.scryRenderedComponentsWithTestid(
+  //     renderedDOM,
+  //     'dropBox'
+  //   );
+  //   expect(dropboxComponent.length).toBe(4);
+  // });
+
+  it('Should render children if children is given', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], defaultProps, /*#__PURE__*/_react["default"].createElement("div", {
+      "data-id": "children"
+    })));
+    var children = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dateWidget_disabled');
+    expect(children.length).toBe(1);
+  });
+  it('Should not render children if children is not given', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], defaultProps));
+    var children = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dateWidget_disabled');
+    expect(children.length).toBe(1);
+  });
+});

package/lib/DateTime/common.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bind = bind;
+exports.formatValue = formatValue;
+
+function bind() {
+  var _this = this;
+
+  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
+    handlers[_key] = arguments[_key];
+  }
+
+  handlers.forEach(function (handler) {
+    _this[handler] = _this[handler].bind(_this);
+  });
+}
+
+function formatValue() {
+  var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
+  var textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
+  return values && values.map(function (value) {
+    var formattedValue = value;
+
+    if (typeof value === 'string' || typeof value === 'number') {
+      formattedValue = {};
+      formattedValue[valueField] = value;
+      formattedValue[textField] = value;
+    }
+
+    return formattedValue;
+  }) || [];
+}

package/lib/DateTime/constants.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.supportedPatterns = exports.patternSplitStr = exports.patternChangeStr = exports.monthNamesShortDefault = exports.monthNamesDefault = exports.i18nShortMonths = exports.i18nMonths = exports.flags = exports.defaultFormat = exports.dayNamesShortDefault = exports.dayNamesDefault = exports.ampmTextDefault = exports.INVALID_DATE = exports.INCONSTANT = void 0;
+var defaultFormat = 'dd-MM-yyyy';
+exports.defaultFormat = defaultFormat;
+var supportedPatterns = ['.', '/', '-', ' ']; // RESTRICTED PATTERNS - ['@']
+
+exports.supportedPatterns = supportedPatterns;
+var patternChangeStr = '@';
+exports.patternChangeStr = patternChangeStr;
+var patternSplitStr = '@';
+exports.patternSplitStr = patternSplitStr;
+var INCONSTANT = 'INCONSTANT';
+exports.INCONSTANT = INCONSTANT;
+var INVALID_DATE = 'Invalid Date';
+exports.INVALID_DATE = INVALID_DATE;
+var flags = {
+  day: ['DD', 'dd'],
+  month: ['MM', 'MMM', 'MMMM'],
+  year: ['YYYY', 'yyyy', 'yy', 'YY'],
+  DD: {
+    type: 'day',
+    length: 2
+  },
+  dd: {
+    type: 'day',
+    length: 2
+  },
+  // d: { type: 'day', length: 1 },
+  MM: {
+    type: 'month',
+    length: 2
+  },
+  MMM: {
+    type: 'month',
+    length: INCONSTANT
+  },
+  MMMM: {
+    type: 'month',
+    length: INCONSTANT
+  },
+  // M: { type: 'month', length: 1 },
+  YYYY: {
+    type: 'year',
+    length: 4
+  },
+  yyyy: {
+    type: 'year',
+    length: 4
+  },
+  yy: {
+    type: 'year',
+    length: 2
+  },
+  YY: {
+    type: 'year',
+    length: 2
+  }
+};
+exports.flags = flags;
+var monthNamesDefault = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+exports.monthNamesDefault = monthNamesDefault;
+var monthNamesShortDefault = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+exports.monthNamesShortDefault = monthNamesShortDefault;
+var dayNamesDefault = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+exports.dayNamesDefault = dayNamesDefault;
+var dayNamesShortDefault = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+exports.dayNamesShortDefault = dayNamesShortDefault;
+var ampmTextDefault = ['AM', 'PM'];
+exports.ampmTextDefault = ampmTextDefault;
+var i18nShortMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+exports.i18nShortMonths = i18nShortMonths;
+var i18nMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+exports.i18nMonths = i18nMonths;