@epam/uui 5.5.0 → 5.5.2

package/components/tables/__tests__/__snapshots__/DataTableRow.test.tsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataTableRow should be rendered correctly 1`] = `
+<div
+  className="uui-flex-row container uui-table-row-container uui-table-row root uui-dt-vars uui-dt-row-border size-36 container align-items-center"
+  role="row"
+  style={
+    Object {
+      "columnGap": undefined,
+      "minWidth": "95px",
+      "rowGap": undefined,
+    }
+  }
+>
+  <div
+    className="section scrollingSection uui-table-scrolling-section"
+    style={
+      Object {
+        "--uui-dt-cell-border-width": "1px",
+        "flex": "1 0 95px",
+        "minWidth": "95px",
+      }
+    }
+  >
+    <div
+      className="uui-table-cell cell uui-dt-vars data-table-cell cell size-36 padding-12 padding-left-24 padding-right-24 align-widgets-top"
+      role="cell"
+      style={
+        Object {
+          "alignSelf": undefined,
+          "flexBasis": "96px",
+          "flexGrow": 0,
+          "flexShrink": undefined,
+          "minWidth": "96px",
+          "textAlign": undefined,
+        }
+      }
+    >
+      <div
+        className="contentWrapper"
+        style={
+          Object {
+            "alignSelf": undefined,
+            "justifyContent": undefined,
+            "textAlign": undefined,
+          }
+        }
+      >
+        <div />
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/components/tables/columnsConfigurationModal/ColumnRow.module.scss

@@ -0,0 +1,45 @@
+@use '../../../assets/styles/index' as *;
+
+.row-wrapper {
+    position: relative;
+    padding: 0 24px 0 0;
+    width: 100%;
+    box-sizing: border-box;
+    touch-action: auto;
+    column-gap: 6px;
+
+    &.not-pinned:not(:hover) {
+        .pin-icon-button {
+            visibility: hidden;
+        }
+    }
+
+    .checkbox {
+        flex-grow: 1;
+    }
+
+    &:hover {
+        background-color: var(--uui-surface-highest);
+    }
+
+    .drag-handle {
+        height: 12px;
+        background-position: right;
+        background-repeat: repeat-y;
+        padding: 6px 0 6px 24px;
+        background-position-y: -2px;
+        opacity: 1;
+        touch-action: none;
+
+        &.dnd-disabled {
+            opacity: 0.3;
+            touch-action: auto;
+        }
+
+    }
+
+    &:global(.uui-drag-ghost) {
+        @include dnd-ghost-shadow();
+        background-color: var(--uui-surface-main);
+    }
+}

package/components/tables/columnsConfigurationModal/ColumnRow.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { cx, DataColumnProps, DndActor, DndActorRenderParams } from '@epam/uui-core';
+import { FlexRow } from '../../layout';
+import { Checkbox } from '../../inputs';
+import { DropMarker } from '../../dnd';
+import { DragHandle, ColumnsConfigurationRowProps } from '@epam/uui-components';
+import { PinIconButton } from './PinIconButton';
+import styles from './ColumnRow.module.scss';
+
+export interface ColumnRowProps<TItem, TId, TFilter> {
+    column: ColumnsConfigurationRowProps;
+    renderItem?: (column: DataColumnProps<TItem, TId, TFilter>) => React.ReactNode;
+}
+
+export const ColumnRow = React.memo(function ColumnRow(props: ColumnRowProps<any, any, any>) {
+    const { column } = props;
+    const {
+        toggleVisibility, togglePin, onCanAcceptDrop, onDrop, columnConfig, isDndAllowed, isPinnedAlways,
+    } = column;
+    const { isVisible, fix } = columnConfig;
+    const isPinned = fix || isPinnedAlways;
+    const data = { column, columnConfig };
+
+    const renderContent = (dndActorParams: DndActorRenderParams) => {
+        const wrapperClasses = cx(styles.rowWrapper, !isPinned && styles.notPinned, ...(isDndAllowed ? dndActorParams.classNames : []));
+        const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
+        const wrapperAttrs = {
+            ...(isDndAllowed ? { ref: dndActorParams.ref } : {}),
+            ...(isDndAllowed ? { rawProps: { ...restEventHandlers } } : {}),
+        };
+        const dragHandleRawProps: any = {
+            ...(isDndAllowed ? { onTouchStart, onPointerDown } : {}),
+        };
+
+        const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
+
+        return (
+            <FlexRow size="30" cx={ wrapperClasses } { ...wrapperAttrs }>
+                <DragHandle rawProps={ dragHandleRawProps } isDisabled={ !isDndAllowed } cx={ cx(styles.dragHandle, !isDndAllowed && styles.dndDisabled) } />
+                <Checkbox
+                    key={ column.key }
+                    label={ props.renderItem ? props.renderItem(props.column) : column.caption }
+                    value={ isVisible }
+                    onValueChange={ toggleVisibility }
+                    isDisabled={ column.isAlwaysVisible }
+                    cx={ styles.checkbox }
+                />
+                <FlexRow size="30" cx={ styles.pinIconButton }>
+                    <PinIconButton id={ column.key } isPinned={ !!isPinned } canUnpin={ !isPinnedAlways } onTogglePin={ togglePin } />
+                </FlexRow>
+                <DropMarker { ...dndActorPropsWithoutRef } />
+            </FlexRow>
+        );
+    };
+
+    return (
+        <DndActor
+            key={ column.key }
+            srcData={ data }
+            dstData={ data }
+            canAcceptDrop={ onCanAcceptDrop }
+            onDrop={ onDrop }
+            render={ renderContent }
+        />
+    );
+});

