@skbkontur/react-ui 0.0.0-a5ba2462c5 → 0.0.0-a6f09fbded
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 +0 -30
- package/cjs/components/Autocomplete/Autocomplete.md +113 -0
- package/cjs/components/Button/Button.md +261 -0
- package/cjs/components/Calendar/Calendar.md +276 -0
- package/cjs/components/Calendar/CalendarDay.md +70 -0
- package/cjs/components/Center/Center.md +26 -0
- package/cjs/components/Checkbox/Checkbox.md +171 -0
- package/cjs/components/ComboBox/ComboBox.d.ts +11 -5
- package/cjs/components/ComboBox/ComboBox.js +10 -1
- package/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/cjs/components/ComboBox/ComboBox.md +574 -0
- package/cjs/components/CurrencyInput/CurrencyInput.md +39 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.js +2 -2
- package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.md +29 -0
- package/cjs/components/DateInput/DateInput.md +111 -0
- package/cjs/components/DatePicker/DatePicker.md +368 -0
- package/cjs/components/Dropdown/Dropdown.md +45 -0
- package/cjs/components/DropdownMenu/DropdownMenu.md +290 -0
- package/cjs/components/FileUploader/FileUploader.md +131 -0
- package/cjs/components/FxInput/FxInput.md +31 -0
- package/cjs/components/Gapped/Gapped.md +44 -0
- package/cjs/components/GlobalLoader/GlobalLoader.md +97 -0
- package/cjs/components/Group/Group.md +19 -0
- package/cjs/components/Hint/Hint.md +86 -0
- package/cjs/components/Input/Input.md +86 -0
- package/cjs/components/Input/InputLayout/InputLayout.d.ts +1 -0
- package/cjs/components/Input/InputLayout/InputLayout.js +4 -2
- package/cjs/components/Input/InputLayout/InputLayout.js.map +1 -1
- package/cjs/components/Kebab/Kebab.md +306 -0
- package/cjs/components/Link/Link.md +182 -0
- package/cjs/components/Loader/Loader.md +33 -0
- package/cjs/components/MaskedInput/MaskedInput.d.ts +0 -8
- package/cjs/components/MaskedInput/MaskedInput.js +2 -23
- package/cjs/components/MaskedInput/MaskedInput.js.map +1 -1
- package/cjs/components/MaskedInput/MaskedInput.md +114 -0
- package/cjs/components/MenuFooter/MenuFooter.md +27 -0
- package/cjs/components/MenuHeader/MenuHeader.md +35 -0
- package/cjs/components/MenuItem/MenuItem.md +139 -0
- package/cjs/components/MenuSeparator/MenuSeparator.md +14 -0
- package/cjs/components/MiniModal/MiniModal.md +231 -0
- package/cjs/components/Modal/Modal.md +56 -0
- package/cjs/components/Paging/Paging.md +57 -0
- package/cjs/components/PasswordInput/PasswordInput.md +29 -0
- package/cjs/components/Radio/Radio.md +57 -0
- package/cjs/components/RadioGroup/RadioGroup.md +44 -0
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.md +75 -0
- package/cjs/components/ScrollContainer/ScrollContainer.md +224 -0
- package/cjs/components/Select/Select.md +113 -0
- package/cjs/components/SidePage/SidePage.md +65 -0
- package/cjs/components/SingleToast/SingleToast.md +36 -0
- package/cjs/components/Spinner/Spinner.md +36 -0
- package/cjs/components/Sticky/Sticky.md +28 -0
- package/cjs/components/Switcher/Switcher.md +111 -0
- package/cjs/components/Tabs/Tab.md +73 -0
- package/cjs/components/Tabs/Tabs.md +54 -0
- package/cjs/components/Textarea/Textarea.d.ts +6 -1
- package/cjs/components/Textarea/Textarea.js +16 -3
- package/cjs/components/Textarea/Textarea.js.map +1 -1
- package/cjs/components/Textarea/Textarea.md +58 -0
- package/cjs/components/Textarea/Textarea.styles.js +2 -1
- package/cjs/components/Textarea/Textarea.styles.js.map +1 -1
- package/cjs/components/Toast/Toast.md +69 -0
- package/cjs/components/Toggle/Toggle.md +110 -0
- package/cjs/components/Token/Token.md +48 -0
- package/cjs/components/TokenInput/TokenInput.md +277 -0
- package/cjs/components/Tooltip/Tooltip.d.ts +1 -1
- package/cjs/components/Tooltip/Tooltip.js +6 -8
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.md +322 -0
- package/cjs/components/TooltipMenu/TooltipMenu.md +241 -0
- package/cjs/internal/ClearCrossIcon/ClearCrossIcon.d.ts +1 -0
- package/cjs/internal/ClearCrossIcon/ClearCrossIcon.js +16 -7
- package/cjs/internal/ClearCrossIcon/ClearCrossIcon.js.map +1 -1
- package/cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.d.ts +3 -0
- package/cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.js +27 -9
- package/cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.d.ts +7 -6
- package/cjs/internal/CustomComboBox/ComboBoxView.js +2 -7
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.d.ts +6 -5
- package/cjs/internal/CustomComboBox/CustomComboBox.js +1 -3
- package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/cjs/internal/CustomComboBox/getComboBoxTheme.d.ts +2 -1
- package/cjs/internal/CustomComboBox/getComboBoxTheme.js +10 -7
- package/cjs/internal/CustomComboBox/getComboBoxTheme.js.map +1 -1
- package/cjs/internal/DataTids/DATATIDS.md +12 -0
- package/cjs/internal/DataTids/DataTids.d.ts +12 -0
- package/cjs/internal/DataTids/DataTids.js +50 -0
- package/cjs/internal/DataTids/DataTids.js.map +1 -0
- package/cjs/internal/DataTids/DataTids.styles.d.ts +7 -0
- package/cjs/internal/DataTids/DataTids.styles.js +42 -0
- package/cjs/internal/DataTids/DataTids.styles.js.map +1 -0
- package/cjs/internal/DataTids/componentsDataTids.d.ts +5 -0
- package/cjs/internal/DataTids/componentsDataTids.js +15 -0
- package/cjs/internal/DataTids/componentsDataTids.js.map +1 -0
- package/cjs/internal/InputLikeText/InputLikeText.styles.d.ts +1 -0
- package/cjs/internal/InputLikeText/InputLikeText.styles.js +12 -4
- package/cjs/internal/InputLikeText/InputLikeText.styles.js.map +1 -1
- package/cjs/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.d.ts +37 -0
- package/cjs/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.js +235 -0
- package/cjs/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.js.map +1 -0
- package/cjs/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles.d.ts +3 -0
- package/cjs/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles.js +10 -0
- package/cjs/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles.js.map +1 -0
- package/cjs/internal/ThemePlayground/Playground.md +7 -0
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/themes/BasicTheme.d.ts +2 -0
- package/cjs/internal/themes/BasicTheme.js +11 -6
- package/cjs/internal/themes/BasicTheme.js.map +1 -1
- package/cjs/internal/themes/DarkTheme5_4.js +10 -3
- package/cjs/internal/themes/DarkTheme5_4.js.map +1 -1
- package/cjs/internal/themes/LightTheme5_4.js +10 -3
- package/cjs/internal/themes/LightTheme5_4.js.map +1 -1
- package/cjs/internal/themes/consts.d.ts +7 -0
- package/cjs/internal/themes/consts.js +7 -0
- package/cjs/internal/themes/consts.js.map +1 -0
- package/cjs/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md +64 -0
- package/cjs/lib/locale/LOCALECONTEXT.md +222 -0
- package/cjs/lib/theming/ThemeContext.md +265 -0
- package/components/Autocomplete/Autocomplete.md +113 -0
- package/components/Button/Button.md +261 -0
- package/components/Calendar/Calendar.md +276 -0
- package/components/Calendar/CalendarDay.md +70 -0
- package/components/Center/Center.md +26 -0
- package/components/Checkbox/Checkbox.md +171 -0
- package/components/ComboBox/ComboBox/ComboBox.js +2 -1
- package/components/ComboBox/ComboBox/ComboBox.js.map +1 -1
- package/components/ComboBox/ComboBox.d.ts +11 -5
- package/components/ComboBox/ComboBox.md +574 -0
- package/components/CurrencyInput/CurrencyInput.md +39 -0
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +1 -1
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel.md +29 -0
- package/components/DateInput/DateInput.md +111 -0
- package/components/DatePicker/DatePicker.md +368 -0
- package/components/Dropdown/Dropdown.md +45 -0
- package/components/DropdownMenu/DropdownMenu.md +290 -0
- package/components/FileUploader/FileUploader.md +131 -0
- package/components/FxInput/FxInput.md +31 -0
- package/components/Gapped/Gapped.md +44 -0
- package/components/GlobalLoader/GlobalLoader.md +97 -0
- package/components/Group/Group.md +19 -0
- package/components/Hint/Hint.md +86 -0
- package/components/Input/Input.md +86 -0
- package/components/Input/InputLayout/InputLayout/InputLayout.js +5 -2
- package/components/Input/InputLayout/InputLayout/InputLayout.js.map +1 -1
- package/components/Input/InputLayout/InputLayout.d.ts +1 -0
- package/components/Kebab/Kebab.md +306 -0
- package/components/Link/Link.md +182 -0
- package/components/Loader/Loader.md +33 -0
- package/components/MaskedInput/MaskedInput/MaskedInput.js +1 -11
- package/components/MaskedInput/MaskedInput/MaskedInput.js.map +1 -1
- package/components/MaskedInput/MaskedInput.d.ts +0 -8
- package/components/MaskedInput/MaskedInput.md +114 -0
- package/components/MenuFooter/MenuFooter.md +27 -0
- package/components/MenuHeader/MenuHeader.md +35 -0
- package/components/MenuItem/MenuItem.md +139 -0
- package/components/MenuSeparator/MenuSeparator.md +14 -0
- package/components/MiniModal/MiniModal.md +231 -0
- package/components/Modal/Modal.md +56 -0
- package/components/Paging/Paging.md +57 -0
- package/components/PasswordInput/PasswordInput.md +29 -0
- package/components/Radio/Radio.md +57 -0
- package/components/RadioGroup/RadioGroup.md +44 -0
- package/components/ResponsiveLayout/ResponsiveLayout.md +75 -0
- package/components/ScrollContainer/ScrollContainer.md +224 -0
- package/components/Select/Select.md +113 -0
- package/components/SidePage/SidePage.md +65 -0
- package/components/SingleToast/SingleToast.md +36 -0
- package/components/Spinner/Spinner.md +36 -0
- package/components/Sticky/Sticky.md +28 -0
- package/components/Switcher/Switcher.md +111 -0
- package/components/Tabs/Tab.md +73 -0
- package/components/Tabs/Tabs.md +54 -0
- package/components/Textarea/Textarea/Textarea.js +11 -2
- package/components/Textarea/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.d.ts +6 -1
- package/components/Textarea/Textarea.md +58 -0
- package/components/Textarea/Textarea.styles/Textarea.styles.js +1 -1
- package/components/Textarea/Textarea.styles/Textarea.styles.js.map +1 -1
- package/components/Toast/Toast.md +69 -0
- package/components/Toggle/Toggle.md +110 -0
- package/components/Token/Token.md +48 -0
- package/components/TokenInput/TokenInput.md +277 -0
- package/components/Tooltip/Tooltip/Tooltip.js +4 -7
- package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.d.ts +1 -1
- package/components/Tooltip/Tooltip.md +322 -0
- package/components/TooltipMenu/TooltipMenu.md +241 -0
- package/internal/ClearCrossIcon/ClearCrossIcon/ClearCrossIcon.js +21 -7
- package/internal/ClearCrossIcon/ClearCrossIcon/ClearCrossIcon.js.map +1 -1
- package/internal/ClearCrossIcon/ClearCrossIcon.d.ts +1 -0
- package/internal/ClearCrossIcon/ClearCrossIcon.styles/ClearCrossIcon.styles.js +14 -5
- package/internal/ClearCrossIcon/ClearCrossIcon.styles/ClearCrossIcon.styles.js.map +1 -1
- package/internal/ClearCrossIcon/ClearCrossIcon.styles.d.ts +3 -0
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +44 -51
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView.d.ts +7 -6
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js +3 -5
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox.d.ts +6 -5
- package/internal/CustomComboBox/getComboBoxTheme/getComboBoxTheme.js +5 -3
- package/internal/CustomComboBox/getComboBoxTheme/getComboBoxTheme.js.map +1 -1
- package/internal/CustomComboBox/getComboBoxTheme.d.ts +2 -1
- package/internal/DataTids/DATATIDS.md +12 -0
- package/internal/DataTids/DataTids/DataTids.js +69 -0
- package/internal/DataTids/DataTids/DataTids.js.map +1 -0
- package/internal/DataTids/DataTids/package.json +6 -0
- package/internal/DataTids/DataTids.d.ts +12 -0
- package/internal/DataTids/DataTids.styles/DataTids.styles.js +20 -0
- package/internal/DataTids/DataTids.styles/DataTids.styles.js.map +1 -0
- package/internal/DataTids/DataTids.styles/package.json +6 -0
- package/internal/DataTids/DataTids.styles.d.ts +7 -0
- package/internal/DataTids/componentsDataTids/componentsDataTids.js +12 -0
- package/internal/DataTids/componentsDataTids/componentsDataTids.js.map +1 -0
- package/internal/DataTids/componentsDataTids/package.json +6 -0
- package/internal/DataTids/componentsDataTids.d.ts +5 -0
- package/internal/InputLikeText/InputLikeText.styles/InputLikeText.styles.js +7 -4
- package/internal/InputLikeText/InputLikeText.styles/InputLikeText.styles.js.map +1 -1
- package/internal/InputLikeText/InputLikeText.styles.d.ts +1 -0
- package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout/InternalTextareaWithLayout.js +249 -0
- package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout/InternalTextareaWithLayout.js.map +1 -0
- package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout/package.json +6 -0
- package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.d.ts +37 -0
- package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles/InternalTextareaWithLayout.styles.js +8 -0
- package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles/InternalTextareaWithLayout.styles.js.map +1 -0
- package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles/package.json +6 -0
- package/internal/InternalTextareaWithLayout/InternalTextareaWithLayout.styles.d.ts +3 -0
- package/internal/ThemePlayground/Playground.md +7 -0
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/themes/BasicTheme/BasicTheme.js +4 -4
- package/internal/themes/BasicTheme/BasicTheme.js.map +1 -1
- package/internal/themes/BasicTheme.d.ts +2 -0
- package/internal/themes/DarkTheme5_4/DarkTheme5_4.js +4 -2
- package/internal/themes/DarkTheme5_4/DarkTheme5_4.js.map +1 -1
- package/internal/themes/LightTheme5_4/LightTheme5_4.js +4 -2
- package/internal/themes/LightTheme5_4/LightTheme5_4.js.map +1 -1
- package/internal/themes/consts/consts.js +7 -0
- package/internal/themes/consts/consts.js.map +1 -0
- package/internal/themes/consts/package.json +6 -0
- package/internal/themes/consts.d.ts +7 -0
- package/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md +64 -0
- package/lib/locale/LOCALECONTEXT.md +222 -0
- package/lib/theming/ThemeContext.md +265 -0
- package/package.json +6 -1
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
Компонент для отрисовки дня в Calendar. Полезен при использовании вместе с его пропом `renderDay`.
|
|
2
|
+
|
|
3
|
+
### Базовый пример
|
|
4
|
+
```jsx harmony
|
|
5
|
+
import { CalendarDay, Gapped } from '@skbkontur/react-ui';
|
|
6
|
+
|
|
7
|
+
const date = '20.05.2024';
|
|
8
|
+
const style = { width: 32, height: 32 };
|
|
9
|
+
|
|
10
|
+
<Gapped>
|
|
11
|
+
<CalendarDay style={style} date={date} />
|
|
12
|
+
<CalendarDay style={style} date={date} isToday={true} />
|
|
13
|
+
<CalendarDay style={style} date={date} isSelected={true} />
|
|
14
|
+
<CalendarDay style={style} date={date} isDisabled={true} />
|
|
15
|
+
<CalendarDay style={style} date={date} isWeekend={true} />
|
|
16
|
+
<CalendarDay style={style}><b>20</b></CalendarDay>
|
|
17
|
+
</Gapped>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Функции для сравнения строковых дат
|
|
21
|
+
|
|
22
|
+
```jsx harmony
|
|
23
|
+
const { isBetween, isEqual, isGreater, isGreaterOrEqual, isLess, isLessOrEqual } = require('@skbkontur/react-ui/lib/date/comparison');
|
|
24
|
+
|
|
25
|
+
const date_a = '10.03.2017';
|
|
26
|
+
const date_b = '11.03.2017';
|
|
27
|
+
|
|
28
|
+
const Table = ({ children }) => (
|
|
29
|
+
<table>
|
|
30
|
+
<thead>
|
|
31
|
+
<tr>
|
|
32
|
+
<td>Функция</td>
|
|
33
|
+
<td>Результат</td>
|
|
34
|
+
</tr>
|
|
35
|
+
</thead>
|
|
36
|
+
<tbody>
|
|
37
|
+
{ children }
|
|
38
|
+
</tbody>
|
|
39
|
+
</table>
|
|
40
|
+
)
|
|
41
|
+
|
|
42
|
+
const Row = ({ code }) => (
|
|
43
|
+
<tr>
|
|
44
|
+
<td><code>{code}</code></td>
|
|
45
|
+
<td><code>{JSON.stringify(eval(code), null, 2)}</code></td>
|
|
46
|
+
</tr>
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
<Table>
|
|
50
|
+
<Row code={`isEqual("${date_a}", "${date_a}")`} />
|
|
51
|
+
<Row code={`isLess("${date_a}", "${date_b}")`} />
|
|
52
|
+
<Row code={`isLessOrEqual("${date_a}", "${date_b}")`} />
|
|
53
|
+
<Row code={`isGreater("${date_b}", "${date_a}")`} />
|
|
54
|
+
<Row code={`isGreaterOrEqual("${date_b}", "${date_a}")`} />
|
|
55
|
+
<Row code={`isBetween("${date_b}", "${date_a}", "${date_b}")`} />
|
|
56
|
+
</Table>
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
```typescript static
|
|
61
|
+
export function isEqual(left: string, right: string): boolean;
|
|
62
|
+
export function isLess(left: string, right: string): boolean;
|
|
63
|
+
export function isLessOrEqual(left: string, right: string): boolean;
|
|
64
|
+
export function isGreater(left: string, right: string): boolean;
|
|
65
|
+
export function isGreaterOrEqual(left: string, right: string): boolean;
|
|
66
|
+
export function isBetween(
|
|
67
|
+
date: string,
|
|
68
|
+
left?: string,
|
|
69
|
+
right?: string,
|
|
70
|
+
): boolean;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
### Пример использования
|
|
2
|
+
|
|
3
|
+
```jsx harmony
|
|
4
|
+
import { Switcher, Gapped } from '@skbkontur/react-ui';
|
|
5
|
+
|
|
6
|
+
const [alignAt, setAlignAt] = React.useState("center");
|
|
7
|
+
|
|
8
|
+
<Gapped vertical gap="12px">
|
|
9
|
+
<Switcher
|
|
10
|
+
items={[
|
|
11
|
+
{label: "Слева", value: "left"},
|
|
12
|
+
{label: "По центру", value: "center"},
|
|
13
|
+
{label: "Справа", value: "right"}
|
|
14
|
+
]}
|
|
15
|
+
value={alignAt}
|
|
16
|
+
onValueChange={setAlignAt}
|
|
17
|
+
/>
|
|
18
|
+
|
|
19
|
+
<Center
|
|
20
|
+
align={alignAt}
|
|
21
|
+
style={{ background: '#fdd', height: 150 }}
|
|
22
|
+
>
|
|
23
|
+
<div style={{ background: 'black', width: 30, height: 30 }} />
|
|
24
|
+
</Center>
|
|
25
|
+
</Gapped>
|
|
26
|
+
```
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
### Базовый пример чекбокса
|
|
2
|
+
|
|
3
|
+
```jsx harmony
|
|
4
|
+
const [checked, setChecked] = React.useState(false);
|
|
5
|
+
|
|
6
|
+
<Checkbox checked={checked} onValueChange={setChecked}>
|
|
7
|
+
Обычный чекбокс
|
|
8
|
+
</Checkbox>;
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### Cостояния
|
|
12
|
+
|
|
13
|
+
```jsx harmony
|
|
14
|
+
import { Gapped } from '@skbkontur/react-ui';
|
|
15
|
+
|
|
16
|
+
const CheckboxWithState = ({children, ...props}) => {
|
|
17
|
+
const [checked, setChecked] = React.useState(false);
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Checkbox checked={checked} onValueChange={setChecked} {...props}>
|
|
21
|
+
{children}
|
|
22
|
+
</Checkbox>
|
|
23
|
+
)
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
<Gapped vertical>
|
|
27
|
+
<CheckboxWithState>
|
|
28
|
+
Обычный чекбокс
|
|
29
|
+
</CheckboxWithState>
|
|
30
|
+
<CheckboxWithState error>
|
|
31
|
+
Чекбокс в состоянии ошибки
|
|
32
|
+
</CheckboxWithState>
|
|
33
|
+
<CheckboxWithState warning>
|
|
34
|
+
Чекбокс в состоянии предупреждения
|
|
35
|
+
</CheckboxWithState>
|
|
36
|
+
</Gapped>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Размер
|
|
40
|
+
|
|
41
|
+
```jsx harmony
|
|
42
|
+
import { Gapped } from '@skbkontur/react-ui';
|
|
43
|
+
|
|
44
|
+
<Gapped vertical>
|
|
45
|
+
<Checkbox size="small" checked>
|
|
46
|
+
Маленький
|
|
47
|
+
</Checkbox>
|
|
48
|
+
<Checkbox size="medium" checked>
|
|
49
|
+
Средний
|
|
50
|
+
</Checkbox>
|
|
51
|
+
<Checkbox size="large" checked>
|
|
52
|
+
Большой
|
|
53
|
+
</Checkbox>
|
|
54
|
+
</Gapped>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### focus и blur
|
|
58
|
+
|
|
59
|
+
```jsx harmony
|
|
60
|
+
import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
|
|
61
|
+
|
|
62
|
+
const [checked, setChecked] = React.useState(false);
|
|
63
|
+
|
|
64
|
+
let checkboxInstance = React.useRef(null);
|
|
65
|
+
|
|
66
|
+
<Gapped vertical>
|
|
67
|
+
<Checkbox
|
|
68
|
+
ref={el => checkboxInstance = el}
|
|
69
|
+
checked={checked}
|
|
70
|
+
onValueChange={setChecked}
|
|
71
|
+
>
|
|
72
|
+
Пример чекбокса с программным фокусом
|
|
73
|
+
</Checkbox>
|
|
74
|
+
<Gapped gap={12}>
|
|
75
|
+
<Button
|
|
76
|
+
onClick={() => {
|
|
77
|
+
checkboxInstance.focus();
|
|
78
|
+
}}
|
|
79
|
+
>
|
|
80
|
+
Дать фокус
|
|
81
|
+
</Button>
|
|
82
|
+
<Button
|
|
83
|
+
onClick={() => {
|
|
84
|
+
checkboxInstance.blur();
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
Забрать фокус
|
|
88
|
+
</Button>
|
|
89
|
+
</Gapped>
|
|
90
|
+
</Gapped>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Неопределенное состояние
|
|
94
|
+
Чекбокс может находится в неопределённом состоянии. <br/> Это состояние полностью копирует поведение состояния `indeterminate` ([подробнее](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)) из HTML.
|
|
95
|
+
|
|
96
|
+
Это состояние влияет только на внешний вид и не влияет на состояние `checked`.
|
|
97
|
+
|
|
98
|
+
```jsx harmony
|
|
99
|
+
import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
|
|
100
|
+
|
|
101
|
+
const [checked, setChecked] = React.useState(false);
|
|
102
|
+
|
|
103
|
+
let checkboxInstance = React.useRef(null);
|
|
104
|
+
|
|
105
|
+
<Gapped vertical>
|
|
106
|
+
<Checkbox
|
|
107
|
+
initialIndeterminate
|
|
108
|
+
checked={checked}
|
|
109
|
+
onValueChange={setChecked}
|
|
110
|
+
ref={el => checkboxInstance = el}
|
|
111
|
+
>
|
|
112
|
+
Неопределённый чекбокс
|
|
113
|
+
</Checkbox>
|
|
114
|
+
<Gapped>
|
|
115
|
+
<Button onClick={() => checkboxInstance.setIndeterminate()}>
|
|
116
|
+
Перевести в неопределённое состояние
|
|
117
|
+
</Button>
|
|
118
|
+
<Button onClick={() => checkboxInstance.resetIndeterminate()}>
|
|
119
|
+
Сбросить неопределённое состояние
|
|
120
|
+
</Button>
|
|
121
|
+
</Gapped>
|
|
122
|
+
</Gapped>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Пример использования неопределённого состояния чекбокса
|
|
126
|
+
|
|
127
|
+
```jsx harmony
|
|
128
|
+
const [checkedSiblings, setCheckedSiblings] = React.useState([]);
|
|
129
|
+
const siblingCheckboxes = [1, 2];
|
|
130
|
+
|
|
131
|
+
let parentCheckboxRef;
|
|
132
|
+
|
|
133
|
+
React.useEffect(() => {
|
|
134
|
+
if (checkedSiblings.length === 0 || checkedSiblings.length === siblingCheckboxes.length) {
|
|
135
|
+
parentCheckboxRef.resetIndeterminate();
|
|
136
|
+
} else if (checkedSiblings.length !== 0) {
|
|
137
|
+
parentCheckboxRef.setIndeterminate();
|
|
138
|
+
}
|
|
139
|
+
}, [JSON.stringify(checkedSiblings)]);
|
|
140
|
+
|
|
141
|
+
<>
|
|
142
|
+
<Checkbox checked={checkedSiblings.length === siblingCheckboxes.length} ref={(el) => (parentCheckboxRef = el)}>
|
|
143
|
+
Родитель
|
|
144
|
+
</Checkbox>
|
|
145
|
+
<div style={{ display: 'flex', flexDirection: 'column', marginLeft: '20px' }}>
|
|
146
|
+
{siblingCheckboxes.map((id) => {
|
|
147
|
+
return (
|
|
148
|
+
<Checkbox
|
|
149
|
+
key={id}
|
|
150
|
+
checked={checkedSiblings.includes(id)}
|
|
151
|
+
onValueChange={() => {
|
|
152
|
+
const siblingIndex = checkedSiblings.indexOf(id);
|
|
153
|
+
|
|
154
|
+
if (siblingIndex === -1) {
|
|
155
|
+
setCheckedSiblings((prev) => [...prev, id]);
|
|
156
|
+
} else {
|
|
157
|
+
setCheckedSiblings((prev) =>
|
|
158
|
+
prev.filter((siblingId) => {
|
|
159
|
+
return siblingId !== id;
|
|
160
|
+
}),
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
}}
|
|
164
|
+
>
|
|
165
|
+
Ребёнок ({id})
|
|
166
|
+
</Checkbox>
|
|
167
|
+
);
|
|
168
|
+
})}
|
|
169
|
+
</div>
|
|
170
|
+
</>
|
|
171
|
+
```
|
|
@@ -6,8 +6,8 @@ import type { ShowClearIcon, InputIconType } from '../Input';
|
|
|
6
6
|
import type { CommonProps } from '../../internal/CommonWrapper';
|
|
7
7
|
import type { TGetRootNode } from '../../lib/rootNode';
|
|
8
8
|
import type { SizeProp } from '../../lib/types/props';
|
|
9
|
-
|
|
10
|
-
export interface ComboBoxProps<T> extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>,
|
|
9
|
+
export type ComboBoxViewMode = 'singleline' | 'multiline' | 'multiline-editing';
|
|
10
|
+
export interface ComboBoxProps<T> extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, CommonProps {
|
|
11
11
|
/** Показывать иконку очистки значения в непустом поле:
|
|
12
12
|
* - `always` — всегда показывать иконку
|
|
13
13
|
* - `auto` — показывать иконку при hover/focus
|
|
@@ -122,15 +122,21 @@ export interface ComboBoxProps<T> extends Pick<AriaAttributes, 'aria-describedby
|
|
|
122
122
|
onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
|
|
123
123
|
/** Задает типы вводимых данных. */
|
|
124
124
|
inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
|
|
125
|
-
/**
|
|
126
|
-
|
|
125
|
+
/** Режим отображения комбобокса
|
|
126
|
+
* - `singleline` — однострочный
|
|
127
|
+
* - `multiline` — многострочный
|
|
128
|
+
* - `multiline-editing` — многострочный только при редактировании
|
|
129
|
+
* @default singleline */
|
|
130
|
+
viewMode?: ComboBoxViewMode;
|
|
131
|
+
/** Максимальное кол-во строк для многострочных режимов отображения комбобокса */
|
|
132
|
+
maxRows?: number;
|
|
127
133
|
}
|
|
128
134
|
export interface ComboBoxItem {
|
|
129
135
|
value: string;
|
|
130
136
|
label: string;
|
|
131
137
|
}
|
|
132
138
|
export type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;
|
|
133
|
-
type DefaultProps<T> = Required<Pick<ComboBoxProps<T>, 'itemToValue' | 'valueToString' | 'renderValue' | 'renderItem' | 'menuAlign' | 'searchOnFocus' | 'drawArrow' | 'showClearIcon'>>;
|
|
139
|
+
type DefaultProps<T> = Required<Pick<ComboBoxProps<T>, 'itemToValue' | 'valueToString' | 'renderValue' | 'renderItem' | 'menuAlign' | 'searchOnFocus' | 'drawArrow' | 'showClearIcon' | 'viewMode'>>;
|
|
134
140
|
/**
|
|
135
141
|
* `ComboBox` — это поле ввода со списком подсказок.
|
|
136
142
|
*
|
|
@@ -187,6 +187,14 @@ var _createPropsGetter = require("../../lib/createPropsGetter");var _class, _Com
|
|
|
187
187
|
|
|
188
188
|
|
|
189
189
|
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
|
|
190
198
|
|
|
191
199
|
|
|
192
200
|
|
|
@@ -222,6 +230,7 @@ ComboBox = exports.ComboBox = (0, _rootNode.rootNode)(_class = (_ComboBox = /*#_
|
|
|
222
230
|
|
|
223
231
|
|
|
224
232
|
|
|
233
|
+
|
|
225
234
|
getProps = (0, _createPropsGetter.createPropsGetter)(ComboBox.defaultProps);_this.
|
|
226
235
|
|
|
227
236
|
comboboxElement = null;_this.
|
|
@@ -335,4 +344,4 @@ ComboBox = exports.ComboBox = (0, _rootNode.rootNode)(_class = (_ComboBox = /*#_
|
|
|
335
344
|
*/;_proto.selectInputText = function selectInputText() {if (this.comboboxElement) {this.comboboxElement.selectInputText();}} /**
|
|
336
345
|
* Сбрасывает введенное пользователем значение
|
|
337
346
|
* @public
|
|
338
|
-
*/;_proto.reset = function reset() {if (this.comboboxElement) {this.comboboxElement.reset();}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CustomComboBox.CustomComboBox, (0, _extends2.default)({}, this.getProps(), { size: this.props.size, ref: this.customComboBoxRef }));};return ComboBox;}(_react.default.Component), _ComboBox.__KONTUR_REACT_UI__ = 'ComboBox', _ComboBox.displayName = 'ComboBox', _ComboBox.defaultProps = { itemToValue: function itemToValue(item) {return item.value;}, valueToString: function valueToString(item) {return item.label;}, renderValue: function renderValue(item) {return item.label;}, renderItem: function renderItem(item) {return item.label;}, menuAlign: 'left', searchOnFocus: true, drawArrow: true, showClearIcon: 'never' }, _ComboBox)) || _class;
|
|
347
|
+
*/;_proto.reset = function reset() {if (this.comboboxElement) {this.comboboxElement.reset();}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CustomComboBox.CustomComboBox, (0, _extends2.default)({}, this.getProps(), { size: this.props.size, ref: this.customComboBoxRef }));};return ComboBox;}(_react.default.Component), _ComboBox.__KONTUR_REACT_UI__ = 'ComboBox', _ComboBox.displayName = 'ComboBox', _ComboBox.defaultProps = { itemToValue: function itemToValue(item) {return item.value;}, valueToString: function valueToString(item) {return item.label;}, renderValue: function renderValue(item) {return item.label;}, renderItem: function renderItem(item) {return item.label;}, menuAlign: 'left', searchOnFocus: true, drawArrow: true, showClearIcon: 'never', viewMode: 'singleline' }, _ComboBox)) || _class;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_CustomComboBox","_rootNode","_createPropsGetter","_class","_ComboBox","ComboBox","exports","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","_inheritsLoose2","default","_proto","prototype","focus","opts","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","createElement","CustomComboBox","_extends2","size","props","ref","React","Component","__KONTUR_REACT_UI__","displayName","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow","showClearIcon"],"sources":["ComboBox.tsx"],"sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport { CustomComboBox } from '../../internal/CustomComboBox';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { MenuItemState } from '../MenuItem';\nimport type { ShowClearIcon, InputIconType } from '../Input';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { MaskedInputOnBeforePasteValue, MaskedInputProps } from '../MaskedInput';\n\nexport interface ComboBoxProps<T>\n extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n Partial<Pick<MaskedInputProps, 'mask' | 'maskChar' | 'formatChars'>>,\n CommonProps {\n /** Показывать иконку очистки значения в непустом поле:\n * - `always` — всегда показывать иконку\n * - `auto` — показывать иконку при hover/focus\n * - `never` — не показывать иконку\n * При одновременной настройке `showClearIcon` и `rightIcon` показывается иконка очистки.\n * @default never */\n showClearIcon?: ShowClearIcon;\n\n /** Задает выравнивание контента. */\n align?: 'left' | 'center' | 'right';\n\n /** Вызывает функцию поиска getItems при фокусе и очистке поля ввода. */\n searchOnFocus?: boolean;\n\n /** Отображает справа иконку в виде стрелки. */\n drawArrow?: boolean;\n\n /** Устанавливает фокус на контроле после окончания загрузки страницы. */\n autoFocus?: boolean;\n\n /** Убирает обводку. */\n borderless?: boolean;\n\n /** Отключает использование портала для рендеринга меню.\n * См. https://github.com/skbkontur/retail-ui/issues/15 */\n disablePortal?: boolean;\n\n /** Делает компонент недоступным. */\n disabled?: boolean;\n\n /** Переводит контрол в состояние валидации \"ошибка\". */\n error?: boolean;\n\n /** Добавляет иконку слева.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n leftIcon?: InputIconType;\n\n /** Добавляет иконку справа.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n rightIcon?: InputIconType;\n\n /** Задает функцию поиска элементов, которая должна возвращать Promise с массивом элементов.\n * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n * Элементы могут быть любого типа. В этом случае необходимо определить свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`. */\n getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n\n /** Задает функцию сравнения полученных результатов с value. */\n itemToValue?: (item: T) => string | number;\n\n /** Задает максимальную длину инпута. */\n maxLength?: number;\n\n /** Задает текущую позицию выпадающего окна вручную.\n */\n menuPos?: 'top' | 'bottom';\n\n /** Задает выравнивание выпадающего меню. */\n menuAlign?: 'left' | 'right';\n\n /** Задает функцию, которая вызывается при потере комбобоксом фокуса. */\n onBlur?: () => void;\n\n /** Вызывается при изменении `value` */\n onValueChange?: (value: T) => void;\n\n /** Задает функцию, которая вызывается при получении комбобоксом фокуса. */\n onFocus?: () => void;\n\n /** Задает функцию, которая вызывается при изменении текста в поле ввода, если результатом функции будет строка, то она станет следующим состоянием полем ввода. */\n onInputValueChange?: (value: string) => Nullable<string> | void;\n\n /** Задает функцию для обработки ввода строки в инпут и последующей потерей фокуса компонентом.\n * Функция срабатывает с аргументом инпута строки.\n * Если при потере фокуса в выпадающем списке будет только один элемент и результат valueToString с этим элементом будет совпадать со значение в текстовом поле, то сработает onValueChange со значением данного элемента.\n * Сама функция также может вернуть значение, неравное undefined, с которым будет вызван onValueChange. Если возвращаемое значение будет равно null, то сработает очистка текущего значения инпута, а в режиме редактирования токен будет удален. */\n onUnexpectedInput?: (value: string) => void | null | T;\n\n /** Задает текст, который отображается если не введено никакое значение. */\n placeholder?: string;\n\n /** Задает функцию отрисовки элементов результата поиска.\n * Не применяется если элемент является функцией или React-элементом\n * @default item => item.label\n * @param {T} item - элемент из результата поиска.\n * @param {MenuItemState} state? - состояние элемента.\n * @returns {React.ReactNode} React-элемент. */\n renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n /** Устанавливает компонент, заменяющий собой обёртку элементов результата поиска.\n * По умолчанию все элементы результата поиска оборачиваются в тег <button />.\n * @example\n * itemWrapper={(item) => {\n * if (item.value === 3) {\n * return (props) => {\n * return <a {...props} />\n * }\n * }\n * }}\n */\n itemWrapper?: (item: T) => React.ComponentType;\n\n /** Задает функцию, которая отображает сообщение о пустом результате поиска. При renderAddButton не работает. */\n renderNotFound?: () => React.ReactNode;\n\n /** Задает функцию, которая отображает сообщение об общем количестве элементов.\n * @param {number} found - количество элементов по результатам поиска. Учитывает только компонент MenuItem. Им \"оборачиваются\" элементы, возвращаемые getItems().\n * @param {number} total - количество всех элементов. */\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n /** Задает функцию, которая отображает выбранное значение.\n * @default item => item.label */\n renderValue?: (item: T) => React.ReactNode;\n\n /** Задает функцию отрисовки кнопки добавления в выпадающем списке. */\n renderAddButton?: (query?: string) => React.ReactNode;\n\n /** Определяет общее количество элементов. Необходим для работы renderTotalCount. */\n totalCount?: number;\n\n /** Устанавливает выбранное в комбобоксе значение. Тип `value` совпадает с типом элементов в массиве, возвращаемом в `getItems`. */\n value?: Nullable<T>;\n\n /** Задает функцию, которая возвращает строковое представление value. Необходимо при фокусировке. */\n valueToString?: (item: T) => string;\n\n /** Задает размер компонента. */\n size?: SizeProp;\n\n /** Переводит контрол в состояние валидации \"предупреждение\". */\n warning?: boolean;\n\n /** Задает длину комбобокса. */\n width?: string | number;\n\n /** Задает максимальную высоту меню. */\n maxMenuHeight?: number | string;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */\n onMouseEnter?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n onMouseOver?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n onMouseLeave?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */\n onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n /** Задает типы вводимых данных. */\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n\n /** Задает функцию, которая вызывается при вставке значения в инпут с маской. */\n maskOnBeforePaste?: MaskedInputOnBeforePasteValue;\n}\n\nexport interface ComboBoxItem {\n value: string;\n label: string;\n}\n\nexport type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;\n\ntype DefaultProps<T> = Required<\n Pick<\n ComboBoxProps<T>,\n | 'itemToValue'\n | 'valueToString'\n | 'renderValue'\n | 'renderItem'\n | 'menuAlign'\n | 'searchOnFocus'\n | 'drawArrow'\n | 'showClearIcon'\n >\n>;\n\n/**\n * `ComboBox` — это поле ввода со списком подсказок.\n *\n * `ComboBox` используют:\n * * для выбора значения из справочника.\n * * для добавления своего значения в справочник.\n *\n * `ComboBox` может работать в двух режимах — обычном и в режиме автокомплита.\n * Основное их отличие в том, что в режиме автокомплита список вариантов появляется только после ввода первого символа или изменении уже введенного значения.\n */\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n public static __KONTUR_REACT_UI__ = 'ComboBox';\n public static displayName = 'ComboBox';\n\n public static defaultProps: DefaultProps<any> = {\n itemToValue: (item: ComboBoxItem) => item.value,\n valueToString: (item: ComboBoxItem) => item.label,\n renderValue: (item: ComboBoxItem) => item.label,\n renderItem: (item: ComboBoxItem) => item.label,\n menuAlign: 'left',\n searchOnFocus: true,\n drawArrow: true,\n showClearIcon: 'never',\n };\n\n private getProps = createPropsGetter(ComboBox.defaultProps);\n\n private comboboxElement: Nullable<CustomComboBox<T>> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n /**\n * @public\n */\n public focus(opts?: { withoutOpenDropdown?: boolean }) {\n if (this.comboboxElement) {\n this.comboboxElement.focus(opts);\n }\n }\n\n /**\n * @public\n */\n public blur() {\n if (this.comboboxElement) {\n this.comboboxElement.blur();\n }\n }\n\n /**\n * Открывает выпадающий список и запускает поиск элементов\n *\n * @public\n * @param {string} [query] Текст поиска. По умолчанию берется\n * текст из инпута или результат `valueToString(value)`\n */\n public search(query?: string) {\n if (this.comboboxElement) {\n this.comboboxElement.search(query);\n }\n }\n\n /**\n * @public\n */\n public cancelSearch() {\n if (this.comboboxElement) {\n this.comboboxElement.cancelSearch();\n }\n }\n\n /**\n * @public Открывает выпадающий список\n */\n public open() {\n if (this.comboboxElement) {\n this.comboboxElement.open();\n }\n }\n\n /**\n * @public Закрывает выпадающий список\n */\n public close() {\n if (this.comboboxElement) {\n this.comboboxElement.close();\n }\n }\n\n /**\n * Выделяет текст внутри input\n * @public\n */\n public selectInputText() {\n if (this.comboboxElement) {\n this.comboboxElement.selectInputText();\n }\n }\n\n /**\n * Сбрасывает введенное пользователем значение\n * @public\n */\n public reset() {\n if (this.comboboxElement) {\n this.comboboxElement.reset();\n }\n }\n\n public render() {\n return <CustomComboBox {...this.getProps()} size={this.props.size} ref={this.customComboBoxRef} />;\n }\n\n private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n this.setRootNode(element);\n this.comboboxElement = element;\n };\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_CustomComboBox","_rootNode","_createPropsGetter","_class","_ComboBox","ComboBox","exports","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","_inheritsLoose2","default","_proto","prototype","focus","opts","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","createElement","CustomComboBox","_extends2","size","props","ref","React","Component","__KONTUR_REACT_UI__","displayName","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow","showClearIcon","viewMode"],"sources":["ComboBox.tsx"],"sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport { CustomComboBox } from '../../internal/CustomComboBox';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { MenuItemState } from '../MenuItem';\nimport type { ShowClearIcon, InputIconType } from '../Input';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\n\nexport type ComboBoxViewMode = 'singleline' | 'multiline' | 'multiline-editing';\n\nexport interface ComboBoxProps<T>\n extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n CommonProps {\n /** Показывать иконку очистки значения в непустом поле:\n * - `always` — всегда показывать иконку\n * - `auto` — показывать иконку при hover/focus\n * - `never` — не показывать иконку\n * При одновременной настройке `showClearIcon` и `rightIcon` показывается иконка очистки.\n * @default never */\n showClearIcon?: ShowClearIcon;\n\n /** Задает выравнивание контента. */\n align?: 'left' | 'center' | 'right';\n\n /** Вызывает функцию поиска getItems при фокусе и очистке поля ввода. */\n searchOnFocus?: boolean;\n\n /** Отображает справа иконку в виде стрелки. */\n drawArrow?: boolean;\n\n /** Устанавливает фокус на контроле после окончания загрузки страницы. */\n autoFocus?: boolean;\n\n /** Убирает обводку. */\n borderless?: boolean;\n\n /** Отключает использование портала для рендеринга меню.\n * См. https://github.com/skbkontur/retail-ui/issues/15 */\n disablePortal?: boolean;\n\n /** Делает компонент недоступным. */\n disabled?: boolean;\n\n /** Переводит контрол в состояние валидации \"ошибка\". */\n error?: boolean;\n\n /** Добавляет иконку слева.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n leftIcon?: InputIconType;\n\n /** Добавляет иконку справа.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n rightIcon?: InputIconType;\n\n /** Задает функцию поиска элементов, которая должна возвращать Promise с массивом элементов.\n * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n * Элементы могут быть любого типа. В этом случае необходимо определить свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`. */\n getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n\n /** Задает функцию сравнения полученных результатов с value. */\n itemToValue?: (item: T) => string | number;\n\n /** Задает максимальную длину инпута. */\n maxLength?: number;\n\n /** Задает текущую позицию выпадающего окна вручную.\n */\n menuPos?: 'top' | 'bottom';\n\n /** Задает выравнивание выпадающего меню. */\n menuAlign?: 'left' | 'right';\n\n /** Задает функцию, которая вызывается при потере комбобоксом фокуса. */\n onBlur?: () => void;\n\n /** Вызывается при изменении `value` */\n onValueChange?: (value: T) => void;\n\n /** Задает функцию, которая вызывается при получении комбобоксом фокуса. */\n onFocus?: () => void;\n\n /** Задает функцию, которая вызывается при изменении текста в поле ввода, если результатом функции будет строка, то она станет следующим состоянием полем ввода. */\n onInputValueChange?: (value: string) => Nullable<string> | void;\n\n /** Задает функцию для обработки ввода строки в инпут и последующей потерей фокуса компонентом.\n * Функция срабатывает с аргументом инпута строки.\n * Если при потере фокуса в выпадающем списке будет только один элемент и результат valueToString с этим элементом будет совпадать со значение в текстовом поле, то сработает onValueChange со значением данного элемента.\n * Сама функция также может вернуть значение, неравное undefined, с которым будет вызван onValueChange. Если возвращаемое значение будет равно null, то сработает очистка текущего значения инпута, а в режиме редактирования токен будет удален. */\n onUnexpectedInput?: (value: string) => void | null | T;\n\n /** Задает текст, который отображается если не введено никакое значение. */\n placeholder?: string;\n\n /** Задает функцию отрисовки элементов результата поиска.\n * Не применяется если элемент является функцией или React-элементом\n * @default item => item.label\n * @param {T} item - элемент из результата поиска.\n * @param {MenuItemState} state? - состояние элемента.\n * @returns {React.ReactNode} React-элемент. */\n renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n /** Устанавливает компонент, заменяющий собой обёртку элементов результата поиска.\n * По умолчанию все элементы результата поиска оборачиваются в тег <button />.\n * @example\n * itemWrapper={(item) => {\n * if (item.value === 3) {\n * return (props) => {\n * return <a {...props} />\n * }\n * }\n * }}\n */\n itemWrapper?: (item: T) => React.ComponentType;\n\n /** Задает функцию, которая отображает сообщение о пустом результате поиска. При renderAddButton не работает. */\n renderNotFound?: () => React.ReactNode;\n\n /** Задает функцию, которая отображает сообщение об общем количестве элементов.\n * @param {number} found - количество элементов по результатам поиска. Учитывает только компонент MenuItem. Им \"оборачиваются\" элементы, возвращаемые getItems().\n * @param {number} total - количество всех элементов. */\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n /** Задает функцию, которая отображает выбранное значение.\n * @default item => item.label */\n renderValue?: (item: T) => React.ReactNode;\n\n /** Задает функцию отрисовки кнопки добавления в выпадающем списке. */\n renderAddButton?: (query?: string) => React.ReactNode;\n\n /** Определяет общее количество элементов. Необходим для работы renderTotalCount. */\n totalCount?: number;\n\n /** Устанавливает выбранное в комбобоксе значение. Тип `value` совпадает с типом элементов в массиве, возвращаемом в `getItems`. */\n value?: Nullable<T>;\n\n /** Задает функцию, которая возвращает строковое представление value. Необходимо при фокусировке. */\n valueToString?: (item: T) => string;\n\n /** Задает размер компонента. */\n size?: SizeProp;\n\n /** Переводит контрол в состояние валидации \"предупреждение\". */\n warning?: boolean;\n\n /** Задает длину комбобокса. */\n width?: string | number;\n\n /** Задает максимальную высоту меню. */\n maxMenuHeight?: number | string;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */\n onMouseEnter?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n onMouseOver?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n onMouseLeave?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */\n onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n /** Задает типы вводимых данных. */\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n\n /** Режим отображения комбобокса\n * - `singleline` — однострочный\n * - `multiline` — многострочный\n * - `multiline-editing` — многострочный только при редактировании\n * @default singleline */\n viewMode?: ComboBoxViewMode;\n\n /** Максимальное кол-во строк для многострочных режимов отображения комбобокса */\n maxRows?: number;\n}\n\nexport interface ComboBoxItem {\n value: string;\n label: string;\n}\n\nexport type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;\n\ntype DefaultProps<T> = Required<\n Pick<\n ComboBoxProps<T>,\n | 'itemToValue'\n | 'valueToString'\n | 'renderValue'\n | 'renderItem'\n | 'menuAlign'\n | 'searchOnFocus'\n | 'drawArrow'\n | 'showClearIcon'\n | 'viewMode'\n >\n>;\n\n/**\n * `ComboBox` — это поле ввода со списком подсказок.\n *\n * `ComboBox` используют:\n * * для выбора значения из справочника.\n * * для добавления своего значения в справочник.\n *\n * `ComboBox` может работать в двух режимах — обычном и в режиме автокомплита.\n * Основное их отличие в том, что в режиме автокомплита список вариантов появляется только после ввода первого символа или изменении уже введенного значения.\n */\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n public static __KONTUR_REACT_UI__ = 'ComboBox';\n public static displayName = 'ComboBox';\n\n public static defaultProps: DefaultProps<any> = {\n itemToValue: (item: ComboBoxItem) => item.value,\n valueToString: (item: ComboBoxItem) => item.label,\n renderValue: (item: ComboBoxItem) => item.label,\n renderItem: (item: ComboBoxItem) => item.label,\n menuAlign: 'left',\n searchOnFocus: true,\n drawArrow: true,\n showClearIcon: 'never',\n viewMode: 'singleline',\n };\n\n private getProps = createPropsGetter(ComboBox.defaultProps);\n\n private comboboxElement: Nullable<CustomComboBox<T>> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n /**\n * @public\n */\n public focus(opts?: { withoutOpenDropdown?: boolean }) {\n if (this.comboboxElement) {\n this.comboboxElement.focus(opts);\n }\n }\n\n /**\n * @public\n */\n public blur() {\n if (this.comboboxElement) {\n this.comboboxElement.blur();\n }\n }\n\n /**\n * Открывает выпадающий список и запускает поиск элементов\n *\n * @public\n * @param {string} [query] Текст поиска. По умолчанию берется\n * текст из инпута или результат `valueToString(value)`\n */\n public search(query?: string) {\n if (this.comboboxElement) {\n this.comboboxElement.search(query);\n }\n }\n\n /**\n * @public\n */\n public cancelSearch() {\n if (this.comboboxElement) {\n this.comboboxElement.cancelSearch();\n }\n }\n\n /**\n * @public Открывает выпадающий список\n */\n public open() {\n if (this.comboboxElement) {\n this.comboboxElement.open();\n }\n }\n\n /**\n * @public Закрывает выпадающий список\n */\n public close() {\n if (this.comboboxElement) {\n this.comboboxElement.close();\n }\n }\n\n /**\n * Выделяет текст внутри input\n * @public\n */\n public selectInputText() {\n if (this.comboboxElement) {\n this.comboboxElement.selectInputText();\n }\n }\n\n /**\n * Сбрасывает введенное пользователем значение\n * @public\n */\n public reset() {\n if (this.comboboxElement) {\n this.comboboxElement.reset();\n }\n }\n\n public render() {\n return <CustomComboBox {...this.getProps()} size={this.props.size} ref={this.customComboBoxRef} />;\n }\n\n private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n this.setRootNode(element);\n this.comboboxElement = element;\n };\n}\n"],"mappings":"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","ignoreList":[]}
|