@skbkontur/react-ui 5.3.1 → 5.3.2
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/CHANGELOG.md +8 -0
- package/package.json +1 -6
- package/cjs/components/Autocomplete/Autocomplete.md +0 -113
- package/cjs/components/Button/Button.md +0 -261
- package/cjs/components/Calendar/Calendar.md +0 -276
- package/cjs/components/Calendar/CalendarDay.md +0 -70
- package/cjs/components/Center/Center.md +0 -26
- package/cjs/components/Checkbox/Checkbox.md +0 -171
- package/cjs/components/ComboBox/ComboBox.md +0 -574
- package/cjs/components/CurrencyInput/CurrencyInput.md +0 -39
- package/cjs/components/CurrencyLabel/CurrencyLabel.md +0 -29
- package/cjs/components/DateInput/DateInput.md +0 -111
- package/cjs/components/DatePicker/DatePicker.md +0 -368
- package/cjs/components/Dropdown/Dropdown.md +0 -45
- package/cjs/components/DropdownMenu/DropdownMenu.md +0 -290
- package/cjs/components/FileUploader/FileUploader.md +0 -131
- package/cjs/components/FxInput/FxInput.md +0 -31
- package/cjs/components/Gapped/Gapped.md +0 -44
- package/cjs/components/GlobalLoader/GlobalLoader.md +0 -97
- package/cjs/components/Group/Group.md +0 -19
- package/cjs/components/Hint/Hint.md +0 -86
- package/cjs/components/Input/Input.md +0 -86
- package/cjs/components/Kebab/Kebab.md +0 -306
- package/cjs/components/Link/Link.md +0 -182
- package/cjs/components/Loader/Loader.md +0 -33
- package/cjs/components/MaskedInput/MaskedInput.md +0 -114
- package/cjs/components/MenuFooter/MenuFooter.md +0 -27
- package/cjs/components/MenuHeader/MenuHeader.md +0 -35
- package/cjs/components/MenuItem/MenuItem.md +0 -139
- package/cjs/components/MenuSeparator/MenuSeparator.md +0 -14
- package/cjs/components/MiniModal/MiniModal.md +0 -231
- package/cjs/components/Modal/Modal.md +0 -56
- package/cjs/components/Paging/Paging.md +0 -57
- package/cjs/components/PasswordInput/PasswordInput.md +0 -29
- package/cjs/components/Radio/Radio.md +0 -57
- package/cjs/components/RadioGroup/RadioGroup.md +0 -44
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.md +0 -75
- package/cjs/components/ScrollContainer/ScrollContainer.md +0 -224
- package/cjs/components/Select/Select.md +0 -113
- package/cjs/components/SidePage/SidePage.md +0 -65
- package/cjs/components/SingleToast/SingleToast.md +0 -36
- package/cjs/components/Spinner/Spinner.md +0 -36
- package/cjs/components/Sticky/Sticky.md +0 -28
- package/cjs/components/Switcher/Switcher.md +0 -111
- package/cjs/components/Tabs/Tab.md +0 -73
- package/cjs/components/Tabs/Tabs.md +0 -54
- package/cjs/components/Textarea/Textarea.md +0 -58
- package/cjs/components/Toast/Toast.md +0 -69
- package/cjs/components/Toggle/Toggle.md +0 -110
- package/cjs/components/Token/Token.md +0 -48
- package/cjs/components/TokenInput/TokenInput.md +0 -277
- package/cjs/components/Tooltip/Tooltip.md +0 -322
- package/cjs/components/TooltipMenu/TooltipMenu.md +0 -241
- package/cjs/internal/DataTids/DATATIDS.md +0 -12
- package/cjs/internal/DataTids/DataTids.d.ts +0 -12
- package/cjs/internal/DataTids/DataTids.js +0 -50
- package/cjs/internal/DataTids/DataTids.js.map +0 -1
- package/cjs/internal/DataTids/DataTids.styles.d.ts +0 -7
- package/cjs/internal/DataTids/DataTids.styles.js +0 -42
- package/cjs/internal/DataTids/DataTids.styles.js.map +0 -1
- package/cjs/internal/DataTids/componentsDataTids.d.ts +0 -5
- package/cjs/internal/DataTids/componentsDataTids.js +0 -15
- package/cjs/internal/DataTids/componentsDataTids.js.map +0 -1
- package/cjs/internal/ThemePlayground/Playground.md +0 -7
- package/cjs/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md +0 -64
- package/cjs/lib/locale/LOCALECONTEXT.md +0 -222
- package/cjs/lib/theming/ThemeContext.md +0 -265
- package/components/Autocomplete/Autocomplete.md +0 -113
- package/components/Button/Button.md +0 -261
- package/components/Calendar/Calendar.md +0 -276
- package/components/Calendar/CalendarDay.md +0 -70
- package/components/Center/Center.md +0 -26
- package/components/Checkbox/Checkbox.md +0 -171
- package/components/ComboBox/ComboBox.md +0 -574
- package/components/CurrencyInput/CurrencyInput.md +0 -39
- package/components/CurrencyLabel/CurrencyLabel.md +0 -29
- package/components/DateInput/DateInput.md +0 -111
- package/components/DatePicker/DatePicker.md +0 -368
- package/components/Dropdown/Dropdown.md +0 -45
- package/components/DropdownMenu/DropdownMenu.md +0 -290
- package/components/FileUploader/FileUploader.md +0 -131
- package/components/FxInput/FxInput.md +0 -31
- package/components/Gapped/Gapped.md +0 -44
- package/components/GlobalLoader/GlobalLoader.md +0 -97
- package/components/Group/Group.md +0 -19
- package/components/Hint/Hint.md +0 -86
- package/components/Input/Input.md +0 -86
- package/components/Kebab/Kebab.md +0 -306
- package/components/Link/Link.md +0 -182
- package/components/Loader/Loader.md +0 -33
- package/components/MaskedInput/MaskedInput.md +0 -114
- package/components/MenuFooter/MenuFooter.md +0 -27
- package/components/MenuHeader/MenuHeader.md +0 -35
- package/components/MenuItem/MenuItem.md +0 -139
- package/components/MenuSeparator/MenuSeparator.md +0 -14
- package/components/MiniModal/MiniModal.md +0 -231
- package/components/Modal/Modal.md +0 -56
- package/components/Paging/Paging.md +0 -57
- package/components/PasswordInput/PasswordInput.md +0 -29
- package/components/Radio/Radio.md +0 -57
- package/components/RadioGroup/RadioGroup.md +0 -44
- package/components/ResponsiveLayout/ResponsiveLayout.md +0 -75
- package/components/ScrollContainer/ScrollContainer.md +0 -224
- package/components/Select/Select.md +0 -113
- package/components/SidePage/SidePage.md +0 -65
- package/components/SingleToast/SingleToast.md +0 -36
- package/components/Spinner/Spinner.md +0 -36
- package/components/Sticky/Sticky.md +0 -28
- package/components/Switcher/Switcher.md +0 -111
- package/components/Tabs/Tab.md +0 -73
- package/components/Tabs/Tabs.md +0 -54
- package/components/Textarea/Textarea.md +0 -58
- package/components/Toast/Toast.md +0 -69
- package/components/Toggle/Toggle.md +0 -110
- package/components/Token/Token.md +0 -48
- package/components/TokenInput/TokenInput.md +0 -277
- package/components/Tooltip/Tooltip.md +0 -322
- package/components/TooltipMenu/TooltipMenu.md +0 -241
- package/internal/DataTids/DATATIDS.md +0 -12
- package/internal/DataTids/DataTids/DataTids.js +0 -69
- package/internal/DataTids/DataTids/DataTids.js.map +0 -1
- package/internal/DataTids/DataTids/package.json +0 -6
- package/internal/DataTids/DataTids.d.ts +0 -12
- package/internal/DataTids/DataTids.styles/DataTids.styles.js +0 -20
- package/internal/DataTids/DataTids.styles/DataTids.styles.js.map +0 -1
- package/internal/DataTids/DataTids.styles/package.json +0 -6
- package/internal/DataTids/DataTids.styles.d.ts +0 -7
- package/internal/DataTids/componentsDataTids/componentsDataTids.js +0 -12
- package/internal/DataTids/componentsDataTids/componentsDataTids.js.map +0 -1
- package/internal/DataTids/componentsDataTids/package.json +0 -6
- package/internal/DataTids/componentsDataTids.d.ts +0 -5
- package/internal/ThemePlayground/Playground.md +0 -7
- package/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md +0 -64
- package/lib/locale/LOCALECONTEXT.md +0 -222
- package/lib/theming/ThemeContext.md +0 -265
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
### Базовый пример
|
|
2
|
-
|
|
3
|
-
```jsx harmony
|
|
4
|
-
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
5
|
-
|
|
6
|
-
<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
|
|
7
|
-
<MenuHeader>Заголовок меню</MenuHeader>
|
|
8
|
-
<MenuSeparator />
|
|
9
|
-
<MenuItem>Раз</MenuItem>
|
|
10
|
-
<MenuItem>Два</MenuItem>
|
|
11
|
-
<MenuItem>Три</MenuItem>
|
|
12
|
-
<MenuSeparator />
|
|
13
|
-
<MenuItem>Раз</MenuItem>
|
|
14
|
-
<MenuItem>Два</MenuItem>
|
|
15
|
-
<MenuItem>Три</MenuItem>
|
|
16
|
-
</TooltipMenu>;
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
### Управление состоянием тултип-меню
|
|
20
|
-
В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием тултип-меню.
|
|
21
|
-
|
|
22
|
-
```jsx harmony
|
|
23
|
-
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
24
|
-
|
|
25
|
-
<TooltipMenu caption={({ opened, openMenu, closeMenu, toggleMenu }) => {
|
|
26
|
-
return (
|
|
27
|
-
<>
|
|
28
|
-
<p>Сейчас тултип-меню { opened ? 'окрыто' : 'закрыто' }</p>
|
|
29
|
-
<Button onClick={toggleMenu}>Переключить меню</Button>
|
|
30
|
-
<Button onClick={openMenu}>Открыть меню</Button>
|
|
31
|
-
<Button onClick={closeMenu}>Закрыть меню</Button>
|
|
32
|
-
</>
|
|
33
|
-
)
|
|
34
|
-
}}>
|
|
35
|
-
<MenuHeader>Заголовок меню</MenuHeader>
|
|
36
|
-
<MenuSeparator />
|
|
37
|
-
<MenuItem>Раз</MenuItem>
|
|
38
|
-
<MenuItem>Два</MenuItem>
|
|
39
|
-
<MenuItem>Три</MenuItem>
|
|
40
|
-
<MenuSeparator />
|
|
41
|
-
<MenuItem>Раз</MenuItem>
|
|
42
|
-
<MenuItem>Два</MenuItem>
|
|
43
|
-
<MenuItem>Три</MenuItem>
|
|
44
|
-
</TooltipMenu>;
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
### Ширина
|
|
48
|
-
|
|
49
|
-
```jsx harmony
|
|
50
|
-
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
51
|
-
|
|
52
|
-
<TooltipMenu
|
|
53
|
-
caption={<Button use="primary">Открыть меню с заданной шириной</Button>}
|
|
54
|
-
menuWidth={350}
|
|
55
|
-
>
|
|
56
|
-
<MenuHeader>Заголовок меню</MenuHeader>
|
|
57
|
-
<MenuSeparator />
|
|
58
|
-
<MenuItem>Раз</MenuItem>
|
|
59
|
-
<MenuItem>Два</MenuItem>
|
|
60
|
-
<MenuItem>Три</MenuItem>
|
|
61
|
-
<MenuSeparator />
|
|
62
|
-
<MenuItem>Раз</MenuItem>
|
|
63
|
-
<MenuItem>Два</MenuItem>
|
|
64
|
-
<MenuItem>Три</MenuItem>
|
|
65
|
-
</TooltipMenu>;
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
### Максимальная высота
|
|
69
|
-
|
|
70
|
-
```jsx harmony
|
|
71
|
-
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
72
|
-
|
|
73
|
-
<TooltipMenu
|
|
74
|
-
caption={<Button use="primary">Открыть меню с заданной высотой</Button>}
|
|
75
|
-
menuMaxHeight={150}
|
|
76
|
-
>
|
|
77
|
-
<MenuHeader>Заголовок меню</MenuHeader>
|
|
78
|
-
<MenuSeparator />
|
|
79
|
-
<MenuItem>Раз</MenuItem>
|
|
80
|
-
<MenuItem>Два</MenuItem>
|
|
81
|
-
<MenuItem>Три</MenuItem>
|
|
82
|
-
<MenuSeparator />
|
|
83
|
-
<MenuItem>Раз</MenuItem>
|
|
84
|
-
<MenuItem>Два</MenuItem>
|
|
85
|
-
<MenuItem>Три</MenuItem>
|
|
86
|
-
</TooltipMenu>;
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
### Отключенная анимация
|
|
90
|
-
|
|
91
|
-
```jsx harmony
|
|
92
|
-
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
93
|
-
|
|
94
|
-
<TooltipMenu
|
|
95
|
-
disableAnimations
|
|
96
|
-
caption={<Button use="primary">Открыть меню без анимации</Button>}
|
|
97
|
-
>
|
|
98
|
-
<MenuHeader>Заголовок меню</MenuHeader>
|
|
99
|
-
<MenuSeparator />
|
|
100
|
-
<MenuItem>Раз</MenuItem>
|
|
101
|
-
<MenuItem>Два</MenuItem>
|
|
102
|
-
<MenuItem>Три</MenuItem>
|
|
103
|
-
</TooltipMenu>;
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### Подпись
|
|
107
|
-
В `caption` можно передать любой элемент.
|
|
108
|
-
|
|
109
|
-
```jsx harmony
|
|
110
|
-
import { MenuItem } from '@skbkontur/react-ui';
|
|
111
|
-
import { UiMenuBars3HIcon16Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon16Regular';
|
|
112
|
-
|
|
113
|
-
<TooltipMenu
|
|
114
|
-
caption={
|
|
115
|
-
<span style={{ display: 'inline-block' }} tabIndex="0">
|
|
116
|
-
<UiMenuBars3HIcon16Regular size={32} />
|
|
117
|
-
</span>
|
|
118
|
-
}
|
|
119
|
-
menuWidth="300px"
|
|
120
|
-
>
|
|
121
|
-
<MenuItem>Раз</MenuItem>
|
|
122
|
-
<MenuItem>Два</MenuItem>
|
|
123
|
-
<MenuItem>Три</MenuItem>
|
|
124
|
-
</TooltipMenu>;
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### Тултип-меню всегда всплывающее справа от `caption`
|
|
128
|
-
|
|
129
|
-
```jsx harmony
|
|
130
|
-
import { MenuItem } from '@skbkontur/react-ui';
|
|
131
|
-
import { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
|
|
132
|
-
|
|
133
|
-
<TooltipMenu
|
|
134
|
-
caption={
|
|
135
|
-
<span style={{ display: 'inline-block' }} tabIndex="0">
|
|
136
|
-
<LightbulbIcon16Regular size={32} />
|
|
137
|
-
</span>
|
|
138
|
-
}
|
|
139
|
-
menuWidth="300px"
|
|
140
|
-
positions={['right top', 'right middle', 'right bottom']}
|
|
141
|
-
>
|
|
142
|
-
<MenuItem>Раз</MenuItem>
|
|
143
|
-
<MenuItem>Два</MenuItem>
|
|
144
|
-
<MenuItem>Три</MenuItem>
|
|
145
|
-
</TooltipMenu>;
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
### Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`
|
|
149
|
-
|
|
150
|
-
```jsx harmony
|
|
151
|
-
import { MenuItem } from '@skbkontur/react-ui';
|
|
152
|
-
import { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
|
|
153
|
-
|
|
154
|
-
<TooltipMenu
|
|
155
|
-
caption={
|
|
156
|
-
<span style={{ display: 'inline-block' }} tabIndex="0">
|
|
157
|
-
<LightbulbIcon16Regular size={32} />
|
|
158
|
-
</span>
|
|
159
|
-
}
|
|
160
|
-
menuWidth="300px"
|
|
161
|
-
positions={['top right']}
|
|
162
|
-
>
|
|
163
|
-
<MenuItem>Раз</MenuItem>
|
|
164
|
-
<MenuItem>Два</MenuItem>
|
|
165
|
-
<MenuItem>Три</MenuItem>
|
|
166
|
-
</TooltipMenu>;
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
### Тултип-меню c шапкой и подвалом
|
|
170
|
-
|
|
171
|
-
```jsx harmony
|
|
172
|
-
import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
|
|
173
|
-
|
|
174
|
-
<TooltipMenu
|
|
175
|
-
header={<p>Это шапка в виде обычного текста</p>}
|
|
176
|
-
footer={<Button>А это подвал в виде кнопки</Button>}
|
|
177
|
-
caption={<Button use="primary">Открыть меню</Button>}
|
|
178
|
-
>
|
|
179
|
-
<MenuItem>Раз</MenuItem>
|
|
180
|
-
<MenuItem>Два</MenuItem>
|
|
181
|
-
<MenuItem>Три</MenuItem>
|
|
182
|
-
</TooltipMenu>;
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
### Иконки и автовыравнивание
|
|
186
|
-
|
|
187
|
-
```jsx harmony
|
|
188
|
-
import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
|
|
189
|
-
import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
|
|
190
|
-
|
|
191
|
-
<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
|
|
192
|
-
<MenuHeader>MenuHeader</MenuHeader>
|
|
193
|
-
<MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
|
|
194
|
-
<MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
|
|
195
|
-
<MenuItem>MenuItem3</MenuItem>
|
|
196
|
-
</TooltipMenu>;
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
### Иконки и автовыравнивание
|
|
200
|
-
|
|
201
|
-
```jsx harmony
|
|
202
|
-
import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
|
|
203
|
-
import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
|
|
204
|
-
|
|
205
|
-
<TooltipMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
|
|
206
|
-
<MenuHeader>MenuHeader</MenuHeader>
|
|
207
|
-
<MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
|
|
208
|
-
<MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
|
|
209
|
-
<MenuItem>MenuItem3</MenuItem>
|
|
210
|
-
</TooltipMenu>
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
### Условный рендер элементов тултип-меню
|
|
214
|
-
(с сохранением поведения [MenuItem](#/Components/MenuItem)).
|
|
215
|
-
|
|
216
|
-
```jsx harmony
|
|
217
|
-
import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
|
|
218
|
-
|
|
219
|
-
const [showItems, setShowItems] = React.useState(false);
|
|
220
|
-
|
|
221
|
-
const hiddenItems = [
|
|
222
|
-
<MenuSeparator />,
|
|
223
|
-
<MenuItem>А я скрываюсь</MenuItem>,
|
|
224
|
-
<MenuItem>И я</MenuItem>,
|
|
225
|
-
<MenuItem>Я с вами</MenuItem>,
|
|
226
|
-
];
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
<Gapped>
|
|
230
|
-
<Button onClick={() => setShowItems(!showItems)}>
|
|
231
|
-
{showItems ? 'Спрятать' : 'Показать'} элементы
|
|
232
|
-
</Button>
|
|
233
|
-
|
|
234
|
-
<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
|
|
235
|
-
<MenuItem>Меня видно всегда</MenuItem>
|
|
236
|
-
<MenuItem>Меня тоже</MenuItem>
|
|
237
|
-
<MenuItem>Ага, и меня!</MenuItem>
|
|
238
|
-
{showItems && hiddenItems}
|
|
239
|
-
</TooltipMenu>
|
|
240
|
-
</Gapped>
|
|
241
|
-
```
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
Аттрибуты data-tid экспортируются для компонентов в виде объекта.
|
|
2
|
-
При необходимости добавления аттрибута data-tid необходимо создать пулл-реквест.
|
|
3
|
-
|
|
4
|
-
У всех компонентов также есть проп data-tid, которым можно переопределять корневые дата-тиды.
|
|
5
|
-
|
|
6
|
-
Список экспортируемых data-tid:
|
|
7
|
-
|
|
8
|
-
```jsx harmony
|
|
9
|
-
import {DataTids} from './DataTids';
|
|
10
|
-
|
|
11
|
-
<DataTids/>
|
|
12
|
-
```
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface DataTidsState {
|
|
3
|
-
selectedValue: string;
|
|
4
|
-
}
|
|
5
|
-
export declare class DataTids extends React.Component {
|
|
6
|
-
state: DataTidsState;
|
|
7
|
-
private components;
|
|
8
|
-
private items;
|
|
9
|
-
private setValue;
|
|
10
|
-
render(): React.JSX.Element;
|
|
11
|
-
}
|
|
12
|
-
export {};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.DataTids = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
2
|
-
|
|
3
|
-
var _Select = require("../../components/Select");
|
|
4
|
-
|
|
5
|
-
var _DataTids2 = require("./DataTids.styles");
|
|
6
|
-
var _componentsDataTids = require("./componentsDataTids");var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
DataTids = exports.DataTids = /*#__PURE__*/function (_React$Component) {function DataTids() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
|
|
13
|
-
state = {
|
|
14
|
-
selectedValue: 'все'
|
|
15
|
-
};_this.
|
|
16
|
-
|
|
17
|
-
components = Object.keys(_componentsDataTids.componentsDataTids);_this.
|
|
18
|
-
|
|
19
|
-
items = ['все'].concat(_this.components);_this.
|
|
20
|
-
|
|
21
|
-
setValue = function (value) {
|
|
22
|
-
_this.setState({ selectedValue: value });
|
|
23
|
-
};return _this;}(0, _inheritsLoose2.default)(DataTids, _React$Component);var _proto = DataTids.prototype;_proto.
|
|
24
|
-
|
|
25
|
-
render = function render() {var _this2 = this;
|
|
26
|
-
return /*#__PURE__*/(
|
|
27
|
-
_react.default.createElement("div", null, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442:", /*#__PURE__*/
|
|
28
|
-
|
|
29
|
-
_react.default.createElement(_Select.Select, { items: this.items, value: this.state.selectedValue, onValueChange: this.setValue, search: true }),
|
|
30
|
-
Object.entries(_componentsDataTids.componentsDataTids).map(function (_ref, index) {var componentName = _ref[0],dataTids = _ref[1];
|
|
31
|
-
if (componentName === _this2.state.selectedValue || _this2.state.selectedValue === 'все') {
|
|
32
|
-
return /*#__PURE__*/(
|
|
33
|
-
_react.default.createElement("div", { key: index, className: _DataTids2.styles.wrapper() }, /*#__PURE__*/
|
|
34
|
-
_react.default.createElement("div", { className: _DataTids2.styles.componentName() }, componentName),
|
|
35
|
-
Object.values(dataTids).map(function (value, i) {
|
|
36
|
-
return /*#__PURE__*/(
|
|
37
|
-
_react.default.createElement("div", { key: i, className: _DataTids2.styles.row() }, /*#__PURE__*/
|
|
38
|
-
_react.default.createElement("div", { className: _DataTids2.styles.leftCell() }, componentName + "DataTids." + value[0]), /*#__PURE__*/
|
|
39
|
-
_react.default.createElement("div", { className: _DataTids2.styles.rightCell() }, "'" + value[1] + "'")
|
|
40
|
-
));
|
|
41
|
-
|
|
42
|
-
})
|
|
43
|
-
));
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
return null;
|
|
47
|
-
})
|
|
48
|
-
));
|
|
49
|
-
|
|
50
|
-
};return DataTids;}(_react.default.Component);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_Select","_DataTids2","_componentsDataTids","DataTids","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","selectedValue","components","Object","keys","componentsDataTids","items","setValue","value","setState","_inheritsLoose2","default","_proto","prototype","render","_this2","createElement","Select","onValueChange","search","entries","map","_ref","index","componentName","dataTids","key","className","styles","wrapper","values","i","row","leftCell","rightCell","React","Component"],"sources":["DataTids.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Select } from '../../components/Select';\n\nimport { styles } from './DataTids.styles';\nimport { componentsDataTids } from './componentsDataTids';\n\ninterface DataTidsState {\n selectedValue: string;\n}\n\nexport class DataTids extends React.Component {\n public state: DataTidsState = {\n selectedValue: 'все',\n };\n\n private components = Object.keys(componentsDataTids);\n\n private items = ['все', ...this.components];\n\n private setValue = (value: string) => {\n this.setState({ selectedValue: value });\n };\n\n public render() {\n return (\n <div>\n Выбрать компонент:\n <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} search />\n {Object.entries(componentsDataTids).map(([componentName, dataTids], index) => {\n if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {\n return (\n <div key={index} className={styles.wrapper()}>\n <div className={styles.componentName()}>{componentName}</div>\n {Object.values(dataTids).map((value, i) => {\n return (\n <div key={i} className={styles.row()}>\n <div className={styles.leftCell()}>{`${componentName}DataTids.${value[0]}`}</div>\n <div className={styles.rightCell()}>{`'${value[1]}'`}</div>\n </div>\n );\n })}\n </div>\n );\n }\n return null;\n })}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
2
|
-
|
|
3
|
-
var styles = exports.styles = (0, _Emotion.memoizeStyle)({
|
|
4
|
-
wrapper: function wrapper() {
|
|
5
|
-
return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n &:not(:first-child) {\n margin-top: 20px;\n }\n "])));
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
},
|
|
11
|
-
componentName: function componentName() {
|
|
12
|
-
return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n font-weight: 700;\n font-size: 1.25em;\n margin: 0 5px 5px;\n "])));
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
row: function row() {
|
|
19
|
-
return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n display: flex;\n width: 100%;\n font-size: 16px;\n "])));
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
|
|
26
|
-
leftCell: function leftCell() {
|
|
27
|
-
return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding: 5px;\n border-right: 1px solid #dadada;\n border-bottom: 1px solid #dadada;\n width: 30%;\n overflow-wrap: anywhere;\n "])));
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
rightCell: function rightCell() {
|
|
36
|
-
return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding: 5px;\n border-bottom: 1px solid #dadada;\n width: 70%;\n "])));
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","styles","exports","memoizeStyle","wrapper","css","_taggedTemplateLiteralLoose2","default","componentName","row","leftCell","rightCell"],"sources":["DataTids.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n wrapper() {\n return css`\n &:not(:first-child) {\n margin-top: 20px;\n }\n `;\n },\n componentName() {\n return css`\n font-weight: 700;\n font-size: 1.25em;\n margin: 0 5px 5px;\n `;\n },\n row() {\n return css`\n display: flex;\n width: 100%;\n font-size: 16px;\n `;\n },\n\n leftCell() {\n return css`\n padding: 5px;\n border-right: 1px solid #dadada;\n border-bottom: 1px solid #dadada;\n width: 30%;\n overflow-wrap: anywhere;\n `;\n },\n rightCell() {\n return css`\n padding: 5px;\n border-bottom: 1px solid #dadada;\n width: 70%;\n `;\n },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,OAAO,WAAAA,QAAA,EAAG;IACR,WAAOC,YAAG,EAAAT,eAAA,KAAAA,eAAA,OAAAU,4BAAA,CAAAC,OAAA;;;;;EAKZ,CAAC;EACDC,aAAa,WAAAA,cAAA,EAAG;IACd,WAAOH,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;;;;;EAKZ,CAAC;EACDE,GAAG,WAAAA,IAAA,EAAG;IACJ,WAAOJ,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;;;EAKZ,CAAC;;EAEDG,QAAQ,WAAAA,SAAA,EAAG;IACT,WAAOL,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;;;;;EAOZ,CAAC;EACDI,SAAS,WAAAA,UAAA,EAAG;IACV,WAAON,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;;;;;EAKZ;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.componentsDataTids = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var Components = _interopRequireWildcard(require("../../index"));
|
|
2
|
-
|
|
3
|
-
var tids = Object.keys(Components).filter(function (componentName) {
|
|
4
|
-
if (componentName.match(/datatids/i)) {
|
|
5
|
-
return componentName;
|
|
6
|
-
}
|
|
7
|
-
return null;
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
var componentsDataTids = exports.componentsDataTids = tids.reduce(function (accum, currTid) {var _extends2;
|
|
11
|
-
return (0, _extends3.default)({},
|
|
12
|
-
accum, (_extends2 = {}, _extends2[
|
|
13
|
-
currTid.replace('DataTids', '')] = Object.entries(Components[currTid]), _extends2));
|
|
14
|
-
|
|
15
|
-
}, {});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Components","_interopRequireWildcard","require","tids","Object","keys","filter","componentName","match","componentsDataTids","exports","reduce","accum","currTid","_extends2","_extends3","default","replace","entries"],"sources":["componentsDataTids.ts"],"sourcesContent":["import * as Components from '../../index';\n\nconst tids = Object.keys(Components).filter((componentName) => {\n if (componentName.match(/datatids/i)) {\n return componentName;\n }\n return null;\n});\n\nexport const componentsDataTids: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {\n return {\n ...accum,\n [currTid.replace('DataTids', '')]: Object.entries(Components[currTid as keyof typeof Components]),\n };\n}, {});\n"],"mappings":"yVAAA,IAAAA,UAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAMC,IAAI,GAAGC,MAAM,CAACC,IAAI,CAACL,UAAU,CAAC,CAACM,MAAM,CAAC,UAACC,aAAa,EAAK;EAC7D,IAAIA,aAAa,CAACC,KAAK,CAAC,WAAW,CAAC,EAAE;IACpC,OAAOD,aAAa;EACtB;EACA,OAAO,IAAI;AACb,CAAC,CAAC;;AAEK,IAAME,kBAAgE,GAAAC,OAAA,CAAAD,kBAAA,GAAGN,IAAI,CAACQ,MAAM,CAAC,UAACC,KAAK,EAAEC,OAAO,EAAK,KAAAC,SAAA;EAC9G,WAAAC,SAAA,CAAAC,OAAA;EACKJ,KAAK,GAAAE,SAAA,OAAAA,SAAA;EACPD,OAAO,CAACI,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,IAAGb,MAAM,CAACc,OAAO,CAAClB,UAAU,CAACa,OAAO,CAA4B,CAAC,EAAAC,SAAA;;AAErG,CAAC,EAAE,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
Включение и отключение отдельных фич через `ReactUIFeatureFlagsContext`
|
|
2
|
-
|
|
3
|
-
Доступные флаги
|
|
4
|
-
|
|
5
|
-
```typescript static
|
|
6
|
-
export interface ReactUIFeatureFlags {
|
|
7
|
-
comboBoxAllowValueChangeInEditingState?: boolean;
|
|
8
|
-
}
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Механизм работы: новая функциональность применяется или не применяется в зависимости от того, был ли передан со значением true соответствующий флаг или нет.
|
|
12
|
-
|
|
13
|
-
Флаги задаются с помощью `ReactUIFeatureFlagsContext.Provider`.
|
|
14
|
-
|
|
15
|
-
```jsx static
|
|
16
|
-
import { ReactUIFeatureFlagsContext } from '@skbkontur/react-ui';
|
|
17
|
-
|
|
18
|
-
<ReactUIFeatureFlagsContext.Provider value={{ textareaUseSafari17Workaround: true }}>{/* ... */}</ReactUIFeatureFlagsContext.Provider>;
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Использование
|
|
22
|
-
|
|
23
|
-
### comboBoxAllowValueChangeInEditingState
|
|
24
|
-
|
|
25
|
-
Этот флаг позволяет менять значение value в Combobox в режиме редактирования. Теперь при изменении value в этом режиме, Combobox примет и корректно отрисует новое значение. А в случае, если при этом было открыто выпадающее меню, данные в нём тоже будут обновлены без принудительного закрытия.
|
|
26
|
-
|
|
27
|
-
В примере ниже, при нажатии на кнопку "Обновить" после редактирования текста без флага, в функции handleValueChange приходилось бы дополнительно вызывать метод Combobox'a reset.
|
|
28
|
-
|
|
29
|
-
```jsx harmony
|
|
30
|
-
import { Button, ComboBox, ReactUIFeatureFlagsContext } from '@skbkontur/react-ui';
|
|
31
|
-
|
|
32
|
-
const [value, setValue] = React.useState({ value: '', label: '' });
|
|
33
|
-
|
|
34
|
-
const handleValueChange = () => {
|
|
35
|
-
setValue({ value: `Update ${new Date().toLocaleString()}`, label: `Update ${new Date().toLocaleString()}` });
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
const getItems = () =>
|
|
39
|
-
Promise.resolve([
|
|
40
|
-
{ value: 'Первый', label: 'Первый' },
|
|
41
|
-
{ value: 'Второй', label: 'Второй' },
|
|
42
|
-
]);
|
|
43
|
-
|
|
44
|
-
<ReactUIFeatureFlagsContext.Provider value={{ comboBoxAllowValueChangeInEditingState: true }}>
|
|
45
|
-
<Button onClick={handleValueChange}>Обновить</Button>
|
|
46
|
-
<ComboBox
|
|
47
|
-
value={value}
|
|
48
|
-
searchOnFocus={false}
|
|
49
|
-
getItems={getItems}
|
|
50
|
-
onValueChange={(value) => setValue(value)}
|
|
51
|
-
onInputValueChange={(value) => {
|
|
52
|
-
setValue({ value, label: value });
|
|
53
|
-
}}
|
|
54
|
-
/>
|
|
55
|
-
</ReactUIFeatureFlagsContext.Provider>
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## Объект со всеми флагами
|
|
59
|
-
|
|
60
|
-
Чтобы получить объект со всеми флагами, необходимо применить вспомогательную функцию getFullValidationsFlagsContext к объекту заданных флагов:
|
|
61
|
-
|
|
62
|
-
```typescript static
|
|
63
|
-
const allFlags = getFullValidationsFlagsContext(useContext(ReactUIFeatureFlagsContext));
|
|
64
|
-
```
|