package/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.module.scss

@@ -0,0 +1,55 @@
+@use '../../../assets/styles/index' as *;
+
+.main-panel {
+    height: 100%;
+    padding-top: 6px;
+
+    .group-title {
+        margin-bottom: -6px;
+
+        > .group-title-text {
+            padding-top: 0;
+        }
+
+
+        > .group-title-badge {
+            top: -3px;
+
+            > :global(.uui-caption) {
+                font-family: var(--uui-font); //TODO: rework component
+                font-weight: 600;
+            }
+        }
+
+        &:not(:first-child) {
+            padding-top: 12px;
+        }
+    }
+
+    .group-items {
+        flex-direction: column;
+    }
+
+    .no-data {
+        flex-direction: column;
+        top: calc(50% - 35px);
+        position: relative;
+    }
+
+    .h-divider {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 6px 24px;
+
+        &::before {
+            content: '';
+            height: 1px;
+            display: block;
+            background: var(--uui-divider);
+        }
+    }
+}
+
+.search-area {
+    padding-bottom: 6px;
+}

package/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.tsx

@@ -0,0 +1,153 @@
+import styles from './ColumnsConfigurationModal.module.scss';
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+
+import { ColumnsConfig, DataColumnProps, IModal } from '@epam/uui-core';
+import { useColumnsConfiguration } from '@epam/uui-components';
+import { ReactComponent as MenuIcon } from '@epam/assets/icons/common/navigation-more_vert-18.svg';
+import { ReactComponent as ResetIcon } from '@epam/assets/icons/common/navigation-refresh-18.svg';
+
+import { FlexRow, FlexSpacer, Panel, ScrollBars } from '../../layout';
+import { Button, LinkButton } from '../../buttons';
+import { Dropdown, DropdownMenuButton, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, Tooltip } from '../../overlays';
+import { Text } from '../../typography';
+import { Badge } from '../../widgets';
+import { SearchInput } from '../../inputs';
+
+import { i18n as uuiI18n } from '../../../i18n';
+import { ColumnRow } from './ColumnRow';
+
+export interface ColumnsConfigurationModalProps<TItem, TId, TFilter> extends IModal<ColumnsConfig> {
+    columnsConfig?: ColumnsConfig;
+    defaultConfig: ColumnsConfig;
+    columns: DataColumnProps<TItem, TId, TFilter>[];
+    renderItem?: (column: DataColumnProps<TItem, TId, TFilter>) => React.ReactNode;
+    getSearchFields?: (column: DataColumnProps<TItem, TId, TFilter>) => string[];
+}
+
+const renderGroupTitle = (title: string, amount: number) => (
+    <FlexRow size="24" padding="24" spacing="6" cx={ styles.groupTitle }>
+        <Text cx={ styles.groupTitleText } fontWeight="600" lineHeight="24" fontSize="14">
+            {title}
+        </Text>
+        <Badge cx={ styles.groupTitleBadge } caption={ amount } color="neutral" size="18" />
+    </FlexRow>
+);
+
+export function ColumnsConfigurationModal<TItem, TId, TFilter>(props: ColumnsConfigurationModalProps<TItem, TId, TFilter>) {
+    const i18n = uuiI18n.tables.columnsConfigurationModal;
+
+    const { columns, columnsConfig: initialColumnsConfig, defaultConfig, ...modalProps } = props;
+    const {
+        groupedColumns, searchValue, columnsConfig, reset, checkAll, uncheckAll, setSearchValue,
+    } = useColumnsConfiguration({
+        initialColumnsConfig,
+        columns,
+        defaultConfig,
+        getSearchFields: props.getSearchFields,
+    });
+    const apply = useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
+    const close = useCallback(() => modalProps.abort(), [modalProps]);
+    const isNoData = useMemo(() => Object.values(groupedColumns).every((v) => !v.length), [groupedColumns]);
+
+    const renderVisible = () => {
+        const amountPinned = groupedColumns.displayedPinned.length;
+        const amountUnPinned = groupedColumns.displayedUnpinned.length;
+        if (!amountPinned && !amountUnPinned) {
+            return null;
+        }
+        const hasDivider = !!(amountPinned && amountUnPinned);
+        return (
+            <>
+                {renderGroupTitle(i18n.displayedSectionTitle, amountPinned + amountUnPinned)}
+                {!!amountPinned && (
+                    <FlexRow cx={ styles.groupItems } size="30">
+                        {groupedColumns.displayedPinned.map((c) => (
+                            <ColumnRow column={ c } key={ c.key } renderItem={ props.renderItem } />
+                        ))}
+                    </FlexRow>
+                )}
+                {hasDivider && <div className={ styles.hDivider } />}
+                {!!amountUnPinned && (
+                    <FlexRow cx={ styles.groupItems } size="30">
+                        {groupedColumns.displayedUnpinned.map((c) => (
+                            <ColumnRow column={ c } key={ c.key } renderItem={ props.renderItem } />
+                        ))}
+                    </FlexRow>
+                )}
+            </>
+        );
+    };
+    const renderHidden = () => {
+        const amountHidden = groupedColumns.hidden.length;
+        if (!amountHidden) {
+            return null;
+        }
+        return (
+            <>
+                {renderGroupTitle(i18n.hiddenSectionTitle, amountHidden)}
+                <FlexRow cx={ styles.groupItems } size="30">
+                    {groupedColumns.hidden.map((c) => (
+                        <ColumnRow column={ c } key={ c.key } renderItem={ props.renderItem } />
+                    ))}
+                </FlexRow>
+            </>
+        );
+    };
+
+    const noVisibleColumns = useMemo(
+        () => !groupedColumns.displayedPinned.length && !groupedColumns.displayedUnpinned.length,
+        [groupedColumns.displayedPinned, groupedColumns.displayedUnpinned],
+    );
+
+    const applyButton = <Button caption={ i18n.applyButton } isDisabled={ noVisibleColumns } color="primary" onClick={ apply } />;
+
+    return (
+        <ModalBlocker { ...modalProps }>
+            <ModalWindow height={ 700 }>
+                <ModalHeader title={ i18n.configureColumnsTitle } onClose={ close } />
+                <FlexRow padding="24" borderBottom={ true } spacing="12" cx={ styles.searchArea }>
+                    <SearchInput size="30" value={ searchValue } onValueChange={ setSearchValue } placeholder={ i18n.searchPlaceholder } />
+                    <Dropdown
+                        closeOnTargetClick={ true }
+                        renderBody={ () => (
+                            <Panel background="surface-main" shadow={ true }>
+                                <DropdownMenuButton caption={ i18n.clearAllButton } onClick={ uncheckAll } />
+                                <DropdownMenuButton caption={ i18n.selectAllButton } onClick={ checkAll } />
+                            </Panel>
+                        ) }
+                        renderTarget={ (props) => <Button { ...props } fill="none" icon={ MenuIcon } size="30" color="secondary" isDropdown={ false } /> }
+                    />
+                </FlexRow>
+                <Panel background="surface-main" cx={ styles.mainPanel }>
+                    <ScrollBars>
+                        {renderVisible()}
+                        {renderHidden()}
+                        {isNoData && (
+                            <FlexRow cx={ styles.noData }>
+                                <Text fontSize="24" lineHeight="30" color="primary" fontWeight="600">
+                                    {i18n.noResultsFound.text}
+                                </Text>
+                                <Text fontSize="16" lineHeight="24" color="primary">
+                                    {i18n.noResultsFound.subText}
+                                </Text>
+                            </FlexRow>
+                        )}
+                    </ScrollBars>
+                </Panel>
+                <ModalFooter borderTop>
+                    <LinkButton icon={ ResetIcon } caption={ i18n.resetToDefaultButton } onClick={ reset } />
+                    <FlexSpacer />
+                    <Button fill="none" color="secondary" caption={ i18n.cancelButton } onClick={ close } />
+                    {noVisibleColumns ? (
+                        <Tooltip content={ i18n.enableAtLeastOneColumnMessage } placement="top-end" color="critical">
+                            {applyButton}
+                        </Tooltip>
+                    ) : (
+                        applyButton
+                    )}
+                </ModalFooter>
+            </ModalWindow>
+        </ModalBlocker>
+    );
+}

