@salutejs/sdds-serv 0.314.0-canary.2020.15831403447.0 → 0.314.0-canary.2021.15776478579.0

package/emotion/cjs/components/Table/Table.stories.tsx

@@ -0,0 +1,551 @@
+import React, { useRef, ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, getConfigVariations } from '@salutejs/plasma-sb-utils';
+import { IconEditOutline } from '@salutejs/plasma-icons';
+
+import { ButtonGroup } from '../ButtonGroup';
+import { Button } from '../Button';
+import { IconButton } from '../IconButton';
+import { Dropdown } from '../Dropdown';
+
+import { config } from './Table.config';
+import { Table } from './Table';
+
+type StoryTableProps = ComponentProps<typeof Table>;
+
+const { views, sizes } = getConfigVariations(config);
+const borderVariant = ['rows', 'header', 'all'];
+
+const meta: Meta<StoryTableProps> = {
+    title: 'Data Display/Table',
+    decorators: [InSpacingDecorator],
+    component: Table,
+    argTypes: {
+        view: {
+            control: 'select',
+            options: views,
+        },
+        size: {
+            control: 'select',
+            options: sizes,
+        },
+        borderVariant: {
+            control: 'select',
+            options: borderVariant,
+        },
+        stickyHeader: {
+            control: 'boolean',
+        },
+        maxHeight: {
+            control: 'text',
+        },
+        enableSelection: {
+            control: 'boolean',
+        },
+    },
+    args: {
+        view: 'default',
+        size: 'm',
+        borderVariant: 'all',
+        stickyHeader: false,
+    },
+    parameters: {
+        controls: {
+            include: ['view', 'size', 'borderVariant', 'stickyHeader', 'maxHeight', 'enableSelection'],
+        },
+    },
+};
+
+export default meta;
+
+type DataRow = {
+    id: string;
+    country: string;
+    capital: string;
+    population: number;
+    continent: string;
+    currency: string;
+    officialLanguage: string;
+    area: number;
+};
+
+const rows: DataRow[] = [
+    {
+        id: '0',
+        country: 'Канада',
+        capital: 'Оттава',
+        population: 38,
+        continent: 'Северная Америка',
+        currency: 'Канадский доллар',
+        officialLanguage: 'Английский, Французский',
+        area: 9984,
+    },
+    {
+        id: '1',
+        country: 'Бразилия',
+        capital: 'Бразилиа',
+        population: 213,
+        continent: 'Южная Америка',
+        currency: 'Бразильский реал',
+        officialLanguage: 'Португальский',
+        area: 8515,
+    },
+    {
+        id: '2',
+        country: 'Германия',
+        capital: 'Берлин',
+        population: 83,
+        continent: 'Европа',
+        currency: 'Евро',
+        officialLanguage: 'Немецкий',
+        area: 357,
+    },
+    {
+        id: '3',
+        country: 'Япония',
+        capital: 'Токио',
+        population: 126,
+        continent: 'Азия',
+        currency: 'Йена',
+        officialLanguage: 'Японский',
+        area: 377,
+    },
+    {
+        id: '4',
+        country: 'Австралия',
+        capital: 'Канберра',
+        population: 26,
+        continent: 'Океания',
+        currency: 'Австралийский доллар',
+        officialLanguage: 'Английский',
+        area: 7692,
+    },
+    {
+        id: '5',
+        country: 'Нигерия',
+        capital: 'Абуджа',
+        population: 206,
+        continent: 'Африка',
+        currency: 'Найра',
+        officialLanguage: 'Английский',
+        area: 923,
+    },
+    {
+        id: '6',
+        country: 'Индия',
+        capital: 'Нью-Дели',
+        population: 1400,
+        continent: 'Азия',
+        currency: 'Индийская рупия',
+        officialLanguage: 'Хинди, Английский',
+        area: 3287,
+    },
+    {
+        id: '7',
+        country: 'Франция',
+        capital: 'Париж',
+        population: 67,
+        continent: 'Европа',
+        currency: 'Евро',
+        officialLanguage: 'Французский',
+        area: 643,
+    },
+    {
+        id: '8',
+        country: 'Россия',
+        capital: 'Москва',
+        population: 143,
+        continent: 'Европа/Азия',
+        currency: 'Российский рубль',
+        officialLanguage: 'Русский',
+        area: 17098,
+    },
+    {
+        id: '9',
+        country: 'Южная Африка',
+        capital: 'Претория',
+        population: 59,
+        continent: 'Африка',
+        currency: 'Южноафриканский ранд',
+        officialLanguage: 'Зулу, Коса, Африкаанс, Английский',
+        area: 1221,
+    },
+];
+
+const columnsBasic = [
+    {
+        id: 'country',
+        label: 'Страна',
+    },
+    {
+        id: 'capital',
+        label: 'Столица',
+    },
+    {
+        id: 'population',
+        label: 'Население, млн',
+    },
+    {
+        id: 'continent',
+        label: 'Континент',
+    },
+    {
+        id: 'currency',
+        label: 'Валюта',
+    },
+    {
+        id: 'officialLanguage',
+        label: 'Язык',
+    },
+    {
+        id: 'area',
+        label: 'Площадь, тыс. км²',
+    },
+];
+
+const StoryBasic = (args: StoryTableProps) => {
+    return <Table {...args} data={rows} columns={columnsBasic} />;
+};
+
+export const Basic: StoryObj<StoryTableProps> = {
+    render: (args) => <StoryBasic {...args} />,
+    parameters: {
+        controls: {
+            exclude: ['stickyHeader', 'maxHeight', 'enableSelection'],
+        },
+    },
+};
+
+const filterHelper: (rows: DataRow[], filtered: { id: string; value: string[] }[]) => DataRow[] = (rows, filtered) => {
+    let newData = [...rows];
+
+    filtered.forEach(({ id, value }) => {
+        if (value.length === 0) return;
+
+        switch (id) {
+            case 'population': {
+                newData = newData.filter(({ population }) => {
+                    for (const val of value) {
+                        switch (val) {
+                            case 'small': {
+                                if (population < 50) return true;
+                                break;
+                            }
+
+                            case 'big': {
+                                if (population > 100) return true;
+                                break;
+                            }
+
+                            default: {
+                                return false;
+                            }
+                        }
+                    }
+
+                    return false;
+                });
+
+                break;
+            }
+
+            case 'officialLanguage': {
+                newData = newData.filter(({ officialLanguage }) => {
+                    for (const val of value) {
+                        switch (val) {
+                            case 'en': {
+                                if (officialLanguage.toLowerCase().includes('английский')) return true;
+                                break;
+                            }
+
+                            case 'ru': {
+                                if (officialLanguage.toLowerCase().includes('русский')) return true;
+                                break;
+                            }
+
+                            case 'it': {
+                                if (officialLanguage.toLowerCase().includes('итальянский')) return true;
+                                break;
+                            }
+
+                            default: {
+                                return false;
+                            }
+                        }
+                    }
+
+                    return false;
+                });
+
+                break;
+            }
+
+            default: {
+                break;
+            }
+        }
+    });
+
+    return newData;
+};
+
+const sortedHelper: (rows: DataRow[], sorted: { id: string; desc: boolean }[]) => DataRow[] = (rows, sorted) => {
+    const newData = [...rows];
+
+    if (sorted.length === 0) return newData;
+
+    const sortColumn = sorted[0].id;
+    const descOrder = sorted[0].desc;
+
+    newData.sort((a, b) => {
+        if (descOrder) {
+            return b[sortColumn] - a[sortColumn];
+        }
+
+        return a[sortColumn] - b[sortColumn];
+    });
+
+    return newData;
+};
+
+const useBackendImitation: (
+    rows: DataRow[],
+) => {
+    data: DataRow[];
+    selected: Record<string, boolean>;
+    filtered: any[];
+    sorted: any[];
+    onChange: ({ selected, sorted, filtered }) => void;
+    deleteItem: (rowId: string) => void;
+    updateRow: (rowId, columnId, value) => void;
+    clearSelected: () => void;
+    clearFiltered: () => void;
+    clearSorted: () => void;
+    clearAll: () => void;
+    addRow: () => void;
+    selectRow: (rowId: string) => void;
+} = () => {
+    const [data, setData] = useState(rows);
+
+    const [selected, setSelected] = useState<Record<string, boolean>>({});
+    const [filtered, setFiltered] = useState([]);
+    const [sorted, setSorted] = useState([]);
+
+    console.log(selected);
+
+    const onChange = ({ selected, sorted, filtered }) => {
+        setSelected(selected);
+        setFiltered(filtered);
+        setSorted(sorted);
+    };
+
+    const deleteItem = (rowId: string) => {
+        setData(data.filter(({ id }) => id !== rowId));
+    };
+
+    const updateRow = (rowId, columnId, value) => {
+        setData(
+            data.map((item) => {
+                if (item.id === rowId) {
+                    return {
+                        ...item,
+                        [columnId]: value,
+                    };
+                }
+                return item;
+            }),
+        );
+    };
+
+    const clearSelected = () => setSelected({});
+    const clearFiltered = () => setFiltered([]);
+    const clearSorted = () => setSorted([]);
+    const clearAll = () => {
+        clearSelected();
+        clearFiltered();
+        clearSorted();
+    };
+
+    const addRow = () => {
+        setData([
+            ...data,
+            {
+                id: (Math.floor(Math.random() * (10000 - 100 + 1)) + 100).toString(),
+                country: '',
+                capital: '',
+                population: null,
+                continent: '',
+                currency: '',
+                officialLanguage: '',
+                area: null,
+            },
+        ]);
+    };
+
+    const selectRow = (rowId: string) => {
+        setSelected({ ...selected, [rowId]: true });
+    };
+
+    return {
+        data: sortedHelper(filterHelper(data, filtered), sorted),
+        selected,
+        filtered,
+        sorted,
+        onChange,
+        deleteItem,
+        updateRow,
+        clearSelected,
+        clearFiltered,
+        clearSorted,
+        clearAll,
+        addRow,
+        selectRow,
+    };
+};
+
+const StoryComplex = (args: StoryTableProps) => {
+    const {
+        data,
+        selected,
+        filtered,
+        sorted,
+        onChange,
+        deleteItem,
+        updateRow,
+        clearSelected,
+        clearFiltered,
+        clearSorted,
+        clearAll,
+        addRow,
+        selectRow,
+    } = useBackendImitation(rows);
+
+    const ref = useRef(null);
+
+    const columns = [
+        {
+            id: 'country',
+            label: 'Страна',
+            enableResizing: true,
+            enableEditing: true,
+        },
+        {
+            id: 'capital',
+            label: 'Столица',
+            enableResizing: true,
+            enableEditing: true,
+        },
+        {
+            id: 'population',
+            label: 'Население, млн',
+            enableSorting: true,
+            enableResizing: true,
+            filters: [
+                { value: 'small', label: '< 50' },
+                { value: 'big', label: '> 100' },
+            ],
+            enableEditing: true,
+        },
+        {
+            id: 'continent',
+            label: 'Континент',
+            enableResizing: true,
+            enableEditing: true,
+        },
+        {
+            id: 'currency',
+            label: 'Валюта',
+            enableResizing: true,
+            enableEditing: true,
+        },
+        {
+            id: 'officialLanguage',
+            label: 'Язык',
+            enableResizing: true,
+            filters: [
+                { value: 'en', label: 'Английский' },
+                { value: 'ru', label: 'Русский' },
+                { value: 'it', label: 'Итальянский' },
+            ],
+            enableEditing: true,
+        },
+        {
+            id: 'area',
+            label: 'Площадь, тыс. км²',
+            enableSorting: true,
+            enableResizing: true,
+            enableEditing: true,
+        },
+        {
+            id: 'control',
+            label: '',
+            width: 0,
+            renderCell: (_, row) => (
+                <Dropdown
+                    portal={ref}
+                    items={[
+                        { value: 'choose', label: 'Выбрать' },
+                        { value: 'delete', label: 'Удалить' },
+                    ]}
+                    onItemSelect={({ value }) => {
+                        switch (value) {
+                            case 'choose': {
+                                selectRow(row.id);
+                                break;
+                            }
+
+                            case 'delete': {
+                                deleteItem(row.id);
+                                break;
+                            }
+
+                            default: {
+                                break;
+                            }
+                        }
+                    }}
+                >
+                    <IconButton view="clear" size="xs">
+                        <IconEditOutline />
+                    </IconButton>
+                </Dropdown>
+            ),
+        },
+    ];
+
+    return (
+        <div>
+            <ButtonGroup size="xs" isCommonButtonStyles={false}>
+                <Button text="Очистить выбранные" view="warning" size="xs" onClick={clearSelected} />
+                <Button text="Убрать сортировку" view="warning" size="xs" onClick={clearSorted} />
+                <Button text="Очистить фильтры" view="warning" size="xs" onClick={clearFiltered} />
+                <Button text="Очистить все" view="critical" size="xs" onClick={clearAll} />
+                <Button text="Добавить строку" view="success" size="xs" onClick={addRow} />
+            </ButtonGroup>
+
+            <br />
+            <br />
+
+            <Table
+                {...args}
+                data={data}
+                columns={columns}
+                onChange={onChange}
+                selected={selected}
+                sorted={sorted}
+                filtered={filtered}
+                onCellUpdate={updateRow}
+                ref={ref}
+            />
+        </div>
+    );
+};
+
+export const Complex: StoryObj<StoryTableProps> = {
+    render: (args) => <StoryComplex {...args} />,
+    args: {
+        maxHeight: '400px',
+        stickyHeader: true,
+        enableSelection: true,
+    },
+};

