@skbkontur/react-ui 4.5.0 → 4.5.3-theme2022.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/CHANGELOG.md +34 -0
- package/LICENSE +21 -21
- package/README.md +27 -4
- package/cjs/components/Autocomplete/Autocomplete.md +15 -1
- package/cjs/components/Button/Button.d.ts +10 -1
- package/cjs/components/Button/Button.js +81 -3
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.mixins.js +5 -4
- package/cjs/components/Button/Button.mixins.js.map +1 -1
- package/cjs/components/Button/Button.styles.d.ts +23 -0
- package/cjs/components/Button/Button.styles.js +331 -73
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.js +1 -1
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.d.ts +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +6 -4
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/ComboBox/ComboBox.md +32 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.md +23 -23
- package/cjs/components/DatePicker/DatePicker.md +18 -0
- package/cjs/components/Dropdown/Dropdown.d.ts +1 -0
- package/cjs/components/Dropdown/Dropdown.js +21 -3
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/FileUploader/FileUploader.md +6 -1
- package/cjs/components/FxInput/FxInput.md +13 -0
- package/cjs/components/Gapped/Gapped.md +43 -43
- package/cjs/components/Input/Input.md +12 -0
- package/cjs/components/Link/Link.d.ts +3 -0
- package/cjs/components/Link/Link.js +31 -8
- package/cjs/components/Link/Link.js.map +1 -1
- package/cjs/components/Link/Link.mixins.d.ts +1 -0
- package/cjs/components/Link/Link.mixins.js +44 -6
- package/cjs/components/Link/Link.mixins.js.map +1 -1
- package/cjs/components/Link/Link.styles.d.ts +6 -0
- package/cjs/components/Link/Link.styles.js +86 -17
- package/cjs/components/Link/Link.styles.js.map +1 -1
- package/cjs/components/Loader/Loader.d.ts +11 -2
- package/cjs/components/Loader/Loader.js +10 -1
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/Loader/Loader.md +30 -23
- package/cjs/components/MenuSeparator/MenuSeparator.styles.js +2 -2
- package/cjs/components/MenuSeparator/MenuSeparator.styles.js.map +1 -1
- package/cjs/components/Modal/Modal.styles.d.ts +3 -0
- package/cjs/components/Modal/Modal.styles.js +32 -10
- package/cjs/components/Modal/Modal.styles.js.map +1 -1
- package/cjs/components/Modal/ModalFooter.js +6 -2
- package/cjs/components/Modal/ModalFooter.js.map +1 -1
- package/cjs/components/Modal/ModalHeader.js +9 -3
- package/cjs/components/Modal/ModalHeader.js.map +1 -1
- package/cjs/components/Modal/ModalSeparator.d.ts +5 -0
- package/cjs/components/Modal/ModalSeparator.js +21 -0
- package/cjs/components/Modal/ModalSeparator.js.map +1 -0
- package/cjs/components/PasswordInput/PasswordInput.md +9 -9
- package/cjs/components/RadioGroup/RadioGroup.md +43 -43
- package/cjs/components/Select/Select.md +14 -0
- package/cjs/components/Select/selectTheme.js +2 -0
- package/cjs/components/Select/selectTheme.js.map +1 -1
- package/cjs/components/Spinner/Spinner.d.ts +11 -2
- package/cjs/components/Spinner/Spinner.js +10 -1
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Textarea/Textarea.md +19 -0
- package/cjs/components/Token/Token.md +112 -112
- package/cjs/internal/FakeUserActions/FakeUserActions.d.ts +7 -0
- package/cjs/internal/FakeUserActions/FakeUserActions.js +29 -0
- package/cjs/internal/FakeUserActions/FakeUserActions.js.map +1 -0
- package/cjs/internal/FakeUserActions/FakeUserActionsTable.d.ts +6 -0
- package/cjs/internal/FakeUserActions/FakeUserActionsTable.js +216 -0
- package/cjs/internal/FakeUserActions/FakeUserActionsTable.js.map +1 -0
- package/cjs/internal/FakeUserActions/Selectors.d.ts +6 -0
- package/cjs/internal/FakeUserActions/Selectors.js +20 -0
- package/cjs/internal/FakeUserActions/Selectors.js.map +1 -0
- package/cjs/internal/FakeUserActions/hasFakeUserAction.d.ts +3 -0
- package/cjs/internal/FakeUserActions/hasFakeUserAction.js +9 -0
- package/cjs/internal/FakeUserActions/hasFakeUserAction.js.map +1 -0
- package/cjs/internal/Menu/Menu.styles.js +1 -2
- package/cjs/internal/Menu/Menu.styles.js.map +1 -1
- package/cjs/internal/ThemeShowcase/ThemeShowcase.md +13 -13
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/ZIndex/ZIndex.d.ts +17 -3
- package/cjs/internal/ZIndex/ZIndex.js +55 -14
- package/cjs/internal/ZIndex/ZIndex.js.map +1 -1
- package/cjs/internal/icons/16px/BaseIcon.d.ts +8 -0
- package/cjs/internal/icons/16px/BaseIcon.js +33 -0
- package/cjs/internal/icons/16px/BaseIcon.js.map +1 -0
- package/cjs/internal/icons/16px/index.d.ts +3 -0
- package/cjs/internal/icons/16px/index.js +22 -8
- package/cjs/internal/icons/16px/index.js.map +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +41 -0
- package/cjs/internal/themes/DefaultTheme.js +87 -3
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/internal/themes/Theme2022.d.ts +60 -4
- package/cjs/internal/themes/Theme2022.js +156 -63
- package/cjs/internal/themes/Theme2022.js.map +1 -1
- package/cjs/internal/themes/Theme2022Dark.d.ts +9 -0
- package/cjs/internal/themes/Theme2022Dark.js +15 -1
- package/cjs/internal/themes/Theme2022Dark.js.map +1 -1
- package/cjs/lib/rootNode/getRootNode.d.ts +1 -1
- package/cjs/lib/rootNode/getRootNode.js +37 -12
- package/cjs/lib/rootNode/getRootNode.js.map +1 -1
- package/cjs/lib/theming/ThemeHelpers.d.ts +3 -0
- package/cjs/lib/theming/ThemeHelpers.js +17 -1
- package/cjs/lib/theming/ThemeHelpers.js.map +1 -1
- package/cjs/lib/theming/themes/Theme2022.js +2 -1
- package/cjs/lib/theming/themes/Theme2022.js.map +1 -1
- package/cjs/typings/utility-types.d.ts +1 -1
- package/components/Autocomplete/Autocomplete.md +15 -1
- package/components/Button/Button/Button.js +61 -11
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +10 -1
- package/components/Button/Button.mixins/Button.mixins.js +2 -2
- package/components/Button/Button.mixins/Button.mixins.js.map +1 -1
- package/components/Button/Button.styles/Button.styles.js +130 -62
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Button/Button.styles.d.ts +23 -0
- package/components/Checkbox/Checkbox/Checkbox.js +1 -1
- package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js +2 -2
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map +1 -1
- package/components/Checkbox/Checkbox.styles.d.ts +1 -1
- package/components/ComboBox/ComboBox.md +32 -0
- package/components/CurrencyLabel/CurrencyLabel.md +23 -23
- package/components/DatePicker/DatePicker.md +18 -0
- package/components/Dropdown/Dropdown/Dropdown.js +18 -5
- package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.d.ts +1 -0
- package/components/FileUploader/FileUploader.md +6 -1
- package/components/FxInput/FxInput.md +13 -0
- package/components/Gapped/Gapped.md +43 -43
- package/components/Input/Input.md +12 -0
- package/components/Link/Link/Link.js +26 -4
- package/components/Link/Link/Link.js.map +1 -1
- package/components/Link/Link.d.ts +3 -0
- package/components/Link/Link.mixins/Link.mixins.js +11 -3
- package/components/Link/Link.mixins/Link.mixins.js.map +1 -1
- package/components/Link/Link.mixins.d.ts +1 -0
- package/components/Link/Link.styles/Link.styles.js +26 -14
- package/components/Link/Link.styles/Link.styles.js.map +1 -1
- package/components/Link/Link.styles.d.ts +6 -0
- package/components/Loader/Loader/Loader.js +3 -1
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Loader/Loader.d.ts +11 -2
- package/components/Loader/Loader.md +30 -23
- package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js +1 -1
- package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js.map +1 -1
- package/components/Modal/Modal.styles/Modal.styles.js +14 -5
- package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
- package/components/Modal/Modal.styles.d.ts +3 -0
- package/components/Modal/ModalFooter/ModalFooter.js +5 -2
- package/components/Modal/ModalFooter/ModalFooter.js.map +1 -1
- package/components/Modal/ModalHeader/ModalHeader.js +5 -2
- package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
- package/components/Modal/ModalSeparator/ModalSeparator.js +14 -0
- package/components/Modal/ModalSeparator/ModalSeparator.js.map +1 -0
- package/components/Modal/ModalSeparator/package.json +6 -0
- package/components/Modal/ModalSeparator.d.ts +5 -0
- package/components/PasswordInput/PasswordInput.md +9 -9
- package/components/RadioGroup/RadioGroup.md +43 -43
- package/components/Select/Select.md +14 -0
- package/components/Select/selectTheme/selectTheme.js +1 -0
- package/components/Select/selectTheme/selectTheme.js.map +1 -1
- package/components/Spinner/Spinner/Spinner.js +1 -1
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +11 -2
- package/components/Textarea/Textarea.md +19 -0
- package/components/Token/Token.md +112 -112
- package/internal/FakeUserActions/FakeUserActions/FakeUserActions.js +33 -0
- package/internal/FakeUserActions/FakeUserActions/FakeUserActions.js.map +1 -0
- package/internal/FakeUserActions/FakeUserActions/package.json +6 -0
- package/internal/FakeUserActions/FakeUserActions.d.ts +7 -0
- package/internal/FakeUserActions/FakeUserActionsTable/FakeUserActionsTable.js +171 -0
- package/internal/FakeUserActions/FakeUserActionsTable/FakeUserActionsTable.js.map +1 -0
- package/internal/FakeUserActions/FakeUserActionsTable/package.json +6 -0
- package/internal/FakeUserActions/FakeUserActionsTable.d.ts +6 -0
- package/internal/FakeUserActions/Selectors/Selectors.js +29 -0
- package/internal/FakeUserActions/Selectors/Selectors.js.map +1 -0
- package/internal/FakeUserActions/Selectors/package.json +6 -0
- package/internal/FakeUserActions/Selectors.d.ts +6 -0
- package/internal/FakeUserActions/hasFakeUserAction/hasFakeUserAction.js +6 -0
- package/internal/FakeUserActions/hasFakeUserAction/hasFakeUserAction.js.map +1 -0
- package/internal/FakeUserActions/hasFakeUserAction/package.json +6 -0
- package/internal/FakeUserActions/hasFakeUserAction.d.ts +3 -0
- package/internal/Menu/Menu.styles/Menu.styles.js +1 -1
- package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
- package/internal/ThemeShowcase/ThemeShowcase.md +13 -13
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/ZIndex/ZIndex/ZIndex.js +46 -27
- package/internal/ZIndex/ZIndex/ZIndex.js.map +1 -1
- package/internal/ZIndex/ZIndex.d.ts +17 -3
- package/internal/icons/16px/BaseIcon/BaseIcon.js +28 -0
- package/internal/icons/16px/BaseIcon/BaseIcon.js.map +1 -0
- package/internal/icons/16px/BaseIcon/package.json +6 -0
- package/internal/icons/16px/BaseIcon.d.ts +8 -0
- package/internal/icons/16px/index/index.js +19 -5
- package/internal/icons/16px/index/index.js.map +1 -1
- package/internal/icons/16px/index.d.ts +3 -0
- package/internal/themes/DefaultTheme/DefaultTheme.js +120 -3
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +41 -0
- package/internal/themes/Theme2022/Theme2022.js +90 -4
- package/internal/themes/Theme2022/Theme2022.js.map +1 -1
- package/internal/themes/Theme2022.d.ts +60 -4
- package/internal/themes/Theme2022Dark/Theme2022Dark.js +9 -0
- package/internal/themes/Theme2022Dark/Theme2022Dark.js.map +1 -1
- package/internal/themes/Theme2022Dark.d.ts +9 -0
- package/lib/rootNode/getRootNode/getRootNode.js +28 -10
- package/lib/rootNode/getRootNode/getRootNode.js.map +1 -1
- package/lib/rootNode/getRootNode.d.ts +1 -1
- package/lib/theming/ThemeHelpers/ThemeHelpers.js +14 -0
- package/lib/theming/ThemeHelpers/ThemeHelpers.js.map +1 -1
- package/lib/theming/ThemeHelpers.d.ts +3 -0
- package/lib/theming/themes/Theme2022/Theme2022.js +2 -1
- package/lib/theming/themes/Theme2022/Theme2022.js.map +1 -1
- package/package.json +3 -5
- package/typings/utility-types.d.ts +1 -1
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
import { Gapped, Radio } from '@skbkontur/react-ui';
|
|
3
|
-
|
|
4
|
-
let items = ['One', 'Two', 'Three', 'Four'];
|
|
5
|
-
|
|
6
|
-
let simpleRadioGroup = (
|
|
7
|
-
<div>
|
|
8
|
-
<h2>Numbers</h2>
|
|
9
|
-
<RadioGroup name="number-simple" items={items} defaultValue="One" />
|
|
10
|
-
</div>
|
|
11
|
-
);
|
|
12
|
-
|
|
13
|
-
let complexRadioGroup = (
|
|
14
|
-
<div>
|
|
15
|
-
<h2>Numbers</h2>
|
|
16
|
-
<RadioGroup name="number-complex" defaultValue="3">
|
|
17
|
-
<Gapped gap={40}>
|
|
18
|
-
<Gapped vertical gap={0}>
|
|
19
|
-
<b>Odd</b>
|
|
20
|
-
<Radio value="1">One</Radio>
|
|
21
|
-
<Radio value="3">Three</Radio>
|
|
22
|
-
<Radio value="5" disabled>
|
|
23
|
-
Five
|
|
24
|
-
</Radio>
|
|
25
|
-
<Radio value="7">Seven</Radio>
|
|
26
|
-
</Gapped>
|
|
27
|
-
<Gapped vertical gap={0}>
|
|
28
|
-
<b>Even</b>
|
|
29
|
-
<Radio value="2">Two</Radio>
|
|
30
|
-
<Radio value="4">Four</Radio>
|
|
31
|
-
<Radio value="6">Six</Radio>
|
|
32
|
-
<Radio value="8">Eight</Radio>
|
|
33
|
-
</Gapped>
|
|
34
|
-
</Gapped>
|
|
35
|
-
</RadioGroup>
|
|
36
|
-
</div>
|
|
37
|
-
);
|
|
38
|
-
|
|
39
|
-
<div>
|
|
40
|
-
{simpleRadioGroup}
|
|
41
|
-
{complexRadioGroup}
|
|
42
|
-
</div>;
|
|
43
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
import { Gapped, Radio } from '@skbkontur/react-ui';
|
|
3
|
+
|
|
4
|
+
let items = ['One', 'Two', 'Three', 'Four'];
|
|
5
|
+
|
|
6
|
+
let simpleRadioGroup = (
|
|
7
|
+
<div>
|
|
8
|
+
<h2>Numbers</h2>
|
|
9
|
+
<RadioGroup name="number-simple" items={items} defaultValue="One" />
|
|
10
|
+
</div>
|
|
11
|
+
);
|
|
12
|
+
|
|
13
|
+
let complexRadioGroup = (
|
|
14
|
+
<div>
|
|
15
|
+
<h2>Numbers</h2>
|
|
16
|
+
<RadioGroup name="number-complex" defaultValue="3">
|
|
17
|
+
<Gapped gap={40}>
|
|
18
|
+
<Gapped vertical gap={0}>
|
|
19
|
+
<b>Odd</b>
|
|
20
|
+
<Radio value="1">One</Radio>
|
|
21
|
+
<Radio value="3">Three</Radio>
|
|
22
|
+
<Radio value="5" disabled>
|
|
23
|
+
Five
|
|
24
|
+
</Radio>
|
|
25
|
+
<Radio value="7">Seven</Radio>
|
|
26
|
+
</Gapped>
|
|
27
|
+
<Gapped vertical gap={0}>
|
|
28
|
+
<b>Even</b>
|
|
29
|
+
<Radio value="2">Two</Radio>
|
|
30
|
+
<Radio value="4">Four</Radio>
|
|
31
|
+
<Radio value="6">Six</Radio>
|
|
32
|
+
<Radio value="8">Eight</Radio>
|
|
33
|
+
</Gapped>
|
|
34
|
+
</Gapped>
|
|
35
|
+
</RadioGroup>
|
|
36
|
+
</div>
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
<div>
|
|
40
|
+
{simpleRadioGroup}
|
|
41
|
+
{complexRadioGroup}
|
|
42
|
+
</div>;
|
|
43
|
+
```
|
|
@@ -8,6 +8,20 @@ const items = [Select.static(() => <Select.Item>Not selectable</Select.Item>), '
|
|
|
8
8
|
<Select items={items} value={value} onValueChange={setValue} />;
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
Очистить значение в `Select`'е можно только с помощью `null`
|
|
12
|
+
```jsx harmony
|
|
13
|
+
import { Button, Group } from '@skbkontur/react-ui';
|
|
14
|
+
|
|
15
|
+
const [value, setValue] = React.useState();
|
|
16
|
+
|
|
17
|
+
const items = ['One', 'Two', 'Three', 'Four'];
|
|
18
|
+
|
|
19
|
+
<Group>
|
|
20
|
+
<Select items={items} value={value} onValueChange={setValue} />
|
|
21
|
+
<Button onClick={() => setValue(null)}>Очистить</Button>
|
|
22
|
+
</Group>
|
|
23
|
+
```
|
|
24
|
+
|
|
11
25
|
Пример с полем поиска.
|
|
12
26
|
|
|
13
27
|
```jsx harmony
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
|
|
2
2
|
export var getSelectTheme = function getSelectTheme(theme, props) {
|
|
3
3
|
return ThemeFactory.create({
|
|
4
|
+
btnDefaultBg: theme.selectDefaultBg,
|
|
4
5
|
btnBorderWidth: theme.selectBorderWidth,
|
|
5
6
|
btnOutlineWidth: theme.selectOutlineWidth,
|
|
6
7
|
btnLineHeightSmall: theme.selectLineHeightSmall,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["selectTheme.ts"],"names":["ThemeFactory","getSelectTheme","theme","props","create","btnBorderWidth","selectBorderWidth","btnOutlineWidth","selectOutlineWidth","btnLineHeightSmall","selectLineHeightSmall","btnFontSizeSmall","selectFontSizeSmall","btnPaddingXSmall","_icon","selectPaddingXSmall","btnPaddingYSmall","selectPaddingYSmall","btnIconSizeSmall","selectIconSizeSmall","btnBorderRadiusSmall","selectBorderRadiusSmall","btnLinkHoverTextDecoration","btnLineHeightMedium","selectLineHeightMedium","btnFontSizeMedium","selectFontSizeMedium","btnPaddingXMedium","selectPaddingXMedium","btnPaddingYMedium","selectPaddingYMedium","btnIconSizeMedium","selectIconSizeMedium","btnBorderRadiusMedium","selectBorderRadiusMedium","btnLineHeightLarge","selectLineHeightLarge","btnFontSizeLarge","selectFontSizeLarge","btnPaddingXLarge","selectPaddingXLarge","btnPaddingYLarge","selectPaddingYLarge","btnIconSizeLarge","selectIconSizeLarge","btnBorderRadiusLarge","selectBorderRadiusLarge","btnDisabledBg","selectBgDisabled","btnDisabledBorderColor","selectBorderColorDisabled","btnDisabledTextColor","selectTextColorDisabled"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;;;AAKA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAeC,KAAf,EAAuD;AACnF,SAAOH,YAAY,CAACI,MAAb;AACL;AACEC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["selectTheme.ts"],"names":["ThemeFactory","getSelectTheme","theme","props","create","btnDefaultBg","selectDefaultBg","btnBorderWidth","selectBorderWidth","btnOutlineWidth","selectOutlineWidth","btnLineHeightSmall","selectLineHeightSmall","btnFontSizeSmall","selectFontSizeSmall","btnPaddingXSmall","_icon","selectPaddingXSmall","btnPaddingYSmall","selectPaddingYSmall","btnIconSizeSmall","selectIconSizeSmall","btnBorderRadiusSmall","selectBorderRadiusSmall","btnLinkHoverTextDecoration","btnLineHeightMedium","selectLineHeightMedium","btnFontSizeMedium","selectFontSizeMedium","btnPaddingXMedium","selectPaddingXMedium","btnPaddingYMedium","selectPaddingYMedium","btnIconSizeMedium","selectIconSizeMedium","btnBorderRadiusMedium","selectBorderRadiusMedium","btnLineHeightLarge","selectLineHeightLarge","btnFontSizeLarge","selectFontSizeLarge","btnPaddingXLarge","selectPaddingXLarge","btnPaddingYLarge","selectPaddingYLarge","btnIconSizeLarge","selectIconSizeLarge","btnBorderRadiusLarge","selectBorderRadiusLarge","btnDisabledBg","selectBgDisabled","btnDisabledBorderColor","selectBorderColorDisabled","btnDisabledTextColor","selectTextColorDisabled"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;;;AAKA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAeC,KAAf,EAAuD;AACnF,SAAOH,YAAY,CAACI,MAAb;AACL;AACEC,IAAAA,YAAY,EAAEH,KAAK,CAACI,eADtB;;AAGEC,IAAAA,cAAc,EAAEL,KAAK,CAACM,iBAHxB;AAIEC,IAAAA,eAAe,EAAEP,KAAK,CAACQ,kBAJzB;;AAMEC,IAAAA,kBAAkB,EAAET,KAAK,CAACU,qBAN5B;AAOEC,IAAAA,gBAAgB,EAAEX,KAAK,CAACY,mBAP1B;AAQEC,IAAAA,gBAAgB,EAAEZ,KAAK,CAACa,KAAN,GAAcd,KAAK,CAACa,gBAApB,GAAuCb,KAAK,CAACe,mBARjE;AASEC,IAAAA,gBAAgB,EAAEhB,KAAK,CAACiB,mBAT1B;AAUEC,IAAAA,gBAAgB,EAAElB,KAAK,CAACmB,mBAV1B;AAWEC,IAAAA,oBAAoB,EAAEpB,KAAK,CAACqB,uBAX9B;;AAaEC,IAAAA,0BAA0B,EAAE,MAb9B;;AAeEC,IAAAA,mBAAmB,EAAEvB,KAAK,CAACwB,sBAf7B;AAgBEC,IAAAA,iBAAiB,EAAEzB,KAAK,CAAC0B,oBAhB3B;AAiBEC,IAAAA,iBAAiB,EAAE1B,KAAK,CAACa,KAAN,GAAcd,KAAK,CAAC2B,iBAApB,GAAwC3B,KAAK,CAAC4B,oBAjBnE;AAkBEC,IAAAA,iBAAiB,EAAE7B,KAAK,CAAC8B,oBAlB3B;AAmBEC,IAAAA,iBAAiB,EAAE/B,KAAK,CAACgC,oBAnB3B;AAoBEC,IAAAA,qBAAqB,EAAEjC,KAAK,CAACkC,wBApB/B;;AAsBEC,IAAAA,kBAAkB,EAAEnC,KAAK,CAACoC,qBAtB5B;AAuBEC,IAAAA,gBAAgB,EAAErC,KAAK,CAACsC,mBAvB1B;AAwBEC,IAAAA,gBAAgB,EAAEtC,KAAK,CAACa,KAAN,GAAcd,KAAK,CAACuC,gBAApB,GAAuCvC,KAAK,CAACwC,mBAxBjE;AAyBEC,IAAAA,gBAAgB,EAAEzC,KAAK,CAAC0C,mBAzB1B;AA0BEC,IAAAA,gBAAgB,EAAE3C,KAAK,CAAC4C,mBA1B1B;AA2BEC,IAAAA,oBAAoB,EAAE7C,KAAK,CAAC8C,uBA3B9B;;AA6BEC,IAAAA,aAAa,EAAE/C,KAAK,CAACgD,gBA7BvB;AA8BEC,IAAAA,sBAAsB,EAAEjD,KAAK,CAACkD,yBA9BhC;AA+BEC,IAAAA,oBAAoB,EAAEnD,KAAK,CAACoD,uBA/B9B,EADK;;AAkCLpD,EAAAA,KAlCK,CAAP;;AAoCD,CArCM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { SelectProps } from './Select';\n\nexport const getSelectTheme = (theme: Theme, props: SelectProps<any, any>): Theme => {\n return ThemeFactory.create(\n {\n btnDefaultBg: theme.selectDefaultBg,\n\n btnBorderWidth: theme.selectBorderWidth,\n btnOutlineWidth: theme.selectOutlineWidth,\n\n btnLineHeightSmall: theme.selectLineHeightSmall,\n btnFontSizeSmall: theme.selectFontSizeSmall,\n btnPaddingXSmall: props._icon ? theme.btnPaddingXSmall : theme.selectPaddingXSmall,\n btnPaddingYSmall: theme.selectPaddingYSmall,\n btnIconSizeSmall: theme.selectIconSizeSmall,\n btnBorderRadiusSmall: theme.selectBorderRadiusSmall,\n\n btnLinkHoverTextDecoration: 'none',\n\n btnLineHeightMedium: theme.selectLineHeightMedium,\n btnFontSizeMedium: theme.selectFontSizeMedium,\n btnPaddingXMedium: props._icon ? theme.btnPaddingXMedium : theme.selectPaddingXMedium,\n btnPaddingYMedium: theme.selectPaddingYMedium,\n btnIconSizeMedium: theme.selectIconSizeMedium,\n btnBorderRadiusMedium: theme.selectBorderRadiusMedium,\n\n btnLineHeightLarge: theme.selectLineHeightLarge,\n btnFontSizeLarge: theme.selectFontSizeLarge,\n btnPaddingXLarge: props._icon ? theme.btnPaddingXLarge : theme.selectPaddingXLarge,\n btnPaddingYLarge: theme.selectPaddingYLarge,\n btnIconSizeLarge: theme.selectIconSizeLarge,\n btnBorderRadiusLarge: theme.selectBorderRadiusLarge,\n\n btnDisabledBg: theme.selectBgDisabled,\n btnDisabledBorderColor: theme.selectBorderColorDisabled,\n btnDisabledTextColor: theme.selectTextColorDisabled,\n },\n theme,\n );\n};\n"]}
|
|
@@ -24,7 +24,7 @@ export var SpinnerDataTids = {
|
|
|
24
24
|
};
|
|
25
25
|
export
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
|
|
28
28
|
*/
|
|
29
29
|
var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
30
30
|
_inheritsLoose(Spinner, _React$Component);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","styles","SpinnerLocaleHelper","types","big","mini","normal","SpinnerDataTids","root","Spinner","getProps","defaultProps","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","Types"],"mappings":"iKAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,SAASC,MAAT,QAAuB,6BAAvB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,WAAT,QAA4B,kCAA5B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;AAEA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAAwBC,mBAAxB,QAAmD,UAAnD;;AAEA,IAAMC,KAAuC,GAAG;AAC9CC,EAAAA,GAAG,EAAE,KADyC;AAE9CC,EAAAA,IAAI,EAAE,MAFwC;AAG9CC,EAAAA,MAAM,EAAE,QAHsC,EAAhD
|
|
1
|
+
{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","styles","SpinnerLocaleHelper","types","big","mini","normal","SpinnerDataTids","root","Spinner","getProps","defaultProps","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","Types"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n big: 'big',\n mini: 'mini',\n normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n /**\n * Подпись под спиннером\n */\n caption?: React.ReactNode;\n /**\n * Переводит спиннер в \"затемнённый режим\"\n *\n * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n */\n dimmed?: boolean;\n /**\n * Размер спиннера и текста\n *\n * @default normal\n */\n type?: SpinnerType;\n inline?: boolean;\n /**\n * Толщина спиннера\n */\n width?: number;\n /**\n * Цвет спиннера\n */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n\n public static propTypes = {\n /**\n * Текст рядом с мини-лоадером.\n *\n * 'Загрузка' - значение по-умолчанию\n */\n caption: PropTypes.node,\n\n dimmed: PropTypes.bool,\n\n /**\n * Тип спиннера: mini, normal, big\n *\n * Значение по-умолчанию - normal\n *\n * Spinner.types - все доступные типы\n */\n type: PropTypes.oneOf(Object.keys(types)),\n };\n\n public static defaultProps: DefaultProps = {\n type: 'normal',\n };\n\n private getProps = createPropsGetter(Spinner.defaultProps);\n\n public static Types: typeof types = types;\n private theme!: Theme;\n private readonly locale!: SpinnerLocale;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { caption = this.locale.loading, dimmed, inline } = this.props;\n const type = this.getProps().type;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n {caption && this.renderCaption(type, caption)}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n return (\n <SpinnerIcon\n size={type}\n className={cx({\n [styles.circle(this.theme)]: !dimmed && !this.props.color,\n [styles.circleDimmedColor(this.theme)]: dimmed,\n [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n })}\n dimmed={dimmed}\n width={this.props.width}\n color={this.props.color}\n inline={inline}\n />\n );\n };\n\n private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n );\n}\n"]}
|
|
@@ -4,10 +4,19 @@ import { CommonProps } from '../../internal/CommonWrapper';
|
|
|
4
4
|
declare const types: Record<SpinnerType, SpinnerType>;
|
|
5
5
|
export declare type SpinnerType = 'mini' | 'normal' | 'big';
|
|
6
6
|
export interface SpinnerProps extends CommonProps {
|
|
7
|
+
/**
|
|
8
|
+
* Подпись под спиннером
|
|
9
|
+
*/
|
|
7
10
|
caption?: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Переводит спиннер в "затемнённый режим"
|
|
13
|
+
*
|
|
14
|
+
* Цвет спиннера в "затемнённом режиме" определяется переменной `spinnerDimmedColor`
|
|
15
|
+
*/
|
|
8
16
|
dimmed?: boolean;
|
|
9
17
|
/**
|
|
10
|
-
*
|
|
18
|
+
* Размер спиннера и текста
|
|
19
|
+
*
|
|
11
20
|
* @default normal
|
|
12
21
|
*/
|
|
13
22
|
type?: SpinnerType;
|
|
@@ -26,7 +35,7 @@ export declare const SpinnerDataTids: {
|
|
|
26
35
|
};
|
|
27
36
|
declare type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
|
|
28
37
|
/**
|
|
29
|
-
*
|
|
38
|
+
* Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
|
|
30
39
|
*/
|
|
31
40
|
export declare class Spinner extends React.Component<SpinnerProps> {
|
|
32
41
|
static __KONTUR_REACT_UI__: string;
|
|
@@ -9,6 +9,25 @@ const [value, setValue] = React.useState('');
|
|
|
9
9
|
/>;
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
+
Очистить значение в `Textarea` можно только с помощью пустой строки
|
|
13
|
+
|
|
14
|
+
```jsx harmony
|
|
15
|
+
import { Group, Button } from '@skbkontur/react-ui';
|
|
16
|
+
|
|
17
|
+
const [value, setValue] = React.useState('Значение');
|
|
18
|
+
|
|
19
|
+
<Group>
|
|
20
|
+
<Textarea
|
|
21
|
+
value={value}
|
|
22
|
+
onValueChange={setValue}
|
|
23
|
+
autoResize
|
|
24
|
+
rows={1}
|
|
25
|
+
placeholder="Плейсхолдер"
|
|
26
|
+
/>
|
|
27
|
+
<Button style={{ height: '52px' }} onClick={() => setValue('')}>Очистить значение</Button>
|
|
28
|
+
</Group>
|
|
29
|
+
```
|
|
30
|
+
|
|
12
31
|
Счетчик введенных символов
|
|
13
32
|
|
|
14
33
|
```jsx harmony
|
|
@@ -1,112 +1,112 @@
|
|
|
1
|
-
Token example
|
|
2
|
-
|
|
3
|
-
```jsx harmony
|
|
4
|
-
import { Token } from '@skbkontur/react-ui';
|
|
5
|
-
|
|
6
|
-
<Token>Example</Token>;
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
You can control color of each token
|
|
10
|
-
|
|
11
|
-
```jsx harmony
|
|
12
|
-
import { Gapped, Token } from '@skbkontur/react-ui';
|
|
13
|
-
|
|
14
|
-
const colors = {
|
|
15
|
-
default: {
|
|
16
|
-
idle: 'defaultIdle',
|
|
17
|
-
active: 'defaultActive',
|
|
18
|
-
},
|
|
19
|
-
gray: {
|
|
20
|
-
idle: 'grayIdle',
|
|
21
|
-
active: 'grayActive',
|
|
22
|
-
},
|
|
23
|
-
blue: {
|
|
24
|
-
idle: 'blueIdle',
|
|
25
|
-
active: 'blueActive',
|
|
26
|
-
},
|
|
27
|
-
green: {
|
|
28
|
-
idle: 'greenIdle',
|
|
29
|
-
active: 'greenActive',
|
|
30
|
-
},
|
|
31
|
-
yellow: {
|
|
32
|
-
idle: 'yellowIdle',
|
|
33
|
-
active: 'yellowActive',
|
|
34
|
-
},
|
|
35
|
-
red: {
|
|
36
|
-
idle: 'redIdle',
|
|
37
|
-
active: 'redActive',
|
|
38
|
-
},
|
|
39
|
-
mono: {
|
|
40
|
-
idle: 'white',
|
|
41
|
-
active: 'black',
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
<Gapped gap={20} vertical>
|
|
46
|
-
<Gapped gap={10}>
|
|
47
|
-
<Token colors={colors.default}>Default</Token>
|
|
48
|
-
<Token isActive colors={colors.default}>
|
|
49
|
-
Default
|
|
50
|
-
</Token>
|
|
51
|
-
</Gapped>
|
|
52
|
-
<Gapped gap={10}>
|
|
53
|
-
<Token colors={colors.gray}>Gray</Token>
|
|
54
|
-
<Token isActive colors={colors.gray}>
|
|
55
|
-
Gray
|
|
56
|
-
</Token>
|
|
57
|
-
</Gapped>
|
|
58
|
-
<Gapped gap={10}>
|
|
59
|
-
<Token colors={colors.blue}>Blue</Token>
|
|
60
|
-
<Token isActive colors={colors.blue}>
|
|
61
|
-
Blue
|
|
62
|
-
</Token>
|
|
63
|
-
</Gapped>
|
|
64
|
-
<Gapped gap={10}>
|
|
65
|
-
<Token colors={colors.green}>Green</Token>
|
|
66
|
-
<Token isActive colors={colors.green}>
|
|
67
|
-
Green
|
|
68
|
-
</Token>
|
|
69
|
-
</Gapped>
|
|
70
|
-
<Gapped gap={10}>
|
|
71
|
-
<Token colors={colors.yellow}>Yellow</Token>
|
|
72
|
-
<Token isActive colors={colors.yellow}>
|
|
73
|
-
Yellow
|
|
74
|
-
</Token>
|
|
75
|
-
</Gapped>
|
|
76
|
-
<Gapped gap={10}>
|
|
77
|
-
<Token colors={colors.red}>Red</Token>
|
|
78
|
-
<Token isActive colors={colors.red}>
|
|
79
|
-
Red
|
|
80
|
-
</Token>
|
|
81
|
-
</Gapped>
|
|
82
|
-
<Gapped gap={10}>
|
|
83
|
-
<Token colors={colors.mono}>Monochrome</Token>
|
|
84
|
-
<Token isActive colors={colors.mono}>
|
|
85
|
-
Monochrome
|
|
86
|
-
</Token>
|
|
87
|
-
</Gapped>
|
|
88
|
-
</Gapped>;
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
Can accept validation state
|
|
92
|
-
|
|
93
|
-
```jsx harmony
|
|
94
|
-
import { Gapped, Token } from '@skbkontur/react-ui';
|
|
95
|
-
|
|
96
|
-
<Gapped gap={20} vertical>
|
|
97
|
-
<Gapped gap={10}>
|
|
98
|
-
<Token>Correct</Token>
|
|
99
|
-
<Token warning>Warned</Token>
|
|
100
|
-
<Token error>Errored</Token>
|
|
101
|
-
</Gapped>
|
|
102
|
-
<Gapped gap={10}>
|
|
103
|
-
<Token isActive>Correct</Token>
|
|
104
|
-
<Token isActive warning>
|
|
105
|
-
Warned
|
|
106
|
-
</Token>
|
|
107
|
-
<Token isActive error>
|
|
108
|
-
Errored
|
|
109
|
-
</Token>
|
|
110
|
-
</Gapped>
|
|
111
|
-
</Gapped>;
|
|
112
|
-
```
|
|
1
|
+
Token example
|
|
2
|
+
|
|
3
|
+
```jsx harmony
|
|
4
|
+
import { Token } from '@skbkontur/react-ui';
|
|
5
|
+
|
|
6
|
+
<Token>Example</Token>;
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
You can control color of each token
|
|
10
|
+
|
|
11
|
+
```jsx harmony
|
|
12
|
+
import { Gapped, Token } from '@skbkontur/react-ui';
|
|
13
|
+
|
|
14
|
+
const colors = {
|
|
15
|
+
default: {
|
|
16
|
+
idle: 'defaultIdle',
|
|
17
|
+
active: 'defaultActive',
|
|
18
|
+
},
|
|
19
|
+
gray: {
|
|
20
|
+
idle: 'grayIdle',
|
|
21
|
+
active: 'grayActive',
|
|
22
|
+
},
|
|
23
|
+
blue: {
|
|
24
|
+
idle: 'blueIdle',
|
|
25
|
+
active: 'blueActive',
|
|
26
|
+
},
|
|
27
|
+
green: {
|
|
28
|
+
idle: 'greenIdle',
|
|
29
|
+
active: 'greenActive',
|
|
30
|
+
},
|
|
31
|
+
yellow: {
|
|
32
|
+
idle: 'yellowIdle',
|
|
33
|
+
active: 'yellowActive',
|
|
34
|
+
},
|
|
35
|
+
red: {
|
|
36
|
+
idle: 'redIdle',
|
|
37
|
+
active: 'redActive',
|
|
38
|
+
},
|
|
39
|
+
mono: {
|
|
40
|
+
idle: 'white',
|
|
41
|
+
active: 'black',
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
<Gapped gap={20} vertical>
|
|
46
|
+
<Gapped gap={10}>
|
|
47
|
+
<Token colors={colors.default}>Default</Token>
|
|
48
|
+
<Token isActive colors={colors.default}>
|
|
49
|
+
Default
|
|
50
|
+
</Token>
|
|
51
|
+
</Gapped>
|
|
52
|
+
<Gapped gap={10}>
|
|
53
|
+
<Token colors={colors.gray}>Gray</Token>
|
|
54
|
+
<Token isActive colors={colors.gray}>
|
|
55
|
+
Gray
|
|
56
|
+
</Token>
|
|
57
|
+
</Gapped>
|
|
58
|
+
<Gapped gap={10}>
|
|
59
|
+
<Token colors={colors.blue}>Blue</Token>
|
|
60
|
+
<Token isActive colors={colors.blue}>
|
|
61
|
+
Blue
|
|
62
|
+
</Token>
|
|
63
|
+
</Gapped>
|
|
64
|
+
<Gapped gap={10}>
|
|
65
|
+
<Token colors={colors.green}>Green</Token>
|
|
66
|
+
<Token isActive colors={colors.green}>
|
|
67
|
+
Green
|
|
68
|
+
</Token>
|
|
69
|
+
</Gapped>
|
|
70
|
+
<Gapped gap={10}>
|
|
71
|
+
<Token colors={colors.yellow}>Yellow</Token>
|
|
72
|
+
<Token isActive colors={colors.yellow}>
|
|
73
|
+
Yellow
|
|
74
|
+
</Token>
|
|
75
|
+
</Gapped>
|
|
76
|
+
<Gapped gap={10}>
|
|
77
|
+
<Token colors={colors.red}>Red</Token>
|
|
78
|
+
<Token isActive colors={colors.red}>
|
|
79
|
+
Red
|
|
80
|
+
</Token>
|
|
81
|
+
</Gapped>
|
|
82
|
+
<Gapped gap={10}>
|
|
83
|
+
<Token colors={colors.mono}>Monochrome</Token>
|
|
84
|
+
<Token isActive colors={colors.mono}>
|
|
85
|
+
Monochrome
|
|
86
|
+
</Token>
|
|
87
|
+
</Gapped>
|
|
88
|
+
</Gapped>;
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Can accept validation state
|
|
92
|
+
|
|
93
|
+
```jsx harmony
|
|
94
|
+
import { Gapped, Token } from '@skbkontur/react-ui';
|
|
95
|
+
|
|
96
|
+
<Gapped gap={20} vertical>
|
|
97
|
+
<Gapped gap={10}>
|
|
98
|
+
<Token>Correct</Token>
|
|
99
|
+
<Token warning>Warned</Token>
|
|
100
|
+
<Token error>Errored</Token>
|
|
101
|
+
</Gapped>
|
|
102
|
+
<Gapped gap={10}>
|
|
103
|
+
<Token isActive>Correct</Token>
|
|
104
|
+
<Token isActive warning>
|
|
105
|
+
Warned
|
|
106
|
+
</Token>
|
|
107
|
+
<Token isActive error>
|
|
108
|
+
Errored
|
|
109
|
+
</Token>
|
|
110
|
+
</Gapped>
|
|
111
|
+
</Gapped>;
|
|
112
|
+
```
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { getRootNode } from "../../../lib/rootNode";
|
|
3
|
+
export var FAKE_USER_ACTION_ATTR = {
|
|
4
|
+
hover: 'data-style-hover',
|
|
5
|
+
active: 'data-style-active',
|
|
6
|
+
focus: 'data-style-focus'
|
|
7
|
+
};
|
|
8
|
+
export var FakeUserActions = function FakeUserActions(_ref) {
|
|
9
|
+
var children = _ref.children,
|
|
10
|
+
_ref$acts = _ref.acts,
|
|
11
|
+
acts = _ref$acts === void 0 ? [] : _ref$acts;
|
|
12
|
+
var ref = React.useRef();
|
|
13
|
+
|
|
14
|
+
var setProp = function setProp(node) {
|
|
15
|
+
acts.forEach(function (act) {
|
|
16
|
+
return node.setAttribute(FAKE_USER_ACTION_ATTR[act], 'true');
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
React.useEffect(function () {
|
|
21
|
+
var node = getRootNode(ref.current);
|
|
22
|
+
|
|
23
|
+
if (node instanceof HTMLElement) {
|
|
24
|
+
var _ref$current;
|
|
25
|
+
|
|
26
|
+
setProp(node);
|
|
27
|
+
(_ref$current = ref.current) == null ? void 0 : _ref$current.forceUpdate();
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
return /*#__PURE__*/React.cloneElement(children, {
|
|
31
|
+
ref: ref
|
|
32
|
+
});
|
|
33
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["FakeUserActions.tsx"],"names":["React","getRootNode","FAKE_USER_ACTION_ATTR","hover","active","focus","FakeUserActions","children","acts","ref","useRef","setProp","node","forEach","act","setAttribute","useEffect","current","HTMLElement","forceUpdate","cloneElement"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,WAAT,QAA4B,oBAA5B;;;;AAIA,OAAO,IAAMC,qBAAqD,GAAG;AACnEC,EAAAA,KAAK,EAAE,kBAD4D;AAEnEC,EAAAA,MAAM,EAAE,mBAF2D;AAGnEC,EAAAA,KAAK,EAAE,kBAH4D,EAA9D;;;AAMP,OAAO,IAAMC,eAAmG,GAAG,SAAtGA,eAAsG;;;AAG7G,KAFJC,QAEI,QAFJA,QAEI,kBADJC,IACI,CADJA,IACI,0BADG,EACH;AACJ,MAAMC,GAAG,GAAGT,KAAK,CAACU,MAAN,EAAZ;AACA,MAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAuB;AACrCJ,IAAAA,IAAI,CAACK,OAAL,CAAa,UAACC,GAAD,UAASF,IAAI,CAACG,YAAL,CAAkBb,qBAAqB,CAACY,GAAD,CAAvC,EAA8C,MAA9C,CAAT,EAAb;AACD,GAFD;AAGAd,EAAAA,KAAK,CAACgB,SAAN,CAAgB,YAAM;AACpB,QAAMJ,IAAI,GAAGX,WAAW,CAACQ,GAAG,CAACQ,OAAL,CAAxB;AACA,QAAIL,IAAI,YAAYM,WAApB,EAAiC;AAC/BP,MAAAA,OAAO,CAACC,IAAD,CAAP;AACA,sBAAAH,GAAG,CAACQ,OAAJ,kCAAaE,WAAb;AACD;AACF,GAND;AAOA,sBAAOnB,KAAK,CAACoB,YAAN,CAAmBb,QAAnB,EAA6B,EAAEE,GAAG,EAAHA,GAAF,EAA7B,CAAP;AACD,CAhBM","sourcesContent":["import React from 'react';\n\nimport { getRootNode } from '../../lib/rootNode';\n\nexport type FakeUserAction = 'hover' | 'active' | 'focus';\n\nexport const FAKE_USER_ACTION_ATTR: Record<FakeUserAction, string> = {\n hover: 'data-style-hover',\n active: 'data-style-active',\n focus: 'data-style-focus',\n};\n\nexport const FakeUserActions: React.FunctionComponent<{ children: React.ReactElement; acts?: FakeUserAction[] }> = ({\n children,\n acts = [],\n}) => {\n const ref = React.useRef<React.Component>();\n const setProp = (node: HTMLElement) => {\n acts.forEach((act) => node.setAttribute(FAKE_USER_ACTION_ATTR[act], 'true'));\n };\n React.useEffect(() => {\n const node = getRootNode(ref.current);\n if (node instanceof HTMLElement) {\n setProp(node);\n ref.current?.forceUpdate();\n }\n });\n return React.cloneElement(children, { ref });\n};\n"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare type FakeUserAction = 'hover' | 'active' | 'focus';
|
|
3
|
+
export declare const FAKE_USER_ACTION_ATTR: Record<FakeUserAction, string>;
|
|
4
|
+
export declare const FakeUserActions: React.FunctionComponent<{
|
|
5
|
+
children: React.ReactElement;
|
|
6
|
+
acts?: FakeUserAction[];
|
|
7
|
+
}>;
|