@epam/uui 5.5.1 → 5.5.2

package/components/pickers/PickerModal.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { IconContainer, PickerModalArrayProps, PickerModalOptions, PickerModalScalarProps, handleDataSourceKeyboard, usePickerModal } from '@epam/uui-components';
+import { DataRowProps, DataSourceState, IHasCaption, PickerBaseOptions } from '@epam/uui-core';
+import { DataPickerRow } from './DataPickerRow';
+import { Text } from '../typography';
+import { i18n } from '../../i18n';
+import { FlexRow, FlexCell, FlexSpacer } from '../layout';
+import {
+    ModalBlocker, ModalWindow, ModalHeader, ModalFooter,
+} from '../overlays';
+import { LinkButton, Button } from '../buttons';
+import { ReactComponent as SearchIcon } from '../../icons/search-with-background.svg';
+
+import css from './PickerModal.module.scss';
+import { SearchInput, Switch } from '../inputs';
+import { DataPickerBody } from './DataPickerBody';
+import { PickerItem } from './PickerItem';
+
+export type PickerModalProps<TItem, TId> = PickerBaseOptions<TItem, TId> &
+IHasCaption &
+(PickerModalScalarProps<TId, TItem> | PickerModalArrayProps<TId, TItem>) &
+PickerModalOptions<TItem, TId>;
+
+export function PickerModal<TItem, TId>(props: PickerModalProps<TItem, TId>) {
+    const {
+        view,
+        selection,
+        dataSourceStateLens,
+        showSelectedLens,
+        dataSourceState,
+        getDataSourceState,
+        getName,
+        clearSelection,
+        getRows,
+        getListProps,
+        getFooterProps,
+        isSingleSelect,
+        handleDataSourceValueChange,
+    } = usePickerModal<TItem, TId>(props);
+
+    const getSubtitle = ({ path }: DataRowProps<TItem, TId>, { search }: DataSourceState) => {
+        if (!search) return;
+
+        return path
+            .map(({ value }) => getName(value))
+            .filter(Boolean)
+            .join(' / ');
+    };
+
+    const renderItem = (item: TItem, rowProps: DataRowProps<TItem, TId>, dsState: DataSourceState) => {
+        const { flattenSearchResults } = view.getConfig();
+        return (
+            <PickerItem
+                title={ getName(item) }
+                size="36"
+                dataSourceState={ dsState }
+                { ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}) }
+                { ...rowProps }
+            />
+        );
+    };
+    
+    const renderRow = (rowProps: DataRowProps<TItem, TId>) => {
+        return props.renderRow ? (
+            props.renderRow(rowProps, dataSourceState)
+        ) : (
+            <DataPickerRow
+                { ...rowProps }
+                key={ rowProps.rowKey }
+                padding="24"
+                size="36"
+                renderItem={ (item, itemProps) => renderItem(item, itemProps, dataSourceState) }
+            />
+        );
+    };
+
+    const renderFooter = () => {
+        const hasSelection = view.getSelectedRowsCount() > 0;
+        const rowsCount = view.getListProps().rowsCount;
+        const isEmptyRowsAndHasNoSelection = (rowsCount === 0 && !hasSelection);
+
+        return (
+            <>
+                {view.selectAll && (
+                    <LinkButton
+                        caption={ hasSelection ? i18n.pickerModal.clearAllButton : i18n.pickerModal.selectAllButton }
+                        onClick={ hasSelection ? () => clearSelection() : () => view.selectAll.onValueChange(true) }
+                        isDisabled={ isEmptyRowsAndHasNoSelection }
+                    />
+                )}
+                <FlexSpacer />
+                <Button fill="outline" color="secondary" caption={ i18n.pickerModal.cancelButton } onClick={ () => props.abort() } />
+                <Button color="accent" caption={ i18n.pickerModal.selectButton } onClick={ () => props.success(selection as any) } />
+            </>
+        );
+    };
+
+    const renderNotFound = () => {
+        return props.renderNotFound ? (
+            props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })
+        ) : (
+            <div className={ css.noFoundModalContainer }>
+                <IconContainer cx={ css.noFoundModalContainerIcon } icon={ SearchIcon } />
+                <Text cx={ css.noFoundModalContainerText } fontWeight="600" fontSize="16" lineHeight="24" color="primary" size="36">
+                    {i18n.dataPickerBody.noRecordsMessage}
+                </Text>
+                <Text cx={ css.noFoundModalContainerText } fontSize="12" lineHeight="18" color="primary" size="36">
+                    {i18n.dataPickerBody.noRecordsSubTitle}
+                </Text>
+            </div>
+        );
+    };
+
+    const dataRows = getRows();
+    const rows = dataRows.map((row) => renderRow(row));
+
+    return (
+        <ModalBlocker { ...props }>
+            <ModalWindow width={ 600 } height={ 700 }>
+                <ModalHeader title={ props.caption || i18n.pickerModal.headerTitle } onClose={ () => props.abort() } />
+                <FlexCell cx={ css.subHeaderWrapper }>
+                    <FlexRow vPadding="24">
+                        <SearchInput
+                            { ...dataSourceStateLens.prop('search').toProps() }
+                            onKeyDown={ (e) =>
+                                handleDataSourceKeyboard(
+                                    {
+                                        value: getDataSourceState(),
+                                        onValueChange: handleDataSourceValueChange,
+                                        listView: view,
+                                        rows: dataRows,
+                                        searchPosition: 'body',
+                                    },
+                                    e,
+                                ) }
+                            autoFocus={ true }
+                            placeholder={ i18n.pickerModal.searchPlaceholder }
+                        />
+                    </FlexRow>
+                    {!isSingleSelect() && (
+                        <Switch
+                            cx={ css.switch }
+                            size="18"
+                            { ...showSelectedLens.toProps() }
+                            isDisabled={ view.getSelectedRowsCount() < 1 }
+                            label="Show only selected"
+                        />
+                    )}
+                    {props.renderFilter && <FlexCell grow={ 2 }>{props.renderFilter(dataSourceStateLens.prop('filter').toProps())}</FlexCell>}
+                </FlexCell>
+                <DataPickerBody
+                    { ...getListProps() }
+                    value={ getDataSourceState() }
+                    onValueChange={ handleDataSourceValueChange }
+                    search={ dataSourceStateLens.prop('search').toProps() }
+                    showSearch={ false }
+                    rows={ rows }
+                    renderNotFound={ renderNotFound }
+                    editMode="modal"
+                />
+                <ModalFooter padding="24" vPadding="24">
+                    {props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()}
+                </ModalFooter>
+            </ModalWindow>
+        </ModalBlocker>
+    );
+}