package/components/tables/columnsConfigurationModal/PinIconButton.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+import { ReactComponent as LockIcon } from '@epam/assets/icons/common/action-lock-fill-18.svg';
+import { ReactComponent as PinOnIcon } from '@epam/assets/icons/common/action-pin_on-18.svg';
+import { ReactComponent as PinOffIcon } from '@epam/assets/icons/common/action-pin_off-18.svg';
+import { IconButton } from '../../buttons';
+import { Tooltip } from '../../overlays';
+import { i18n } from '../../../i18n';
+
+interface IPinIconButton {
+    isPinned: boolean;
+    canUnpin: boolean;
+    onTogglePin: (id: string) => void;
+    id: string;
+}
+
+const i18nLocal = i18n.tables.columnsConfigurationModal;
+
+export function PinIconButton(props: IPinIconButton) {
+    const [isHovered, setIsHovered] = useState(false);
+
+    const {
+        id, onTogglePin, isPinned, canUnpin,
+    } = props;
+    const isPinnedAlways = isPinned && !canUnpin;
+
+    const tooltipText = useMemo(() => {
+        if (isPinned) {
+            return isPinnedAlways ? i18nLocal.lockedColumnPinButton : i18nLocal.unPinColumnButton;
+        }
+        return i18nLocal.pinColumnButton;
+    }, [isPinned, isPinnedAlways]);
+
+    const pinIcon = useMemo(() => {
+        if (isPinnedAlways) {
+            return LockIcon;
+        }
+        if (isPinned) {
+            return isHovered ? PinOffIcon : PinOnIcon;
+        }
+        return PinOnIcon;
+    }, [
+        isPinnedAlways, isHovered, isPinned,
+    ]);
+
+    const pinClickHandler = isPinnedAlways ? undefined : () => onTogglePin(id);
+
+    return (
+        <span onMouseOver={ () => setIsHovered(true) } onMouseOut={ () => setIsHovered(false) }>
+            <Tooltip content={ tooltipText } placement="bottom" color="inverted">
+                <IconButton icon={ pinIcon } onClick={ pinClickHandler } isDisabled={ isPinnedAlways } color={ isPinned ? 'info' : undefined } />
+            </Tooltip>
+        </span>
+    );
+}

