sag_components 1.0.976 → 1.0.978

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

@@ -1,571 +0,0 @@
-"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: `${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: getTooltipText(),
-          direction: "top",
-          width: "100%",
-          height: "50px"
-        }, /*#__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 => {
-    var _item$orderBy, _item$elementType, _item$orderBy2, _item$elementType2;
-    let content;
-    switch (item.inputType) {
-      case 'dropdown':
-        content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
-          className: "Dropdown_Single",
-          name: item.name,
-          key: item.reset,
-          orderBy: (_item$orderBy = item.orderBy) !== null && _item$orderBy !== void 0 ? _item$orderBy : 'asc',
-          elementType: (_item$elementType = item.elementType) !== null && _item$elementType !== void 0 ? _item$elementType : 'number',
-          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,
-          orderBy: (_item$orderBy2 = item.orderBy) !== null && _item$orderBy2 !== void 0 ? _item$orderBy2 : 'asc',
-          elementType: (_item$elementType2 = item.elementType) !== null && _item$elementType2 !== void 0 ? _item$elementType2 : 'number',
-          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' ? `${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))));
-  };
-  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
-};