@zohodesk/components 1.0.0-alpha-198 → 1.0.0-alpha-199

package/es/utils/ContextOptimizer.js

@@ -0,0 +1,38 @@
+/** ** Libraries *** */
+import { useContext, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { shallowEqual } from 'react-redux'; // Please use this component with children as inline function for force this components rerender when parent rerender regardless of reason
+// Because below componends only rerender when children or calculation are changed, unless no changes will update below
+// this component logic based on return same children reference to stop rerender.
+// Think before change logic
+// eslint-disable-next-line import/prefer-default-export
+
+export function ContextOptimizer(props) {
+  const {
+    Context,
+    children: renderF,
+    calculation
+  } = props;
+  const contextData = useContext(Context);
+  const data = calculation(contextData);
+  const {
+    current: local
+  } = useRef({
+    children: null,
+    data: null,
+    renderF: null
+  });
+
+  if (!shallowEqual(data, local.data) || local.renderF !== renderF) {
+    local.children = renderF(data);
+    local.data = data;
+    local.renderF = renderF;
+  }
+
+  return local.children;
+}
+ContextOptimizer.propTypes = {
+  calculation: PropTypes.func.isRequired,
+  children: PropTypes.func.isRequired,
+  Context: PropTypes.any.isRequired
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-198",
+  "version": "1.0.0-alpha-199",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",

package/es/DateTime/DateTimePopupFooter.js

@@ -1,43 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-
-/** ** Libraries *** */
-import React, { PureComponent } from 'react';
-/** ** Components *** */
-
-import { Container } from '../Layout';
-import Button from '../Button/Button';
-/** ** CSS *** */
-
-import style from './DateTime.module.css';
-export default class DateTimePopupFooter extends PureComponent {
-  render() {
-    const {
-      submitText,
-      onSubmit,
-      cancelText,
-      onCancel,
-      dataId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      align: "vertical",
-      alignBox: "row",
-      className: style.footer
-    }, /*#__PURE__*/React.createElement(Button, {
-      text: submitText,
-      size: "medium",
-      palette: "primaryFilled",
-      onClick: onSubmit,
-      dataId: `${dataId}_saveBtn`
-    }), /*#__PURE__*/React.createElement("span", {
-      className: style.space
-    }), /*#__PURE__*/React.createElement(Button, {
-      text: cancelText,
-      size: "medium",
-      palette: "secondary",
-      onClick: onCancel,
-      dataId: `${dataId}_clearBtn`
-    }));
-  }
-
-}

package/es/DateTime/DateTimePopupHeader.js

@@ -1,90 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-
-/** ** Libraries *** */
-import React, { PureComponent } from 'react';
-/** ** Components *** */
-
-import { Container, Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
-/** ** CSS *** */
-
-import style from './DateTime.module.css';
-
-class Span extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.modifyCalendarChild = this.modifyCalendarChild.bind(this);
-  }
-
-  modifyCalendarChild() {
-    const {
-      modifyCalendar,
-      type
-    } = this.props;
-    modifyCalendar(type);
-  }
-
-  render() {
-    const {
-      dataTitle,
-      children,
-      dataId,
-      className = ''
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Box, {
-      "data-title": dataTitle,
-      dataId: dataId,
-      className: `${style.thArrow} ${style.grid} ${className}`,
-      onClick: this.modifyCalendarChild
-    }, children);
-  }
-
-}
-
-export default class DateTimePopupHeader extends PureComponent {
-  render() {
-    const {
-      onOpenYearView,
-      showMonthTxt,
-      isYearView,
-      prevMonthTitleText,
-      nextMonthTitleText,
-      onModifyCalendar
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "both",
-      className: style.header
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.dateText,
-      dataId: "selectYear",
-      onClick: onOpenYearView
-    }, /*#__PURE__*/React.createElement("span", {
-      className: style.thMonYear
-    }, showMonthTxt), /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-GN-dropdown",
-      size: "12",
-      iconClass: style.downArrow
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }), !isYearView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Span, {
-      dataTitle: prevMonthTitleText,
-      dataId: "prevMonth",
-      modifyCalendar: onModifyCalendar,
-      type: "previousMonth"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-arrowLeft3",
-      isBold: true
-    })), /*#__PURE__*/React.createElement(Span, {
-      dataTitle: nextMonthTitleText,
-      dataId: "nextMonth",
-      modifyCalendar: onModifyCalendar,
-      type: "nextMonth",
-      className: style.navigation
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-arrowRight3",
-      isBold: true
-    }))) : null);
-  }
-
-}

package/es/DateTime/DaysRow.js