package/components/pickers/PickerToggler.module.scss

@@ -0,0 +1,249 @@
+@use  '../../assets/styles/index' as *;
+
+$shadow: 0 1px 3px 0 rgba(29, 30, 38, 0.15);
+
+@mixin picker-toggler-vertical-layout($size, $borderWidth) {
+    &:global(.uui-input-box) {
+        min-height: $size;
+        border-width: $borderWidth;
+    }
+
+    :global(.uui-input) {
+        @include text-size($size);
+
+        @if ($size == 24px) {
+            padding-top: 0;
+            padding-bottom: 0;
+        } @else if ($size == 30px) {
+            padding-top: 3px;
+            padding-bottom: 3px;
+        } @else if ($size == 36px or $size == 42px) {
+            padding-top: 6px;
+            padding-bottom: 6px;
+        } @else if ($size == 48px) {
+            padding-top: 9px;
+            padding-bottom: 9px;
+        }
+    }
+
+    :not(:global(.uui-button-box)) > :global(.uui-icon) {
+        height: $size - 6px;
+        margin-bottom: 2px;
+    }
+}
+
+.root {
+    --uui-picker_toggler-bg: var(--uui-control-bg);
+    --uui-picker_toggler-border: var(--uui-control-border);
+    --uui-picker_toggler-border-hover: var(--uui-control-border-hover);
+    --uui-picker_toggler-border-active: var(--uui-control-border-focus);
+    --uui-picker_toggler-border-error: var(--uui-error-50);
+    --uui-picker_toggler-placeholder: var(--uui-control-placeholder);
+    --uui-picker_toggler-placeholder-disabled: var(--uui-control-placeholder-disabled);
+    --uui-picker_toggler-placeholder-readonly: var(--uui-control-placeholder-disabled);
+    --uui-picker_toggler-text: var(--uui-control-text);
+    --uui-picker_toggler-text-disabled: var(--uui-control-text-disabled);
+    --uui-picker_toggler-icon: var(--uui-control-icon);
+    --uui-picker_toggler-icon-disabled: var(--uui-control-icon-disabled);
+    --uui-picker_toggler-icon-clickable: var(--uui-icon);
+    --uui-picker_toggler-icon-clickable-hover: var(--uui-icon-hover);
+
+    --uui-picker_toggler-border-radius: var(--uui-border-radius);
+
+    --uui-picker_toggler-font: var(--uui-font);
+    --uui-picker_toggler-font-weight: 400;
+    //
+    padding-top: 2px;
+    padding-left: 5px;
+    padding-right: 5px;
+    width: 100%;
+    box-sizing: border-box;
+    border-style: solid;
+
+    &.mode-form {
+        background-color: var(--uui-picker_toggler-bg);
+        border-color: var(--uui-picker_toggler-border);
+        fill: var(--uui-picker_toggler-icon);
+        border-radius: var(--uui-picker_toggler-border-radius);
+
+        :global(.uui-icon):global(.-clickable), :global(.uui-icon-dropdown) {
+            &:global(.uui-enabled) {
+                fill: var(--uui-picker_toggler-icon-clickable);
+
+                &:hover {
+                    fill: var(--uui-picker_toggler-icon-clickable-hover);
+                }
+            }
+
+            &:global(.uui-disabled) {
+                fill: var(--uui-picker_toggler-icon-disabled);
+            }
+        }
+
+        &:hover {
+            border-color: var(--uui-picker_toggler-border-hover);
+        }
+
+        &:global(.uui-focus) {
+            border-color: var(--uui-picker_toggler-border-active);
+            outline: none;
+        }
+    }
+
+    &.mode-cell {
+        background-color: transparent;
+        border-color: transparent;
+        fill: var(--uui-picker_toggler-icon);
+
+        :global(.uui-icon):global(.-clickable), :global(.uui-icon-dropdown) {
+            cursor: pointer;
+
+            &:global(.uui-enabled) {
+                fill: transparent;
+            }
+
+            &:global(.uui-disabled) {
+                fill: transparent;
+            }
+        }
+
+        &:hover, &:global(.uui-focus) {
+            :global(.uui-icon):global(.-clickable), :global(.uui-icon-dropdown) {
+                &:global(.uui-enabled) {
+                    fill: var(--uui-picker_toggler-icon-clickable);
+
+                    &:hover {
+                        fill: var(--uui-picker_toggler-icon-clickable-hover);
+                    }
+                }
+
+                &:global(.uui-disabled) {
+                    fill: transparent;
+                }
+            }
+        }
+
+        &:global(.uui-focus) {
+            outline: none;
+        }
+    }
+
+    &.mode-inline {
+        background-color: initial;
+        border-color: transparent;
+        border-radius: var(--uui-picker_toggler-border-radius);
+        fill: var(--uui-picker_toggler-icon-clickable);
+
+        &:hover {
+            border-color: var(--uui-picker_toggler-border-hover);
+        }
+
+        &:global(.uui-focus) {
+            border-color: var(--uui-picker_toggler-border-active);
+            outline: none;
+        }
+    }
+
+    &:global(.uui-invalid) {
+        &.mode-form {
+            border-color: var(--uui-picker_toggler-border-error);
+        }
+    }
+
+    &:global(.uui-readonly) {
+        @include readonly-input();
+
+        :global(.uui-icon-dropdown), :global(.uui-icon-cancel) {
+            visibility: hidden;
+        }
+    }
+
+    &:global(.uui-disabled) {
+        @include disabled-input();
+        fill: var(--uui-picker_toggler-icon-disabled);
+
+        :global(.uui-input) {
+            cursor: default;
+        }
+
+        :global(.uui-icon-dropdown), :global(.uui-icon-cancel) {
+            visibility: hidden;
+        }
+    }
+
+    :global(.uui-input) {
+        padding-left: 6px;
+        padding-right: 6px;
+        margin-bottom: 2px;
+        font-family: var(--uui-picker_toggler-font);
+        font-weight: var(--uui-picker_toggler-font-weight, normal);
+        color: var(--uui-picker_toggler-text);
+
+        &::placeholder {
+            color: var(--uui-picker_toggler-placeholder);
+        }
+
+        &::-moz-placeholder {
+            opacity: 1;
+        }
+    }
+
+    :global(.uui-caption) {
+        @include overflow-ellipsis();
+        font-family: var(--uui-picker_toggler-font);
+        font-weight: var(--uui-picker_toggler-font-weight, normal);
+        align-self: center;
+        white-space: nowrap;
+    }
+
+    :global(.uui-button-box) {
+        margin-right: 3px;
+        margin-bottom: 2px;
+
+        &:last-of-type {
+            margin-right: 0;
+        }
+    }
+
+    :global(.uui-placeholder) {
+        color: var(--uui-picker_toggler-text);
+    }
+
+    :global(.uui-placeholder)::placeholder {
+        color: var(--uui-picker_toggler-text);
+    }
+
+    :global(.uui-placeholder)::-moz-placeholder {
+        opacity: 1;
+    }
+
+    :global(.uui-icon-cancel) {
+        margin-left: 6px;
+    }
+
+    // Sizes
+    &.size-24 {
+        @include picker-toggler-vertical-layout(24px, 1px);
+        min-width: 24px;
+    }
+
+    &.size-30 {
+        @include picker-toggler-vertical-layout(30px, 1px);
+        min-width: 30px;
+    }
+
+    &.size-36 {
+        @include picker-toggler-vertical-layout(36px, 1px);
+        min-width: 36px;
+    }
+
+    &.size-42 {
+        @include picker-toggler-vertical-layout(42px, 1px);
+        min-width: 42px;
+    }
+
+    &.size-48 {
+        @include picker-toggler-vertical-layout(48px, 1px);
+        min-width: 48px;
+    }
+}

