sag_components 2.0.0-beta27 → 2.0.0-beta28

package/dist/stories/components/FilterContainer.style.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterFooterContent = exports.FilterDivContent = exports.FilterDivContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const FilterDivContainer = exports.FilterDivContainer = _styledComponents.default.div`
+    width: 100%;
+    height:100%;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    display: grid;
+    background-color: white;
+`;
+const FilterDivContent = exports.FilterDivContent = _styledComponents.default.div`
+    width: 100%;
+    padding-top: 40px;
+    height: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    > div {
+        margin: 25px;
+    }
+`;
+const FilterFooterContent = exports.FilterFooterContent = _styledComponents.default.div`
+    height: 10%;
+`;

package/dist/stories/components/FilterPanel.js

@@ -0,0 +1,614 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _moment = _interopRequireDefault(require("moment"));
+var _DropdownNew = require("./DropdownNew");
+var _Button = _interopRequireDefault(require("./Button"));
+var _RangePicker = _interopRequireDefault(require("./RangePicker"));
+var _QuarterPicker = _interopRequireDefault(require("./QuarterPicker"));
+var _MonthPicker = _interopRequireDefault(require("./MonthPicker"));
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _FilterPanel = require("./FilterPanel.style");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+const FilterPanel = props => {
+  const {
+    availableQuarters,
+    availableMonths,
+    availableYears,
+    fieldsData,
+    borderColor,
+    okButtonBackgroundColor,
+    okButtonHoverColor,
+    resetButtonHoverColor,
+    onOkClick,
+    onResetClick,
+    onItemValueChanged,
+    width,
+    height,
+    disableOKButton,
+    className,
+    useExternalFilterState,
+    showShadow,
+    tooltipTextGoButton
+  } = props;
+  const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
+  const [Reset, setReset] = (0, _react.useState)(false);
+  const [FieldsContainerWidth, setFieldsContainerWidth] = (0, _react.useState)(0);
+  const AllFieldsContainerRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    const {
+      offsetWidth
+    } = AllFieldsContainerRef.current;
+    setFieldsContainerWidth(offsetWidth - 2);
+  }, [width]);
+  (0, _react.useEffect)(() => {
+    if (useExternalFilterState) {
+      setFieldsDataState(fieldsData);
+    } else {
+      const newFieldsDataState = FieldsDataState.map(itemFieldsDataState => {
+        const foundItem = fieldsData.find(itemfieldsData => itemFieldsDataState.name === itemfieldsData.name);
+        return {
+          ...itemFieldsDataState,
+          ...(itemFieldsDataState.dropdownOptions ? {
+            dropdownOptions: foundItem !== null && foundItem !== void 0 && foundItem.dropdownOptions ? foundItem === null || foundItem === void 0 ? void 0 : foundItem.dropdownOptions : undefined
+          } : ''),
+          ...{
+            disabled: (foundItem === null || foundItem === void 0 ? void 0 : foundItem.disabled) || false
+          }
+        };
+      });
+      setFieldsDataState(newFieldsDataState);
+    }
+  }, [fieldsData]);
+  const onChangeDropdownMultiHandler = (eventDropdownMulti, item) => {
+    var _eventDropdownMulti$n;
+    const newSelectedValue = (eventDropdownMulti === null || eventDropdownMulti === void 0 ? void 0 : (_eventDropdownMulti$n = eventDropdownMulti.newValue) === null || _eventDropdownMulti$n === void 0 ? void 0 : _eventDropdownMulti$n.length) > 0 ? eventDropdownMulti === null || eventDropdownMulti === void 0 ? void 0 : eventDropdownMulti.newValue : [];
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+      ...itemField,
+      selectedValue: newSelectedValue
+    } : itemField);
+    setFieldsDataState(newFieldsDataState);
+    onItemValueChanged({
+      fieldsData: newFieldsDataState,
+      changedItem: {
+        name: item.name,
+        inputType: item.inputType,
+        selectedValue: newSelectedValue
+      }
+    });
+  };
+  const onChangeDropdownSingleHandler = (eventDropdownSingle, item) => {
+    var _eventDropdownSingle$;
+    const newSelectedValue = (eventDropdownSingle === null || eventDropdownSingle === void 0 ? void 0 : (_eventDropdownSingle$ = eventDropdownSingle.newValue) === null || _eventDropdownSingle$ === void 0 ? void 0 : _eventDropdownSingle$.length) > 0 ? eventDropdownSingle === null || eventDropdownSingle === void 0 ? void 0 : eventDropdownSingle.newValue : [];
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+      ...itemField,
+      selectedValue: newSelectedValue
+    } : itemField);
+    setFieldsDataState(newFieldsDataState);
+    onItemValueChanged({
+      fieldsData: newFieldsDataState,
+      changedItem: {
+        name: item.name,
+        inputType: item.inputType,
+        selectedValue: (newSelectedValue === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? newSelectedValue[0].value : undefined
+      }
+    });
+  };
+  const getSelectedValueYear = item => {
+    var _item$defaultValueYea;
+    let selectedValueYear = [];
+    // console.log('selectedValueYear item:', item);
+    // if (availableYears && availableYears?.length > 0) {
+    //   selectedValueYear = [{ value: availableYears[0], label: availableYears[0] }];
+    // } else
+    if (item !== null && item !== void 0 && (_item$defaultValueYea = item.defaultValueYears) !== null && _item$defaultValueYea !== void 0 && _item$defaultValueYea.value) {
+      selectedValueYear = [item === null || item === void 0 ? void 0 : item.defaultValueYears];
+    }
+    // console.log('selectedValueYear selectedValueYear:', selectedValueYear);
+    return selectedValueYear;
+  };
+  const onChangeDropdownPeriodPickerHandler = (eventDropdownPeriodPicker, item) => {
+    var _newPeriodPickerSelec6, _newPeriodPickerSelec7, _newPeriodPickerSelec8, _newPeriodPickerSelec9, _newPeriodPickerSelec10, _getSelectedValueYear, _getSelectedValueYear2;
+    const newPeriodPickerSelectedValue = (eventDropdownPeriodPicker === null || eventDropdownPeriodPicker === void 0 ? void 0 : eventDropdownPeriodPicker.newValue) || [];
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => {
+      var _newPeriodPickerSelec, _newPeriodPickerSelec2, _newPeriodPickerSelec3, _newPeriodPickerSelec4, _newPeriodPickerSelec5;
+      return itemField.name === item.name ? {
+        ...itemField,
+        periodPickerSelectedValue: newPeriodPickerSelectedValue,
+        ...(((_newPeriodPickerSelec = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec === void 0 ? void 0 : _newPeriodPickerSelec.value) === 'year' ? {
+          inputSubType: 'year'
+        } : ''),
+        ...(((_newPeriodPickerSelec2 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec2 === void 0 ? void 0 : _newPeriodPickerSelec2.value) === 'month' ? {
+          inputSubType: 'month'
+        } : ''),
+        ...(((_newPeriodPickerSelec3 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec3 === void 0 ? void 0 : _newPeriodPickerSelec3.value) === 'quarter' ? {
+          inputSubType: 'quarter'
+        } : ''),
+        ...(((_newPeriodPickerSelec4 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec4 === void 0 ? void 0 : _newPeriodPickerSelec4.value) === 'daterange' ? {
+          inputSubType: 'daterange'
+        } : ''),
+        selectedValue: ((_newPeriodPickerSelec5 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec5 === void 0 ? void 0 : _newPeriodPickerSelec5.value) === 'year' ? getSelectedValueYear(item) : []
+      } : itemField;
+    });
+    setFieldsDataState(newFieldsDataState);
+    onItemValueChanged({
+      fieldsData: newFieldsDataState,
+      changedItem: {
+        name: item.name,
+        inputType: item.inputType,
+        ...(((_newPeriodPickerSelec6 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec6 === void 0 ? void 0 : _newPeriodPickerSelec6.value) === 'year' ? {
+          inputSubType: 'year'
+        } : ''),
+        ...(((_newPeriodPickerSelec7 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec7 === void 0 ? void 0 : _newPeriodPickerSelec7.value) === 'month' ? {
+          inputSubType: 'month'
+        } : ''),
+        ...(((_newPeriodPickerSelec8 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec8 === void 0 ? void 0 : _newPeriodPickerSelec8.value) === 'quarter' ? {
+          inputSubType: 'quarter'
+        } : ''),
+        ...(((_newPeriodPickerSelec9 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec9 === void 0 ? void 0 : _newPeriodPickerSelec9.value) === 'daterange' ? {
+          inputSubType: 'daterange'
+        } : ''),
+        selectedValue: ((_newPeriodPickerSelec10 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec10 === void 0 ? void 0 : _newPeriodPickerSelec10.value) === 'year' && ((_getSelectedValueYear = getSelectedValueYear(item)) === null || _getSelectedValueYear === void 0 ? void 0 : _getSelectedValueYear.length) > 0 ? (_getSelectedValueYear2 = getSelectedValueYear(item)[0]) === null || _getSelectedValueYear2 === void 0 ? void 0 : _getSelectedValueYear2.value : undefined
+      }
+    });
+  };
+  const onClickResetHandler = () => {
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
+      ...itemField,
+      selectedValue: [],
+      ...(itemField.periodPickerSelectedValue ? {
+        periodPickerSelectedValue: []
+      } : ''),
+      ...(itemField.inputSubType ? {
+        inputSubType: undefined
+      } : '')
+    }));
+    setFieldsDataState(newFieldsDataState);
+    setReset(!Reset);
+    onResetClick({
+      eventName: 'onResetClick',
+      fieldsData: newFieldsDataState
+    });
+  };
+  const getTooltipTextDates = () => /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipTextContainer, null, /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, "Dates can be selected"), /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, "only after selecting"), /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, "period types"));
+  const getTooltipTextGoButton = () => /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipTextContainer, null, /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, tooltipTextGoButton));
+  const getYearsArray = () => {
+    const currentYear = (0, _moment.default)().year();
+    const previousYear = (0, _moment.default)().subtract(1, 'years').year();
+    const yearsArray = [{
+      value: `${previousYear}`,
+      label: `${previousYear}`
+    }, {
+      value: `${currentYear}`,
+      label: `${currentYear}`
+    }];
+    return yearsArray;
+  };
+  const onChangeDropdownYearHandler = (eventDropdownYear, item) => {
+    const newSelectedValue = (eventDropdownYear === null || eventDropdownYear === void 0 ? void 0 : eventDropdownYear.newValue) || [];
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+      ...itemField,
+      inputSubType: (newSelectedValue === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? 'year' : undefined,
+      selectedValue: newSelectedValue
+    } : itemField);
+    setFieldsDataState(newFieldsDataState);
+    onItemValueChanged({
+      fieldsData: newFieldsDataState,
+      changedItem: {
+        name: item.name,
+        inputType: item.inputType,
+        inputSubType: (newSelectedValue === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? 'year' : undefined,
+        selectedValue: (newSelectedValue === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? newSelectedValue[0].value : undefined
+      }
+    });
+  };
+  const displayPeriodPickerContent = item => {
+    var _item$periodPickerSel, _item$periodPickerSel2;
+    let content;
+    const currentValue = item.periodPickerSelectedValue && ((_item$periodPickerSel = item.periodPickerSelectedValue) === null || _item$periodPickerSel === void 0 ? void 0 : _item$periodPickerSel.length) > 0 ? (_item$periodPickerSel2 = item.periodPickerSelectedValue[0]) === null || _item$periodPickerSel2 === void 0 ? void 0 : _item$periodPickerSel2.value : '';
+    let selectedValueYear = [];
+    if (typeof item.selectedValue === 'string') {
+      selectedValueYear = [{
+        value: item.selectedValue,
+        label: item.selectedValue
+      }];
+    } else {
+      selectedValueYear = item.selectedValue;
+    }
+    switch (currentValue) {
+      case 'daterange':
+        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
+          className: "DatePickerContainer"
+        }, /*#__PURE__*/_react.default.createElement(_RangePicker.default, {
+          className: "RangePicker",
+          name: ''.concat(item.name, '_Date'),
+          borderColor: "#E7E7E7",
+          borderColorFocus: borderColor,
+          textColor: "#212121",
+          borderRadius: "12px",
+          label: "Date Range",
+          onChange: eventRangePicker => {
+            const selectedValue = eventRangePicker && typeof eventRangePicker === 'string' ? `${eventRangePicker}` : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              inputSubType: 'daterange',
+              // selectedValue ? 'daterange' : undefined,
+              selectedValue: selectedValue ? `${selectedValue}` : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: 'daterange',
+                selectedValue: selectedValue ? `${selectedValue}` : undefined
+              }
+            });
+          },
+          required: item.required,
+          placeholder: "Select Date Range ...",
+          selectedValue: item.selectedValue || '',
+          width: "100%",
+          height: "55px"
+        }));
+        break;
+      case 'month':
+        content = /*#__PURE__*/_react.default.createElement(_MonthPicker.default, {
+          availableMonths: availableMonths,
+          name: ''.concat(item.name, '_Month'),
+          borderColor: "#E7E7E7",
+          borderColorFocus: borderColor,
+          textColor: "#212121",
+          borderRadius: "12px",
+          label: "Month",
+          required: item.required,
+          onChange: eventMonthPicker => {
+            const selectedValue = eventMonthPicker && typeof eventMonthPicker === 'string' ? `${eventMonthPicker}` : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              inputSubType: 'month',
+              // inputSubType: selectedValue ? 'month' : undefined,
+              selectedValue: selectedValue ? `${selectedValue}` : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: 'month',
+                selectedValue: selectedValue ? `${selectedValue}` : undefined
+              }
+            });
+          },
+          placeholder: "Select Month ...",
+          selectedValue: item.selectedValue || '',
+          width: "100%",
+          height: "55px"
+        });
+        break;
+      case 'quarter':
+        content = /*#__PURE__*/_react.default.createElement(_QuarterPicker.default, {
+          availableQuarters: availableQuarters,
+          className: "QuarterPicker",
+          name: ''.concat(item.name, '_Quarter'),
+          borderColor: "#E7E7E7",
+          borderColorFocus: borderColor,
+          textColor: "#212121",
+          borderRadius: "12px",
+          label: "Quarter",
+          required: item.required,
+          onChange: eventQuarterPicker => {
+            const selectedValue = eventQuarterPicker && typeof eventQuarterPicker === 'string' ? `${eventQuarterPicker}` : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              inputSubType: 'quarter',
+              // inputSubType: selectedValue ? 'quarter' : undefined,
+              selectedValue: selectedValue ? `${selectedValue}` : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: 'quarter',
+                selectedValue: selectedValue ? `${selectedValue}` : undefined
+              }
+            });
+          },
+          placeholder: "Select Quarter ...",
+          selectedValue: item.selectedValue || '',
+          width: "100%",
+          height: "55px"
+        });
+        break;
+      case 'year':
+        content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
+          className: "Dropdown_Year",
+          name: ''.concat(item.name, '_Year'),
+          key: item.reset,
+          isMulti: false,
+          placeHolder: "Select Year ...",
+          label: "Year",
+          labelEmptyValue: "Year",
+          labelColor: borderColor,
+          checkBoxColor: okButtonBackgroundColor,
+          required: item.required,
+          disabled: item.disabled,
+          xIconShow: false,
+          error: false,
+          errorMessage: "",
+          selectedValue: selectedValueYear,
+          onChange: eventDropdownYear => onChangeDropdownYearHandler(eventDropdownYear, item),
+          options: availableYears && (availableYears === null || availableYears === void 0 ? void 0 : availableYears.length) > 0 ? availableYears.map(itemYear => ({
+            value: itemYear,
+            label: itemYear
+          })) : getYearsArray(),
+          width: "100%"
+        });
+        break;
+      default:
+        content = /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+          className: "Tooltip",
+          content: getTooltipTextDates(),
+          direction: "top",
+          topFactor: -1.8
+        }, /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerEmptyContainer, {
+          className: "PeriodPickerEmptyContainer",
+          width: FieldsContainerWidth ? `${FieldsContainerWidth === null || FieldsContainerWidth === void 0 ? void 0 : FieldsContainerWidth.toString()}px` : undefined,
+          height: "50px"
+        }, /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerEmptyText, {
+          className: "PeriodPickerEmptyText"
+        }, "Select Dates")));
+    }
+    return content;
+  };
+  const displayField = item => {
+    let content;
+    switch (item.inputType) {
+      case 'dropdown':
+        content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
+          className: "Dropdown_Single",
+          name: item.name,
+          key: item.reset,
+          isMulti: false,
+          placeHolder: item.placeHolder,
+          label: item.label,
+          orderBy: item.orderBy,
+          elementType: item.elementType,
+          labelEmptyValue: item.labelEmptyValue,
+          labelColor: borderColor,
+          checkBoxColor: okButtonBackgroundColor,
+          required: item.required,
+          disabled: item.disabled,
+          xIconShow: item.xIconShow,
+          error: false,
+          errorMessage: "",
+          selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
+          onChange: eventDropdown => onChangeDropdownSingleHandler(eventDropdown, item),
+          options: item.dropdownOptions || [],
+          width: "100%"
+        });
+        break;
+      case 'dropdownMulti':
+        content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
+          className: "Dropdown_Multi",
+          name: item.name,
+          key: item.reset,
+          isMulti: true,
+          placeHolder: item.placeHolder,
+          label: item.label,
+          orderBy: item.orderBy,
+          elementType: item.elementType,
+          labelEmptyValue: item.labelEmptyValue,
+          labelColor: borderColor,
+          checkBoxColor: okButtonBackgroundColor,
+          required: item.required,
+          disabled: item.disabled,
+          xIconShow: item.xIconShow,
+          error: false,
+          errorMessage: "",
+          selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
+          onChange: eventDropdownMulti => onChangeDropdownMultiHandler(eventDropdownMulti, item),
+          options: item.dropdownOptions || [],
+          width: "100%"
+        });
+        break;
+      case 'datepicker':
+        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
+          className: "DatePickerContainer"
+        }, /*#__PURE__*/_react.default.createElement(_RangePicker.default, {
+          className: "RangePicker",
+          borderColor: borderColor,
+          borderRadius: "12px",
+          label: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
+          selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
+          onChange: eventDatePicker => {
+            const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? `${eventDatePicker}` : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              selectedValue: selectedValue ? `${selectedValue}` : undefined,
+              inputType: item.inputType,
+              inputSubType: item.inputSubType
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: item.inputSubType,
+                selectedValue: selectedValue ? `${selectedValue}` : undefined
+              }
+            });
+          },
+          required: item.required,
+          placeholder: item.placeHolder,
+          width: "100%",
+          height: "55px"
+        }));
+        break;
+      case 'periodpicker':
+        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
+          className: "PeriodPickerContainer"
+        }, /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
+          className: "Dropdown_PeriodPicker",
+          name: item.name,
+          key: item.reset,
+          isMulti: false,
+          placeHolder: item.placeHolder,
+          label: item.label,
+          labelEmptyValue: item.labelEmptyValue,
+          labelColor: borderColor,
+          checkBoxColor: okButtonBackgroundColor,
+          required: item.required,
+          disabled: item.disabled,
+          xIconShow: false,
+          error: false,
+          errorMessage: "",
+          selectedValue: item.periodPickerSelectedValue || [],
+          onChange: eventDropdownPeriodPicker => onChangeDropdownPeriodPickerHandler(eventDropdownPeriodPicker, item),
+          options: item.dropdownOptions || [],
+          width: "100%"
+        }), displayPeriodPickerContent(item));
+        break;
+      default:
+        content = '';
+        break;
+    }
+    return content;
+  };
+  const displayFields = data => {
+    if (!data || data.length === 0) {
+      return '';
+    }
+    return /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldsContainer, {
+      className: "FieldsContainer"
+    }, data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldContainer, {
+      className: "FieldContainer"
+    }, displayField(item))));
+  };
+  const displayGoButton = () => {
+    let content;
+    if (tooltipTextGoButton) {
+      content = /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+        className: "Tooltip",
+        content: getTooltipTextGoButton(),
+        direction: "top",
+        topFactor: -0.9
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        text: "Go",
+        type: "primary",
+        size: "medium",
+        width: "74px",
+        textColor: "#ffffff",
+        backgroundColor: okButtonBackgroundColor,
+        borderColor: okButtonBackgroundColor,
+        hoverTextColor: "#ffffff",
+        hoverBackgroundColor: okButtonHoverColor,
+        hoverBorderColor: okButtonHoverColor,
+        disabledTextColor: "#B1B1B1",
+        disabledBackgroundColor: "#E3E4E5",
+        disabledBorderColor: "#E3E4E5",
+        disabled: disableOKButton,
+        onClick: () => onOkClick({
+          eventName: 'onOkClick',
+          fieldsData: FieldsDataState,
+          selectedValues: FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
+            name: itemField.name,
+            selectedValue: itemField.selectedValue,
+            ...(itemField.inputSubType ? {
+              inputSubType: itemField.inputSubType
+            } : '')
+          }))
+        })
+      }));
+    } else {
+      content = /*#__PURE__*/_react.default.createElement(_Button.default, {
+        text: "Go",
+        type: "primary",
+        size: "medium",
+        width: "74px",
+        textColor: "#ffffff",
+        backgroundColor: okButtonBackgroundColor,
+        borderColor: okButtonBackgroundColor,
+        hoverTextColor: "#ffffff",
+        hoverBackgroundColor: okButtonHoverColor,
+        hoverBorderColor: okButtonHoverColor,
+        disabledTextColor: "#B1B1B1",
+        disabledBackgroundColor: "#E3E4E5",
+        disabledBorderColor: "#E3E4E5",
+        disabled: disableOKButton,
+        onClick: () => onOkClick({
+          eventName: 'onOkClick',
+          fieldsData: FieldsDataState,
+          selectedValues: FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
+            name: itemField.name,
+            selectedValue: itemField.selectedValue,
+            ...(itemField.inputSubType ? {
+              inputSubType: itemField.inputSubType
+            } : '')
+          }))
+        })
+      });
+    }
+    return content;
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterPanel.ControlsContainer, {
+    className: className,
+    height: height,
+    width: width,
+    showShadow: showShadow
+  }, /*#__PURE__*/_react.default.createElement(_FilterPanel.AllFieldsContainer, {
+    className: "AllFieldsContainer",
+    ref: AllFieldsContainerRef
+  }, displayFields(FieldsDataState)), /*#__PURE__*/_react.default.createElement(_FilterPanel.ButtonsContainer, {
+    className: "ButtonsContainer"
+  }, displayGoButton(), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Reset",
+    size: "medium",
+    type: "secondary",
+    width: "74px",
+    textColor: "#212121",
+    backgroundColor: "#ffffff",
+    borderColor: "#B1B1B1",
+    hoverTextColor: okButtonBackgroundColor,
+    hoverBackgroundColor: resetButtonHoverColor,
+    hoverBorderColor: okButtonBackgroundColor,
+    disabledTextColor: "#B1B1B1",
+    disabledBackgroundColor: "#ffffff",
+    disabledBorderColor: "#E3E4E5",
+    disabled: false,
+    onClick: e => onClickResetHandler(e)
+  })));
+};
+var _default = exports.default = FilterPanel;
+FilterPanel.defaultProps = {
+  availableQuarters: ['Q1-2024'],
+  availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024'],
+  availableYears: ['2024', '2023'],
+  fieldsData: [],
+  width: '800px',
+  height: '600px',
+  okButtonBackgroundColor: '#229E38',
+  okButtonHoverColor: '#92CF17',
+  resetButtonHoverColor: '#E8F5EB',
+  borderColor: '#757575',
+  onOkClick: () => {},
+  onResetClick: () => {},
+  onItemValueChanged: () => {},
+  disableOKButton: false,
+  className: '',
+  useExternalFilterState: false,
+  showShadow: true,
+  tooltipTextGoButton: ''
+};