@epam/uui 5.3.0-rc.1 → 5.3.0

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,257 @@
+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

@@ -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;
+        }
+    }
+}
+
+

package/components/filters/PresetPanel/PresetActionsDropdown.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback } from 'react';
+import css from './PresetActionsDropdown.module.scss';
+import {
+    IPresetsApi, IDropdownToggler, ITablePreset, useUuiContext, DataTableState,
+} from '@epam/uui-core';
+import { Dropdown, DropdownMenuButton, SuccessNotification } from '../../overlays';
+import { IconButton } from '../../buttons';
+import { Text } from '../../typography';
+import { ReactComponent as menuIcon } from '@epam/assets/icons/common/navigation-more_vert-18.svg';
+import { FlexRow, Panel } from '../../layout';
+import { ReactComponent as SaveInCurrentIcon } from '@epam/assets/icons/common/action-update-18.svg';
+import { ReactComponent as SaveAsNewIcon } from '@epam/assets/icons/common/save-outline-18.svg';
+import { ReactComponent as DiscardChangesIcon } from '@epam/assets/icons/common/content-edit_undo-18.svg';
+import { ReactComponent as CopyIcon } from '@epam/assets/icons/common/action-copy_content-18.svg';
+import { ReactComponent as RenameIcon } from '@epam/assets/icons/common/content-edit-18.svg';
+import { ReactComponent as CopyLinkIcon } from '@epam/assets/icons/common/content-link-18.svg';
+import { ReactComponent as DeleteIcon } from '@epam/assets/icons/common/action-deleteforever-18.svg';
+
+interface ITubButtonDropdownProps extends Omit<IPresetsApi, 'presets'> {
+    preset: ITablePreset;
+    addPreset: () => void;
+    tableState: DataTableState;
+    renamePreset: () => void;
+}
+
+export function PresetActionsDropdown(props: ITubButtonDropdownProps) {
+    const { uuiNotifications } = useUuiContext();
+
+    const copyUrlToClipboard = useCallback(async () => {
+        await navigator.clipboard.writeText(props.getPresetLink(props.preset));
+        successNotificationHandler('Link copied!');
+    }, []);
+
+    const saveInCurrent = useCallback(
+        async (preset: ITablePreset) => {
+            const newPreset: ITablePreset = {
+                ...preset,
+                filter: props.tableState.filter,
+                sorting: props.tableState.sorting,
+                columnsConfig: props.tableState.columnsConfig,
+                filtersConfig: props.tableState.filtersConfig,
+                viewState: props.tableState.viewState,
+            };
+            await props.updatePreset(newPreset);
+            successNotificationHandler('Changes saved!');
+        },
+        [
+            props.tableState.filter, props.tableState.columnsConfig, props.tableState.filtersConfig,
+        ],
+    );
+
+    const successNotificationHandler = useCallback((text: string) => {
+        uuiNotifications
+            .show(
+                (props) => (
+                    <SuccessNotification { ...props }>
+                        <Text size="36" fontSize="14">
+                            {text}
+                        </Text>
+                    </SuccessNotification>
+                ),
+                { duration: 3 },
+            )
+            .catch(() => null);
+    }, []);
+
+    const saveInCurrentHandler = useCallback(() => {
+        saveInCurrent(props.preset);
+    }, [props.preset]);
+
+    const discardAllChangesHandler = useCallback(() => {
+        props.choosePreset(props.preset);
+    }, [props.preset]);
+
+    const duplicateHandler = useCallback(() => {
+        props.duplicatePreset(props.preset);
+    }, [props.preset]);
+
+    const deleteHandler = useCallback(async () => {
+        await props.deletePreset(props.preset);
+    }, [
+        props.activePresetId, props.deletePreset, props.preset,
+    ]);
+
+    const renderBody = () => {
+        const isReadonlyPreset = props.preset.isReadonly;
+        return (
+            <Panel background="surface" shadow={ true } cx={ css.presetDropdownPanel }>
+                {props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset) && (
+                    <>
+                        {!isReadonlyPreset && (
+                            <FlexRow key={ `${props.preset.id}-save-in-current` }>
+                                <DropdownMenuButton icon={ SaveInCurrentIcon } caption="Save in current" onClick={ saveInCurrentHandler } />
+                            </FlexRow>
+                        )}
+                        <FlexRow key={ `${props.preset.id}-save-as-new` }>
+                            <DropdownMenuButton icon={ SaveAsNewIcon } caption="Save as new" onClick={ props.addPreset } />
+                        </FlexRow>
+                        <FlexRow key={ `${props.preset.id}-discard` } borderBottom={ true }>
+                            <DropdownMenuButton icon={ DiscardChangesIcon } caption="Discard all changes" onClick={ discardAllChangesHandler } />
+                        </FlexRow>
+                    </>
+                )}
+                {props.preset.id === props.activePresetId && !isReadonlyPreset && (
+                    <FlexRow key={ `${props.preset.id}-rename` }>
+                        <DropdownMenuButton icon={ RenameIcon } caption="Rename" onClick={ props.renamePreset } />
+                    </FlexRow>
+                )}
+                <FlexRow key={ `${props.preset.id}-duplicate` }>
+                    <DropdownMenuButton icon={ CopyIcon } caption="Duplicate" onClick={ duplicateHandler } />
+                </FlexRow>
+                <FlexRow borderBottom={ true } key={ `${props.preset.id}-copyLink` }>
+                    <DropdownMenuButton icon={ CopyLinkIcon } caption="Copy Link" onClick={ copyUrlToClipboard } />
+                </FlexRow>
+                {!isReadonlyPreset && (
+                    <FlexRow key={ `${props.preset.id}-delete` } cx={ css.deleteRow }>
+                        <DropdownMenuButton icon={ DeleteIcon } caption="Delete" cx={ css.deleteButton } onClick={ deleteHandler } />
+                    </FlexRow>
+                )}
+            </Panel>
+        );
+    };
+
+    const renderTarget = useCallback((dropdownProps: IDropdownToggler) => {
+        return (
+            <IconButton
+                cx={ dropdownProps.isOpen && css.targetOpen }
+                color={ props.preset.id === props.activePresetId ? 'info' : 'neutral' }
+                { ...dropdownProps }
+                icon={ menuIcon }
+            />
+        );
+    }, []);
+
+    return (
+        <Dropdown renderBody={ renderBody } renderTarget={ renderTarget } placement="bottom-end" modifiers={ [{ name: 'offset', options: { offset: [0, 22] } }] } />
+    );
+}

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

