@epam/uui 5.3.0-rc.1 → 5.3.0

package/components/filters/PresetPanel/PresetsPanel.tsx

@@ -0,0 +1,112 @@
+import React, { useCallback, useState } from 'react';
+import sortBy from 'lodash.sortby';
+import { i18n } from '../../../i18n';
+import {
+    DataTableState, IHasRawProps, IPresetsApi, ITablePreset, cx,
+} from '@epam/uui-core';
+import { AdaptiveItemProps, AdaptivePanel, ScrollBars } from '@epam/uui-components';
+import css from './PresetsPanel.module.scss';
+import { Button } from '../../buttons';
+import { FlexCell, FlexRow } from '../../layout';
+import { Dropdown, DropdownContainer, DropdownMenuButton } from '../../overlays';
+import { Preset } from './Preset';
+import { PresetInput } from './PresetInput';
+import { ReactComponent as DeleteIcon } from '@epam/assets/icons/common/action-deleteforever-18.svg';
+import { ReactComponent as addIcon } from '@epam/assets/icons/common/content-plus_bold-18.svg';
+import { UUI_PRESETS_PANEL_ADD_BUTTON, UUI_PRESETS_PANEL_MORE_BUTTON } from './constants';
+
+export interface PresetsPanelProps extends IPresetsApi, IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
+    tableState: DataTableState;
+}
+
+type PresetAdaptiveItem = AdaptiveItemProps<{ preset?: ITablePreset }>;
+
+export function PresetsPanel(props: PresetsPanelProps) {
+    const [isAddingPreset, setIsAddingPreset] = useState(false);
+
+    const setAddingPreset = useCallback(() => {
+        setIsAddingPreset(true);
+    }, []);
+
+    const cancelAddingPreset = useCallback(() => {
+        setIsAddingPreset(false);
+    }, []);
+
+    const { presets, ...presetApi } = props;
+
+    const renderPreset = (preset: ITablePreset) => {
+        return <Preset key={ preset.id } preset={ preset } addPreset={ setAddingPreset } { ...presetApi } />;
+    };
+
+    const renderAddPresetButton = useCallback(() => {
+        return (
+            <div key="addingPresetBlock" className={ css.addPresetContainer }>
+                {!isAddingPreset ? (
+                    <Button cx={ UUI_PRESETS_PANEL_ADD_BUTTON } size="36" onClick={ setAddingPreset } caption={ i18n.presetPanel.addCaption } icon={ addIcon } iconPosition="left" fill="ghost" color="primary" />
+                ) : (
+                    <PresetInput onCancel={ cancelAddingPreset } onSuccess={ props.createNewPreset } />
+                )}
+            </div>
+        );
+    }, [isAddingPreset]);
+
+    const onPresetDropdownSelect = (preset: PresetAdaptiveItem) => {
+        props.choosePreset(preset.preset);
+    };
+
+    const renderMoreButtonDropdown = (item: PresetAdaptiveItem, hiddenItems: PresetAdaptiveItem[]) => {
+        return (
+            <Dropdown
+                key="more"
+                renderTarget={ (props) => (
+                    <FlexRow>
+                        <div className={ css.divider } />
+                        <Button cx={ UUI_PRESETS_PANEL_MORE_BUTTON } fill="ghost" color="secondary" caption={ `${hiddenItems?.length || ''} more` } { ...props } />
+                    </FlexRow>
+                ) }
+                renderBody={ (propsBody) => (
+                    <DropdownContainer cx={ cx(css.dropContainer) } width={ 230 } { ...propsBody }>
+                        <ScrollBars>
+                            {hiddenItems.map((hiddenItem) => (
+                                <DropdownMenuButton
+                                    key={ hiddenItem.preset.id }
+                                    onClick={ () => onPresetDropdownSelect(hiddenItem) }
+                                    caption={ hiddenItem.preset.name }
+                                    icon={ !hiddenItem.preset.isReadonly && DeleteIcon }
+                                    iconPosition="right"
+                                    cx={ css.dropdownDeleteIcon }
+                                    onIconClick={ !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) }
+                                />
+                            ))}
+                        </ScrollBars>
+                    </DropdownContainer>
+                ) }
+            />
+        );
+    };
+
+    const getPresetPriority = (preset: ITablePreset, index: number) => {
+        return preset.id === props.activePresetId ? 100499 : 1000 - index;
+    };
+
+    const getPanelItems = (): PresetAdaptiveItem[] => {
+        return [
+            ...sortBy(props.presets, (i) => i.order).map((preset, index) => ({
+                id: preset.id.toString(),
+                render: () => renderPreset(preset),
+                priority: getPresetPriority(preset, index),
+                preset: preset,
+            })), {
+                id: 'collapsedContainer', render: renderMoreButtonDropdown, priority: 100501, collapsedContainer: true,
+            }, { id: 'addPreset', render: renderAddPresetButton, priority: 100501 },
+        ];
+    };
+
+    return (
+        <FlexCell grow={ 1 } minWidth={ 310 } rawProps={ props.rawProps }>
+            <FlexRow size={ null } spacing="12" cx={ css.presetsWrapper }>
+                <AdaptivePanel items={ getPanelItems() } />
+            </FlexRow>
+        </FlexCell>
+    );
+}