package/emotion/cjs/components/Table/index.js

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "Table", {
-    enumerable: true,
-    get: function() {
-        return _Table.Table;
-    }
+  enumerable: true,
+  get: function get() {
+    return _Table.Table;
+  }
 });
-var _Table = require("./Table");
+var _Table = /*#__PURE__*/require("./Table");

package/emotion/cjs/components/Tabs/TabItem.js

@@ -1,29 +1,24 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "TabItem", {
-    enumerable: true,
-    get: function() {
-        return TabItem;
-    }
-});
-var _react = /*#__PURE__*/ _interop_require_default(require("react"));
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _HorizontalTabItemconfig = require("./horizontal/HorizontalTabItem.config");
-var _VerticalTabItemconfig = require("./vertical/VerticalTabItem.config");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-var mergedHorizontalTabItemConfig = (0, _emotion.mergeConfig)(_emotion.horizontalTabItemConfig, _HorizontalTabItemconfig.config);
-var HorizontalTabItem = (0, _emotion.component)(mergedHorizontalTabItemConfig);
-var mergedVerticalTabItemConfig = (0, _emotion.mergeConfig)(_emotion.verticalTabItemConfig, _VerticalTabItemconfig.config);
-var VerticalTabItem = (0, _emotion.component)(mergedVerticalTabItemConfig);
-var TabItem = function(props) {
-    if (props.orientation === 'vertical') {
-        return /*#__PURE__*/ _react.default.createElement(VerticalTabItem, props);
-    }
-    return /*#__PURE__*/ _react.default.createElement(HorizontalTabItem, props);
-};
+exports.TabItem = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _HorizontalTabItem = /*#__PURE__*/require("./horizontal/HorizontalTabItem.config");
+var _VerticalTabItem = /*#__PURE__*/require("./vertical/VerticalTabItem.config");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var mergedHorizontalTabItemConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.horizontalTabItemConfig, _HorizontalTabItem.config);
+var HorizontalTabItem = /*#__PURE__*/(0, _emotion.component)(mergedHorizontalTabItemConfig);
+var mergedVerticalTabItemConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.verticalTabItemConfig, _VerticalTabItem.config);
+var VerticalTabItem = /*#__PURE__*/(0, _emotion.component)(mergedVerticalTabItemConfig);
+/**
+ * Элемент списка, недопустимо использовать вне компонента Tabs.
+ */
+var TabItem = exports.TabItem = function TabItem(props) {
+  if (props.orientation === 'vertical') {
+    return /*#__PURE__*/_react["default"].createElement(VerticalTabItem, props);
+  }
+  return /*#__PURE__*/_react["default"].createElement(HorizontalTabItem, props);
+};

