@epam/uui 5.5.1 → 5.5.2

package/components/filters/FiltersPanel.tsx

@@ -0,0 +1,218 @@
+import React, {
+    useCallback, useEffect, useMemo, useState,
+} from 'react';
+import sortBy from 'lodash.sortby';
+import { i18n } from '../../i18n';
+import { Button } from '../buttons';
+import { PickerInput, PickerItem, DataPickerRow } from '../pickers';
+import {
+    DataRowOptions, TableFiltersConfig, FiltersConfig, DataQueryFilter, getOrderBetween, DataTableState, useArrayDataSource,
+} from '@epam/uui-core';
+import { PickerTogglerProps, FlexCell } from '@epam/uui-components';
+import { FiltersPanelItem } from './FiltersPanelItem';
+import { ReactComponent as addIcon } from '@epam/assets/icons/common/action-add-18.svg';
+import { UUI_FILTERS_PANEL_ADD_BUTTON, UUI_FILTERS_PANEL_ADD_BUTTON_BODY } from './constants';
+
+export interface FiltersPanelProps<TFilter> {
+    filters: TableFiltersConfig<TFilter>[];
+    tableState: DataTableState;
+    setTableState: (newState: DataTableState) => void;
+    size?: '24' | '30' | '36' | '42' | '48';
+}
+
+const normalizeFilterWithPredicates = <TFilter,>(filter: TFilter) => {
+    if (!filter) {
+        return {};
+    }
+    const result: DataQueryFilter<TFilter> = filter;
+    const keys = Object.keys(filter) as (keyof TFilter)[];
+    for (let n = 0; n < keys.length; n++) {
+        const key = keys[n];
+        const filterValue: any = filter[key];
+        if (filterValue && typeof filterValue === 'object') {
+            if ('from' in filterValue && 'to' in filterValue) {
+                continue;
+            }
+            if ('in' in filterValue && (!Array.isArray(filterValue.in) || !filterValue.in.length)) {
+                delete filter[key];
+            }
+            if ('nin' in filterValue && (!Array.isArray(filterValue.nin) || !filterValue.nin.length)) {
+                delete filter[key];
+            }
+            if ('inRange' in filterValue) {
+                if (!filterValue.inRange || (!filterValue.inRange.from && !filterValue.inRange.to)) {
+                    delete filter[key];
+                }
+            }
+            if ('notInRange' in filterValue) {
+                if (!filterValue.notInRange || (!filterValue.notInRange.from && !filterValue.notInRange.to)) {
+                    delete filter[key];
+                }
+            }
+            Object.keys(filterValue).forEach((predicate) => {
+                if (filterValue[predicate] === null || filterValue[predicate] === undefined) {
+                    delete filter[key];
+                }
+            });
+        }
+    }
+    return result;
+};
+
+function FiltersToolbarImpl<TFilter extends object>(props: FiltersPanelProps<TFilter>) {
+    const { filters, tableState, setTableState } = props;
+    const [newFilterId, setNewFilterId] = useState(null);
+
+    const dataSource = useArrayDataSource(
+        {
+            items: filters,
+            getId: (item) => item.field,
+        },
+        [],
+    );
+
+    const onFiltersChange = (updatedFilters: TableFiltersConfig<TFilter>[]) => {
+        const newConfig: FiltersConfig = {};
+        const newFilter: any = {};
+
+        const sortedOrders = tableState.filtersConfig && sortBy(tableState.filtersConfig, (f) => f?.order);
+        let lastItemOrder: string | null = sortedOrders?.length ? sortedOrders[sortedOrders.length - 1]?.order : null;
+
+        updatedFilters.forEach((filter) => {
+            let order = tableState?.filtersConfig?.[filter?.field]?.order;
+            if (!order) {
+                order = getOrderBetween(lastItemOrder, null);
+                lastItemOrder = order;
+            }
+
+            newConfig[filter.field] = { isVisible: true, order: order };
+
+            // Remove unselected filters from filter object
+            if (tableState.filter) {
+                newFilter[filter.field] = tableState.filter[filter.field];
+            }
+        });
+
+        setTableState({
+            ...tableState,
+            filtersConfig: newConfig,
+            filter: newFilter,
+        });
+    };
+
+    const handleFilterChange = (newFilter: TFilter) => {
+        const filter = normalizeFilterWithPredicates({ ...tableState.filter, ...newFilter });
+        setTableState({
+            ...tableState,
+            filter: filter,
+        });
+    };
+
+    const removeFilter = (field: any) => {
+        const filterConfig = { ...tableState.filtersConfig };
+        delete filterConfig[field];
+        const filter = { ...tableState.filter };
+        delete filter[field];
+
+        const newTableState: DataTableState = {
+            ...tableState,
+            filtersConfig: filterConfig,
+            filter: filter,
+        };
+        setTableState({ ...newTableState });
+    };
+
+    const selectedFilters = useMemo(() => {
+        const filtersConfig = tableState.filtersConfig || {};
+        return filters.filter((filter) => {
+            return filter.isAlwaysVisible || (filtersConfig[filter?.field] ? filtersConfig[filter?.field].isVisible : false);
+        });
+    }, [tableState.filtersConfig, filters]);
+
+    const sortedActiveFilters = useMemo(() => {
+        return sortBy(selectedFilters, (f) => tableState.filtersConfig?.[f.field]?.order);
+    }, [filters, tableState.filtersConfig]);
+
+    const renderAddFilterToggler = useCallback((togglerProps: PickerTogglerProps) => {
+        return (
+            <Button
+                size={ props.size ?? '36' }
+                onClick={ togglerProps.onClick }
+                ref={ togglerProps.ref }
+                caption={ i18n.filterToolbar.addCaption }
+                icon={ addIcon }
+                iconPosition="left"
+                fill="ghost"
+                color="primary"
+                cx={ UUI_FILTERS_PANEL_ADD_BUTTON }
+            />
+        );
+    }, []);
+
+    const getRowOptions = useCallback(
+        (item: TableFiltersConfig<TFilter>): DataRowOptions<TableFiltersConfig<TFilter>, keyof TFilter> => ({
+            isDisabled: item.isAlwaysVisible,
+            checkbox: {
+                isVisible: true,
+                isDisabled: item.isAlwaysVisible,
+            },
+        }),
+        [],
+    );
+
+    const isAllFiltersAlwaysVisible = props.filters.every((i) => i.isAlwaysVisible);
+
+    useEffect(() => {
+        // Reset new filter id, after first render with autofocus
+        setNewFilterId(null);
+    }, [newFilterId]);
+
+    return (
+        <>
+            {sortedActiveFilters.map((f) => (
+                <FlexCell width="auto" key={ f.field as string }>
+                    <FiltersPanelItem
+                        { ...f }
+                        value={ tableState.filter?.[f.field] }
+                        onValueChange={ handleFilterChange }
+                        key={ f.field as string }
+                        autoFocus={ newFilterId === f.field }
+                        removeFilter={ removeFilter }
+                        size={ props.size }
+                    />
+                </FlexCell>
+            ))}
+            {!isAllFiltersAlwaysVisible && (
+                <PickerInput
+                    dataSource={ dataSource }
+                    value={ selectedFilters }
+                    onValueChange={ onFiltersChange }
+                    selectionMode="multi"
+                    valueType="entity"
+                    key={ newFilterId }
+                    renderRow={ (props) => (
+                        <DataPickerRow
+                            { ...props }
+                            padding="12"
+                            key={ props.key }
+                            onCheck={ (row) => {
+                                props.onCheck && props.onCheck(row);
+                                !row.isChecked && setNewFilterId(row.value.field);
+                            } }
+                            renderItem={ (item, rowProps) => <PickerItem { ...rowProps } title={ item.title } /> }
+                        />
+                    ) }
+                    getName={ (i) => i.title }
+                    renderToggler={ renderAddFilterToggler }
+                    emptyValue={ [] }
+                    getRowOptions={ getRowOptions }
+                    fixedBodyPosition={ true }
+                    size={ props.size }
+                    bodyCx={ UUI_FILTERS_PANEL_ADD_BUTTON_BODY }
+                />
+            )}
+        </>
+    );
+}
+
+export const FiltersPanel = React.memo(FiltersToolbarImpl) as typeof FiltersToolbarImpl;