package/components/pickers/PickerToggler.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { DataRowProps } from '@epam/uui-core';
+import { PickerToggler as UuiPickerToggler, PickerTogglerProps } from '@epam/uui-components';
+import { TextPlaceholder } from '../typography';
+import { systemIcons } from '../../icons/icons';
+import { Tag } from '../widgets';
+import * as types from '../types';
+import { getMaxItems } from './helpers';
+import css from './PickerToggler.module.scss';
+
+const defaultSize = '36';
+const defaultMode = types.EditMode.FORM;
+
+export interface PickerTogglerMods extends types.IHasEditMode {
+    /**
+    * Defines component size
+    * @default 36
+    */
+    size?: '24' | '30' | '36' | '42' | '48';
+}
+
+function applyPickerTogglerMods(mods: PickerTogglerMods) {
+    return [
+        css.root,
+        css['size-' + (mods.size || defaultSize)],
+        css['mode-' + (mods.mode || defaultMode)],
+    ];
+}
+
+function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>) {
+    const getPickerTogglerButtonSize = (propSize: types.ControlSize) => {
+        switch (propSize) {
+            case '48':
+                return '42';
+            case '42':
+                return '36';
+            case '36':
+                return '30';
+            case '30':
+                return '24';
+            case '24':
+                return '18';
+        }
+    };
+
+    const getCaption = (row: DataRowProps<TItem, TId>) => {
+        const maxItems = getMaxItems(props.maxItems);
+
+        if (row.isLoading) {
+            return <TextPlaceholder />;
+        } else if (!props.getName || props.selectedRowsCount > maxItems) {
+            return row.value;
+        } else {
+            return props.getName(row.value);
+        }
+    };
+
+    const renderItem = (row: DataRowProps<TItem, TId>) => (
+        <Tag
+            key={ row.rowKey }
+            caption={ getCaption(row) }
+            tabIndex={ -1 }
+            size={ props.size ? getPickerTogglerButtonSize(props.size) : '30' }
+            onClear={ (e) => {
+                row.onCheck?.(row);
+                e.stopPropagation();
+            } }
+            isDisabled={ props.isDisabled || props.isReadonly || row?.checkbox?.isDisabled }
+        />
+    );
+
+    return (
+        <UuiPickerToggler
+            { ...props }
+            ref={ ref }
+            cx={ [applyPickerTogglerMods(props), props.cx] }
+            renderItem={ !!props.renderItem ? props.renderItem : renderItem }
+            getName={ (item) => (props.getName ? props.getName(item) : item) }
+            cancelIcon={ systemIcons[props.size || defaultSize].clear }
+            dropdownIcon={ systemIcons[props.size || defaultSize].foldingArrow }
+        />
+    );
+}
+
+export const PickerToggler = React.forwardRef(PickerTogglerComponent) as <TItem, TId>(
+    props: PickerTogglerProps<TItem, TId> & PickerTogglerMods,
+    ref: React.ForwardedRef<HTMLElement>
+) => JSX.Element;

