oa-componentbook 0.18.135 → 0.18.136

package/build/components/oa-component-select/CustomSelect.js

@@ -46,6 +46,7 @@ const valuesArrayToOptionArray = (valuesArray, valueLabelMap) => valuesArray.map
   label: valueLabelMap === null || valueLabelMap === void 0 ? void 0 : valueLabelMap[value]
 }));
 function CustomSelect(_ref) {
+  var _selectedOptions$inde2;
   let {
       allText,
       children,
@@ -120,7 +121,8 @@ function CustomSelect(_ref) {
   });
   const [selectedOptions, setSelectedOptions] = (0, _react.useState)(actualDefaultValue);
   const getMaxTagPlaceholder = omittedValues => {
-    if (selectedOptions.indexOf(allText) !== -1) {
+    var _selectedOptions$inde;
+    if ((selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde = selectedOptions.indexOf) === null || _selectedOptions$inde === void 0 ? void 0 : _selectedOptions$inde.call(selectedOptions, allText)) !== -1) {
       return null;
     }
     return "".concat("+".concat(omittedValues.length, " more"));
@@ -153,8 +155,9 @@ function CustomSelect(_ref) {
     });
   };
   const onOptionsChangeForMultiple = (select, value) => {
-    const newlySelectedOptions = selectedOptions.slice(0);
-    const allIndex = newlySelectedOptions.indexOf(allText);
+    var _newlySelectedOptions;
+    const newlySelectedOptions = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.slice(0);
+    const allIndex = newlySelectedOptions === null || newlySelectedOptions === void 0 || (_newlySelectedOptions = newlySelectedOptions.indexOf) === null || _newlySelectedOptions === void 0 ? void 0 : _newlySelectedOptions.call(newlySelectedOptions, allText);
     if (allIndex !== -1) {
       newlySelectedOptions.splice(allIndex, 1);
     }
@@ -171,13 +174,14 @@ function CustomSelect(_ref) {
           return !((_option$disabled2 = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled2 !== void 0 ? _option$disabled2 : false);
         });
         if (newlySelectedOptions.length === enabledOptions.length && allText) {
-          newlySelectedOptions.unshift(allText);
+          newlySelectedOptions === null || newlySelectedOptions === void 0 || newlySelectedOptions.unshift(allText);
         }
       }
     } else if (value === allText) {
       newlySelectedOptions.length = 0; // Emptying the array.
     } else {
-      newlySelectedOptions.splice(newlySelectedOptions.indexOf(value), 1);
+      var _newlySelectedOptions2;
+      newlySelectedOptions.splice((_newlySelectedOptions2 = newlySelectedOptions.indexOf) === null || _newlySelectedOptions2 === void 0 ? void 0 : _newlySelectedOptions2.call(newlySelectedOptions, value), 1);
     }
     const optionsWithoutAllText = newlySelectedOptions.filter(option => option !== allText);
 
@@ -186,6 +190,7 @@ function CustomSelect(_ref) {
     setSelectedOptions(newlySelectedOptions);
   };
   const onOptionsChange = mode === 'multiple' ? onOptionsChangeForMultiple : onOptionsChangeForSingle;
+  console.log(selectedOptions, 'selectedOptions');
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       components: {
@@ -255,7 +260,7 @@ function CustomSelect(_ref) {
       padding: '0px'
     },
     mode: mode,
-    maxTagCount: selectedOptions.indexOf(allText) === -1 ? 'responsive' : 1,
+    maxTagCount: (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde2 = selectedOptions.indexOf) === null || _selectedOptions$inde2 === void 0 ? void 0 : _selectedOptions$inde2.call(selectedOptions, allText)) === -1 ? 'responsive' : 1,
     maxTagPlaceholder: getMaxTagPlaceholder,
     onDeselect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(false, value) : undefined,
     onSelect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(true, value) : undefined,

package/build/widgets/oa-widget-date-dropdown/DateDropDown.js

