@mailstep/design-system 0.6.14 → 0.6.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.14",
+  "version": "0.6.16",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useGetGridHeight from './hooks/useGetGridHeight';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils';
 import useEditReadAsColumn from './hooks/useEditReadAsColumn';
 import { useModal } from '../Modal/hooks/useModal';
@@ -42,7 +42,8 @@ import { Settings2 } from '../../Elements/Icon/icons/Settings2';
 var StyledCommonGrid = function (props) {
     var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
-    var _b = useGetGridHeight(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
+    var _b = useState(false), displayManageColumnButton = _b[0], setDisplayManageColumnButton = _b[1];
+    var _c = useGetGridHeight(), gridHeight = _c.gridHeight, gridRef = _c.gridRef, paginationRef = _c.paginationRef;
     useEffect(function () {
         var _a;
         if (!queryRowsParam && gridHeight && gridHeight > 0) {
@@ -54,13 +55,13 @@ var StyledCommonGrid = function (props) {
     var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
     var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
     var columns = modifiedPassDownProps.columnsDefinitions;
-    var _c = useModal(), openManageColumnForm = _c.onOpen, manageColumnFormVisible = _c.isOpen, onClose = _c.onClose;
-    var _d = useManageColumn({
+    var _d = useModal(), openManageColumnForm = _d.onOpen, manageColumnFormVisible = _d.isOpen, onClose = _d.onClose;
+    var _e = useManageColumn({
         columns: columns,
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         onClose: onClose,
-    }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig, handleDragEnd = _d.handleDragEnd, onCloseForm = _d.onCloseForm, displayColumnsDefinitions = _d.displayColumnsDefinitions, manageColumnsFormDefinitions = _d.manageColumnsFormDefinitions;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters })), _jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
+    }), columnsConfigValues = _e.columnsConfigValues, setColumnsConfigOptions = _e.setColumnsConfigOptions, onConfirmForm = _e.onConfirmForm, resetColumnConfig = _e.resetColumnConfig, handleDragEnd = _e.handleDragEnd, onCloseForm = _e.onCloseForm, displayColumnsDefinitions = _e.displayColumnsDefinitions, manageColumnsFormDefinitions = _e.manageColumnsFormDefinitions;
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton })), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
 };
 export default StyledCommonGrid;

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts

@@ -1,7 +1,7 @@
 import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition, FiltersConfig } from '../../types';
+import { Dispatch } from 'react';
 export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 type Props = {
-    columns?: CommonGridProps['columnsDefinitions'];
     extraControlButtons: CommonGridProps['extraControlButtons'];
     eshopSelect: CommonGridProps['extraControlButtons'];
     gridActions: GridActionsType;
@@ -9,6 +9,7 @@ type Props = {
     quickFilter?: CommonGridProps['quickFilter'];
     displayColumnsDefinitions?: ColumnDefinition<string>[];
     filters?: FiltersConfig;
+    setDisplayManageColumnButton: Dispatch<React.SetStateAction<boolean>>;
 };
-declare const ControlButtons: ({ extraControlButtons, eshopSelect, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, }: Props) => JSX.Element;
+declare const ControlButtons: ({ extraControlButtons, eshopSelect, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, setDisplayManageColumnButton, }: Props) => JSX.Element;
 export default ControlButtons;

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -3,63 +3,34 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
 import styled, { x } from '@xstyled/styled-components';
 import { Trans } from '@lingui/react';
 import ExtraControlButtons from '../ExtraControlButtons';
 import { ExtraControlButtonPosition, } from '../../types';
 import Button from '../../../../Elements/Button/Button';
 import { i18n } from '@lingui/core';
-import { useAddFilter } from '../../hooks/useAddFilter';
-import { createFilterType } from '../../utils';
-import { isObject } from 'lodash';
 import QuickFilter from '../QuickFilter';
+import useQuickFilter from '../../hooks/useQuickFilter';
+import { useEffect } from 'react';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"])));
-var defaultVoidFunction = function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return null;
-};
 var ControlButtons = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _h = _a.quickFilter, quickFilter = _h === void 0 ? '' : _h, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters;
