sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/FilterPanel/FilterPanel.js

@@ -1,459 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-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");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
-// 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?.dropdownOptions ? foundItem?.dropdownOptions : undefined
-          } : ''),
-          ...{
-            disabled: foundItem?.disabled || false
-          }
-        };
-      });
-      setFieldsDataState(newFieldsDataState);
-    }
-  }, [fieldsData]);
-  const onChangeDropdownMultiHandler = (eventDropdownMulti, item) => {
-    const newSelectedValue = eventDropdownMulti?.newValue?.length > 0 ? eventDropdownMulti?.newValue : [];
-    const newFieldsDataState = 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) => {
-    const newSelectedValue = eventDropdownSingle?.newValue?.length > 0 ? eventDropdownSingle?.newValue : [];
-    const newFieldsDataState = 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?.length > 0 ? newSelectedValue[0].value : undefined
-      }
-    });
-  };
-  const getSelectedValueYear = item => {
-    let selectedValueYear = [];
-    // console.log('selectedValueYear item:', item);
-    // if (availableYears && availableYears?.length > 0) {
-    //   selectedValueYear = [{ value: availableYears[0], label: availableYears[0] }];
-    // } else
-    if (item?.defaultValueYears?.value) {
-      selectedValueYear = [item?.defaultValueYears];
-    }
-    // console.log('selectedValueYear selectedValueYear:', selectedValueYear);
-    return selectedValueYear;
-  };
-  const onChangeDropdownPeriodPickerHandler = (eventDropdownPeriodPicker, item) => {
-    const newPeriodPickerSelectedValue = eventDropdownPeriodPicker?.newValue || [];
-    const newFieldsDataState = FieldsDataState?.map(itemField => itemField.name === item.name ? {
-      ...itemField,
-      periodPickerSelectedValue: newPeriodPickerSelectedValue,
-      ...(newPeriodPickerSelectedValue[0]?.value === 'year' ? {
-        inputSubType: 'year'
-      } : ''),
-      ...(newPeriodPickerSelectedValue[0]?.value === 'month' ? {
-        inputSubType: 'month'
-      } : ''),
-      ...(newPeriodPickerSelectedValue[0]?.value === 'quarter' ? {
-        inputSubType: 'quarter'
-      } : ''),
-      ...(newPeriodPickerSelectedValue[0]?.value === 'daterange' ? {
-        inputSubType: 'daterange'
-      } : ''),
-      selectedValue: newPeriodPickerSelectedValue[0]?.value === 'year' ? getSelectedValueYear(item) : []
-    } : itemField);
-    setFieldsDataState(newFieldsDataState);
-    onItemValueChanged({
-      fieldsData: newFieldsDataState,
-      changedItem: {
-        name: item.name,
-        inputType: item.inputType,
-        ...(newPeriodPickerSelectedValue[0]?.value === 'year' ? {
-          inputSubType: 'year'
-        } : ''),
-        ...(newPeriodPickerSelectedValue[0]?.value === 'month' ? {
-          inputSubType: 'month'
-        } : ''),
-        ...(newPeriodPickerSelectedValue[0]?.value === 'quarter' ? {
-          inputSubType: 'quarter'
-        } : ''),
-        ...(newPeriodPickerSelectedValue[0]?.value === 'daterange' ? {
-          inputSubType: 'daterange'
-        } : ''),
-        selectedValue: newPeriodPickerSelectedValue[0]?.value === 'year' && getSelectedValueYear(item)?.length > 0 ? getSelectedValueYear(item)[0]?.value : undefined
-      }
-    });
-  };
-  const onClickResetHandler = () => {
-    const newFieldsDataState = FieldsDataState?.map(itemField => ({
-      ...itemField,
-      selectedValue: [],
-      ...(itemField.periodPickerSelectedValue ? {
-        periodPickerSelectedValue: []
-      } : ''),
-      ...(itemField.inputSubType ? {
-        inputSubType: undefined
-      } : '')
-    }));
-    setFieldsDataState(newFieldsDataState);
-    setReset(!Reset);
-    onResetClick({
-      eventName: 'onResetClick',
-      fieldsData: newFieldsDataState
-    });
-  };
-  const getTooltipTextDates = () => <_FilterPanel.TooltipTextContainer>
-      <_FilterPanel.TooltipText>
-        Dates can be selected
-      </_FilterPanel.TooltipText>
-      <_FilterPanel.TooltipText>
-        only after selecting
-      </_FilterPanel.TooltipText>
-      <_FilterPanel.TooltipText>
-        period types
-      </_FilterPanel.TooltipText>
-    </_FilterPanel.TooltipTextContainer>;
-  const getTooltipTextGoButton = () => <_FilterPanel.TooltipTextContainer>
-      <_FilterPanel.TooltipText>
-        {tooltipTextGoButton}
-      </_FilterPanel.TooltipText>
-    </_FilterPanel.TooltipTextContainer>;
-  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?.newValue || [];
-    const newFieldsDataState = FieldsDataState?.map(itemField => itemField.name === item.name ? {
-      ...itemField,
-      inputSubType: newSelectedValue?.length > 0 ? 'year' : undefined,
-      selectedValue: newSelectedValue
-    } : itemField);
-    setFieldsDataState(newFieldsDataState);
-    onItemValueChanged({
-      fieldsData: newFieldsDataState,
-      changedItem: {
-        name: item.name,
-        inputType: item.inputType,
-        inputSubType: newSelectedValue?.length > 0 ? 'year' : undefined,
-        selectedValue: newSelectedValue?.length > 0 ? newSelectedValue[0].value : undefined
-      }
-    });
-  };
-  const displayPeriodPickerContent = item => {
-    let content;
-    const currentValue = item.periodPickerSelectedValue && item.periodPickerSelectedValue?.length > 0 ? item.periodPickerSelectedValue[0]?.value : '';
-    let selectedValueYear = [];
-    if (typeof item.selectedValue === 'string') {
-      selectedValueYear = [{
-        value: item.selectedValue,
-        label: item.selectedValue
-      }];
-    } else {
-      selectedValueYear = item.selectedValue;
-    }
-    switch (currentValue) {
-      case 'daterange':
-        content = <_FilterPanel.DatePickerContainer className="DatePickerContainer">
-            <_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?.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" />
-          </_FilterPanel.DatePickerContainer>;
-        break;
-      case 'month':
-        content = <_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?.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 = <_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?.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 = <_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?.length > 0 ? availableYears.map(itemYear => ({
-          value: itemYear,
-          label: itemYear
-        })) : getYearsArray()} width="100%" />;
-        break;
-      default:
-        content = <_Tooltip.default className="Tooltip" content={getTooltipTextDates()} direction="top" topFactor={-1.8}>
-            <_FilterPanel.PeriodPickerEmptyContainer className="PeriodPickerEmptyContainer" width={FieldsContainerWidth ? `${FieldsContainerWidth?.toString()}px` : undefined} height="50px">
-              <_FilterPanel.PeriodPickerEmptyText className="PeriodPickerEmptyText">
-                Select Dates
-              </_FilterPanel.PeriodPickerEmptyText>
-            </_FilterPanel.PeriodPickerEmptyContainer>
-          </_Tooltip.default>;
-    }
-    return content;
-  };
-  const displayField = item => {
-    let content;
-    switch (item.inputType) {
-      case 'dropdown':
-        content = <_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 = <_DropdownNew.DropdownNew className="Dropdown_Multi" name={item.name} key={item.reset} isMulti 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 = <_FilterPanel.DatePickerContainer className="DatePickerContainer">
-            <_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?.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" />
-          </_FilterPanel.DatePickerContainer>;
-        break;
-      case 'periodpicker':
-        content = <_FilterPanel.PeriodPickerContainer className="PeriodPickerContainer">
-            <_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)}
-          </_FilterPanel.PeriodPickerContainer>;
-        break;
-      default:
-        content = '';
-        break;
-    }
-    return content;
-  };
-  const displayFields = data => {
-    if (!data || data.length === 0) {
-      return '';
-    }
-    return <_FilterPanel.FieldsContainer className="FieldsContainer">
-        {data?.map(item => <_FilterPanel.FieldContainer className="FieldContainer">
-            {displayField(item)}
-          </_FilterPanel.FieldContainer>)}
-      </_FilterPanel.FieldsContainer>;
-  };
-  const displayGoButton = () => {
-    let content;
-    if (tooltipTextGoButton) {
-      content = <_Tooltip.default className="Tooltip" content={getTooltipTextGoButton()} direction="top" topFactor={-0.9}>
-          <_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?.map(itemField => ({
-            name: itemField.name,
-            selectedValue: itemField.selectedValue,
-            ...(itemField.inputSubType ? {
-              inputSubType: itemField.inputSubType
-            } : '')
-          }))
-        })} />
-
-        </_Tooltip.default>;
-    } else {
-      content = <_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?.map(itemField => ({
-          name: itemField.name,
-          selectedValue: itemField.selectedValue,
-          ...(itemField.inputSubType ? {
-            inputSubType: itemField.inputSubType
-          } : '')
-        }))
-      })} />;
-    }
-    return content;
-  };
-  return <_FilterPanel.ControlsContainer className={className} height={height} width={width} showShadow={showShadow}>
-      <_FilterPanel.AllFieldsContainer className="AllFieldsContainer" ref={AllFieldsContainerRef}>
-        {displayFields(FieldsDataState)}
-      </_FilterPanel.AllFieldsContainer>
-
-      <_FilterPanel.ButtonsContainer className="ButtonsContainer">
-
-        {displayGoButton()}
-
-        <_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)} />
-      </_FilterPanel.ButtonsContainer>
-    </_FilterPanel.ControlsContainer>;
-};
-var _default = exports.default = FilterPanel;
-FilterPanel.propTypes = {
-  availableQuarters: _propTypes.default.arrayOf(_propTypes.default.string),
-  availableMonths: _propTypes.default.arrayOf(_propTypes.default.string),
-  availableYears: _propTypes.default.arrayOf(_propTypes.default.string),
-  fieldsData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    name: _propTypes.default.string,
-    value: _propTypes.default.number,
-    color: _propTypes.default.string
-  })),
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  okButtonBackgroundColor: _propTypes.default.string,
-  okButtonHoverColor: _propTypes.default.string,
-  resetButtonHoverColor: _propTypes.default.string,
-  borderColor: '#066768',
-  onOkClick: _propTypes.default.func,
-  onResetClick: _propTypes.default.func,
-  onItemValueChanged: _propTypes.default.func,
-  disableOKButton: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  useExternalFilterState: _propTypes.default.bool,
-  showShadow: _propTypes.default.bool,
-  tooltipTextGoButton: _propTypes.default.string
-};
-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: ''
-};