package/components/pickers/__tests__/DataPickerBody.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import { ArrayDataSource } from '@epam/uui-core';
+import { DataPickerBody, DataPickerBodyProps } from '../DataPickerBody';
+import { DataPickerRow } from '../DataPickerRow';
+
+const languageLevels = [
+    { id: 2, level: 'A1' }, { id: 3, level: 'A1+' }, { id: 4, level: 'A2' }, { id: 5, level: 'A2+' }, { id: 6, level: 'B1' }, { id: 7, level: 'B1+' }, { id: 8, level: 'B2' }, { id: 9, level: 'B2+' }, { id: 10, level: 'C1' }, { id: 11, level: 'C1+' }, { id: 12, level: 'C2' },
+];
+
+const mockDataSource = new ArrayDataSource({
+    items: languageLevels,
+});
+
+describe('DataPickerBody', () => {
+    const rows = mockDataSource.getView({}, () => {}).getVisibleRows();
+    const requiredProps: DataPickerBodyProps = {
+        value: null,
+        onValueChange: jest.fn(),
+        rows: rows.map(
+            (props) => <DataPickerRow key={ props.id } renderItem={ (item: string) => <div>{item}</div> } id={ props.id } rowKey={ props.rowKey } index={ props.id } />,
+        ),
+        search: {
+            value: null,
+            onValueChange: jest.fn(),
+        },
+    };
+
+    it('should be rendered with minimum props', async () => {
+        const tree = await renderSnapshotWithContextAsync(<DataPickerBody { ...requiredProps } />);
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered without rows', async () => {
+        const tree = await renderSnapshotWithContextAsync(<DataPickerBody { ...requiredProps } rows={ [] } renderNotFound={ () => <div>Not found</div> } />);
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered with maximum props', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <DataPickerBody
+                { ...requiredProps }
+                editMode="modal"
+                showSearch="auto"
+                maxHeight={ 800 }
+                searchSize="48"
+                rows={ rows.map((props) => (
+                    <DataPickerRow key={ props.id } renderItem={ (item: string) => <div>{item}</div> } id={ props.id } rowKey={ props.rowKey } index={ props.id } />
+                )) }
+                onKeyDown={ jest.fn }
+                rowsCount={ 7 }
+                totalCount={ 11 }
+                scheduleUpdate={ jest.fn }
+            />,
+        );
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/pickers/__tests__/DataPickerRow.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { DataPickerRow } from '../DataPickerRow';
+
+describe('DataPickerRow', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<DataPickerRow id="test" index={ 1 } renderItem={ (item: React.ReactNode) => <div>{item}</div> } rowKey="test" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <DataPickerRow
+                    id="test"
+                    index={ 1 }
+                    renderItem={ (item: React.ReactNode) => <div>{item}</div> }
+                    rowKey="test"
+                    borderBottom="gray20"
+                    padding="24"
+                    size="48"
+                    isChecked
+                    isChildrenChecked
+                    isFocused
+                    isFoldable
+                    isFolded
+                    isSelectable
+                    isSelected
+                    onSelect={ jest.fn }
+                    onFold={ jest.fn }
+                    onCheck={ jest.fn }
+                    onClick={ jest.fn }
+                    onFocus={ jest.fn }
+                />,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});