sag_components 1.0.950 → 1.0.951

package/dist/stories/components/FilterPanel/FilterPanel.js

@@ -0,0 +1,566 @@
+"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/DropdownNew");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _RangePicker = _interopRequireDefault(require("../RangePicker/RangePicker"));
+var _QuarterPicker = _interopRequireDefault(require("../QuarterPicker/QuarterPicker"));
+var _MonthPicker = _interopRequireDefault(require("../MonthPicker/MonthPicker"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
+var _FilterPanel = require("./FilterPanel.style");
+const FilterPanel = props => {
+  const {
+    availableQuarters,
+    availableMonths,
+    availableYears,
+    fieldsData,
+    borderColor,
+    okButtonBackgroundColor,
+    okButtonHoverColor,
+    resetButtonHoverColor,
+    onOkClick,
+    onResetClick,
+    onItemValueChanged,
+    width,
+    height,
+    disableOKButton,
+    className,
+    useExternalFilterState,
+    showShadow
+  } = 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 getTooltipText = () => /*#__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 getYearsArray = () => {
+    const currentYear = (0, _moment.default)().year();
+    const previousYear = (0, _moment.default)().subtract(1, 'years').year();
+    const yearsArray = [{
+      value: "".concat(previousYear),
+      label: "".concat(previousYear)
+    }, {
+      value: "".concat(currentYear),
+      label: "".concat(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' ? "".concat(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 ? "".concat(selectedValue) : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: 'daterange',
+                selectedValue: selectedValue ? "".concat(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' ? "".concat(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 ? "".concat(selectedValue) : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: 'month',
+                selectedValue: selectedValue ? "".concat(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' ? "".concat(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 ? "".concat(selectedValue) : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: 'quarter',
+                selectedValue: selectedValue ? "".concat(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: getTooltipText(),
+          direction: "top",
+          width: "100%",
+          height: "50px"
+        }, /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerEmptyContainer, {
+          className: "PeriodPickerEmptyContainer",
+          width: FieldsContainerWidth ? "".concat(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,
+          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,
+          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' ? "".concat(eventDatePicker) : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              selectedValue: selectedValue ? "".concat(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 ? "".concat(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))));
+  };
+  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"
+  }, /*#__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
+        } : '')
+      }))
+    })
+  }), /*#__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
+};