-    var resetFilters = gridActions.resetFilters, _j = gridActions.addFilter, addFilter = _j === void 0 ? defaultVoidFunction : _j;
-    var filter = gridSelectors.filter;
-    var _k = useState(''), searchedValue = _k[0], setSearchedValue = _k[1];
-    var handleAddFilter = useAddFilter(addFilter);
-    var quickFilterValues = (_b = filter === null || filter === void 0 ? void 0 : filter[quickFilter]) === null || _b === void 0 ? void 0 : _b.value;
-    var searchedColumnsDefinitions = (displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.find(function (item) { return item.name === quickFilter; })) || null;
-    var filterType = createFilterType(searchedColumnsDefinitions || {});
-    var filtersDefaultComparator = (_c = filters === null || filters === void 0 ? void 0 : filters[filterType].defaultExtraProps) === null || _c === void 0 ? void 0 : _c.defaultComparator;
-    var searchComparator = (quickFilterValues && quickFilterValues.comparator) || filtersDefaultComparator;
-    var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
+    var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, setDisplayManageColumnButton = _a.setDisplayManageColumnButton;
+    var _c = useQuickFilter({
+        gridActions: gridActions,
+        gridSelectors: gridSelectors,
+        quickFilter: quickFilter,
+        displayColumnsDefinitions: displayColumnsDefinitions,
+        filters: filters,
+    }), searchedValue = _c.searchedValue, translatedValue = _c.translatedValue, onChangeInputValue = _c.onChangeInputValue, onClear = _c.onClear, onResetFilters = _c.onResetFilters, onDisplayInput = _c.onDisplayInput, displayInput = _c.displayInput, isMobileInputView = _c.isMobileInputView, filter = _c.filter;
     useEffect(function () {
-        quickFilterValues && setSearchedValue(quickFilterValues.value);
-    }, [quickFilterValues, quickFilter]);
-    var onChangeInputValue = useCallback(function (e) {
-        setSearchedValue(e.target.value);
-        var value = {
-            comparator: searchComparator,
-            value: e.target.value,
-        };
-        searchedColumnsDefinitions && handleAddFilter(value, searchedColumnsDefinitions);
-    }, [setSearchedValue, searchComparator, handleAddFilter, searchedColumnsDefinitions]);
-    var onResetFilters = useCallback(function () {
-        resetFilters === null || resetFilters === void 0 ? void 0 : resetFilters();
-        setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
-    }, []);
-    var translatedValue = searchedColumnsDefinitions &&
-        isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
-        'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
-        ((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
-        i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message });
+        setDisplayManageColumnButton(!isMobileInputView);
+    }, [isMobileInputView, setDisplayManageColumnButton]);
+    var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
     return (_jsxs(Row, { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
                     id: 'controlButtons.searchPlaceholder',
                     message: "Search ".concat(translatedValue, " ..."),
                     values: { translatedValue: translatedValue },
-                }), onChange: onChangeInputValue })), eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
+                }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView })), eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
 };
 export default ControlButtons;
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.d.ts

@@ -3,6 +3,10 @@ type QuickFilterProps = {
     searchedValue: string;
     placeholderText?: string;
     onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClick: () => void;
+    displayInput: boolean;
+    onClear: () => void;
+    isMobileInputView?: boolean;
 };
-declare const QuickFilter: ({ searchedValue, placeholderText, onChange }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;
+declare const QuickFilter: ({ searchedValue, placeholderText, onChange, onClick, displayInput, onClear, isMobileInputView, }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;
 export default QuickFilter;

package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.js

@@ -1,8 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import Input from '../../../../Forms/Input';
-import { x } from '@xstyled/styled-components';
+import styled, { x } from '@xstyled/styled-components';
+import Button from '../../../../Elements/Button';
+var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: ", ";\n  z-index: ", ";\n  width: ", ";\n"], ["\n  position: ", ";\n  z-index: ", ";\n  width: ", ";\n"])), function (_a) {
+    var isMobileInputView = _a.isMobileInputView;
+    return (isMobileInputView ? 'absolute' : 'relative');
+}, function (_a) {
+    var isMobileInputView = _a.isMobileInputView;
+    return (isMobileInputView ? '3' : '1');
+}, function (_a) {
+    var isMobileInputView = _a.isMobileInputView;
+    return (isMobileInputView ? '90vw' : 'auto');
+});
 var QuickFilter = function (_a) {
-    var searchedValue = _a.searchedValue, placeholderText = _a.placeholderText, onChange = _a.onChange;
-    return (_jsx(x.div, { mr: "12px", children: _jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: placeholderText, onChange: onChange, variant: "gray" }) }));
+    var searchedValue = _a.searchedValue, placeholderText = _a.placeholderText, onChange = _a.onChange, onClick = _a.onClick, displayInput = _a.displayInput, onClear = _a.onClear, isMobileInputView = _a.isMobileInputView;
+    return (_jsx(x.div, { mr: "12px", children: displayInput ? (_jsx(StyledInput, { icon: "search", type: "text", value: searchedValue, placeholder: placeholderText, onChange: onChange, variant: "gray", onClear: onClear, isMobileInputView: isMobileInputView })) : (_jsx(Button, { variant: "icon", appearance: "secondary", icon: "search", onClick: onClick })) }));
 };
 export default QuickFilter;
+var templateObject_1;

package/ui/Blocks/CommonGrid/hooks/useQuickFilter.d.ts