package/emotion/cjs/components/Tabs/Tabs.js

@@ -1,29 +1,24 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "Tabs", {
-    enumerable: true,
-    get: function() {
-        return Tabs;
-    }
-});
-var _react = /*#__PURE__*/ _interop_require_default(require("react"));
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _HorizontalTabsconfig = require("./horizontal/HorizontalTabs.config");
-var _VerticalTabsconfig = require("./vertical/VerticalTabs.config");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-var mergedHorizontalTabsConfig = (0, _emotion.mergeConfig)(_emotion.horizontalTabsConfig, _HorizontalTabsconfig.config);
-var mergedVerticalTabsConfig = (0, _emotion.mergeConfig)(_emotion.verticalTabsConfig, _VerticalTabsconfig.config);
-var HorizontalTabs = (0, _emotion.component)(mergedHorizontalTabsConfig);
-var VerticalTabs = (0, _emotion.component)(mergedVerticalTabsConfig);
-var Tabs = function(props) {
-    if (props.orientation === 'vertical') {
-        return /*#__PURE__*/ _react.default.createElement(VerticalTabs, props);
-    }
-    return /*#__PURE__*/ _react.default.createElement(HorizontalTabs, props);
-};
+exports.Tabs = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _HorizontalTabs = /*#__PURE__*/require("./horizontal/HorizontalTabs.config");
+var _VerticalTabs = /*#__PURE__*/require("./vertical/VerticalTabs.config");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var mergedHorizontalTabsConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.horizontalTabsConfig, _HorizontalTabs.config);
+var mergedVerticalTabsConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.verticalTabsConfig, _VerticalTabs.config);
+var HorizontalTabs = /*#__PURE__*/(0, _emotion.component)(mergedHorizontalTabsConfig);
+var VerticalTabs = /*#__PURE__*/(0, _emotion.component)(mergedVerticalTabsConfig);
+/**
+ * Контейнер вкладок, основной компонент для пользовательской сборки вкладок.
+ */
+var Tabs = exports.Tabs = function Tabs(props) {
+  if (props.orientation === 'vertical') {
+    return /*#__PURE__*/_react["default"].createElement(VerticalTabs, props);
+  }
+  return /*#__PURE__*/_react["default"].createElement(HorizontalTabs, props);
+};