@epam/uui 5.3.0 → 5.4.0

package/components/filters/FiltersPanel.tsx

@@ -1,218 +0,0 @@
-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

@@ -1,22 +0,0 @@
-@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

@@ -1,257 +0,0 @@
-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 renderTarget = (dropdownProps: IDropdownToggler) => (
-        <FilterPanelItemToggler
-            { ...dropdownProps }
-            { ...getTogglerValue() }
-            title={ props.title }
-            predicateName={ props.value ? predicateName : null }
-            maxWidth={ props.type === 'datePicker' || props.type === 'rangeDatePicker' ? null : '300' }
-            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

@@ -1,25 +0,0 @@
-.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

@@ -1,61 +0,0 @@
-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

@@ -1,23 +0,0 @@
-.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;
-        }
-    }
-}
-
-