@salutejs/plasma-new-hope 0.231.2-canary.1603.12471850782.0 → 0.231.2-canary.1675.12478533143.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Autocomplete/Autocomplete.css +1 -1
- package/cjs/components/Autocomplete/Autocomplete.tokens.js +1 -0
- package/cjs/components/Autocomplete/Autocomplete.tokens.js.map +1 -1
- package/cjs/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
- package/cjs/components/Autocomplete/ui/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/Autocomplete/ui/TextField/{TextField.styles_1anhp9c.css → TextField.styles_9yyvt.css} +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -0
- package/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Target/Target.styles.js +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Target/Target.styles.js.map +1 -1
- package/{es/components/Combobox/ComboboxNew/ui/Target/Target.styles_2m210q.css → cjs/components/Combobox/ComboboxNew/ui/Target/Target.styles_1l1jobd.css} +1 -1
- package/cjs/components/Pagination/Pagination.css +2 -2
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +2 -2
- package/cjs/components/Select/Select.css +2 -2
- package/cjs/components/Select/Select.tokens.js +1 -0
- package/cjs/components/Select/Select.tokens.js.map +1 -1
- package/cjs/components/Select/ui/Target/Target.css +2 -2
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +2 -2
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +7 -7
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/{Textfield.styles_n859dp.css → Textfield.styles_dlumrp.css} +1 -1
- package/cjs/index.css +4 -10
- package/cjs/index.js +0 -4
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Autocomplete/Autocomplete.tokens.js +1 -0
- package/emotion/cjs/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -0
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/Target/Target.styles.js +1 -1
- package/emotion/cjs/components/Select/Select.tokens.js +1 -0
- package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +3 -3
- package/emotion/cjs/components/_Icon/index.js +1 -8
- package/emotion/cjs/index.js +0 -11
- package/emotion/es/components/Autocomplete/Autocomplete.tokens.js +1 -0
- package/emotion/es/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -0
- package/emotion/es/components/Combobox/ComboboxNew/ui/Target/Target.styles.js +1 -1
- package/emotion/es/components/Select/Select.tokens.js +1 -0
- package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +3 -3
- package/emotion/es/components/_Icon/index.js +1 -2
- package/emotion/es/index.js +0 -1
- package/es/components/Autocomplete/Autocomplete.css +1 -1
- package/es/components/Autocomplete/Autocomplete.tokens.js +1 -0
- package/es/components/Autocomplete/Autocomplete.tokens.js.map +1 -1
- package/es/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
- package/es/components/Autocomplete/ui/TextField/TextField.styles.js.map +1 -1
- package/es/components/Autocomplete/ui/TextField/{TextField.styles_1anhp9c.css → TextField.styles_9yyvt.css} +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.css +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -0
- package/es/components/Combobox/ComboboxNew/Combobox.tokens.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Target/Target.styles.js +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Target/Target.styles.js.map +1 -1
- package/{cjs/components/Combobox/ComboboxNew/ui/Target/Target.styles_2m210q.css → es/components/Combobox/ComboboxNew/ui/Target/Target.styles_1l1jobd.css} +1 -1
- package/es/components/Pagination/Pagination.css +2 -2
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +2 -2
- package/es/components/Select/Select.css +2 -2
- package/es/components/Select/Select.tokens.js +1 -0
- package/es/components/Select/Select.tokens.js.map +1 -1
- package/es/components/Select/ui/Target/Target.css +2 -2
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +2 -2
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +7 -7
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/{Textfield.styles_n859dp.css → Textfield.styles_dlumrp.css} +1 -1
- package/es/index.css +4 -10
- package/es/index.js +0 -2
- package/es/index.js.map +1 -1
- package/package.json +2 -3
- package/styled-components/cjs/components/Autocomplete/Autocomplete.tokens.js +1 -0
- package/styled-components/cjs/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -0
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Target/Target.styles.js +1 -1
- package/styled-components/cjs/components/Select/Select.tokens.js +1 -0
- package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/styled-components/cjs/components/_Icon/index.js +1 -8
- package/styled-components/cjs/index.js +0 -11
- package/styled-components/es/components/Autocomplete/Autocomplete.tokens.js +1 -0
- package/styled-components/es/components/Autocomplete/ui/TextField/TextField.styles.js +1 -1
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js +1 -0
- package/styled-components/es/components/Combobox/ComboboxNew/ui/Target/Target.styles.js +1 -1
- package/styled-components/es/components/Select/Select.tokens.js +1 -0
- package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/styled-components/es/components/_Icon/index.js +1 -2
- package/styled-components/es/index.js +0 -1
- package/types/components/Autocomplete/Autocomplete.tokens.d.ts +1 -0
- package/types/components/Autocomplete/Autocomplete.tokens.d.ts.map +1 -1
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts +1 -0
- package/types/components/Combobox/ComboboxNew/Combobox.tokens.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts.map +1 -1
- package/types/components/Select/Select.tokens.d.ts +1 -0
- package/types/components/Select/Select.tokens.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts.map +1 -1
- package/types/components/_Icon/index.d.ts +0 -1
- package/types/components/_Icon/index.d.ts.map +1 -1
- package/types/index.d.ts +0 -1
- package/types/index.d.ts.map +1 -1
- package/cjs/components/Tree/Tree.css +0 -7
- package/cjs/components/Tree/Tree.js +0 -99
- package/cjs/components/Tree/Tree.js.map +0 -1
- package/cjs/components/Tree/Tree.styles.js +0 -43
- package/cjs/components/Tree/Tree.styles.js.map +0 -1
- package/cjs/components/Tree/Tree.styles_1mwgczn.css +0 -5
- package/cjs/components/Tree/Tree.tokens.js +0 -43
- package/cjs/components/Tree/Tree.tokens.js.map +0 -1
- package/cjs/components/Tree/utils/sizeToIconSize.js +0 -11
- package/cjs/components/Tree/utils/sizeToIconSize.js.map +0 -1
- package/cjs/components/_Icon/Icon.assets/Folder.js +0 -25
- package/cjs/components/_Icon/Icon.assets/Folder.js.map +0 -1
- package/cjs/components/_Icon/Icons/IconFolder.js +0 -23
- package/cjs/components/_Icon/Icons/IconFolder.js.map +0 -1
- package/emotion/cjs/components/Tree/Tree.js +0 -100
- package/emotion/cjs/components/Tree/Tree.styles.js +0 -38
- package/emotion/cjs/components/Tree/Tree.template-doc.mdx +0 -102
- package/emotion/cjs/components/Tree/Tree.tokens.js +0 -41
- package/emotion/cjs/components/Tree/Tree.types.js +0 -5
- package/emotion/cjs/components/Tree/index.js +0 -19
- package/emotion/cjs/components/Tree/utils/index.js +0 -12
- package/emotion/cjs/components/Tree/utils/sizeToIconSize.js +0 -10
- package/emotion/cjs/components/_Icon/Icon.assets/Folder.js +0 -24
- package/emotion/cjs/components/_Icon/Icons/IconFolder.js +0 -22
- package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.config.js +0 -25
- package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.js +0 -11
- package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
- package/emotion/cjs/examples/plasma_web/components/Tree/Tree.config.js +0 -25
- package/emotion/cjs/examples/plasma_web/components/Tree/Tree.js +0 -11
- package/emotion/cjs/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
- package/emotion/es/components/Tree/Tree.js +0 -91
- package/emotion/es/components/Tree/Tree.styles.js +0 -31
- package/emotion/es/components/Tree/Tree.template-doc.mdx +0 -102
- package/emotion/es/components/Tree/Tree.tokens.js +0 -35
- package/emotion/es/components/Tree/Tree.types.js +0 -1
- package/emotion/es/components/Tree/index.js +0 -2
- package/emotion/es/components/Tree/utils/index.js +0 -1
- package/emotion/es/components/Tree/utils/sizeToIconSize.js +0 -4
- package/emotion/es/components/_Icon/Icon.assets/Folder.js +0 -17
- package/emotion/es/components/_Icon/Icons/IconFolder.js +0 -15
- package/emotion/es/examples/plasma_b2c/components/Tree/Tree.config.js +0 -19
- package/emotion/es/examples/plasma_b2c/components/Tree/Tree.js +0 -5
- package/emotion/es/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
- package/emotion/es/examples/plasma_web/components/Tree/Tree.config.js +0 -19
- package/emotion/es/examples/plasma_web/components/Tree/Tree.js +0 -5
- package/emotion/es/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
- package/es/components/Tree/Tree.css +0 -7
- package/es/components/Tree/Tree.js +0 -94
- package/es/components/Tree/Tree.js.map +0 -1
- package/es/components/Tree/Tree.styles.js +0 -35
- package/es/components/Tree/Tree.styles.js.map +0 -1
- package/es/components/Tree/Tree.styles_1mwgczn.css +0 -5
- package/es/components/Tree/Tree.tokens.js +0 -38
- package/es/components/Tree/Tree.tokens.js.map +0 -1
- package/es/components/Tree/utils/sizeToIconSize.js +0 -7
- package/es/components/Tree/utils/sizeToIconSize.js.map +0 -1
- package/es/components/_Icon/Icon.assets/Folder.js +0 -21
- package/es/components/_Icon/Icon.assets/Folder.js.map +0 -1
- package/es/components/_Icon/Icons/IconFolder.js +0 -19
- package/es/components/_Icon/Icons/IconFolder.js.map +0 -1
- package/styled-components/cjs/components/Tree/Tree.js +0 -100
- package/styled-components/cjs/components/Tree/Tree.styles.js +0 -26
- package/styled-components/cjs/components/Tree/Tree.template-doc.mdx +0 -102
- package/styled-components/cjs/components/Tree/Tree.tokens.js +0 -41
- package/styled-components/cjs/components/Tree/Tree.types.js +0 -5
- package/styled-components/cjs/components/Tree/index.js +0 -19
- package/styled-components/cjs/components/Tree/utils/index.js +0 -12
- package/styled-components/cjs/components/Tree/utils/sizeToIconSize.js +0 -10
- package/styled-components/cjs/components/_Icon/Icon.assets/Folder.js +0 -24
- package/styled-components/cjs/components/_Icon/Icons/IconFolder.js +0 -22
- package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.config.js +0 -25
- package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.js +0 -11
- package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
- package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.config.js +0 -25
- package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.js +0 -11
- package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
- package/styled-components/es/components/Tree/Tree.js +0 -91
- package/styled-components/es/components/Tree/Tree.styles.js +0 -18
- package/styled-components/es/components/Tree/Tree.template-doc.mdx +0 -102
- package/styled-components/es/components/Tree/Tree.tokens.js +0 -35
- package/styled-components/es/components/Tree/Tree.types.js +0 -1
- package/styled-components/es/components/Tree/index.js +0 -2
- package/styled-components/es/components/Tree/utils/index.js +0 -1
- package/styled-components/es/components/Tree/utils/sizeToIconSize.js +0 -4
- package/styled-components/es/components/_Icon/Icon.assets/Folder.js +0 -17
- package/styled-components/es/components/_Icon/Icons/IconFolder.js +0 -15
- package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.config.js +0 -19
- package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.js +0 -5
- package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
- package/styled-components/es/examples/plasma_web/components/Tree/Tree.config.js +0 -19
- package/styled-components/es/examples/plasma_web/components/Tree/Tree.js +0 -5
- package/styled-components/es/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
- package/types/components/Tree/Tree.d.ts +0 -20
- package/types/components/Tree/Tree.d.ts.map +0 -1
- package/types/components/Tree/Tree.styles.d.ts +0 -7
- package/types/components/Tree/Tree.styles.d.ts.map +0 -1
- package/types/components/Tree/Tree.tokens.d.ts +0 -36
- package/types/components/Tree/Tree.tokens.d.ts.map +0 -1
- package/types/components/Tree/Tree.types.d.ts +0 -154
- package/types/components/Tree/Tree.types.d.ts.map +0 -1
- package/types/components/Tree/index.d.ts +0 -3
- package/types/components/Tree/index.d.ts.map +0 -1
- package/types/components/Tree/utils/index.d.ts +0 -2
- package/types/components/Tree/utils/index.d.ts.map +0 -1
- package/types/components/Tree/utils/sizeToIconSize.d.ts +0 -2
- package/types/components/Tree/utils/sizeToIconSize.d.ts.map +0 -1
- package/types/components/_Icon/Icon.assets/Folder.d.ts +0 -4
- package/types/components/_Icon/Icon.assets/Folder.d.ts.map +0 -1
- package/types/components/_Icon/Icons/IconFolder.d.ts +0 -4
- package/types/components/_Icon/Icons/IconFolder.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Tree/Tree.config.d.ts +0 -18
- package/types/examples/plasma_b2c/components/Tree/Tree.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Tree/Tree.d.ts +0 -13
- package/types/examples/plasma_b2c/components/Tree/Tree.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Tree/Tree.config.d.ts +0 -18
- package/types/examples/plasma_web/components/Tree/Tree.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Tree/Tree.d.ts +0 -13
- package/types/examples/plasma_web/components/Tree/Tree.d.ts.map +0 -1
@@ -1,117 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { ComponentProps } from 'react';
|
3
|
-
import type { StoryObj, Meta } from '@storybook/react';
|
4
|
-
|
5
|
-
import { WithTheme } from '../../../_helpers';
|
6
|
-
|
7
|
-
import { Tree } from './Tree';
|
8
|
-
|
9
|
-
const treeData: any[] = [
|
10
|
-
{
|
11
|
-
title: 'Parent 1',
|
12
|
-
key: '0-0',
|
13
|
-
children: [
|
14
|
-
{
|
15
|
-
title: 'Parent 1-0',
|
16
|
-
key: '0-0-0',
|
17
|
-
children: [
|
18
|
-
{
|
19
|
-
title: 'Leaf',
|
20
|
-
key: '0-0-0-0',
|
21
|
-
disabled: true,
|
22
|
-
},
|
23
|
-
{
|
24
|
-
title: 'Leaf',
|
25
|
-
key: '0-0-0-1',
|
26
|
-
children: [
|
27
|
-
{
|
28
|
-
title: 'Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf',
|
29
|
-
key: '0-0-0-0-0',
|
30
|
-
},
|
31
|
-
{
|
32
|
-
title: 'Leaf',
|
33
|
-
key: '0-0-0-0-1',
|
34
|
-
},
|
35
|
-
],
|
36
|
-
},
|
37
|
-
],
|
38
|
-
},
|
39
|
-
{
|
40
|
-
title: 'Parent 1-1',
|
41
|
-
key: '0-0-1',
|
42
|
-
children: [{ title: 'Leaf', key: '0-0-1-0' }],
|
43
|
-
},
|
44
|
-
],
|
45
|
-
},
|
46
|
-
{
|
47
|
-
title: 'Parent 2',
|
48
|
-
key: '0-1',
|
49
|
-
children: [
|
50
|
-
{
|
51
|
-
title: 'Parent 2-0',
|
52
|
-
key: '0-1-0',
|
53
|
-
},
|
54
|
-
],
|
55
|
-
},
|
56
|
-
];
|
57
|
-
|
58
|
-
type StoryTreeProps = ComponentProps<typeof Tree>;
|
59
|
-
|
60
|
-
const size = ['xs', 's', 'm', 'l'];
|
61
|
-
const arrowPlacements = ['left', 'right'];
|
62
|
-
|
63
|
-
const meta: Meta<StoryTreeProps> = {
|
64
|
-
title: 'web/Data Entry/Tree',
|
65
|
-
decorators: [WithTheme],
|
66
|
-
component: Tree,
|
67
|
-
argTypes: {
|
68
|
-
size: {
|
69
|
-
control: 'select',
|
70
|
-
options: size,
|
71
|
-
},
|
72
|
-
checkable: {
|
73
|
-
control: 'boolean',
|
74
|
-
},
|
75
|
-
multiple: {
|
76
|
-
control: 'boolean',
|
77
|
-
},
|
78
|
-
arrowPlacement: {
|
79
|
-
options: arrowPlacements,
|
80
|
-
control: {
|
81
|
-
type: 'inline-radio',
|
82
|
-
},
|
83
|
-
},
|
84
|
-
defaultExpandAll: {
|
85
|
-
control: 'boolean',
|
86
|
-
},
|
87
|
-
fullWidthItemSelection: {
|
88
|
-
control: 'boolean',
|
89
|
-
},
|
90
|
-
height: {
|
91
|
-
control: 'number',
|
92
|
-
},
|
93
|
-
hasIcon: {
|
94
|
-
control: 'boolean',
|
95
|
-
},
|
96
|
-
},
|
97
|
-
args: {
|
98
|
-
size: 'm',
|
99
|
-
fullWidthItemSelection: false,
|
100
|
-
checkable: false,
|
101
|
-
multiple: false,
|
102
|
-
arrowPlacement: 'left',
|
103
|
-
defaultExpandAll: true,
|
104
|
-
height: undefined,
|
105
|
-
hasIcon: true,
|
106
|
-
},
|
107
|
-
};
|
108
|
-
|
109
|
-
export default meta;
|
110
|
-
|
111
|
-
const StoryDefault = (args: StoryTreeProps) => {
|
112
|
-
return <Tree {...args} items={treeData} />;
|
113
|
-
};
|
114
|
-
|
115
|
-
export const Default: StoryObj<StoryTreeProps> = {
|
116
|
-
render: (args) => <StoryDefault {...args} />,
|
117
|
-
};
|
@@ -1,91 +0,0 @@
|
|
1
|
-
import React, { forwardRef } from 'react';
|
2
|
-
import Tree from 'rc-tree';
|
3
|
-
import 'rc-tree/assets/index.css';
|
4
|
-
import { cx } from '../../utils';
|
5
|
-
import { IconArrowWrapper, StyledArrow, base, StyledFolder, IconFolderWrapper } from './Tree.styles';
|
6
|
-
import { sizeToIconSize } from './utils';
|
7
|
-
import { classes } from './Tree.tokens';
|
8
|
-
|
9
|
-
/**
|
10
|
-
* Многоуровневый раскрывающийся список в виде дерева.
|
11
|
-
*/
|
12
|
-
export var treeRoot = function treeRoot(Root) {
|
13
|
-
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
14
|
-
var items = _ref.items,
|
15
|
-
_ref$arrowPlacement = _ref.arrowPlacement,
|
16
|
-
arrowPlacement = _ref$arrowPlacement === void 0 ? 'left' : _ref$arrowPlacement,
|
17
|
-
_ref$virtual = _ref.virtual,
|
18
|
-
virtual = _ref$virtual === void 0 ? false : _ref$virtual,
|
19
|
-
height = _ref.height,
|
20
|
-
size = _ref.size,
|
21
|
-
view = _ref.view,
|
22
|
-
_ref$fullWidthItemSel = _ref.fullWidthItemSelection,
|
23
|
-
fullWidthItemSelection = _ref$fullWidthItemSel === void 0 ? false : _ref$fullWidthItemSel,
|
24
|
-
_ref$multiple = _ref.multiple,
|
25
|
-
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
26
|
-
_ref$defaultExpandAll = _ref.defaultExpandAll,
|
27
|
-
defaultExpandAll = _ref$defaultExpandAll === void 0 ? false : _ref$defaultExpandAll,
|
28
|
-
_ref$checkable = _ref.checkable,
|
29
|
-
checkable = _ref$checkable === void 0 ? false : _ref$checkable,
|
30
|
-
defaultCheckedKeys = _ref.defaultCheckedKeys,
|
31
|
-
defaultExpandedKeys = _ref.defaultExpandedKeys,
|
32
|
-
defaultSelectedKeys = _ref.defaultSelectedKeys,
|
33
|
-
className = _ref.className,
|
34
|
-
onTreeSelect = _ref.onTreeSelect,
|
35
|
-
onTreeCheck = _ref.onTreeCheck,
|
36
|
-
onTreeExpand = _ref.onTreeExpand,
|
37
|
-
_ref$hasIcon = _ref.hasIcon,
|
38
|
-
hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
|
39
|
-
icon = _ref.icon;
|
40
|
-
var invertedClass = arrowPlacement === 'right' ? classes.treeInverted : undefined;
|
41
|
-
var itemFilledClass = fullWidthItemSelection ? classes.treeItemFilled : undefined;
|
42
|
-
return /*#__PURE__*/React.createElement(Root, {
|
43
|
-
view: view,
|
44
|
-
size: size,
|
45
|
-
ref: ref,
|
46
|
-
items: items
|
47
|
-
}, /*#__PURE__*/React.createElement(Tree, {
|
48
|
-
height: height,
|
49
|
-
virtual: virtual,
|
50
|
-
multiple: multiple,
|
51
|
-
checkable: checkable,
|
52
|
-
className: cx(className, invertedClass, itemFilledClass),
|
53
|
-
defaultExpandAll: defaultExpandAll,
|
54
|
-
style: {
|
55
|
-
border: '1px solid #000'
|
56
|
-
},
|
57
|
-
treeData: items,
|
58
|
-
defaultCheckedKeys: defaultCheckedKeys,
|
59
|
-
defaultExpandedKeys: defaultExpandedKeys,
|
60
|
-
defaultSelectedKeys: defaultSelectedKeys,
|
61
|
-
onSelect: onTreeSelect,
|
62
|
-
onCheck: onTreeCheck,
|
63
|
-
onExpand: onTreeExpand,
|
64
|
-
switcherIcon: function switcherIcon(node) {
|
65
|
-
if (node.isLeaf) {
|
66
|
-
return null;
|
67
|
-
}
|
68
|
-
return /*#__PURE__*/React.createElement(IconArrowWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
|
69
|
-
size: sizeToIconSize(size),
|
70
|
-
color: "inherit",
|
71
|
-
className: "arrow"
|
72
|
-
}));
|
73
|
-
},
|
74
|
-
icon: hasIcon && (icon || /*#__PURE__*/React.createElement(IconFolderWrapper, null, /*#__PURE__*/React.createElement(StyledFolder, {
|
75
|
-
size: sizeToIconSize(size),
|
76
|
-
color: "inherit"
|
77
|
-
})))
|
78
|
-
}));
|
79
|
-
});
|
80
|
-
};
|
81
|
-
export var treeConfig = {
|
82
|
-
name: 'Tree',
|
83
|
-
tag: 'div',
|
84
|
-
layout: treeRoot,
|
85
|
-
base: base,
|
86
|
-
variations: {},
|
87
|
-
defaults: {
|
88
|
-
view: 'default',
|
89
|
-
size: 'm'
|
90
|
-
}
|
91
|
-
};
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import styled from 'styled-components';
|
2
|
-
import { css } from 'styled-components';
|
3
|
-
import { applyEllipsis } from '../../mixins';
|
4
|
-
import { IconDisclosureRightCentered, IconFolder } from '../_Icon';
|
5
|
-
import { treeTokens as tokens, classes } from './Tree.tokens';
|
6
|
-
export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
|
7
|
-
componentId: "plasma-new-hope__sc-ians6n-0"
|
8
|
-
})(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
|
9
|
-
export var StyledArrow = /*#__PURE__*/styled(IconDisclosureRightCentered).withConfig({
|
10
|
-
componentId: "plasma-new-hope__sc-ians6n-1"
|
11
|
-
})(["transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"]);
|
12
|
-
export var IconFolderWrapper = /*#__PURE__*/styled.div.withConfig({
|
13
|
-
componentId: "plasma-new-hope__sc-ians6n-2"
|
14
|
-
})(["line-height:0;color:var(", ");margin:var(", ");"], tokens.arrowColor, tokens.iconFolderMargin);
|
15
|
-
export var StyledFolder = /*#__PURE__*/styled(IconFolder).withConfig({
|
16
|
-
componentId: "plasma-new-hope__sc-ians6n-3"
|
17
|
-
})([""]);
|
18
|
-
export var base = /*#__PURE__*/css([".rc-tree,.rc-tree-list{border:none !important;}.rc-tree .rc-tree-treenode{position:relative;display:flex;align-items:center;min-height:var(", ");padding:0;}.rc-tree.", " .rc-tree-treenode{padding:0 var(", ") !important;}.rc-tree.", ":not(", ") .rc-tree-treenode{padding:0 var(", ");}.rc-tree .rc-tree-treenode::before{content:'';position:absolute;z-index:-1;top:0.25rem;bottom:0.25rem;left:var(", ");right:0;background:transparent;border-radius:var(", ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled{opacity:var(", ");}.rc-tree.", " .rc-tree-treenode::before{inset:0;border-radius:0;}.rc-tree .rc-tree-treenode.rc-tree-treenode-selected::before{background:var(", ") !important;}.rc-tree .rc-tree-treenode:not(.rc-tree-treenode-disabled):hover::before{background:var(", ");}.rc-tree .rc-tree-treenode:not(.rc-tree-treenode-disabled):active::before{background:var(", ");}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{display:flex;align-items:center;align-self:stretch;height:auto;flex:1;width:1px;}.rc-tree .rc-tree-treenode span.rc-tree-switcher{width:var(", ");height:var(", ");margin:var(", ");line-height:0;vertical-align:0;background:transparent;}.rc-tree.", " .rc-tree-treenode span.rc-tree-switcher{margin:0;}.rc-tree .rc-tree-treenode span.rc-tree-iconEle{width:auto;height:auto;margin-right:0;vertical-align:0;background:transparent;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open .arrow{transform:rotate(90deg);}.rc-tree.", " .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close .arrow{transform:rotate(90deg);}.rc-tree.", " .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open .arrow{transform:rotate(0);}.rc-tree .rc-tree-treenode span.rc-tree-checkbox{display:flex;align-items:center;justify-content:center;line-height:0;vertical-align:0;width:var(", ");height:var(", ");margin:var(", ");background-image:none;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox::before{content:'';display:block;width:var(", ");height:var(", ");border:0.125rem solid var(", ");border-radius:var(", ");box-sizing:border-box;background-size:contain;background-repeat:no-repeat;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-checked::before{background-color:var(", ");border-color:var(", ");background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill='white' d='m5.70711,8.15582c-0.39053,-0.39052 -1.02369,-0.39052 -1.41422,0c-0.39052,0.39053 -0.39052,1.02369 0,1.41422l3.70666,3.70666l6.71095,-6.70248c0.3908,-0.39027 0.3912,-1.02344 0.0009,-1.41421c-0.3903,-0.39077 -1.02344,-0.39117 -1.41421,-0.00089l-5.29674,5.29004l-2.29334,-2.29334z' /%3E%3C/svg%3E\");}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate::before{background-color:var(", ");border-color:var(", ");background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8a1 1 0 011-1h10a1 1 0 110 2H3a1 1 0 01-1-1z' fill='white'/%3E%3C/svg%3E\");}.rc-tree-title{color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", "}.rc-tree.tree-inverted .rc-tree-treenode span.rc-tree-switcher{order:1;}.rc-tree.tree-inverted .rc-tree-treenode::before{left:0;}.rc-tree-node-selected{opacity:1;box-shadow:none;background:none;}.rc-tree-node-selected .rc-tree-title{color:var(", ");}.rc-tree-node-selected ", "{color:var(", ");}.rc-tree-indent-unit{width:var(", ");}"], tokens.itemHeight, classes.treeItemFilled, tokens.itemPadding, classes.treeInverted, classes.treeItemFilled, tokens.itemPaddingTight, tokens.switcherSize, tokens.itemBorderRadius, tokens.itemDisabledOpacity, classes.treeItemFilled, tokens.itemBackgroundColor, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.switcherSize, tokens.switcherSize, tokens.switcherMargin, classes.treeInverted, classes.treeInverted, classes.treeInverted, tokens.checkboxSize, tokens.checkboxSize, tokens.checkboxMargin, tokens.checkboxInnerSize, tokens.checkboxInnerSize, tokens.checkboxBorderColor, tokens.checkboxBorderRadius, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.color, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, /*#__PURE__*/applyEllipsis(), tokens.colorSelected, IconFolderWrapper, tokens.colorSelected, tokens.itemIndent);
|
@@ -1,102 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: tree
|
3
|
-
title: Tree
|
4
|
-
---
|
5
|
-
|
6
|
-
import { PropsTable } from '@site/src/components';
|
7
|
-
|
8
|
-
# Tree
|
9
|
-
Многоуровневый раскрывающийся список в виде дерева с возможностью выбора (selection) и выделения (checkbox).
|
10
|
-
|
11
|
-
<PropsTable name="Tree" />
|
12
|
-
|
13
|
-
Обязательным параметром является только массив `items`. Формат следующий:
|
14
|
-
|
15
|
-
```tsx
|
16
|
-
type TreeItem = {
|
17
|
-
/**
|
18
|
-
* Уникальный идентификатор элемента.
|
19
|
-
*/
|
20
|
-
key: React.Key;
|
21
|
-
/**
|
22
|
-
* Заголовок элемента.
|
23
|
-
*/
|
24
|
-
title?: React.ReactNode | ((data: TreeItem) => React.ReactNode);
|
25
|
-
/**
|
26
|
-
* Classname для текущего элемента.
|
27
|
-
*/
|
28
|
-
className?: string;
|
29
|
-
/**
|
30
|
-
* Стиль для текущего элемента.
|
31
|
-
*/
|
32
|
-
style?: React.CSSProperties;
|
33
|
-
/**
|
34
|
-
* Флаг выключения элемента.
|
35
|
-
* @default false
|
36
|
-
*/
|
37
|
-
disabled?: boolean;
|
38
|
-
};
|
39
|
-
```
|
40
|
-
|
41
|
-
## Пример использования
|
42
|
-
```tsx live
|
43
|
-
import React from 'react';
|
44
|
-
import { Tree } from '@salutejs/{{ package }}';
|
45
|
-
|
46
|
-
export function App() {
|
47
|
-
const treeData = [
|
48
|
-
{
|
49
|
-
title: 'Parent 1',
|
50
|
-
key: '0-0',
|
51
|
-
children: [
|
52
|
-
{
|
53
|
-
title: 'Parent 1-0',
|
54
|
-
key: '0-0-0',
|
55
|
-
children: [
|
56
|
-
{
|
57
|
-
title: 'Leaf',
|
58
|
-
key: '0-0-0-0',
|
59
|
-
disabled: true,
|
60
|
-
},
|
61
|
-
{
|
62
|
-
title: 'Leaf',
|
63
|
-
key: '0-0-0-1',
|
64
|
-
children: [
|
65
|
-
{
|
66
|
-
title: 'Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf',
|
67
|
-
key: '0-0-0-0-0',
|
68
|
-
},
|
69
|
-
{
|
70
|
-
title: 'Leaf',
|
71
|
-
key: '0-0-0-0-1',
|
72
|
-
},
|
73
|
-
],
|
74
|
-
},
|
75
|
-
],
|
76
|
-
},
|
77
|
-
{
|
78
|
-
title: 'Parent 1-1',
|
79
|
-
key: '0-0-1',
|
80
|
-
children: [{ title: 'Leaf', key: '0-0-1-0' }],
|
81
|
-
},
|
82
|
-
],
|
83
|
-
},
|
84
|
-
{
|
85
|
-
title: 'Parent 2',
|
86
|
-
key: '0-1',
|
87
|
-
children: [
|
88
|
-
{
|
89
|
-
title: 'Parent 2-0',
|
90
|
-
key: '0-1-0',
|
91
|
-
},
|
92
|
-
],
|
93
|
-
},
|
94
|
-
];
|
95
|
-
|
96
|
-
return (
|
97
|
-
<div style={{ display: 'block' }}>
|
98
|
-
<Tree items={treeData} defaultExpandAll />
|
99
|
-
</div>
|
100
|
-
);
|
101
|
-
}
|
102
|
-
```
|
@@ -1,35 +0,0 @@
|
|
1
|
-
export var classes = {
|
2
|
-
treeInverted: 'tree-inverted',
|
3
|
-
treeItemFilled: 'tree-item-filled'
|
4
|
-
};
|
5
|
-
export var treeTokens = {
|
6
|
-
arrowColor: '--plasma-tree-arrow-color',
|
7
|
-
arrowColorHover: '--plasma-tree-arrow-color-hover',
|
8
|
-
arrowColorActive: '--plasma-tree-arrow-color-active',
|
9
|
-
color: '--plasma-tree-color',
|
10
|
-
colorSelected: '--plasma-tree-color-selected',
|
11
|
-
fontFamily: '--plasma-tree-font-family',
|
12
|
-
fontSize: '--plasma-tree-font-size',
|
13
|
-
fontStyle: '--plasma-tree-font-style',
|
14
|
-
fontWeight: '--plasma-tree-font-weight',
|
15
|
-
letterSpacing: '--plasma-tree-letter-spacing',
|
16
|
-
lineHeight: '--plasma-tree-line-height',
|
17
|
-
itemHeight: '--plasma-tree-item-height',
|
18
|
-
itemPadding: '--plasma-tree-item-padding',
|
19
|
-
itemPaddingTight: '--plasma-tree-item-padding-tight',
|
20
|
-
itemIndent: '--plasma-tree-item-indent',
|
21
|
-
itemBorderRadius: '--plasma-tree-item-border-radius',
|
22
|
-
iconFolderMargin: '--plasma-tree-icon-folder-margin',
|
23
|
-
switcherMargin: '--plasma-tree-switcher-margin',
|
24
|
-
switcherSize: '--plasma-tree-switcher-size',
|
25
|
-
checkboxSize: '--plasma-tree-checkbox-size',
|
26
|
-
checkboxInnerSize: '--plasma-tree-checkbox-inner-size',
|
27
|
-
checkboxBorderRadius: '--plasma-tree-checkbox-border-radius',
|
28
|
-
checkboxMargin: '--plasma-tree-checkbox-margin',
|
29
|
-
checkboxBorderColor: '--plasma-tree-checkbox-border-color',
|
30
|
-
checkboxBackgroundColor: '--plasma-tree-checkbox-background-color',
|
31
|
-
itemBackgroundColor: '--plasma-tree-item-background-color',
|
32
|
-
itemBackgroundColorHover: '--plasma-tree-item-background-color-hover',
|
33
|
-
itemBackgroundColorActive: '--plasma-tree-item-background-color-active',
|
34
|
-
itemDisabledOpacity: '--plasma-tree-item-disabled-opacity'
|
35
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1 +0,0 @@
|
|
1
|
-
export { sizeToIconSize } from './sizeToIconSize';
|
@@ -1,17 +0,0 @@
|
|
1
|
-
var _path;
|
2
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
|
-
import React from 'react';
|
4
|
-
export var Folder = function Folder(props) {
|
5
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
6
|
-
width: "100%",
|
7
|
-
height: "100%",
|
8
|
-
viewBox: "0 0 24 24",
|
9
|
-
fill: "none",
|
10
|
-
xmlns: "http://www.w3.org/2000/svg"
|
11
|
-
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
12
|
-
fillRule: "evenodd",
|
13
|
-
clipRule: "evenodd",
|
14
|
-
d: "M2.02752 9.75007H2V7.3191C1.99999 6.71538 1.99998 6.2171 2.03315 5.8112C2.06759 5.38963 2.14151 5.0021 2.32698 4.6381C2.6146 4.07361 3.07354 3.61467 3.63803 3.32705C4.00203 3.14158 4.38956 3.06766 4.81113 3.03322C5.21703 3.00005 5.7153 3.00006 6.31903 3.00007L9.10319 3.00004C9.69972 2.99971 10.1427 2.99947 10.5265 3.10229C11.5617 3.3797 12.3704 4.18834 12.6478 5.22362C12.7096 5.45422 12.7341 5.70621 12.7438 6.00007L16.4821 6.00007C17.2949 6.00006 17.9506 6.00006 18.4815 6.04344C19.0281 6.0881 19.5082 6.18246 19.9525 6.4088C20.6581 6.76832 21.2317 7.342 21.5913 8.04761C21.8176 8.49183 21.912 8.97197 21.9566 9.5186C22 10.0495 22 10.7051 22 11.5179V14.4822C22 15.295 22 15.9506 21.9566 16.4815C21.912 17.0282 21.8176 17.5083 21.5913 17.9525C21.2317 18.6581 20.6581 19.2318 19.9525 19.5913C19.5082 19.8177 19.0281 19.912 18.4815 19.9567C17.9506 20.0001 17.2949 20.0001 16.4821 20.0001H7.51793C6.70507 20.0001 6.04945 20.0001 5.51853 19.9567C4.9719 19.912 4.49176 19.8177 4.04754 19.5913C3.34193 19.2318 2.76825 18.6581 2.40873 17.9525C2.18239 17.5083 2.08803 17.0282 2.04336 16.4815C1.99999 15.9506 1.99999 15.295 2 14.4822V11.518C1.99999 10.8194 1.99999 10.237 2.02752 9.75007ZM9 4.50007C9.74577 4.50007 9.97152 4.50651 10.1382 4.55118C10.6559 4.68988 11.0602 5.09421 11.1989 5.61184C11.2228 5.70094 11.2357 5.80689 11.2426 6.00007L7.5179 6.00007C6.70506 6.00006 6.04944 6.00006 5.51853 6.04344C4.9719 6.0881 4.49176 6.18246 4.04754 6.4088C3.8551 6.50685 3.67247 6.62083 3.50133 6.74907C3.50368 6.4154 3.51019 6.15332 3.52816 5.93335C3.55503 5.60454 3.60372 5.43639 3.66349 5.31909C3.8073 5.03684 4.03677 4.80737 4.31902 4.66356C4.43631 4.6038 4.60447 4.5551 4.93328 4.52824C5.27085 4.50066 5.70757 4.50007 6.35 4.50007H9ZM4.72852 7.74531C4.92604 7.64467 5.18681 7.57554 5.64068 7.53845C6.10331 7.50066 6.69755 7.50007 7.55 7.50007H16.45C17.3025 7.50007 17.8967 7.50066 18.3593 7.53845C18.8132 7.57554 19.074 7.64467 19.2715 7.74531C19.6948 7.96102 20.039 8.30523 20.2548 8.72859C20.3554 8.92611 20.4245 9.18688 20.4616 9.64075C20.4994 10.1034 20.5 10.6976 20.5 11.5501V14.4501C20.5 15.3025 20.4994 15.8968 20.4616 16.3594C20.4245 16.8133 20.3554 17.074 20.2548 17.2716C20.039 17.6949 19.6948 18.0391 19.2715 18.2548C19.074 18.3555 18.8132 18.4246 18.3593 18.4617C17.8967 18.4995 17.3025 18.5001 16.45 18.5001H7.55C6.69755 18.5001 6.10331 18.4995 5.64068 18.4617C5.18681 18.4246 4.92604 18.3555 4.72852 18.2548C4.30516 18.0391 3.96095 17.6949 3.74524 17.2716C3.6446 17.074 3.57547 16.8133 3.53838 16.3594C3.50058 15.8968 3.5 15.3025 3.5 14.4501V11.5501C3.5 10.6976 3.50058 10.1034 3.53838 9.64075C3.57547 9.18688 3.6446 8.92611 3.74524 8.72859C3.96095 8.30523 4.30516 7.96102 4.72852 7.74531Z",
|
15
|
-
fill: "currentColor"
|
16
|
-
})));
|
17
|
-
};
|
@@ -1,15 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { Folder } from '../Icon.assets/Folder';
|
3
|
-
import { IconRoot } from '../IconRoot';
|
4
|
-
export var IconFolder = function IconFolder(_ref) {
|
5
|
-
var _ref$size = _ref.size,
|
6
|
-
size = _ref$size === void 0 ? 'xs' : _ref$size,
|
7
|
-
color = _ref.color,
|
8
|
-
className = _ref.className;
|
9
|
-
return /*#__PURE__*/React.createElement(IconRoot, {
|
10
|
-
className: className,
|
11
|
-
size: size,
|
12
|
-
color: color,
|
13
|
-
icon: Folder
|
14
|
-
});
|
15
|
-
};
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { treeTokens as tokens } from '../../../../components/Tree/Tree.tokens';
|
3
|
-
export var config = {
|
4
|
-
defaults: {
|
5
|
-
view: 'default',
|
6
|
-
size: 'm'
|
7
|
-
},
|
8
|
-
variations: {
|
9
|
-
view: {
|
10
|
-
"default": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-secondary);", ":var(--text-accent);", ":0.4;"], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive, tokens.color, tokens.colorSelected, tokens.itemBackgroundColor, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.checkboxBorderColor, tokens.checkboxBackgroundColor, tokens.itemDisabledOpacity)
|
11
|
-
},
|
12
|
-
size: {
|
13
|
-
l: /*#__PURE__*/css(["", ":3.5rem;", ":1rem;", ":0.375rem;", ":2rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":0 0.5rem 0 0;", ":1.5rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
|
14
|
-
m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem;", ":0.375rem;", ":2rem;", ":0.625rem;", ":0 0.5rem 0 0;", ":0 0.5rem 0 0;", ":1.5rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
|
15
|
-
s: /*#__PURE__*/css(["", ":2.5rem;", ":0.75rem;", ":0.25rem;", ":1.875rem;", ":0.5rem;", ":0 0.375rem 0 0;", ":0 0.375rem 0 0;", ":1.5rem;", ":0 0.25rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
|
16
|
-
xs: /*#__PURE__*/css(["", ":2rem;", ":0.5rem;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0 0.25rem 0 0;", ":0 0.25rem 0 0;", ":1rem;", ":0 0.25rem 0 0;", ":1rem;", ":0.875rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight)
|
17
|
-
}
|
18
|
-
}
|
19
|
-
};
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { treeConfig } from '../../../../components/Tree';
|
2
|
-
import { component, mergeConfig } from '../../../../engines';
|
3
|
-
import { config } from './Tree.config';
|
4
|
-
var mergedConfig = /*#__PURE__*/mergeConfig(treeConfig, config);
|
5
|
-
export var Tree = /*#__PURE__*/component(mergedConfig);
|
@@ -1,117 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { ComponentProps } from 'react';
|
3
|
-
import type { StoryObj, Meta } from '@storybook/react';
|
4
|
-
|
5
|
-
import { WithTheme } from '../../../_helpers';
|
6
|
-
|
7
|
-
import { Tree } from './Tree';
|
8
|
-
|
9
|
-
const treeData: any[] = [
|
10
|
-
{
|
11
|
-
title: 'Parent 1',
|
12
|
-
key: '0-0',
|
13
|
-
children: [
|
14
|
-
{
|
15
|
-
title: 'Parent 1-0',
|
16
|
-
key: '0-0-0',
|
17
|
-
children: [
|
18
|
-
{
|
19
|
-
title: 'Leaf',
|
20
|
-
key: '0-0-0-0',
|
21
|
-
disabled: true,
|
22
|
-
},
|
23
|
-
{
|
24
|
-
title: 'Leaf',
|
25
|
-
key: '0-0-0-1',
|
26
|
-
children: [
|
27
|
-
{
|
28
|
-
title: 'Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf',
|
29
|
-
key: '0-0-0-0-0',
|
30
|
-
},
|
31
|
-
{
|
32
|
-
title: 'Leaf',
|
33
|
-
key: '0-0-0-0-1',
|
34
|
-
},
|
35
|
-
],
|
36
|
-
},
|
37
|
-
],
|
38
|
-
},
|
39
|
-
{
|
40
|
-
title: 'Parent 1-1',
|
41
|
-
key: '0-0-1',
|
42
|
-
children: [{ title: 'Leaf', key: '0-0-1-0' }],
|
43
|
-
},
|
44
|
-
],
|
45
|
-
},
|
46
|
-
{
|
47
|
-
title: 'Parent 2',
|
48
|
-
key: '0-1',
|
49
|
-
children: [
|
50
|
-
{
|
51
|
-
title: 'Parent 2-0',
|
52
|
-
key: '0-1-0',
|
53
|
-
},
|
54
|
-
],
|
55
|
-
},
|
56
|
-
];
|
57
|
-
|
58
|
-
type StoryTreeProps = ComponentProps<typeof Tree>;
|
59
|
-
|
60
|
-
const size = ['xs', 's', 'm', 'l'];
|
61
|
-
const arrowPlacements = ['left', 'right'];
|
62
|
-
|
63
|
-
const meta: Meta<StoryTreeProps> = {
|
64
|
-
title: 'b2c/Data Entry/Tree',
|
65
|
-
decorators: [WithTheme],
|
66
|
-
component: Tree,
|
67
|
-
argTypes: {
|
68
|
-
size: {
|
69
|
-
control: 'select',
|
70
|
-
options: size,
|
71
|
-
},
|
72
|
-
checkable: {
|
73
|
-
control: 'boolean',
|
74
|
-
},
|
75
|
-
multiple: {
|
76
|
-
control: 'boolean',
|
77
|
-
},
|
78
|
-
arrowPlacement: {
|
79
|
-
options: arrowPlacements,
|
80
|
-
control: {
|
81
|
-
type: 'inline-radio',
|
82
|
-
},
|
83
|
-
},
|
84
|
-
defaultExpandAll: {
|
85
|
-
control: 'boolean',
|
86
|
-
},
|
87
|
-
fullWidthItemSelection: {
|
88
|
-
control: 'boolean',
|
89
|
-
},
|
90
|
-
height: {
|
91
|
-
control: 'number',
|
92
|
-
},
|
93
|
-
hasIcon: {
|
94
|
-
control: 'boolean',
|
95
|
-
},
|
96
|
-
},
|
97
|
-
args: {
|
98
|
-
size: 'm',
|
99
|
-
fullWidthItemSelection: false,
|
100
|
-
checkable: false,
|
101
|
-
multiple: false,
|
102
|
-
arrowPlacement: 'left',
|
103
|
-
defaultExpandAll: true,
|
104
|
-
height: undefined,
|
105
|
-
hasIcon: true,
|
106
|
-
},
|
107
|
-
};
|
108
|
-
|
109
|
-
export default meta;
|
110
|
-
|
111
|
-
const StoryDefault = (args: StoryTreeProps) => {
|
112
|
-
return <Tree {...args} items={treeData} />;
|
113
|
-
};
|
114
|
-
|
115
|
-
export const Default: StoryObj<StoryTreeProps> = {
|
116
|
-
render: (args) => <StoryDefault {...args} />,
|
117
|
-
};
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { treeTokens as tokens } from '../../../../components/Tree/Tree.tokens';
|
3
|
-
export var config = {
|
4
|
-
defaults: {
|
5
|
-
view: 'default',
|
6
|
-
size: 'm'
|
7
|
-
},
|
8
|
-
variations: {
|
9
|
-
view: {
|
10
|
-
"default": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-secondary);", ":var(--text-accent);", ":0.4;"], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive, tokens.color, tokens.colorSelected, tokens.itemBackgroundColor, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.checkboxBorderColor, tokens.checkboxBackgroundColor, tokens.itemDisabledOpacity)
|
11
|
-
},
|
12
|
-
size: {
|
13
|
-
l: /*#__PURE__*/css(["", ":3.5rem;", ":1rem;", ":0.375rem;", ":2rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":0 0.5rem 0 0;", ":1.5rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
|
14
|
-
m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem;", ":0.375rem;", ":2rem;", ":0.625rem;", ":0 0.5rem 0 0;", ":0 0.5rem 0 0;", ":1.5rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
|
15
|
-
s: /*#__PURE__*/css(["", ":2.5rem;", ":0.75rem;", ":0.25rem;", ":1.875rem;", ":0.5rem;", ":0 0.375rem 0 0;", ":0 0.375rem 0 0;", ":1.5rem;", ":0 0.25rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
|
16
|
-
xs: /*#__PURE__*/css(["", ":2rem;", ":0.5rem;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0 0.25rem 0 0;", ":0 0.25rem 0 0;", ":1rem;", ":0 0.25rem 0 0;", ":1rem;", ":0.875rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight)
|
17
|
-
}
|
18
|
-
}
|
19
|
-
};
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { treeConfig } from '../../../../components/Tree';
|
2
|
-
import { component, mergeConfig } from '../../../../engines';
|
3
|
-
import { config } from './Tree.config';
|
4
|
-
var mergedConfig = /*#__PURE__*/mergeConfig(treeConfig, config);
|
5
|
-
export var Tree = /*#__PURE__*/component(mergedConfig);
|