package/components/filters/FiltersPanelItem.module.scss

@@ -0,0 +1,22 @@
+@use  '../../assets/styles/index' as *;
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 9px 12px 0;
+    margin-bottom: 9px;
+
+    .removeButton {
+        padding-left: 24px;
+        margin-left: auto;
+
+        :global(.uui-caption) {
+            font-size: 14px;
+        }
+    }
+
+    &.with-search {
+        margin-bottom: 0;
+    }
+}

package/components/filters/FiltersPanelItem.tsx

@@ -0,0 +1,269 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import dayjs from 'dayjs';
+import cx from 'classnames';
+import { Modifier } from 'react-popper';
+import { DropdownBodyProps, TableFiltersConfig, IDropdownToggler, IEditable, isMobile, useForceUpdate, FilterPredicateName, getSeparatedValue, DataRowProps, PickerFilterConfig } from '@epam/uui-core';
+import { Dropdown } from '@epam/uui-components';
+import { i18n } from '../../i18n';
+import { FilterPanelItemToggler } from './FilterPanelItemToggler';
+import { LinkButton } from '../buttons';
+import { MultiSwitch } from '../inputs';
+import { Text, TextPlaceholder } from '../typography';
+import { FilterItemBody } from './FilterItemBody';
+import { DropdownContainer } from '../overlays';
+import { MobileDropdownWrapper } from '../pickers';
+import { UUI_FILTERS_PANEL_ITEM_BODY } from './constants';
+import { ReactComponent as RemoveIcon } from '@epam/assets/icons/common/action-deleteforever-12.svg';
+import css from './FiltersPanelItem.module.scss';
+
+export type FiltersToolbarItemProps = TableFiltersConfig<any> &
+IEditable<any> & {
+    autoFocus?: boolean;
+    removeFilter?: (field: any) => void;
+    size?: '24' | '30' | '36' | '42' | '48';
+};
+
+function FiltersToolbarItemImpl(props: FiltersToolbarItemProps) {
+    const { maxCount = 2 } = props;
+    const isPickersType = props?.type === 'multiPicker' || props?.type === 'singlePicker';
+    const isMobileScreen = isMobile();
+
+    const popperModifiers: Modifier<any>[] = useMemo(() => {
+        const modifiers: Modifier<any>[] = [
+            {
+                name: 'offset',
+                options: { offset: isPickersType && isMobileScreen ? [0, 0] : [0, 6] },
+            },
+        ];
+
+        if (isPickersType && isMobileScreen) {
+            modifiers.push({
+                name: 'resetTransform',
+                enabled: true,
+                phase: 'beforeWrite',
+                requires: ['computeStyles'],
+                fn: ({ state }) => {
+                    state.styles.popper.transform = '';
+                },
+            });
+        }
+
+        return modifiers;
+    }, [isPickersType]);
+
+    const getDefaultPredicate = () => {
+        if (!props.predicates) {
+            return null;
+        }
+        return Object.keys(props.value || {})[0] || props.predicates.find((i) => i.isDefault)?.predicate || props.predicates?.[0].predicate;
+    };
+
+    const [isOpen, isOpenChange] = useState(props.autoFocus);
+    const [predicate, setPredicate] = useState(getDefaultPredicate());
+    const predicateName: string = React.useMemo(() => predicate && props.predicates.find((p) => p.predicate === predicate).name, [predicate]);
+    const forceUpdate = useForceUpdate();
+
+    useEffect(() => {
+        if (props.predicates && Object.keys(props.value || {})[0] && Object.keys(props.value || {})[0] !== predicate) {
+            setPredicate(Object.keys(props.value || {})[0]);
+        }
+    }, [props.value]);
+
+    const onValueChange = useCallback(
+        (value: any) => {
+            if (props.predicates) {
+                props.onValueChange({ [props.field]: { [predicate]: value } });
+            } else {
+                props.onValueChange({ [props.field]: value });
+            }
+        },
+        [props.field, props.onValueChange],
+    );
+
+    const removeOnclickHandler = () => {
+        props.removeFilter(props.field);
+    };
+
+    const changePredicate = (val: FilterPredicateName) => {
+        const isInRange = (p: FilterPredicateName) => p === 'inRange' || p === 'notInRange';
+        if (props.type === 'numeric') {
+            let predicateValue = {
+                [props.field]: { [val]: getValue() },
+            };
+            if (isInRange(val) && !isInRange(predicate as FilterPredicateName)) {
+                // from simple predicate -> to Range
+                predicateValue = { [props.field]: { [val]: { from: null, to: null } } };
+            } else if (!isInRange(val) && isInRange(predicate as FilterPredicateName)) {
+                // from Range -> to simple predicate
+                predicateValue = { [props.field]: { [val]: null } };
+            }
+            props.onValueChange(predicateValue);
+        } else {
+            props.onValueChange({ [props.field]: { [val]: getValue() } });
+        }
+        setPredicate(val);
+    };
+
+    const renderHeader = (hideTitle: boolean) => (
+        <div className={ cx(css.header, isPickersType && (props.showSearch ?? css.withSearch)) }>
+            {props.predicates ? (
+                <MultiSwitch items={ props.predicates.map((i) => ({ id: i.predicate, caption: i.name })) } value={ predicate } onValueChange={ changePredicate } size="24" />
+            ) : (
+                !hideTitle && (
+                    <Text color="secondary" size="24" fontSize="14">
+                        {props.title}
+                    </Text>
+                )
+            )}
+            {!props?.isAlwaysVisible && (
+                <LinkButton cx={ css.removeButton } caption={ i18n.filterToolbar.datePicker.removeCaption } onClick={ removeOnclickHandler } size="24" icon={ RemoveIcon } />
+            )}
+        </div>
+    );
+
+    const renderBody = (dropdownProps: DropdownBodyProps) => {
+        const hideHeaderTitle = isPickersType && isMobileScreen;
+        return isPickersType ? (
+            <MobileDropdownWrapper
+                { ...dropdownProps }
+                cx={ UUI_FILTERS_PANEL_ITEM_BODY }
+                title={ props.title }
+                width={ 360 }
+                onClose={ () => isOpenChange(false) }
+            >
+                { renderHeader(hideHeaderTitle) }
+                <FilterItemBody
+                    { ...props }
+                    { ...dropdownProps }
+                    selectedPredicate={ predicate }
+                    value={ getValue() }
+                    onValueChange={ onValueChange }
+                />
+            </MobileDropdownWrapper>
+        ) : (
+            <DropdownContainer cx={ UUI_FILTERS_PANEL_ITEM_BODY } { ...dropdownProps }>
+                { renderHeader(hideHeaderTitle) }
+                <FilterItemBody
+                    { ...props }
+                    { ...dropdownProps }
+                    selectedPredicate={ predicate }
+                    value={ getValue() }
+                    onValueChange={ onValueChange }
+                />
+            </DropdownContainer>
+        );
+    };
+
+    const getValue = () => {
+        return predicate ? props.value?.[predicate] : props.value;
+    };
+
+    const getPickerItemName = (item: DataRowProps<any, any>, config: PickerFilterConfig<any>) => {
+        if (item.isUnknown) {
+            return 'Unknown';
+        }
+
+        if (item.isLoading) {
+            return <TextPlaceholder />;
+        }
+
+        return config.getName ? config.getName(item.value) : item.value.name;
+    };
+
+    const getTogglerValue = () => {
+        const currentValue = getValue();
+        const defaultFormat = 'MMM DD, YYYY';
+
+        switch (props.type) {
+            case 'multiPicker': {
+                const view = props.dataSource.getView({}, forceUpdate);
+                let isLoading = false;
+
+                const selection = currentValue
+                    ? currentValue?.slice(0, maxCount).map((i: any) => {
+                        const item = view.getById(i, null);
+                        isLoading = item.isLoading;
+                        return getPickerItemName(item, props);
+                    })
+                    : currentValue;
+
+                const postfix = (!isLoading && currentValue?.length > maxCount) ? ` +${(currentValue.length - maxCount).toString()} ${i18n.filterToolbar.pickerInput.itemsPlaceholder}` : null;
+                return { selection, postfix };
+            }
+            case 'numeric': {
+                const isRangePredicate = predicate === 'inRange' || predicate === 'notInRange';
+                const decimalFormat = (val: number) => getSeparatedValue(val, { maximumFractionDigits: 2 });
+                if ((isRangePredicate && !currentValue) || (!isRangePredicate && !currentValue && currentValue !== 0)) {
+                    return { selection: undefined };
+                }
+                const selection = isRangePredicate
+                    ? `${!currentValue?.from && currentValue?.from !== 0 ? 'Min' : decimalFormat(currentValue?.from)} - ${
+                        !currentValue?.to && currentValue?.to !== 0 ? 'Max' : decimalFormat(currentValue?.to)
+                    }`
+                    : `${!currentValue && currentValue !== 0 ? 'ALL' : decimalFormat(currentValue)}`;
+                return { selection: [selection] };
+            }
+            case 'singlePicker': {
+                const view = props.dataSource.getView({}, forceUpdate);
+                if (currentValue === null || currentValue === undefined) {
+                    return { selection: undefined };
+                }
+
+                const item = view.getById(currentValue, null);
+                const selection = getPickerItemName(item, props);
+
+                return { selection: [selection] };
+            }
+            case 'datePicker': {
+                return { selection: currentValue ? [dayjs(currentValue).format(props.format || defaultFormat)] : currentValue };
+            }
+            case 'rangeDatePicker': {
+                if (!currentValue || (!currentValue.from && !currentValue.to)) {
+                    return { selection: undefined };
+                }
+                const currentValueFrom = currentValue?.from
+                    ? dayjs(currentValue?.from).format(props.format || defaultFormat)
+                    : i18n.filterToolbar.rangeDatePicker.emptyPlaceholderFrom;
+                const currentValueTo = currentValue?.to
+                    ? dayjs(currentValue?.to).format(props.format || defaultFormat)
+                    : i18n.filterToolbar.rangeDatePicker.emptyPlaceholderTo;
+                const selection = `${currentValueFrom} - ${currentValueTo}`;
+                return { selection: [selection] };
+            }
+            case 'custom': {
+                const value = props.getTogglerValue(props);
+                return { selection: value !== undefined ? [value] : undefined };
+            }
+        }
+    };
+
+    const getTogglerWidth = () => {
+        if (props.togglerWidth) return props.togglerWidth;
+
+        return props.type === 'datePicker' || props.type === 'rangeDatePicker' ? null : 300;
+    };
+
+    const renderTarget = (dropdownProps: IDropdownToggler) => (
+        <FilterPanelItemToggler
+            { ...dropdownProps }
+            { ...getTogglerValue() }
+            title={ props.title }
+            predicateName={ props.value ? predicateName : null }
+            maxWidth={ getTogglerWidth() }
+            size={ props.size }
+        />
+    );
+
+    return (
+        <Dropdown
+            renderTarget={ renderTarget }
+            renderBody={ renderBody }
+            closeBodyOnTogglerHidden={ !isMobile() }
+            value={ isOpen }
+            onValueChange={ isOpenChange }
+            modifiers={ popperModifiers }
+        />
+    );
+}
+
+export const FiltersPanelItem = React.memo(FiltersToolbarItemImpl);

