@skbkontur/react-ui 3.10.0 → 3.11.0-select-right
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 +19 -0
- package/LICENSE +21 -21
- package/cjs/components/Autocomplete/Autocomplete.md +7 -7
- package/cjs/components/Button/Button.d.ts +1 -1
- package/cjs/components/Button/Button.js +4 -3
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.d.ts +1 -0
- package/cjs/components/Button/Button.styles.js +38 -28
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/CurrencyInput/CurrencyInput.md +24 -24
- package/cjs/components/CurrencyLabel/CurrencyLabel.md +23 -23
- package/cjs/components/DateInput/DateInput.md +106 -106
- package/cjs/components/DatePicker/DatePicker.md +307 -307
- package/cjs/components/DropdownMenu/DropdownMenu.d.ts +2 -2
- package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/cjs/components/FxInput/FxInput.md +16 -16
- package/cjs/components/Gapped/Gapped.md +43 -43
- package/cjs/components/Group/Group.md +18 -18
- package/cjs/components/Hint/Hint.d.ts +2 -1
- package/cjs/components/Hint/Hint.js +0 -16
- package/cjs/components/Hint/Hint.js.map +1 -1
- package/cjs/components/Input/Input.md +13 -13
- package/cjs/components/Kebab/Kebab.d.ts +2 -2
- package/cjs/components/Kebab/Kebab.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.d.ts +1 -1
- package/cjs/components/MenuItem/MenuItem.js +1 -4
- package/cjs/components/MenuItem/MenuItem.js.map +1 -1
- package/cjs/components/Paging/Paging.md +43 -43
- package/cjs/components/PasswordInput/PasswordInput.md +9 -9
- package/cjs/components/RadioGroup/RadioGroup.md +43 -43
- package/cjs/components/ScrollContainer/ScrollBar.js +4 -2
- package/cjs/components/ScrollContainer/ScrollBar.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.js +2 -1
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.styles.d.ts +1 -0
- package/cjs/components/ScrollContainer/ScrollContainer.styles.js +12 -8
- package/cjs/components/ScrollContainer/ScrollContainer.styles.js.map +1 -1
- package/cjs/components/Select/Select.js +2 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +1 -0
- package/cjs/components/SidePage/SidePage.js +14 -1
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/Spinner/Spinner.d.ts +8 -0
- package/cjs/components/Spinner/Spinner.js +21 -3
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Spinner/Spinner.md +1 -0
- package/cjs/components/Spinner/Spinner.styles.d.ts +2 -1
- package/cjs/components/Spinner/Spinner.styles.js +13 -10
- package/cjs/components/Spinner/Spinner.styles.js.map +1 -1
- package/cjs/components/Switcher/Switcher.styles.js +4 -2
- package/cjs/components/Switcher/Switcher.styles.js.map +1 -1
- package/cjs/components/Tabs/Tabs.md +36 -36
- package/cjs/components/Textarea/Textarea.md +25 -25
- package/cjs/components/Token/Token.md +112 -112
- package/cjs/components/TokenInput/TokenInput.md +79 -79
- package/cjs/components/Tooltip/Tooltip.d.ts +8 -21
- package/cjs/components/Tooltip/Tooltip.js +14 -27
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/TooltipMenu/TooltipMenu.d.ts +2 -2
- package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +2 -1
- package/cjs/index.js.map +1 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.js +10 -2
- package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.styles.d.ts +3 -0
- package/cjs/internal/DropdownContainer/DropdownContainer.styles.js +9 -0
- package/cjs/internal/DropdownContainer/DropdownContainer.styles.js.map +1 -0
- package/cjs/internal/Menu/Menu.d.ts +2 -0
- package/cjs/internal/Menu/Menu.js +26 -2
- package/cjs/internal/Menu/Menu.js.map +1 -1
- package/cjs/internal/Menu/Menu.styles.d.ts +3 -0
- package/cjs/internal/Menu/Menu.styles.js +22 -3
- package/cjs/internal/Menu/Menu.styles.js.map +1 -1
- package/cjs/internal/Popup/Popup.d.ts +5 -4
- package/cjs/internal/Popup/Popup.js +13 -24
- package/cjs/internal/Popup/Popup.js.map +1 -1
- package/cjs/internal/Popup/PopupHelper.d.ts +2 -2
- package/cjs/internal/Popup/PopupHelper.js.map +1 -1
- package/cjs/internal/Popup/types.d.ts +1 -0
- package/cjs/internal/Popup/types.js +1 -0
- package/cjs/internal/Popup/types.js.map +1 -0
- package/cjs/internal/PopupMenu/PopupMenu.d.ts +3 -3
- package/cjs/internal/PopupMenu/PopupMenu.js +17 -3
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/internal/PopupMenu/validatePositions.d.ts +2 -2
- package/cjs/internal/PopupMenu/validatePositions.js +2 -4
- package/cjs/internal/PopupMenu/validatePositions.js.map +1 -1
- package/cjs/internal/ThemeShowcase/ThemeShowcase.md +13 -13
- package/cjs/internal/icons/SpinnerIcon.d.ts +4 -1
- package/cjs/internal/icons/SpinnerIcon.js +5 -2
- package/cjs/internal/icons/SpinnerIcon.js.map +1 -1
- package/cjs/lib/ModalStack.js +16 -17
- package/cjs/lib/ModalStack.js.map +1 -1
- package/cjs/lib/theming/AnimationKeyframes.js +1 -1
- package/cjs/lib/theming/AnimationKeyframes.js.map +1 -1
- package/cjs/lib/theming/useTheme.d.ts +1 -0
- package/cjs/lib/theming/useTheme.js +7 -0
- package/cjs/lib/theming/useTheme.js.map +1 -0
- package/cjs/lib/utils.d.ts +32 -0
- package/cjs/lib/utils.js +62 -2
- package/cjs/lib/utils.js.map +1 -1
- package/cjs/typings/html-props.d.ts +123 -0
- package/components/Autocomplete/Autocomplete.md +7 -7
- package/components/Button/Button/Button.js +3 -7
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +1 -1
- package/components/Button/Button.styles/Button.styles.js +31 -28
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Button/Button.styles.d.ts +1 -0
- package/components/CurrencyInput/CurrencyInput.md +24 -24
- package/components/CurrencyLabel/CurrencyLabel.md +23 -23
- package/components/DateInput/DateInput.md +106 -106
- package/components/DatePicker/DatePicker.md +307 -307
- package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
- package/components/DropdownMenu/DropdownMenu.d.ts +2 -2
- package/components/FxInput/FxInput.md +16 -16
- package/components/Gapped/Gapped.md +43 -43
- package/components/Group/Group.md +18 -18
- package/components/Hint/Hint/Hint.js.map +1 -1
- package/components/Hint/Hint.d.ts +2 -1
- package/components/Input/Input.md +13 -13
- package/components/Kebab/Kebab/Kebab.js.map +1 -1
- package/components/Kebab/Kebab.d.ts +2 -2
- package/components/MenuItem/MenuItem/MenuItem.js +2 -7
- package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
- package/components/MenuItem/MenuItem.d.ts +1 -1
- package/components/Paging/Paging.md +43 -43
- package/components/PasswordInput/PasswordInput.md +9 -9
- package/components/RadioGroup/RadioGroup.md +43 -43
- package/components/ScrollContainer/ScrollBar/ScrollBar.js +6 -2
- package/components/ScrollContainer/ScrollBar/ScrollBar.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +2 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js +11 -8
- package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.styles.d.ts +1 -0
- package/components/Select/Select/Select.js +2 -1
- package/components/Select/Select/Select.js.map +1 -1
- package/components/SidePage/SidePage/SidePage.js +19 -0
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +1 -0
- package/components/Spinner/Spinner/Spinner.js +6 -3
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +8 -0
- package/components/Spinner/Spinner.md +1 -0
- package/components/Spinner/Spinner.styles/Spinner.styles.js +12 -9
- package/components/Spinner/Spinner.styles/Spinner.styles.js.map +1 -1
- package/components/Spinner/Spinner.styles.d.ts +2 -1
- package/components/Switcher/Switcher.styles/Switcher.styles.js +3 -1
- package/components/Switcher/Switcher.styles/Switcher.styles.js.map +1 -1
- package/components/Tabs/Tabs.md +36 -36
- package/components/Textarea/Textarea.md +25 -25
- package/components/Token/Token.md +112 -112
- package/components/TokenInput/TokenInput.md +79 -79
- package/components/Tooltip/Tooltip/Tooltip.js +2 -2
- package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.d.ts +8 -21
- package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
- package/components/TooltipMenu/TooltipMenu.d.ts +2 -2
- package/index.d.ts +1 -0
- package/index.js +2 -1
- package/index.js.map +1 -1
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +6 -1
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
- package/internal/DropdownContainer/DropdownContainer.styles/DropdownContainer.styles.js +10 -0
- package/internal/DropdownContainer/DropdownContainer.styles/DropdownContainer.styles.js.map +1 -0
- package/internal/DropdownContainer/DropdownContainer.styles/package.json +6 -0
- package/internal/DropdownContainer/DropdownContainer.styles.d.ts +3 -0
- package/internal/Menu/Menu/Menu.js +14 -5
- package/internal/Menu/Menu/Menu.js.map +1 -1
- package/internal/Menu/Menu.d.ts +2 -0
- package/internal/Menu/Menu.styles/Menu.styles.js +12 -3
- package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
- package/internal/Menu/Menu.styles.d.ts +3 -0
- package/internal/Popup/Popup/Popup.js +3 -2
- package/internal/Popup/Popup/Popup.js.map +1 -1
- package/internal/Popup/Popup.d.ts +5 -4
- package/internal/Popup/PopupHelper/PopupHelper.js.map +1 -1
- package/internal/Popup/PopupHelper.d.ts +2 -2
- package/internal/Popup/types/package.json +6 -0
- package/internal/Popup/types/types.js +0 -0
- package/internal/Popup/types/types.js.map +1 -0
- package/internal/Popup/types.d.ts +1 -0
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +3 -3
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/PopupMenu/PopupMenu.d.ts +3 -3
- package/internal/PopupMenu/validatePositions/validatePositions.js +2 -2
- package/internal/PopupMenu/validatePositions/validatePositions.js.map +1 -1
- package/internal/PopupMenu/validatePositions.d.ts +2 -2
- package/internal/ThemeShowcase/ThemeShowcase.md +13 -13
- package/internal/icons/SpinnerIcon/SpinnerIcon.js +5 -2
- package/internal/icons/SpinnerIcon/SpinnerIcon.js.map +1 -1
- package/internal/icons/SpinnerIcon.d.ts +4 -1
- package/lib/ModalStack/ModalStack.js +9 -13
- package/lib/ModalStack/ModalStack.js.map +1 -1
- package/lib/theming/AnimationKeyframes/AnimationKeyframes.js +1 -1
- package/lib/theming/AnimationKeyframes/AnimationKeyframes.js.map +1 -1
- package/lib/theming/useTheme/package.json +6 -0
- package/lib/theming/useTheme/useTheme.js +5 -0
- package/lib/theming/useTheme/useTheme.js.map +1 -0
- package/lib/theming/useTheme.d.ts +1 -0
- package/lib/utils/utils.js +66 -0
- package/lib/utils/utils.js.map +1 -1
- package/lib/utils.d.ts +32 -0
- package/package.json +5 -5
- package/typings/html-props.d.ts +123 -0
- package/cjs/internal/PopupMenu/PopupMenuPositions.d.ts +0 -2
- package/cjs/internal/PopupMenu/PopupMenuPositions.js +0 -15
- package/cjs/internal/PopupMenu/PopupMenuPositions.js.map +0 -1
- package/internal/PopupMenu/PopupMenuPositions/PopupMenuPositions.js +0 -1
- package/internal/PopupMenu/PopupMenuPositions/PopupMenuPositions.js.map +0 -1
- package/internal/PopupMenu/PopupMenuPositions/package.json +0 -6
- package/internal/PopupMenu/PopupMenuPositions.d.ts +0 -2
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
const [active, setActive] = React.useState('fuji');
|
|
3
|
-
|
|
4
|
-
<Tabs value={active} onValueChange={setActive}>
|
|
5
|
-
<Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
|
|
6
|
-
<Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
|
|
7
|
-
<Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
|
|
8
|
-
</Tabs>;
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Можно передавать свои компоненты в качестве табов, например `NavLink` из `react-router`
|
|
12
|
-
|
|
13
|
-
```jsx harmony
|
|
14
|
-
const [active, setActive] = React.useState('/fuji');
|
|
15
|
-
|
|
16
|
-
const NavLink = props => (
|
|
17
|
-
<a
|
|
18
|
-
{...props}
|
|
19
|
-
onClick={e => {
|
|
20
|
-
e.preventDefault();
|
|
21
|
-
props.onClick(e);
|
|
22
|
-
}}
|
|
23
|
-
/>
|
|
24
|
-
);
|
|
25
|
-
const TabLink = ({ id, children }) => (
|
|
26
|
-
<Tabs.Tab id={id} component={props => <NavLink {...props} to={props.id} />}>
|
|
27
|
-
{children}
|
|
28
|
-
</Tabs.Tab>
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
<Tabs value={active} onValueChange={setActive}>
|
|
32
|
-
<TabLink id="/fuji">🌋 Fuji</TabLink>
|
|
33
|
-
<TabLink id="/tahat">⛰ Tahat</TabLink>
|
|
34
|
-
<TabLink id="/alps">🗻 Alps</TabLink>
|
|
35
|
-
</Tabs>;
|
|
36
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
const [active, setActive] = React.useState('fuji');
|
|
3
|
+
|
|
4
|
+
<Tabs value={active} onValueChange={setActive}>
|
|
5
|
+
<Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
|
|
6
|
+
<Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
|
|
7
|
+
<Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
|
|
8
|
+
</Tabs>;
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Можно передавать свои компоненты в качестве табов, например `NavLink` из `react-router`
|
|
12
|
+
|
|
13
|
+
```jsx harmony
|
|
14
|
+
const [active, setActive] = React.useState('/fuji');
|
|
15
|
+
|
|
16
|
+
const NavLink = props => (
|
|
17
|
+
<a
|
|
18
|
+
{...props}
|
|
19
|
+
onClick={e => {
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
props.onClick(e);
|
|
22
|
+
}}
|
|
23
|
+
/>
|
|
24
|
+
);
|
|
25
|
+
const TabLink = ({ id, children }) => (
|
|
26
|
+
<Tabs.Tab id={id} component={props => <NavLink {...props} to={props.id} />}>
|
|
27
|
+
{children}
|
|
28
|
+
</Tabs.Tab>
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
<Tabs value={active} onValueChange={setActive}>
|
|
32
|
+
<TabLink id="/fuji">🌋 Fuji</TabLink>
|
|
33
|
+
<TabLink id="/tahat">⛰ Tahat</TabLink>
|
|
34
|
+
<TabLink id="/alps">🗻 Alps</TabLink>
|
|
35
|
+
</Tabs>;
|
|
36
|
+
```
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
const [value, setValue] = React.useState('');
|
|
3
|
-
|
|
4
|
-
<Textarea
|
|
5
|
-
value={value}
|
|
6
|
-
onValueChange={setValue}
|
|
7
|
-
autoResize
|
|
8
|
-
placeholder="Through faith we can reign in every area of life"
|
|
9
|
-
/>;
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
Счетчик введенных символов
|
|
13
|
-
|
|
14
|
-
```jsx harmony
|
|
15
|
-
const [value, setValue] = React.useState('');
|
|
16
|
-
|
|
17
|
-
<Textarea
|
|
18
|
-
value={value}
|
|
19
|
-
onValueChange={setValue}
|
|
20
|
-
placeholder="Счетчик появляется при фокусе"
|
|
21
|
-
lengthCounter={10}
|
|
22
|
-
showLengthCounter
|
|
23
|
-
counterHelp="Hello 👋"
|
|
24
|
-
/>;
|
|
25
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
const [value, setValue] = React.useState('');
|
|
3
|
+
|
|
4
|
+
<Textarea
|
|
5
|
+
value={value}
|
|
6
|
+
onValueChange={setValue}
|
|
7
|
+
autoResize
|
|
8
|
+
placeholder="Through faith we can reign in every area of life"
|
|
9
|
+
/>;
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Счетчик введенных символов
|
|
13
|
+
|
|
14
|
+
```jsx harmony
|
|
15
|
+
const [value, setValue] = React.useState('');
|
|
16
|
+
|
|
17
|
+
<Textarea
|
|
18
|
+
value={value}
|
|
19
|
+
onValueChange={setValue}
|
|
20
|
+
placeholder="Счетчик появляется при фокусе"
|
|
21
|
+
lengthCounter={10}
|
|
22
|
+
showLengthCounter
|
|
23
|
+
counterHelp="Hello 👋"
|
|
24
|
+
/>;
|
|
25
|
+
```
|
|
@@ -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
|
+
```
|
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
import { Token } from '@skbkontur/react-ui';
|
|
3
|
-
import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
|
|
4
|
-
|
|
5
|
-
const [selectedItems, setSelectedItems] = React.useState([]);
|
|
6
|
-
|
|
7
|
-
const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
|
|
8
|
-
|
|
9
|
-
const getItems = q =>
|
|
10
|
-
Promise.resolve(
|
|
11
|
-
['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
|
|
12
|
-
x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
|
|
13
|
-
),
|
|
14
|
-
).then(delay(500));
|
|
15
|
-
|
|
16
|
-
const tokenColors = {
|
|
17
|
-
First: {
|
|
18
|
-
idle: 'grayIdle',
|
|
19
|
-
active: 'grayActive',
|
|
20
|
-
},
|
|
21
|
-
Second: {
|
|
22
|
-
idle: 'blueIdle',
|
|
23
|
-
active: 'blueActive',
|
|
24
|
-
},
|
|
25
|
-
Third: {
|
|
26
|
-
idle: 'greenIdle',
|
|
27
|
-
active: 'greenActive',
|
|
28
|
-
},
|
|
29
|
-
Fourth: {
|
|
30
|
-
idle: 'yellowIdle',
|
|
31
|
-
active: 'yellowActive',
|
|
32
|
-
},
|
|
33
|
-
Fifth: {
|
|
34
|
-
idle: 'redIdle',
|
|
35
|
-
active: 'redActive',
|
|
36
|
-
},
|
|
37
|
-
Sixth: {
|
|
38
|
-
idle: 'white',
|
|
39
|
-
active: 'black',
|
|
40
|
-
},
|
|
41
|
-
default: {
|
|
42
|
-
idle: 'defaultIdle',
|
|
43
|
-
active: 'defaultActive',
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
<div style={{ width: '300px' }}>
|
|
48
|
-
<TokenInput
|
|
49
|
-
type={TokenInputType.Combined}
|
|
50
|
-
getItems={getItems}
|
|
51
|
-
selectedItems={selectedItems}
|
|
52
|
-
onValueChange={setSelectedItems}
|
|
53
|
-
renderToken={(item, tokenProps) => (
|
|
54
|
-
<Token key={item.toString()} colors={tokenColors[item] || tokenColors.default} {...tokenProps}>
|
|
55
|
-
{item}
|
|
56
|
-
</Token>
|
|
57
|
-
)}
|
|
58
|
-
/>
|
|
59
|
-
</div>;
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
#### Локали по умолчанию
|
|
63
|
-
|
|
64
|
-
```typescript static
|
|
65
|
-
interface TokenInputLocale {
|
|
66
|
-
addButtonComment?: string;
|
|
67
|
-
addButtonTitle?: string;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
const ru_RU = {
|
|
71
|
-
addButtonComment: 'Нажмите запятую или пробел',
|
|
72
|
-
addButtonTitle: 'Добавить',
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
const en_GB = {
|
|
76
|
-
addButtonComment: 'Type comma or space',
|
|
77
|
-
addButtonTitle: 'Add',
|
|
78
|
-
};
|
|
79
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
import { Token } from '@skbkontur/react-ui';
|
|
3
|
+
import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
|
|
4
|
+
|
|
5
|
+
const [selectedItems, setSelectedItems] = React.useState([]);
|
|
6
|
+
|
|
7
|
+
const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
|
|
8
|
+
|
|
9
|
+
const getItems = q =>
|
|
10
|
+
Promise.resolve(
|
|
11
|
+
['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
|
|
12
|
+
x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
|
|
13
|
+
),
|
|
14
|
+
).then(delay(500));
|
|
15
|
+
|
|
16
|
+
const tokenColors = {
|
|
17
|
+
First: {
|
|
18
|
+
idle: 'grayIdle',
|
|
19
|
+
active: 'grayActive',
|
|
20
|
+
},
|
|
21
|
+
Second: {
|
|
22
|
+
idle: 'blueIdle',
|
|
23
|
+
active: 'blueActive',
|
|
24
|
+
},
|
|
25
|
+
Third: {
|
|
26
|
+
idle: 'greenIdle',
|
|
27
|
+
active: 'greenActive',
|
|
28
|
+
},
|
|
29
|
+
Fourth: {
|
|
30
|
+
idle: 'yellowIdle',
|
|
31
|
+
active: 'yellowActive',
|
|
32
|
+
},
|
|
33
|
+
Fifth: {
|
|
34
|
+
idle: 'redIdle',
|
|
35
|
+
active: 'redActive',
|
|
36
|
+
},
|
|
37
|
+
Sixth: {
|
|
38
|
+
idle: 'white',
|
|
39
|
+
active: 'black',
|
|
40
|
+
},
|
|
41
|
+
default: {
|
|
42
|
+
idle: 'defaultIdle',
|
|
43
|
+
active: 'defaultActive',
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
<div style={{ width: '300px' }}>
|
|
48
|
+
<TokenInput
|
|
49
|
+
type={TokenInputType.Combined}
|
|
50
|
+
getItems={getItems}
|
|
51
|
+
selectedItems={selectedItems}
|
|
52
|
+
onValueChange={setSelectedItems}
|
|
53
|
+
renderToken={(item, tokenProps) => (
|
|
54
|
+
<Token key={item.toString()} colors={tokenColors[item] || tokenColors.default} {...tokenProps}>
|
|
55
|
+
{item}
|
|
56
|
+
</Token>
|
|
57
|
+
)}
|
|
58
|
+
/>
|
|
59
|
+
</div>;
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
#### Локали по умолчанию
|
|
63
|
+
|
|
64
|
+
```typescript static
|
|
65
|
+
interface TokenInputLocale {
|
|
66
|
+
addButtonComment?: string;
|
|
67
|
+
addButtonTitle?: string;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
const ru_RU = {
|
|
71
|
+
addButtonComment: 'Нажмите запятую или пробел',
|
|
72
|
+
addButtonTitle: 'Добавить',
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const en_GB = {
|
|
76
|
+
addButtonComment: 'Type comma or space',
|
|
77
|
+
addButtonTitle: 'Add',
|
|
78
|
+
};
|
|
79
|
+
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { PopupPositionsType } from '../../internal/Popup';
|
|
3
3
|
import { Nullable } from '../../typings/utility-types';
|
|
4
4
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
5
5
|
export declare type TooltipTrigger =
|
|
@@ -41,7 +41,10 @@ export interface TooltipProps extends CommonProps {
|
|
|
41
41
|
* Если эта функция вернула `null`, то тултип не показывается.
|
|
42
42
|
*/
|
|
43
43
|
render?: Nullable<() => React.ReactNode>;
|
|
44
|
-
|
|
44
|
+
/**
|
|
45
|
+
* Значение по умолчанию: `"top left"`.
|
|
46
|
+
*/
|
|
47
|
+
pos: PopupPositionsType;
|
|
45
48
|
/**
|
|
46
49
|
* Триггер открытия тултипа
|
|
47
50
|
* ```ts
|
|
@@ -80,24 +83,8 @@ export interface TooltipProps extends CommonProps {
|
|
|
80
83
|
* будет выходить за край экрана, то будет выбрана
|
|
81
84
|
* следующая позиция. Обязательно должен включать
|
|
82
85
|
* позицию указанную в `pos`
|
|
83
|
-
*
|
|
84
|
-
* ```ts
|
|
85
|
-
* type PopupPosition =
|
|
86
|
-
* 'right bottom',
|
|
87
|
-
* | 'right middle',
|
|
88
|
-
* | 'right top',
|
|
89
|
-
* | 'top right',
|
|
90
|
-
* | 'top center',
|
|
91
|
-
* | 'top left',
|
|
92
|
-
* | 'left top',
|
|
93
|
-
* | 'left middle',
|
|
94
|
-
* | 'left bottom',
|
|
95
|
-
* | 'bottom left',
|
|
96
|
-
* | 'bottom center',
|
|
97
|
-
* | 'bottom right'
|
|
98
|
-
* ```
|
|
99
86
|
*/
|
|
100
|
-
allowedPositions:
|
|
87
|
+
allowedPositions: PopupPositionsType[];
|
|
101
88
|
/**
|
|
102
89
|
* Флаг отключения анимации.
|
|
103
90
|
* @default false
|
|
@@ -120,9 +107,9 @@ export declare class Tooltip extends React.PureComponent<TooltipProps, TooltipSt
|
|
|
120
107
|
children(props: TooltipProps, propName: keyof TooltipProps, componentName: string): void;
|
|
121
108
|
};
|
|
122
109
|
static defaultProps: {
|
|
123
|
-
pos:
|
|
110
|
+
pos: "top left";
|
|
124
111
|
trigger: string;
|
|
125
|
-
allowedPositions:
|
|
112
|
+
allowedPositions: ("top left" | "top center" | "top right" | "right top" | "right middle" | "right bottom" | "bottom right" | "bottom center" | "bottom left" | "left bottom" | "left middle" | "left top")[];
|
|
126
113
|
disableAnimations: boolean;
|
|
127
114
|
useWrapper: boolean;
|
|
128
115
|
closeOnChildrenMouseLeave: boolean;
|
|
@@ -17,32 +17,6 @@ var _rootNode = require("../../lib/rootNode");
|
|
|
17
17
|
|
|
18
18
|
var _Tooltip = require("./Tooltip.styles");var _class, _class2, _temp;
|
|
19
19
|
|
|
20
|
-
var Positions = [
|
|
21
|
-
'right bottom',
|
|
22
|
-
'right middle',
|
|
23
|
-
'right top',
|
|
24
|
-
'top right',
|
|
25
|
-
'top center',
|
|
26
|
-
'top left',
|
|
27
|
-
'left top',
|
|
28
|
-
'left middle',
|
|
29
|
-
'left bottom',
|
|
30
|
-
'bottom left',
|
|
31
|
-
'bottom center',
|
|
32
|
-
'bottom right'];var
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
20
|
|
|
47
21
|
|
|
48
22
|
|
|
@@ -158,6 +132,19 @@ var Positions = [
|
|
|
158
132
|
|
|
159
133
|
|
|
160
134
|
|
|
135
|
+
var Positions = [
|
|
136
|
+
'right bottom',
|
|
137
|
+
'right middle',
|
|
138
|
+
'right top',
|
|
139
|
+
'top right',
|
|
140
|
+
'top center',
|
|
141
|
+
'top left',
|
|
142
|
+
'left top',
|
|
143
|
+
'left middle',
|
|
144
|
+
'left bottom',
|
|
145
|
+
'bottom left',
|
|
146
|
+
'bottom center',
|
|
147
|
+
'bottom right'];var
|
|
161
148
|
|
|
162
149
|
|
|
163
150
|
|
|
@@ -551,4 +538,4 @@ Tooltip = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/funct
|
|
|
551
538
|
* Программно закрывает тултип.
|
|
552
539
|
* <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
|
|
553
540
|
* @public
|
|
554
|
-
*/;_proto.hide = function hide() {if (this.props.trigger === 'opened' || this.props.trigger === 'closed') {(0, _warning.default)(true, "Function 'hide' is not supported with trigger specified '" + this.props.trigger + "'");return;}this.close();};_proto.renderMain = function renderMain() {var props = this.props;var content = this.renderContent();var _this$getProps = this.getProps(),popupProps = _this$getProps.popupProps,_this$getProps$layerP = _this$getProps.layerProps,layerProps = _this$getProps$layerP === void 0 ? { active: false } : _this$getProps$layerP;var anchorElement = props.children || props.anchorElement;var popup = this.renderPopup(anchorElement, popupProps, content);return /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, (0, _extends2.default)({}, layerProps, { getAnchorElement: this.getRenderLayerAnchorElement }), popup);};_proto.renderPopup = function renderPopup(anchorElement, popupProps, content) {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, (0, _extends2.default)({ anchorElement: anchorElement, hasPin: true, hasShadow: true, maxWidth: "none", opened: this.state.opened, disableAnimations: this.props.disableAnimations, positions: this.getPositions(), ignoreHover: this.props.trigger === 'hoverAnchor', onOpen: this.props.onOpen, onClose: this.props.onClose, tryPreserveFirstRenderedPosition: true }, popupProps), content));};_proto.getPositions = function getPositions() {if (!this.positions) {var allowedPositions = this.props.allowedPositions;var index = allowedPositions.indexOf(this.props.pos);if (index === -1) {throw new Error('Unexpected position passed to Tooltip. Expected one of: ' + allowedPositions.join(', '));}this.positions = [].concat(allowedPositions.slice(index), allowedPositions.slice(0, index));}return this.positions;};_proto.getProps = function getProps() {var props = this.props;var useWrapper = !!props.children && props.useWrapper;switch (props.trigger) {case 'opened':return { layerProps: { active: true, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { opened: true, useWrapper: useWrapper } };case 'closed':return { popupProps: { opened: false, useWrapper: useWrapper } };case 'hoverAnchor':case 'hover':return { popupProps: { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };case 'manual':return { popupProps: { useWrapper: useWrapper } };case 'click':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onClick: this.handleClick, useWrapper: useWrapper } };case 'focus':return { popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, useWrapper: useWrapper } };case 'hover&focus':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };default:throw new Error('Unknown trigger specified: ' + props.trigger);}};_proto.clearHoverTimeout = function clearHoverTimeout() {if (this.hoverTimeout) {clearTimeout(this.hoverTimeout);this.hoverTimeout = null;}};_proto.isClickOutsideContent = function isClickOutsideContent(event) {if (this.contentElement && event.target instanceof Element) {return !(0, _listenFocusOutside.containsTargetOrRenderContainer)(event.target)(this.contentElement);}return true;};return Tooltip;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Tooltip', _class2.propTypes = { children: function children(props, propName, componentName) {var children = props[propName];(0, _warning.default)(children || props.anchorElement, "[" + componentName + "]: you must provide either 'children' or 'anchorElement' prop for " + componentName + " to work properly");(0, _warning.default)(!(Array.isArray(children) && props.useWrapper === false), "[" + componentName + "]: you provided multiple children, but useWrapper={false} - forcing wrapper <span/> for positioning to work correctly");} }, _class2.defaultProps = { pos:
|
|
541
|
+
*/;_proto.hide = function hide() {if (this.props.trigger === 'opened' || this.props.trigger === 'closed') {(0, _warning.default)(true, "Function 'hide' is not supported with trigger specified '" + this.props.trigger + "'");return;}this.close();};_proto.renderMain = function renderMain() {var props = this.props;var content = this.renderContent();var _this$getProps = this.getProps(),popupProps = _this$getProps.popupProps,_this$getProps$layerP = _this$getProps.layerProps,layerProps = _this$getProps$layerP === void 0 ? { active: false } : _this$getProps$layerP;var anchorElement = props.children || props.anchorElement;var popup = this.renderPopup(anchorElement, popupProps, content);return /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, (0, _extends2.default)({}, layerProps, { getAnchorElement: this.getRenderLayerAnchorElement }), popup);};_proto.renderPopup = function renderPopup(anchorElement, popupProps, content) {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, (0, _extends2.default)({ anchorElement: anchorElement, hasPin: true, hasShadow: true, maxWidth: "none", opened: this.state.opened, disableAnimations: this.props.disableAnimations, positions: this.getPositions(), ignoreHover: this.props.trigger === 'hoverAnchor', onOpen: this.props.onOpen, onClose: this.props.onClose, tryPreserveFirstRenderedPosition: true }, popupProps), content));};_proto.getPositions = function getPositions() {if (!this.positions) {var allowedPositions = this.props.allowedPositions;var index = allowedPositions.indexOf(this.props.pos);if (index === -1) {throw new Error('Unexpected position passed to Tooltip. Expected one of: ' + allowedPositions.join(', '));}this.positions = [].concat(allowedPositions.slice(index), allowedPositions.slice(0, index));}return this.positions;};_proto.getProps = function getProps() {var props = this.props;var useWrapper = !!props.children && props.useWrapper;switch (props.trigger) {case 'opened':return { layerProps: { active: true, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { opened: true, useWrapper: useWrapper } };case 'closed':return { popupProps: { opened: false, useWrapper: useWrapper } };case 'hoverAnchor':case 'hover':return { popupProps: { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };case 'manual':return { popupProps: { useWrapper: useWrapper } };case 'click':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onClick: this.handleClick, useWrapper: useWrapper } };case 'focus':return { popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, useWrapper: useWrapper } };case 'hover&focus':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };default:throw new Error('Unknown trigger specified: ' + props.trigger);}};_proto.clearHoverTimeout = function clearHoverTimeout() {if (this.hoverTimeout) {clearTimeout(this.hoverTimeout);this.hoverTimeout = null;}};_proto.isClickOutsideContent = function isClickOutsideContent(event) {if (this.contentElement && event.target instanceof Element) {return !(0, _listenFocusOutside.containsTargetOrRenderContainer)(event.target)(this.contentElement);}return true;};return Tooltip;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Tooltip', _class2.propTypes = { children: function children(props, propName, componentName) {var children = props[propName];(0, _warning.default)(children || props.anchorElement, "[" + componentName + "]: you must provide either 'children' or 'anchorElement' prop for " + componentName + " to work properly");(0, _warning.default)(!(Array.isArray(children) && props.useWrapper === false), "[" + componentName + "]: you provided multiple children, but useWrapper={false} - forcing wrapper <span/> for positioning to work correctly");} }, _class2.defaultProps = { pos: _Popup.DefaultPosition, trigger: 'hover', allowedPositions: Positions, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, closeOnChildrenMouseLeave: false }, _class2.delay = 100, _class2.triggersWithoutCloseButton = ['hover', 'hoverAnchor', 'focus', 'hover&focus'], _temp)) || _class;exports.Tooltip = Tooltip;
|