@@ -0,0 +1,27 @@
+import { ChangeEvent } from 'react';
+import { ColumnDefinition, CommonGridProps, FiltersConfig, GridActionsType, GridSelectorsType } from '../types';
+type Props = {
+    gridActions: GridActionsType;
+    gridSelectors: GridSelectorsType;
+    quickFilter?: CommonGridProps['quickFilter'];
+    filter?: CommonGridProps['gridSelectors']['filter'];
+    displayColumnsDefinitions?: ColumnDefinition<string>[];
+    filters?: FiltersConfig;
+};
+declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters }: Props) => {
+    searchedValue: string;
+    translatedValue: any;
+    onChangeInputValue: (e: ChangeEvent<HTMLInputElement>) => void;
+    onResetFilters: () => void;
+    onDisplayInput: () => void;
+    displayInput: boolean;
+    onClear: () => void;
+    isMobileInputView: boolean;
+    filter: {
+        [column: string]: {
+            value: any;
+            filterProps: import("../types").FilterProps;
+        };
+    } | undefined;
+};
+export default useQuickFilter;

package/ui/Blocks/CommonGrid/hooks/useQuickFilter.js

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useCheckDeviceWidth } from '../../../utils/CheckDeviceWidth/checkDeviceWidth';
+import { createFilterType } from '../utils';
+import { useAddFilter } from './useAddFilter';
+import { isObject } from 'lodash';
+import { i18n } from '@lingui/core';
+var defaultVoidFunction = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return null;
+};
+var useQuickFilter = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters;
+    var resetFilters = gridActions.resetFilters, _h = gridActions.addFilter, addFilter = _h === void 0 ? defaultVoidFunction : _h;
+    var filter = gridSelectors.filter;
+    var isMobile = useCheckDeviceWidth().isMobile;
+    var _j = useState(''), searchedValue = _j[0], setSearchedValue = _j[1];
+    var _k = useState(false), displayInput = _k[0], setDisplayInput = _k[1];
+    var handleAddFilter = useAddFilter(addFilter);
+    var quickFilterValues = quickFilter ? (_b = filter === null || filter === void 0 ? void 0 : filter[quickFilter]) === null || _b === void 0 ? void 0 : _b.value : undefined;
+    var searchedColumnsDefinitions = (displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.find(function (item) { return item.name === quickFilter; })) || null;
+    var filterType = createFilterType(searchedColumnsDefinitions || {});
+    var filtersDefaultComparator = ((_c = filters === null || filters === void 0 ? void 0 : filters[filterType].defaultExtraProps) === null || _c === void 0 ? void 0 : _c.defaultComparator) || 'eq';
+    var searchComparator = (quickFilterValues && quickFilterValues.comparator) || filtersDefaultComparator;
+    var isMobileInputView = isMobile && displayInput;
+    useEffect(function () {
+        if (quickFilterValues) {
+            setSearchedValue(quickFilterValues.value);
+        }
+        else {
+            setSearchedValue('');
+        }
+    }, [quickFilterValues, quickFilter, setSearchedValue]);
+    useEffect(function () {
+        if (isMobile) {
+            setDisplayInput(false);
+        }
+        else {
+            setDisplayInput(true);
+        }
+    }, [isMobile]);
+    var onChangeInputValue = useCallback(function (e) {
+        setSearchedValue(e.target.value);
+        var value = {
+            comparator: searchComparator,
+            value: e.target.value,
+        };
+        searchedColumnsDefinitions && handleAddFilter(value, searchedColumnsDefinitions);
+    }, [setSearchedValue, searchComparator, handleAddFilter, searchedColumnsDefinitions]);
+    var onClear = useCallback(function () {
+        setSearchedValue('');
+        onChangeInputValue({ target: { value: '' } });
+        if (isMobile) {
+            setDisplayInput(false);
+        }
+        else {
+            setDisplayInput(true);
+        }
+    }, [setSearchedValue, isMobile, onChangeInputValue, setDisplayInput]);
+    var onDisplayInput = useCallback(function () {
+        setDisplayInput(true);
+    }, []);
+    var onResetFilters = useCallback(function () {
+        resetFilters === null || resetFilters === void 0 ? void 0 : resetFilters();
+        setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
+    }, [resetFilters, setSearchedValue]);
+    var translatedValue = searchedColumnsDefinitions &&
+        isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
+        'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
+        ((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
+        i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message });
+    return {
+        searchedValue: searchedValue,
+        translatedValue: translatedValue,
+        onChangeInputValue: onChangeInputValue,
+        onResetFilters: onResetFilters,
+        onDisplayInput: onDisplayInput,
+        displayInput: displayInput,
+        onClear: onClear,
+        isMobileInputView: isMobileInputView,
+        filter: filter,
+    };
+};
+export default useQuickFilter;