@@ -1,28 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-
-/** ** Libraries *** */
-import React, { PureComponent } from 'react';
-/** ** CSS *** */
-
-import style from './DateTime.module.css';
-/** ** Components *** */
-
-import { Container, Box } from '../Layout';
-export default class DaysRow extends PureComponent {
-  render() {
-    const {
-      dayNames,
-      dayNamesShort
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "center",
-      className: style.days
-    }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
-      key: dayName,
-      className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
-      "data-title": dayName
-    }, dayNamesShort[index])));
-  }
-
-}

package/es/DateTime/Time.js

@@ -1,162 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-
-/** ** Libraries *** */
-import React, { PureComponent } from 'react';
-/**** Components ****/
-
-import { Container, Box } from '../Layout';
-import Select from '../Select/Select';
-/** ** CSS *** */
-
-import style from './DateTime.module.css';
-export default class Time extends PureComponent {
-  render() {
-    const {
-      timeText,
-      dataId,
-      hourSuggestions,
-      onHourSelect,
-      hours,
-      hourEmptyText,
-      needResponsive,
-      minSuggestions,
-      onMinutesSelect,
-      mins,
-      minuteEmptyText,
-      ampmSuggestions,
-      onAmPmSelect,
-      amPm,
-      is24Hour
-    } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: style.text
-    }, timeText), /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "vertical",
-      className: style.timesection,
-      isCover: false,
-      dataId: `${dataId}_timeContainer`
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.dropDownContainer
-    }, /*#__PURE__*/React.createElement(Hour, {
-      hourSuggestions: hourSuggestions,
-      onHourSelect: onHourSelect,
-      hours: hours,
-      needResponsive: needResponsive,
-      hourEmptyText: hourEmptyText
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.dropDownContainer
-    }, /*#__PURE__*/React.createElement(Minute, {
-      minSuggestions: minSuggestions,
-      onMinutesSelect: onMinutesSelect,
-      mins: mins,
-      minuteEmptyText: minuteEmptyText,
-      needResponsive: needResponsive
-    })), !is24Hour ? /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.dropDownContainer
-    }, /*#__PURE__*/React.createElement(AmPm, {
-      ampmSuggestions: ampmSuggestions,
-      onAmPmSelect: onAmPmSelect,
-      amPm: amPm,
-      needResponsive: needResponsive
-    })) : null));
-  }
-
-}
-
-class Hour extends React.PureComponent {
-  render() {
-    const {
-      hourSuggestions,
-      onHourSelect,
-      hours,
-      needResponsive,
-      hourEmptyText
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
-      options: hourSuggestions,
-      onChange: onHourSelect,
-      selectedValue: hours,
-      needSearch: true,
-      emptyMessage: hourEmptyText,
-      animationStyle: "bounce",
-      textBoxSize: "xmedium",
-      textBoxVariant: "primary",
-      searchBoxSize: "xmedium",
-      searchBoxPlaceHolder: "",
-      maxLength: "2",
-      popupGroup: "calender",
-      size: "small",
-      dataId: "hourField",
-      needResponsive: needResponsive,
-      needListBorder: true,
-      needTick: false,
-      listItemSize: "small"
-    });
-  }
-
-}
-
-class Minute extends React.PureComponent {
-  render() {
-    const {
-      minSuggestions,
-      onMinutesSelect,
-      mins,
-      minuteEmptyText,
-      needResponsive
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
-      options: minSuggestions,
-      onChange: onMinutesSelect,
-      selectedValue: mins,
-      needSearch: true,
-      emptyMessage: minuteEmptyText,
-      animationStyle: "bounce",
-      textBoxSize: "xmedium",
-      textBoxVariant: "primary",
-      searchBoxSize: "xmedium",
-      searchBoxPlaceHolder: "",
-      maxLength: "2",
-      popupGroup: "calender",
-      size: "small",
-      dataId: "minuteField",
-      needResponsive: needResponsive,
-      needListBorder: true,
-      needTick: false,
-      listItemSize: "small"
-    });
-  }
-
-}
-
-class AmPm extends React.PureComponent {
-  render() {
-    const {
-      ampmSuggestions,
-      onAmPmSelect,
-      amPm,
-      needResponsive
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
-      options: ampmSuggestions,
-      onChange: onAmPmSelect,
-      selectedValue: amPm,
-      animationStyle: "bounce",
-      textBoxSize: "xmedium",
-      textBoxVariant: "primary",
-      maxLength: "2",
-      popupGroup: "calender",
-      size: "small",
-      dataId: "ampmField",
-      needResponsive: needResponsive,
-      needListBorder: true,
-      needTick: false,
-      listItemSize: "small"
-    });
-  }
-
-}

package/lib/Accordion/Accordion.js