@@ -0,0 +1,55 @@
+.preset-input-cell {
+    margin-top: auto;
+    margin-bottom: auto;
+
+    .preset-input {
+        padding-left: 3px;
+        padding-right: 3px;
+        width: 213px;
+
+        :global(.uui-icon-accept),
+        :global(.uui-icon-cancel) {
+            width: 30px;
+            height: 30px;
+            align-self: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+        }
+
+        :global(.uui-icon-accept) {
+            &:global(.-clickable) {
+                background-color: var(--uui-accent-50);
+                border-radius: var(--uui-border-radius);
+                fill: var(--uui-accent-contrast);
+
+                &:hover {
+                    fill: var(--uui-accent-contrast);
+                    background-color: var(--uui-accent-60);
+                }
+
+                &:active {
+                    fill: var(--uui-accent-contrast);
+                    background-color: var(--uui-accent-70);
+                }
+            }
+        }
+
+        :global(.uui-icon-cancel) {
+            background-color: var(--uui-surface-main);
+            border: 1px solid var(--uui-secondary-50);
+            border-radius: var(--uui-border-radius);
+            margin-left: 1px;
+            box-sizing: border-box;
+
+            &:hover {
+                background-color: var(--uui-secondary-10);
+            }
+
+            &:active {
+                background-color: var(--uui-secondary-20);
+            }
+        }
+    }
+}

package/components/filters/PresetPanel/PresetInput.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useState } from 'react';
+import css from './PresetInput.module.scss';
+import { TextInput } from '../../inputs';
+import { FlexCell } from '../../layout';
+import { ITablePreset } from '@epam/uui-core';
+import { UUI_PRESETS_PANEL_INPUT } from './constants';
+
+interface IPresetInputProps {
+    onCancel: () => void;
+    onSuccess?: (name: string) => Promise<any>;
+    preset?: ITablePreset;
+}
+
+export function PresetInput(props: IPresetInputProps) {
+    const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
+
+    const cancelActionHandler = useCallback(() => {
+        setPresetCaption('');
+        props.onCancel();
+    }, [props.onCancel]);
+
+    const acceptActionHandler = useCallback(async () => {
+        if (presetCaption) {
+            await props.onSuccess(presetCaption);
+        }
+        props.onCancel();
+    }, [presetCaption]);
+
+    const newPresetOnBlurHandler = useCallback(() => {
+        if (presetCaption.length) {
+            return;
+        }
+        props.onCancel();
+    }, [presetCaption.length, props.onCancel]);
+
+    return (
+        <FlexCell cx={ [css.presetInputCell, UUI_PRESETS_PANEL_INPUT] } minWidth={ 180 }>
+            <TextInput
+                cx={ css.presetInput }
+                onValueChange={ setPresetCaption }
+                value={ presetCaption }
+                onCancel={ cancelActionHandler }
+                onAccept={ acceptActionHandler }
+                onBlur={ newPresetOnBlurHandler }
+                autoFocus
+                maxLength={ 50 }
+            />
+        </FlexCell>
+    );
+}

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

@@ -0,0 +1,34 @@
+.divider {
+    margin-right: 3px;
+    border-left: 1px solid var(--uui-divider);
+    height: 24px;
+}
+
+.dropdownDeleteIcon {
+    :global(.uui-icon) {
+        visibility: hidden;
+    }
+
+    &:hover {
+        :global(.uui-icon) {
+            visibility: visible;
+        }
+    }
+}
+
+.presetsWrapper {
+    min-height: 60px;
+
+    :not(:first-child) {
+        &.addPresetContainer {
+            padding-left: 6px;
+        }
+    }
+}
+
+.dropContainer {
+    &:global(.uui-dropdown-body) {
+        overflow: auto;
+        max-height: 400px;
+    }
+}