@@ -0,0 +1,175 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Done = _interopRequireDefault(require("@material-ui/icons/Done"));
+var _dayjs3 = _interopRequireDefault(require("dayjs"));
+var _styles = require("./styles");
+var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const {
+  RangePicker
+} = _antd.DatePicker;
+function getDateOffset(day) {
+  if (day === -1) return null;
+  const days = parseInt(day, 10);
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  return date;
+}
+let rangePickerLable;
+function DateDropDown(_ref) {
+  var _selectValue$label;
+  let {
+    options,
+    format,
+    getValues,
+    defaultLabel,
+    disabledDate,
+    subLine
+  } = _ref;
+  const [showRangePicker, setshowRangePicker] = (0, _react.useState)(false);
+  const [selectValue, setSelectValue] = (0, _react.useState)({
+    label: defaultLabel,
+    dateSelected: false,
+    prevLabel: ''
+  });
+  const labelWithDate = {};
+  (0, _react.useEffect)(() => {
+    options.forEach(option => {
+      if (option.value === -1) {
+        rangePickerLable = option.label;
+      }
+      labelWithDate[option.label] = option.value;
+    });
+    if (selectValue !== null && selectValue !== void 0 && selectValue.label && labelWithDate[selectValue.label] !== -1 && selectValue.label in labelWithDate) {
+      getValues({
+        startDate: (0, _dayjs3.default)(getDateOffset(labelWithDate[selectValue.label])).format(format),
+        endDate: (0, _dayjs3.default)(getDateOffset(0)).format(format)
+      });
+    }
+  }, []);
+  const showTickIcon = (label, selectedLabel, dateSelected, isCustomRange) => label === selectedLabel || isCustomRange && dateSelected;
+  const optionRender = option => {
+    var _option$label;
+    const selectedLabel = option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 || (_option$label = _option$label.props) === null || _option$label === void 0 ? void 0 : _option$label.children;
+    const isCustomRange = selectedLabel === rangePickerLable;
+    const {
+      label,
+      dateSelected
+    } = selectValue !== null && selectValue !== void 0 ? selectValue : {};
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "label-date-dropdown",
+      style: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+      }
+    }, option.label, showTickIcon(label, selectedLabel, dateSelected, isCustomRange) && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _Done.default,
+      size: 20,
+      color: "primary"
+    })), isCustomRange && /*#__PURE__*/_react.default.createElement("span", null, subLine)));
+  };
+  const onSelect = event => {
+    if ((event === null || event === void 0 ? void 0 : event.label) === rangePickerLable) {
+      setSelectValue(prev => {
+        setshowRangePicker(true);
+        return {
+          label: 'Start date -End date',
+          dateSelected: false,
+          prevLabel: prev.label
+        };
+      });
+    } else {
+      getValues({
+        startDate: (0, _dayjs3.default)(getDateOffset(event.value)).format(format),
+        endDate: (0, _dayjs3.default)(getDateOffset(0)).format(format)
+      });
+      setSelectValue({
+        label: event === null || event === void 0 ? void 0 : event.label,
+        dateSelected: false
+      });
+      setshowRangePicker(false);
+    }
+  };
+  const handleDateRangeValue = e => {
+    var _dayjs, _dayjs$format, _e$, _dayjs2, _dayjs2$format, _e$2;
+    const fromDateApi = _dayjs3.default === null || _dayjs3.default === void 0 || (_dayjs = (0, _dayjs3.default)(e === null || e === void 0 || (_e$ = e[0]) === null || _e$ === void 0 ? void 0 : _e$.$d)) === null || _dayjs === void 0 || (_dayjs$format = _dayjs.format) === null || _dayjs$format === void 0 ? void 0 : _dayjs$format.call(_dayjs, format);
+    const toDateApi = _dayjs3.default === null || _dayjs3.default === void 0 || (_dayjs2 = (0, _dayjs3.default)(e === null || e === void 0 || (_e$2 = e[1]) === null || _e$2 === void 0 ? void 0 : _e$2.$d)) === null || _dayjs2 === void 0 || (_dayjs2$format = _dayjs2.format) === null || _dayjs2$format === void 0 ? void 0 : _dayjs2$format.call(_dayjs2, format);
+    const date = "".concat(fromDateApi, " - ").concat(toDateApi);
+    setSelectValue({
+      label: date,
+      dateSelected: true
+    });
+    getValues({
+      startDate: fromDateApi,
+      endDate: toDateApi
+    });
+    setshowRangePicker(false);
+  };
+  const handleOnSelectClick = () => {
+    setshowRangePicker(false);
+    if (selectValue !== null && selectValue !== void 0 && selectValue.prevLabel) {
+      const getParsedValue = labelWithDate[selectValue === null || selectValue === void 0 ? void 0 : selectValue.prevLabel];
+      getValues({
+        startDate: (0, _dayjs3.default)(getParsedValue).format(format),
+        endDate: (0, _dayjs3.default)(getDateOffset(0)).format(format)
+      });
+      setSelectValue(prev => ({
+        label: prev === null || prev === void 0 ? void 0 : prev.prevLabel,
+        dateSelected: false,
+        prevLabel: ''
+      }));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+    defaultValue: (_selectValue$label = selectValue.label) !== null && _selectValue$label !== void 0 ? _selectValue$label : '',
+    value: selectValue === null || selectValue === void 0 ? void 0 : selectValue.label,
+    className: "temp" // Need to remove this
+    ,
+    placeholder: "Please select a date",
+    optionRender: optionRender,
+    options: options,
+    onSelectionChange: onSelect,
+    onBlur: handleOnSelectClick
+  }), showRangePicker && /*#__PURE__*/_react.default.createElement(RangePicker, {
+    open: true,
+    allowClear: true,
+    format: format,
+    disabledDate: disabledDate,
+    onChange: value => handleDateRangeValue(value),
+    className: "custom-picker"
+  }));
+}
+DateDropDown.propTypes = {
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.node,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  })),
+  getValues: _propTypes.default.func,
+  format: _propTypes.default.string,
+  defaultLabel: _propTypes.default.string,
+  disabledDate: _propTypes.default.func,
+  subLine: _propTypes.default.string
+};
+DateDropDown.defaultProps = {
+  options: [],
+  format: 'DD-MMM-YYYY',
+  getValues: () => {},
+  defaultLabel: null,
+  disabledDate: () => {},
+  subLine: ''
+};
+var _default = exports.default = DateDropDown;

package/build/widgets/oa-widget-date-dropdown/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .custom-picker {\n        visibility: hidden;\n    }\n    .temp{\n        width:100%;\n    }\n    .label-date-dropdown { display:'flex', flexDirection:'row', justifyContent:'space-between'}\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.135",
+  "version": "0.18.136",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",