@@ -1,146 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var Accordion = /*#__PURE__*/function (_React$Component) {
-  _inherits(Accordion, _React$Component);
-
-  var _super = _createSuper(Accordion);
-
-  function Accordion(props) {
-    var _this;
-
-    _classCallCheck(this, Accordion);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      selectedItem: _this.props.selectedItem
-    };
-    _this.selectMenu = _this.selectMenu.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(Accordion, [{
-    key: "selectMenu",
-    value: function selectMenu(selectedItem) {
-      var _this$props = this.props,
-          onSelect = _this$props.onSelect,
-          disableInternalState = _this$props.disableInternalState;
-
-      if (onSelect) {
-        onSelect(selectedItem);
-      }
-
-      !disableInternalState && this.setState({
-        selectedItem: selectedItem
-      });
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
-        this.setState({
-          selectedItem: nextProps.selectedItem
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          height = _this$props2.height,
-          unMount = _this$props2.unMount,
-          disableInternalState = _this$props2.disableInternalState,
-          propSelectedItem = _this$props2.selectedItem,
-          a11y = _this$props2.a11y;
-      var selectedItem = this.state.selectedItem;
-
-      var children = _react["default"].Children.map(this.props.children, function (child) {
-        if (child) {
-          return /*#__PURE__*/_react["default"].cloneElement(child, {
-            selectedItem: disableInternalState ? propSelectedItem : selectedItem,
-            selectMenu: _this2.selectMenu,
-            unMount: unMount
-          });
-        }
-      });
-
-      var role = a11y.role,
-          ariaExpanded = a11y.ariaExpanded,
-          ariaHaspopup = a11y.ariaHaspopup;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
-        style: {
-          height: height
-        },
-        role: role,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHaspopup
-      }, children);
-    }
-  }]);
-
-  return Accordion;
-}(_react["default"].Component);
-
-exports["default"] = Accordion;
-Accordion.propTypes = {
-  children: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  disableInternalState: _propTypes["default"].bool,
-  height: _propTypes["default"].string,
-  onSelect: _propTypes["default"].func,
-  selectedItem: _propTypes["default"].string.isRequired,
-  unMount: _propTypes["default"].bool,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string,
-    ariaExpanded: _propTypes["default"].bool,
-    ariaHaspopup: _propTypes["default"].bool
-  })
-};
-Accordion.defaultProps = {
-  unMount: true,
-  disableInternalState: false,
-  a11y: {}
-};
-
-if (false) {
-  Accordion.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide'
-  };
-}

package/lib/Accordion/AccordionItem.js

@@ -1,121 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _VelocityAnimation = _interopRequireDefault(require("../VelocityAnimation/VelocityAnimation/VelocityAnimation"));
-
-var _VelocityAnimationGroup = _interopRequireDefault(require("../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var AccordionItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(AccordionItem, _React$Component);
-
-  var _super = _createSuper(AccordionItem);
-
-  function AccordionItem(props) {
-    var _this;
-
-    _classCallCheck(this, AccordionItem);
-
-    _this = _super.call(this, props);
-    _this.equalityCheck = _this.equalityCheck.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(AccordionItem, [{
-    key: "equalityCheck",
-    value: function equalityCheck() {
-      var _this$props = this.props,
-          equalityCheck = _this$props.equalityCheck,
-          selectedItem = _this$props.selectedItem,
-          id = _this$props.id;
-      return equalityCheck ? equalityCheck(id, selectedItem) : selectedItem == id;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          selectMenu = _this$props2.selectMenu,
-          className = _this$props2.className,
-          children = _this$props2.children,
-          dataId = _this$props2.dataId,
-          unMount = _this$props2.unMount,
-          unMountItem = _this$props2.unMountItem,
-          a11y = _this$props2.a11y;
-      unMountItem = unMountItem !== undefined ? unMountItem : unMount;
-      var role = a11y.role;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
-        "data-id": dataId,
-        role: role
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        onClick: selectMenu.bind(this, id)
-      }, children[0]), unMountItem ? /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
-        name: "slideDown",
-        isActive: this.equalityCheck()
-      }, children[1]) : /*#__PURE__*/_react["default"].createElement(_VelocityAnimation["default"], {
-        name: "slideDown",
-        isActive: this.equalityCheck()
-      }, children[1]));
-    }
-  }]);
-
-  return AccordionItem;
-}(_react["default"].Component);
-
-exports["default"] = AccordionItem;
-AccordionItem.propTypes = {
-  children: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  equalityCheck: _propTypes["default"].func,
-  id: _propTypes["default"].string,
-  selectMenu: _propTypes["default"].func,
-  selectedItem: _propTypes["default"].string,
-  unMount: _propTypes["default"].bool,
-  unMountItem: _propTypes["default"].bool,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string
-  })
-};
-AccordionItem.defaultProps = {
-  a11y: {}
-};
-
-if (false) {
-  AccordionItem.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide'
-  };
-}