package/components/tables/columnsConfigurationModal/__tests__/ColumnsConfigurationModal.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ColumnsConfigurationModal } from '../ColumnsConfigurationModal';
+import { DataColumnProps, getColumnsConfig } from '@epam/uui-core';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+
+const mockColumns: DataColumnProps[] = [
+    {
+        key: 'id',
+        caption: 'ID',
+        render: (product: any) => <div>{product}</div>,
+        isSortable: true,
+        isAlwaysVisible: true,
+        grow: 0,
+        width: 96,
+    }, {
+        key: 'level',
+        caption: 'Level',
+        render: (product: any) => <div>{product}</div>,
+        isSortable: true,
+        isAlwaysVisible: true,
+        grow: 0,
+        width: 96,
+    },
+];
+
+const mockHiddenColumns: DataColumnProps[] = [
+    {
+        key: 'id',
+        caption: 'ID',
+        render: (product: any) => <div>{product}</div>,
+        isSortable: true,
+        isAlwaysVisible: false,
+        grow: 0,
+        width: 96,
+        isHiddenByDefault: true,
+    }, {
+        key: 'level',
+        caption: 'Level',
+        render: (product: any) => <div>{product}</div>,
+        isSortable: true,
+        isAlwaysVisible: false,
+        isHiddenByDefault: true,
+        grow: 0,
+        width: 96,
+    },
+];
+
+const modalProps = {
+    isActive: true,
+    key: 'test',
+    zIndex: 1,
+    abort: jest.fn,
+    success: jest.fn,
+};
+
+describe('ColumnsConfigurationModal', () => {
+    it('should be rendered correctly', async () => {
+        const defaultConfig = getColumnsConfig(mockColumns, {});
+        const tree = await renderSnapshotWithContextAsync(
+            <ColumnsConfigurationModal { ...modalProps } columns={ mockColumns } columnsConfig={ defaultConfig } defaultConfig={ defaultConfig } />,
+        );
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should disable Apply button if all columns are hidden', async () => {
+        const defaultConfig = getColumnsConfig(mockHiddenColumns, {});
+        const tree = await renderSnapshotWithContextAsync(
+            <ColumnsConfigurationModal { ...modalProps } columns={ mockHiddenColumns } columnsConfig={ defaultConfig } defaultConfig={ defaultConfig } />,
+        );
+        expect(tree).toMatchSnapshot();
+    });
+});