package/components/filters/PresetPanel/__tests__/Preset.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import { Preset } from '../Preset';
+
+const mockPreset = {
+    id: 1,
+    name: 'Test Preset',
+};
+
+const mockPresetsApi = {
+    activePresetId: 1,
+    choosePreset: jest.fn(),
+    createNewPreset: jest.fn(),
+    hasPresetChanged: jest.fn(),
+    duplicatePreset: jest.fn(),
+    deletePreset: jest.fn(),
+    updatePreset: jest.fn(),
+    getPresetLink: jest.fn(),
+};
+
+const mockTableState = {};
+
+describe('Preset', () => {
+    it('renders correctly when not in rename mode and not active', async () => {
+        const tree = await renderSnapshotWithContextAsync(<Preset preset={ mockPreset } addPreset={ jest.fn() } tableState={ mockTableState } { ...mockPresetsApi } />);
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('renders correctly when not in rename mode and active', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <Preset
+                preset={ mockPreset }
+                addPreset={ jest.fn() }
+                tableState={ mockTableState }
+                activePresetId={ mockPreset.id }
+                hasPresetChanged={ jest.fn() }
+                choosePreset={ jest.fn() }
+                updatePreset={ jest.fn() }
+                { ...mockPresetsApi }
+            />,
+        );
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/filters/PresetPanel/__tests__/PresetActionsDropdown.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PresetActionsDropdown } from '../PresetActionsDropdown';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+
+const mockPresetActionsDropdownApi = {
+    activePresetId: 1,
+    choosePreset: jest.fn(),
+    createNewPreset: jest.fn(),
+    hasPresetChanged: jest.fn(),
+    duplicatePreset: jest.fn(),
+    deletePreset: jest.fn(),
+    updatePreset: jest.fn(),
+    getPresetLink: jest.fn(),
+    preset: {
+        id: 1,
+        name: 'Test Preset',
+    },
+    addPreset: jest.fn(),
+    tableState: {},
+    renamePreset: jest.fn(),
+};
+
+describe('PresetActionsDropdown', () => {
+    it('should render correctly', async () => {
+        const component = await renderSnapshotWithContextAsync(<PresetActionsDropdown { ...mockPresetActionsDropdownApi } />);
+        expect(component).toMatchSnapshot();
+    });
+});

package/components/filters/PresetPanel/__tests__/PresetInput.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import { PresetInput } from '../PresetInput';
+
+describe('PresetInput', () => {
+    it('should render correctly', async () => {
+        const component = await renderSnapshotWithContextAsync(<PresetInput onCancel={ jest.fn() } />);
+        expect(component).toMatchSnapshot();
+    });
+});

package/components/filters/PresetPanel/__tests__/__snapshots__/Preset.test.tsx.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preset renders correctly when not in rename mode and active 1`] = `
+<div
+  className="flexCell"
+  style={
+    Object {
+      "alignSelf": "center",
+      "flexBasis": "auto",
+      "flexGrow": undefined,
+      "flexShrink": undefined,
+      "minWidth": 0,
+      "textAlign": undefined,
+    }
+  }
+>
+  <button
+    className="container uui-button-box uui-enabled uui-active root uui-tab-button size-60 uui-no-left-icon uui-has-right-icon preset activePreset uui-presets-panel-preset"
+    onClick={[Function]}
+    role="tab"
+    tabIndex={-1}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      Test Preset
+    </div>
+    <div
+      className="container uui-icon uui-enabled"
+      style={Object {}}
+    >
+      <button
+        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-info root"
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </button>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`Preset renders correctly when not in rename mode and not active 1`] = `
+<div
+  className="flexCell"
+  style={
+    Object {
+      "alignSelf": "center",
+      "flexBasis": "auto",
+      "flexGrow": undefined,
+      "flexShrink": undefined,
+      "minWidth": 0,
+      "textAlign": undefined,
+    }
+  }
+>
+  <button
+    className="container uui-button-box uui-enabled uui-active root uui-tab-button size-60 uui-no-left-icon uui-has-right-icon preset activePreset uui-presets-panel-preset"
+    onClick={[Function]}
+    role="tab"
+    tabIndex={-1}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      Test Preset
+    </div>
+    <div
+      className="container uui-icon uui-enabled"
+      style={Object {}}
+    >
+      <button
+        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-info root"
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </button>
+    </div>
+  </button>
+</div>
+`;

package/components/filters/PresetPanel/__tests__/__snapshots__/PresetActionsDropdown.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PresetActionsDropdown should render correctly 1`] = `
+<button
+  className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-info root"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

package/components/filters/PresetPanel/__tests__/__snapshots__/PresetInput.test.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PresetInput should render correctly 1`] = `
+<div
+  className="flexCell presetInputCell uui-presets-panel-input"
+  style={
+    Object {
+      "alignSelf": undefined,
+      "flexBasis": "0",
+      "flexGrow": undefined,
+      "flexShrink": undefined,
+      "minWidth": "180px",
+      "textAlign": undefined,
+    }
+  }
+>
+  <div
+    className="container uui-input-box -clickable root size-36 mode-form presetInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    tabIndex={-1}
+  >
+    <input
+      autoFocus={true}
+      className="uui-input"
+      maxLength={50}
+      onChange={[Function]}
+      onKeyDown={[Function]}
+      tabIndex={0}
+      type="text"
+      value=""
+    />
+  </div>
+</div>
+`;

package/components/filters/PresetPanel/__tests__/__snapshots__/presetsPanel.test.tsx.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PresetsPanel should render with minimum props 1`] = `
+<div
+  className="flexCell"
+  style={
+    Object {
+      "alignSelf": undefined,
+      "flexBasis": "0",
+      "flexGrow": 1,
+      "flexShrink": undefined,
+      "minWidth": "310px",
+      "textAlign": undefined,
+    }
+  }
+>
+  <div
+    className="uui-flex-row root spacing-12 presetsWrapper container align-items-center"
+    style={
+      Object {
+        "columnGap": undefined,
+        "rowGap": undefined,
+      }
+    }
+  >
+    <div
+      className="mainWrapper"
+    >
+      <div
+        className="uui-flex-row container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="uui-flex-row root size-36 container align-items-center"
+          style={
+            Object {
+              "columnGap": undefined,
+              "rowGap": undefined,
+            }
+          }
+        >
+          <div
+            className="divider"
+          />
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-presets-panel-more-button"
+            onClick={[Function]}
+            tabIndex={0}
+            type="button"
+          >
+            <div
+              className="uui-caption"
+            >
+               more
+            </div>
+            <div
+              className="container uui-icon uui-enabled"
+              style={Object {}}
+            >
+              <svg
+                className=""
+              />
+            </div>
+          </button>
+        </div>
+        <div
+          className="addPresetContainer"
+        >
+          <button
+            className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-presets-panel-add-button"
+            onClick={[Function]}
+            tabIndex={0}
+            type="button"
+          >
+            <div
+              className="container uui-icon uui-enabled"
+              style={Object {}}
+            >
+              <svg
+                className=""
+              />
+            </div>
+            <div
+              className="uui-caption"
+            >
+              Add Preset
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;