package/components/filters/PresetPanel/Preset.module.scss

@@ -0,0 +1,25 @@
+.preset {
+    &:global(.uui-has-right-icon) :global(.uui-caption) {
+        padding-right: 3px;
+    }
+
+    &:global(.uui-button-box) {
+        padding-right: 3px;
+    }
+
+    :global(.uui-icon) {
+        visibility: hidden;
+    }
+
+    &:hover {
+        :global(.uui-icon) {
+            visibility: visible;
+        }
+    }
+
+    &.activePreset {
+        :global(.uui-icon) {
+            visibility: visible;
+        }
+    }
+}

package/components/filters/PresetPanel/Preset.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback, useState } from 'react';
+import { DataTableState, IPresetsApi, ITablePreset } from '@epam/uui-core';
+import { TabButton } from '../../buttons';
+import { PresetActionsDropdown } from './PresetActionsDropdown';
+import { PresetInput } from './PresetInput';
+import { FlexCell } from '../../layout';
+import css from './Preset.module.scss';
+import { UUI_PRESETS_PANEL_PRESET } from './constants';
+
+interface IPresetProps extends Omit<IPresetsApi, 'presets'> {
+    preset: ITablePreset;
+    addPreset: () => void;
+    tableState: DataTableState;
+}
+
+export function Preset(props: IPresetProps) {
+    const [isRenamePreset, setIsRenamePreset] = useState<Boolean>(false);
+    const choosePresetHandler = useCallback(() => props.choosePreset(props.preset), [props]);
+
+    const cancelRenamePreset = useCallback(() => {
+        setIsRenamePreset(() => false);
+    }, []);
+
+    const setPresetForRename = useCallback(() => {
+        if (!isRenamePreset) {
+            setIsRenamePreset(() => true);
+        }
+    }, []);
+
+    const handlePresetRename = useCallback(
+        (name: string) => {
+            const newPreset: ITablePreset = {
+                ...props.preset,
+                name: name,
+            };
+            return props.updatePreset(newPreset);
+        },
+        [props.preset],
+    );
+
+    const isPresetActive = props.activePresetId === props.preset.id;
+
+    return (
+        <FlexCell key={ props.preset.id } alignSelf="center" width="auto">
+            {isRenamePreset ? (
+                <PresetInput onCancel={ cancelRenamePreset } onSuccess={ handlePresetRename } preset={ props.preset } />
+            ) : (
+                <TabButton
+                    caption={ props.preset.name }
+                    onClick={ !isPresetActive && choosePresetHandler }
+                    cx={ [css.preset, isPresetActive && css.activePreset, UUI_PRESETS_PANEL_PRESET] }
+                    size="60"
+                    withNotify={ isPresetActive && props.hasPresetChanged(props.preset) }
+                    icon={ () => <PresetActionsDropdown renamePreset={ setPresetForRename } { ...props } /> }
+                    iconPosition="right"
+                    isLinkActive={ isPresetActive }
+                />
+            )}
+        </FlexCell>
+    );
+}

package/components/filters/PresetPanel/PresetActionsDropdown.module.scss

@@ -0,0 +1,23 @@
+.preset-dropdown-panel {
+    min-width: 150px;
+}
+
+.delete-row {
+    svg {
+        fill: var(--uui-critical-70);
+    }
+
+    .delete-button {
+        color: var(--uui-critical-70);
+    }
+}
+
+.targetOpen {
+    &:global(.uui-button-box) {
+        :global(.uui-icon) {
+            visibility: visible;
+        }
+    }
+}
+
+