@skbkontur/react-ui 3.8.4 → 3.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +53 -0
- package/cjs/components/Button/Button.d.ts +66 -10
- package/cjs/components/Button/Button.js +55 -0
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.md +42 -30
- package/cjs/components/Checkbox/Checkbox.d.ts +31 -14
- package/cjs/components/Checkbox/Checkbox.js +26 -7
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.md +92 -51
- package/cjs/components/ComboBox/ComboBox.d.ts +6 -0
- package/cjs/components/ComboBox/ComboBox.js +4 -0
- package/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/cjs/components/DateInput/DateInput.d.ts +6 -0
- package/cjs/components/DateInput/DateInput.js +6 -0
- package/cjs/components/DateInput/DateInput.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.d.ts +6 -0
- package/cjs/components/DatePicker/DatePicker.js +6 -0
- package/cjs/components/DatePicker/DatePicker.js.map +1 -1
- package/cjs/components/Dropdown/Dropdown.d.ts +2 -2
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Hint/Hint.d.ts +38 -0
- package/cjs/components/Hint/Hint.js +39 -1
- package/cjs/components/Hint/Hint.js.map +1 -1
- package/cjs/components/Hint/Hint.md +40 -1
- package/cjs/components/Input/Input.d.ts +6 -2
- package/cjs/components/Input/Input.js +4 -0
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Link/Link.d.ts +28 -10
- package/cjs/components/Link/Link.js +25 -10
- package/cjs/components/Link/Link.js.map +1 -1
- package/cjs/components/Link/Link.md +73 -7
- package/cjs/components/Link/Link.mixins.js +2 -1
- package/cjs/components/Link/Link.mixins.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.d.ts +42 -7
- package/cjs/components/MenuItem/MenuItem.js +30 -0
- package/cjs/components/MenuItem/MenuItem.js.map +1 -1
- package/cjs/components/Radio/Radio.d.ts +27 -11
- package/cjs/components/Radio/Radio.js +19 -6
- package/cjs/components/Radio/Radio.js.map +1 -1
- package/cjs/components/Radio/Radio.md +36 -12
- package/cjs/components/RadioGroup/RadioGroup.d.ts +2 -2
- package/cjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/cjs/components/Select/Select.d.ts +4 -1
- package/cjs/components/Select/Select.js +3 -0
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +5 -1
- package/cjs/components/SidePage/SidePage.js +11 -16
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePage.styles.d.ts +5 -2
- package/cjs/components/SidePage/SidePage.styles.js +52 -35
- package/cjs/components/SidePage/SidePage.styles.js.map +1 -1
- package/cjs/components/SidePage/SidePageFooter.js +1 -1
- package/cjs/components/SidePage/SidePageFooter.js.map +1 -1
- package/cjs/components/SidePage/SidePageHeader.js +1 -1
- package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
- package/cjs/components/Tabs/Tab.d.ts +2 -2
- package/cjs/components/Tabs/Tab.js.map +1 -1
- package/cjs/components/Textarea/Textarea.d.ts +6 -2
- package/cjs/components/Textarea/Textarea.js +9 -2
- package/cjs/components/Textarea/Textarea.js.map +1 -1
- package/cjs/components/Textarea/Textarea.styles.d.ts +1 -0
- package/cjs/components/Textarea/Textarea.styles.js +22 -19
- package/cjs/components/Textarea/Textarea.styles.js.map +1 -1
- package/cjs/components/Toggle/Toggle.d.ts +2 -2
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/Token/Token.d.ts +6 -0
- package/cjs/components/Token/Token.js +6 -0
- package/cjs/components/Token/Token.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +6 -0
- package/cjs/components/TokenInput/TokenInput.js +23 -17
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/TokenInput/TokenInputMenu.js +1 -1
- package/cjs/components/TokenInput/TokenInputMenu.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.d.ts +3 -2
- package/cjs/components/Tooltip/Tooltip.js +3 -1
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/internal/Calendar/Calendar.js +1 -1
- package/cjs/internal/Calendar/Calendar.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.d.ts +6 -0
- package/cjs/internal/CustomComboBox/ComboBoxView.js +6 -0
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.d.ts +6 -0
- package/cjs/internal/CustomComboBox/CustomComboBox.js +11 -9
- package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.js +2 -2
- package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
- package/cjs/internal/Popup/Popup.d.ts +13 -0
- package/cjs/internal/Popup/Popup.js +34 -6
- package/cjs/internal/Popup/Popup.js.map +1 -1
- package/cjs/internal/Popup/PopupHelper.js +1 -0
- package/cjs/internal/Popup/PopupHelper.js.map +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.d.ts +0 -1
- package/cjs/internal/PopupMenu/PopupMenu.js +1 -2
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/lib/forwardRefAndName.d.ts +5 -0
- package/cjs/lib/forwardRefAndName.js +23 -0
- package/cjs/lib/forwardRefAndName.js.map +1 -0
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +66 -10
- package/components/Button/Button.md +42 -30
- package/components/Checkbox/Checkbox/Checkbox.js +4 -6
- package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.d.ts +31 -14
- package/components/Checkbox/Checkbox.md +92 -51
- package/components/ComboBox/ComboBox/ComboBox.js.map +1 -1
- package/components/ComboBox/ComboBox.d.ts +6 -0
- package/components/DateInput/DateInput/DateInput.js.map +1 -1
- package/components/DateInput/DateInput.d.ts +6 -0
- package/components/DatePicker/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +6 -0
- package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.d.ts +2 -2
- package/components/Hint/Hint/Hint.js +4 -0
- package/components/Hint/Hint/Hint.js.map +1 -1
- package/components/Hint/Hint.d.ts +38 -0
- package/components/Hint/Hint.md +40 -1
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.d.ts +6 -2
- package/components/Link/Link/Link.js +5 -12
- package/components/Link/Link/Link.js.map +1 -1
- package/components/Link/Link.d.ts +28 -10
- package/components/Link/Link.md +73 -7
- package/components/Link/Link.mixins/Link.mixins.js +1 -1
- package/components/Link/Link.mixins/Link.mixins.js.map +1 -1
- package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
- package/components/MenuItem/MenuItem.d.ts +42 -7
- package/components/Radio/Radio/Radio.js +6 -5
- package/components/Radio/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.d.ts +27 -11
- package/components/Radio/Radio.md +36 -12
- package/components/RadioGroup/RadioGroup/RadioGroup.js.map +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +2 -2
- package/components/Select/Select/Select.js.map +1 -1
- package/components/Select/Select.d.ts +4 -1
- package/components/SidePage/SidePage/SidePage.js +16 -28
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +5 -1
- package/components/SidePage/SidePage.styles/SidePage.styles.js +39 -30
- package/components/SidePage/SidePage.styles/SidePage.styles.js.map +1 -1
- package/components/SidePage/SidePage.styles.d.ts +5 -2
- package/components/SidePage/SidePageFooter/SidePageFooter.js +1 -0
- package/components/SidePage/SidePageFooter/SidePageFooter.js.map +1 -1
- package/components/SidePage/SidePageHeader/SidePageHeader.js +2 -1
- package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
- package/components/Tabs/Tab/Tab.js.map +1 -1
- package/components/Tabs/Tab.d.ts +2 -2
- package/components/Textarea/Textarea/Textarea.js +5 -3
- package/components/Textarea/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.d.ts +6 -2
- package/components/Textarea/Textarea.styles/Textarea.styles.js +12 -9
- package/components/Textarea/Textarea.styles/Textarea.styles.js.map +1 -1
- package/components/Textarea/Textarea.styles.d.ts +1 -0
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +2 -2
- package/components/Token/Token/Token.js.map +1 -1
- package/components/Token/Token.d.ts +6 -0
- package/components/TokenInput/TokenInput/TokenInput.js +30 -19
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +6 -0
- package/components/TokenInput/TokenInputMenu/TokenInputMenu.js +2 -2
- package/components/TokenInput/TokenInputMenu/TokenInputMenu.js.map +1 -1
- package/components/Tooltip/Tooltip/Tooltip.js +2 -1
- package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.d.ts +3 -2
- package/internal/Calendar/Calendar/Calendar.js +2 -1
- package/internal/Calendar/Calendar/Calendar.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js +4 -2
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView.d.ts +6 -0
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js +5 -12
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox.d.ts +6 -0
- package/internal/InputLikeText/InputLikeText/InputLikeText.js +1 -1
- package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
- package/internal/Popup/Popup/Popup.js +15 -6
- package/internal/Popup/Popup/Popup.js.map +1 -1
- package/internal/Popup/Popup.d.ts +13 -0
- package/internal/Popup/PopupHelper/PopupHelper.js +2 -1
- package/internal/Popup/PopupHelper/PopupHelper.js.map +1 -1
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +0 -1
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/PopupMenu/PopupMenu.d.ts +0 -1
- package/lib/forwardRefAndName/forwardRefAndName.js +11 -0
- package/lib/forwardRefAndName/forwardRefAndName.js.map +1 -0
- package/lib/forwardRefAndName/package.json +6 -0
- package/lib/forwardRefAndName.d.ts +5 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Link.tsx"],"names":["Link","state","focusedByTab","theme","renderMain","props","disabled","href","icon","use","loading","_button","_buttonOpened","relOrigin","rel","rest","iconElement","styles","arrow","focused","linkProps","className","root","button","buttonOpened","useDefault","useSuccess","useDanger","useGrayed","useGrayedFocus","focus","onClick","_handleClick","onFocus","_handleFocus","onBlur","_handleBlur","tabIndex","children","event","requestAnimationFrame","keyListener","isTabPressed","setState","preventDefault","render","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string","oneOfType","node","oneOf","defaultProps"],"mappings":"8bAAA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;;AAEA
|
|
1
|
+
{"version":3,"sources":["Link.tsx"],"names":["Link","state","focusedByTab","theme","renderMain","props","disabled","href","icon","use","loading","_button","_buttonOpened","relOrigin","rel","rest","iconElement","styles","arrow","focused","linkProps","className","root","button","buttonOpened","useDefault","useSuccess","useDanger","useGrayed","useGrayedFocus","focus","onClick","_handleClick","onFocus","_handleFocus","onBlur","_handleBlur","tabIndex","children","event","requestAnimationFrame","keyListener","isTabPressed","setState","preventDefault","render","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string","oneOfType","node","oneOf","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Override } from '../../typings/utility-types';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Link.styles';\n\nexport interface LinkProps\n extends CommonProps,\n Override<\n React.AnchorHTMLAttributes<HTMLAnchorElement>,\n {\n /**\n * Отключенное состояние.\n */\n disabled?: boolean;\n /**\n * HTML-атрибут `href`.\n */\n href?: string;\n /**\n * Добавляет ссылке иконку.\n */\n icon?: React.ReactElement<any>;\n /**\n * Тема ссылки.\n */\n use?: 'default' | 'success' | 'danger' | 'grayed';\n /**\n * @ignore\n */\n _button?: boolean;\n /**\n * @ignore\n */\n _buttonOpened?: boolean;\n /**\n * HTML-атрибут `tabindex`.\n */\n tabIndex?: number;\n /**\n * Переводит ссылку в состояние загрузки.\n */\n loading?: boolean;\n /**\n * HTML-событие `onclick`.\n */\n onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n }\n > {}\n\nexport interface LinkState {\n focusedByTab: boolean;\n}\n\n/**\n * Элемент ссылки из HTML.\n */\nexport class Link extends React.Component<LinkProps, LinkState> {\n public static __KONTUR_REACT_UI__ = 'Link';\n\n public static propTypes = {\n disabled: PropTypes.bool,\n\n href: PropTypes.string,\n\n icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\n use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']),\n };\n\n public static defaultProps = {\n href: '',\n use: 'default',\n };\n\n public state = {\n focusedByTab: false,\n };\n\n private theme!: Theme;\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain = (props: CommonWrapperRestProps<LinkProps>) => {\n const { disabled, href, icon, use, loading, _button, _buttonOpened, rel: relOrigin, ...rest } = props;\n\n let iconElement = null;\n if (icon) {\n iconElement = (\n <span className={styles.icon(this.theme)}>\n {loading ? <Spinner caption={null} dimmed type=\"mini\" /> : icon}\n </span>\n );\n }\n\n let arrow = null;\n if (_button) {\n arrow = <span className={styles.arrow()} />;\n }\n\n let rel = relOrigin;\n if (typeof rel === 'undefined' && href) {\n rel = `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n }\n\n const focused = !disabled && this.state.focusedByTab;\n\n const linkProps = {\n className: cx({\n [styles.root(this.theme)]: true,\n [styles.button(this.theme)]: !!_button,\n [styles.buttonOpened()]: !!_buttonOpened,\n [styles.useDefault(this.theme)]: use === 'default',\n [styles.useSuccess(this.theme)]: use === 'success',\n [styles.useDanger(this.theme)]: use === 'danger',\n [styles.useGrayed(this.theme)]: use === 'grayed',\n [styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n [styles.focus(this.theme)]: focused,\n [styles.disabled(this.theme)]: !!disabled || !!loading,\n }),\n href,\n rel,\n onClick: this._handleClick,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n tabIndex: disabled || loading ? -1 : this.props.tabIndex,\n };\n\n return (\n <a {...rest} {...linkProps}>\n {iconElement}\n {this.props.children}\n {arrow}\n </a>\n );\n };\n\n private _handleFocus = (event: React.FocusEvent<HTMLAnchorElement>) => {\n if (!this.props.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n }\n };\n\n private _handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n\n private _handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n const { href, onClick, disabled, loading } = this.props;\n if (!href) {\n event.preventDefault();\n }\n if (onClick && !disabled && !loading) {\n onClick(event);\n }\n };\n}\n"]}
|
|
@@ -1,11 +1,77 @@
|
|
|
1
|
+
Базовый пример ссылки.
|
|
2
|
+
|
|
1
3
|
```jsx harmony
|
|
2
|
-
|
|
4
|
+
<Link>Обычная ссылка</Link>
|
|
5
|
+
```
|
|
3
6
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
Ссылка может иметь различные стили, а также быть отключенной.
|
|
8
|
+
|
|
9
|
+
```jsx harmony
|
|
10
|
+
import { Gapped } from '@skbkontur/react-ui';
|
|
11
|
+
|
|
12
|
+
<Gapped gap={15}>
|
|
13
|
+
<Link>Обычная ссылка</Link>
|
|
14
|
+
<Link use="success">Успешная ссылка</Link>
|
|
15
|
+
<Link use="danger">Опасная ссылка</Link>
|
|
16
|
+
<Link use="grayed">Работающая ссылка серого цвета</Link>
|
|
17
|
+
<Link disabled>Отключенная ссылка</Link>
|
|
10
18
|
</Gapped>;
|
|
11
19
|
```
|
|
20
|
+
|
|
21
|
+
Пример ссылки с иконкой.
|
|
22
|
+
|
|
23
|
+
```jsx harmony
|
|
24
|
+
import OkIcon from '@skbkontur/react-icons/Ok';
|
|
25
|
+
|
|
26
|
+
<Link icon={<OkIcon />}>Ссылка с иконкой</Link>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Пример ссылок ведущих на внешние ресурсы.
|
|
30
|
+
|
|
31
|
+
_Примечание_:
|
|
32
|
+
|
|
33
|
+
Если в контрол `Link` передана ссылка, ведущая на внешний ресурс, контрол `Link` неявно добавит атрибут `rel` со значением необходимым для внешних ссылок, при этом не трогая атрибут `target`.
|
|
34
|
+
|
|
35
|
+
Открытие ссылки в новой вкладке остаётся на усмотрение разработчика.
|
|
36
|
+
|
|
37
|
+
```jsx harmony
|
|
38
|
+
import { Gapped } from '@skbkontur/react-ui';
|
|
39
|
+
|
|
40
|
+
<Gapped>
|
|
41
|
+
<Link href="https://www.youtube.com/">
|
|
42
|
+
Откроется <span style={{ color: "#e3071c" }}>в этой</span> вкладке
|
|
43
|
+
</Link>
|
|
44
|
+
<Link target="_blank" href="https://www.youtube.com/">
|
|
45
|
+
Откроется <span style={{ color: "#3f9726" }}>в новой</span> вкладке
|
|
46
|
+
</Link>
|
|
47
|
+
</Gapped>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Ссылка в состоянии загрузки.
|
|
51
|
+
|
|
52
|
+
**Поведение**:
|
|
53
|
+
|
|
54
|
+
Если у ссылки есть иконка, она заменяется на спиннер.
|
|
55
|
+
|
|
56
|
+
```jsx harmony
|
|
57
|
+
import { Gapped, Button } from '@skbkontur/react-ui';
|
|
58
|
+
import OkIcon from '@skbkontur/react-icons/Ok';
|
|
59
|
+
|
|
60
|
+
const [isLoading, setIsLoading] = React.useState(false);
|
|
61
|
+
|
|
62
|
+
<Gapped vertical gap={15}>
|
|
63
|
+
<Button onClick={() => setIsLoading(!isLoading)}>{isLoading ? "Прекратить загрузку!" : "Начать загрузку!"}</Button>
|
|
64
|
+
<Gapped gap={20}>
|
|
65
|
+
<Link loading={isLoading} icon={<OkIcon/>}>С иконкой</Link>
|
|
66
|
+
<Link loading={isLoading}>Без иконки</Link>
|
|
67
|
+
</Gapped>
|
|
68
|
+
</Gapped>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Ссылка может иметь кастомное действие при нажатии.
|
|
72
|
+
|
|
73
|
+
```jsx harmony
|
|
74
|
+
import { Toast } from '@skbkontur/react-ui';
|
|
75
|
+
|
|
76
|
+
<Link onClick={() => Toast.push("Ты нажал на ссылку!")}>Ссылка с кастомным действием</Link>
|
|
77
|
+
```
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
};exports.linkMixin = linkMixin;
|
|
12
12
|
|
|
13
13
|
var linkDisabledMixin = function linkDisabledMixin() {
|
|
14
|
-
return "\n box-shadow: none;\n cursor: default;\n text-decoration: none;\n\n &:hover {\n text-decoration: none;\n }\n ";
|
|
14
|
+
return "\n box-shadow: none;\n cursor: default;\n pointer-events: none;\n text-decoration: none;\n\n &:hover {\n text-decoration: none;\n }\n ";
|
|
15
|
+
|
|
15
16
|
|
|
16
17
|
|
|
17
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Link.mixins.ts"],"names":["linkMixin","hoverTextDecoration","linkDisabledMixin","linkUseColorsMixin","mainColor","hoverColor","activeColor"],"mappings":"2HAAO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,mBAAD,EAAiC;AACxD;;;;;;AAMuBA,EAAAA,mBANvB;;;AASD,CAVM,C;;AAYA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC
|
|
1
|
+
{"version":3,"sources":["Link.mixins.ts"],"names":["linkMixin","hoverTextDecoration","linkDisabledMixin","linkUseColorsMixin","mainColor","hoverColor","activeColor"],"mappings":"2HAAO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,mBAAD,EAAiC;AACxD;;;;;;AAMuBA,EAAAA,mBANvB;;;AASD,CAVM,C;;AAYA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC;;;;;;;;;;AAUD,CAXM,C;;AAaA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,SAAD,EAAoBC,UAApB,EAAwCC,WAAxC,EAAgE;AAChG;AACWF,EAAAA,SADX;;;AAIaC,EAAAA,UAJb;;;;AAQaC,EAAAA,WARb;;;AAWD,CAZM,C","sourcesContent":["export const linkMixin = (hoverTextDecoration: string) => {\n return `\n border-radius: 1px;\n outline: none;\n text-decoration: none;\n\n &:hover {\n text-decoration: ${hoverTextDecoration};\n }\n `;\n};\n\nexport const linkDisabledMixin = () => {\n return `\n box-shadow: none;\n cursor: default;\n pointer-events: none;\n text-decoration: none;\n\n &:hover {\n text-decoration: none;\n }\n `;\n};\n\nexport const linkUseColorsMixin = (mainColor: string, hoverColor: string, activeColor: string) => {\n return `\n color: ${mainColor};\n\n &:hover {\n color: ${hoverColor};\n }\n\n &:active {\n color: ${activeColor};\n }\n `;\n};\n"]}
|
|
@@ -3,29 +3,64 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
4
4
|
export declare type MenuItemState = null | 'hover' | 'selected' | void;
|
|
5
5
|
export interface MenuItemProps extends CommonProps {
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* @ignore
|
|
8
|
+
*/
|
|
7
9
|
_enableIconPadding?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Добавляет описание для элемента меню.
|
|
12
|
+
*/
|
|
8
13
|
comment?: React.ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Отключенное состояние.
|
|
16
|
+
*/
|
|
9
17
|
disabled?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Добавляет элементу меню иконку.
|
|
20
|
+
*/
|
|
10
21
|
icon?: React.ReactElement<any>;
|
|
11
22
|
/**
|
|
12
|
-
* Меняет цвет текста на
|
|
23
|
+
* Меняет цвет текста на синий.
|
|
13
24
|
*/
|
|
14
25
|
link?: boolean;
|
|
15
|
-
/**
|
|
26
|
+
/**
|
|
27
|
+
* @ignore
|
|
28
|
+
*/
|
|
16
29
|
loose?: boolean;
|
|
17
|
-
/**
|
|
30
|
+
/**
|
|
31
|
+
* @ignore
|
|
32
|
+
*/
|
|
18
33
|
state?: MenuItemState;
|
|
34
|
+
/**
|
|
35
|
+
* HTML-событие `onclick`.
|
|
36
|
+
*/
|
|
19
37
|
onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
|
|
38
|
+
/**
|
|
39
|
+
* HTML-событие `mouseenter`.
|
|
40
|
+
*/
|
|
41
|
+
onMouseEnter?: React.MouseEventHandler;
|
|
42
|
+
/**
|
|
43
|
+
* HTML-событие `mouseleave`.
|
|
44
|
+
*/
|
|
45
|
+
onMouseLeave?: React.MouseEventHandler;
|
|
20
46
|
children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);
|
|
47
|
+
/**
|
|
48
|
+
* HTML-атрибут `target`.
|
|
49
|
+
*/
|
|
21
50
|
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
22
51
|
/**
|
|
23
|
-
* HTML-атрибут title
|
|
52
|
+
* HTML-атрибут `title`.
|
|
24
53
|
*/
|
|
25
54
|
title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];
|
|
55
|
+
/**
|
|
56
|
+
* HTML-атрибут `href`.
|
|
57
|
+
*/
|
|
26
58
|
href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
|
|
27
|
-
|
|
28
|
-
|
|
59
|
+
/**
|
|
60
|
+
* Заменяет корневой элемент, на компонент переданный в проп.
|
|
61
|
+
*
|
|
62
|
+
* По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.
|
|
63
|
+
*/
|
|
29
64
|
component?: React.ComponentType<any>;
|
|
30
65
|
}
|
|
31
66
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","theme","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","styles","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"udAAA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA
|
|
1
|
+
{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","theme","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","styles","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps extends CommonProps {\n /**\n * @ignore\n */\n _enableIconPadding?: boolean;\n /**\n * Добавляет описание для элемента меню.\n */\n comment?: React.ReactNode;\n /**\n * Отключенное состояние.\n */\n disabled?: boolean;\n /**\n * Добавляет элементу меню иконку.\n */\n icon?: React.ReactElement<any>;\n /**\n * Меняет цвет текста на синий.\n */\n link?: boolean;\n /**\n * @ignore\n */\n loose?: boolean;\n /**\n * @ignore\n */\n state?: MenuItemState;\n /**\n * HTML-событие `onclick`.\n */\n onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n /**\n * HTML-событие `mouseenter`.\n */\n onMouseEnter?: React.MouseEventHandler;\n /**\n * HTML-событие `mouseleave`.\n */\n onMouseLeave?: React.MouseEventHandler;\n children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n /**\n * HTML-атрибут `target`.\n */\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n /**\n * HTML-атрибут `title`.\n */\n title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n /**\n * HTML-атрибут `href`.\n */\n href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n /**\n * Заменяет корневой элемент, на компонент переданный в проп.\n *\n * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n */\n component?: React.ComponentType<any>;\n}\n\n/**\n *\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nexport class MenuItem extends React.Component<MenuItemProps> {\n public static __KONTUR_REACT_UI__ = 'MenuItem';\n public static __MENU_ITEM__ = true;\n\n public static propTypes = {\n comment: PropTypes.node,\n\n disabled: PropTypes.bool,\n\n href: PropTypes.string,\n\n icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\n loose: PropTypes.bool,\n\n state: PropTypes.string,\n\n target: PropTypes.string,\n\n onClick: PropTypes.func,\n };\n\n private theme!: Theme;\n private mouseEntered = false;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n const { link, comment, icon, loose, state, _enableIconPadding, component, onMouseEnter, onMouseLeave, ...rest } =\n props;\n\n const hover = state === 'hover' && !this.props.disabled;\n\n let iconElement = null;\n if (icon) {\n iconElement = <div className={styles.icon(this.theme)}>{icon}</div>;\n }\n\n const className = cx({\n [styles.root(this.theme)]: true,\n [styles.loose()]: !!loose,\n [styles.hover(this.theme)]: hover,\n [styles.selected(this.theme)]: state === 'selected',\n [styles.link(this.theme)]: !!link,\n [styles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\n [styles.disabled(this.theme)]: !!this.props.disabled,\n });\n\n const { children } = this.props;\n\n let content = children;\n if (isFunction(children)) {\n content = children(this.props.state);\n }\n\n const Component = this.getComponent();\n\n return (\n <Component\n {...rest}\n state={state}\n onMouseOver={this.handleMouseEnterFix}\n onMouseLeave={this.handleMouseLeave}\n className={className}\n tabIndex={-1}\n >\n {iconElement}\n {content}\n {this.props.comment && (\n <div\n data-tid=\"MenuItem__comment\"\n className={cx({\n [styles.comment(this.theme)]: true,\n [styles.commentHover(this.theme)]: hover,\n })}\n >\n {comment}\n </div>\n )}\n </Component>\n );\n };\n\n // https://github.com/facebook/react/issues/10109\n // Mouseenter event not triggered when cursor moves from disabled button\n private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n if (!this.mouseEntered && this.props.onMouseEnter) {\n this.mouseEntered = true;\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n this.mouseEntered = false;\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private getComponent = () => {\n const { disabled, component, href } = this.props;\n\n if (disabled) {\n return 'button';\n }\n\n if (component) {\n return component;\n }\n\n if (href) {\n return 'a';\n }\n\n return 'button';\n };\n}\n\nexport const isMenuItem = (child: React.ReactNode): child is React.ReactElement<MenuItemProps> => {\n return React.isValidElement<MenuItemProps>(child)\n ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_ITEM__')\n : false;\n};\n"]}
|
|
@@ -3,30 +3,46 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { Override } from '../../typings/utility-types';
|
|
4
4
|
import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
|
|
5
5
|
export interface RadioProps<T> extends CommonProps, Override<React.InputHTMLAttributes<HTMLInputElement>, {
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Cостояние валидации при ошибке.
|
|
8
|
+
*/
|
|
7
9
|
error?: boolean;
|
|
8
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* Cостояние валидации при предупреждении.
|
|
12
|
+
*/
|
|
9
13
|
warning?: boolean;
|
|
10
|
-
/**
|
|
14
|
+
/**
|
|
15
|
+
* Состояние фокуса.
|
|
16
|
+
*/
|
|
11
17
|
focused?: boolean;
|
|
12
|
-
/**
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
hovered?: boolean;
|
|
16
|
-
/** Состояние active */
|
|
17
|
-
active?: boolean;
|
|
18
|
-
/** Вызывается при изменении `value` */
|
|
18
|
+
/**
|
|
19
|
+
* Функция, вызываемая при изменении `value`.
|
|
20
|
+
*/
|
|
19
21
|
onValueChange?: (value: T) => void;
|
|
22
|
+
/**
|
|
23
|
+
* HTML-событие `onmouseenter`
|
|
24
|
+
*/
|
|
20
25
|
onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
|
|
26
|
+
/**
|
|
27
|
+
* HTML-событие `mouseleave`
|
|
28
|
+
*/
|
|
21
29
|
onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
|
|
30
|
+
/**
|
|
31
|
+
* HTML-событие `onmouseover`
|
|
32
|
+
*/
|
|
22
33
|
onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
|
|
23
|
-
/**
|
|
34
|
+
/**
|
|
35
|
+
* HTML-атрибут `value`.
|
|
36
|
+
*/
|
|
24
37
|
value: T;
|
|
25
38
|
}> {
|
|
26
39
|
}
|
|
27
40
|
export interface RadioState {
|
|
28
41
|
focusedByKeyboard: boolean;
|
|
29
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.
|
|
45
|
+
*/
|
|
30
46
|
export declare class Radio<T> extends React.Component<RadioProps<T>, RadioState> {
|
|
31
47
|
static __KONTUR_REACT_UI__: string;
|
|
32
48
|
state: {
|
|
@@ -8,7 +8,7 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
|
8
8
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
9
9
|
var _keyListener = require("../../lib/events/keyListener");
|
|
10
10
|
|
|
11
|
-
var _Radio = require("./Radio.styles");
|
|
11
|
+
var _Radio = require("./Radio.styles");
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
@@ -41,6 +41,22 @@ var _Radio = require("./Radio.styles");var
|
|
|
41
41
|
|
|
42
42
|
|
|
43
43
|
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.
|
|
59
|
+
*/var
|
|
44
60
|
Radio = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Radio, _React$Component);function Radio() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
|
|
45
61
|
|
|
46
62
|
|
|
@@ -90,10 +106,7 @@ Radio = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(R
|
|
|
90
106
|
|
|
91
107
|
|
|
92
108
|
|
|
93
|
-
renderMain = function (props) {var _cx;var
|
|
94
|
-
|
|
95
|
-
active =
|
|
96
|
-
|
|
109
|
+
renderMain = function (props) {var _cx;var _props$disabled =
|
|
97
110
|
|
|
98
111
|
|
|
99
112
|
|
|
@@ -104,7 +117,7 @@ Radio = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(R
|
|
|
104
117
|
|
|
105
118
|
|
|
106
119
|
|
|
107
|
-
props.
|
|
120
|
+
props.disabled,disabled = _props$disabled === void 0 ? _this.context.disabled : _props$disabled,_props$warning = props.warning,warning = _props$warning === void 0 ? _this.context.warning : _props$warning,_props$error = props.error,error = _props$error === void 0 ? _this.context.error : _props$error,focused = props.focused,onMouseOver = props.onMouseOver,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,onValueChange = props.onValueChange,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["disabled", "warning", "error", "focused", "onMouseOver", "onMouseEnter", "onMouseLeave", "onValueChange"]);
|
|
108
121
|
|
|
109
122
|
var radioProps = {
|
|
110
123
|
className: (0, _Emotion.cx)((_cx = {}, _cx[
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Radio.tsx"],"names":["Radio","state","focusedByKeyboard","theme","inputEl","React","createRef","renderMain","props","active","disabled","context","warning","error","focused","pressed","hovered","onMouseOver","onMouseEnter","onMouseLeave","onValueChange","rest","radioProps","className","styles","radio","checked","focus","checkedDisabled","globalClasses","value","inputProps","type","input","tabIndex","ref","onChange","handleChange","onFocus","handleFocus","onBlur","handleBlur","labelProps","root","rootChecked","handleMouseOver","handleMouseEnter","handleMouseLeave","_isInRadioGroup","activeItem","name","suppressHydrationWarning","placeholder","children","renderLabel","Boolean","e","onSelect","requestAnimationFrame","keyListener","isArrowPressed","isTabPressed","setState","render","current","blur","labelClassNames","label","labelDisabled","Component","__KONTUR_REACT_UI__","contextTypes","PropTypes","any","func","string","bool","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Override } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { styles, globalClasses } from './Radio.styles';\n\nexport interface RadioProps<T>\n extends CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /** Состояние ошибки */\n error?: boolean;\n /** Состояние Предупреждения */\n warning?: boolean;\n /** Состояние фокуса */\n focused?: boolean;\n /** Состояние нажатия */\n pressed?: boolean;\n /** Состояние hover */\n hovered?: boolean;\n /** Состояние active */\n active?: boolean;\n /** Вызывается при изменении `value` */\n onValueChange?: (value: T) => void;\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n /** Значение */\n value: T;\n }\n > {}\n\nexport interface RadioState {\n focusedByKeyboard: boolean;\n}\n\nexport class Radio<T> extends React.Component<RadioProps<T>, RadioState> {\n public static __KONTUR_REACT_UI__ = 'Radio';\n\n public state = {\n focusedByKeyboard: false,\n };\n\n public static contextTypes = {\n activeItem: PropTypes.any,\n onSelect: PropTypes.func,\n name: PropTypes.string,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n warning: PropTypes.bool,\n };\n\n public static defaultProps = {\n focused: false,\n };\n\n private theme!: Theme;\n private inputEl = React.createRef<HTMLInputElement>();\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public focus() {\n keyListener.isTabPressed = true;\n this.inputEl.current?.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n this.inputEl.current?.blur();\n }\n\n public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>) => {\n const {\n active,\n disabled = this.context.disabled,\n warning = this.context.warning,\n error = this.context.error,\n focused,\n pressed,\n hovered,\n onMouseOver,\n onMouseEnter,\n onMouseLeave,\n onValueChange,\n ...rest\n } = props;\n\n const radioProps = {\n className: cx({\n [styles.radio(this.theme)]: true,\n [styles.checked(this.theme)]: this.props.checked,\n [styles.focus(this.theme)]: this.props.focused || this.state.focusedByKeyboard,\n [styles.error(this.theme)]: error,\n [styles.warning(this.theme)]: warning,\n [styles.disabled(this.theme)]: disabled,\n [styles.checkedDisabled(this.theme)]: this.props.checked && disabled,\n [globalClasses.radio]: true,\n }),\n };\n\n let value: string | number | undefined;\n if (typeof this.props.value === 'string' || typeof this.props.value === 'number') {\n value = this.props.value;\n }\n\n const inputProps = {\n ...rest,\n type: 'radio',\n className: styles.input(),\n disabled,\n tabIndex: this.props.tabIndex,\n value,\n ref: this.inputEl,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n };\n\n const labelProps = {\n className: cx(styles.root(this.theme), this.props.checked && styles.rootChecked(this.theme)),\n onMouseOver: this.handleMouseOver,\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave,\n };\n\n if (this._isInRadioGroup()) {\n const checked = this.props.value === this.context.activeItem;\n inputProps.checked = checked;\n inputProps.name = this.context.name;\n inputProps.suppressHydrationWarning = true;\n radioProps.className = cx(radioProps.className, {\n [styles.checked(this.theme)]: checked,\n [styles.checkedDisabled(this.theme)]: checked && disabled,\n });\n }\n\n return (\n <label {...labelProps}>\n <input {...inputProps} />\n <span {...radioProps}>\n <span className={styles.placeholder()} />\n </span>\n {this.props.children && this.renderLabel()}\n </label>\n );\n };\n\n private _isInRadioGroup = () => Boolean(this.context.name);\n\n private renderLabel() {\n const labelClassNames = cx({\n [styles.label(this.theme)]: true,\n [styles.labelDisabled()]: !!(this.props.disabled || this.context.disabled),\n });\n\n return <div className={labelClassNames}>{this.props.children}</div>;\n }\n\n private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n this.props.onValueChange?.(this.props.value);\n\n if (this._isInRadioGroup()) {\n this.context.onSelect(this.props.value);\n }\n\n this.props.onChange?.(e);\n };\n\n private handleMouseOver: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseOver?.(e);\n };\n\n private handleMouseEnter: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseEnter?.(e);\n };\n\n private handleMouseLeave: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseLeave?.(e);\n };\n\n private handleFocus = (e: React.FocusEvent<any>) => {\n if (!this.context.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isArrowPressed || keyListener.isTabPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n }\n };\n\n private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n this.props.onBlur?.(e);\n this.setState({ focusedByKeyboard: false });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Radio.tsx"],"names":["Radio","state","focusedByKeyboard","theme","inputEl","React","createRef","renderMain","props","disabled","context","warning","error","focused","onMouseOver","onMouseEnter","onMouseLeave","onValueChange","rest","radioProps","className","styles","radio","checked","focus","checkedDisabled","globalClasses","value","inputProps","type","input","tabIndex","ref","onChange","handleChange","onFocus","handleFocus","onBlur","handleBlur","labelProps","root","rootChecked","handleMouseOver","handleMouseEnter","handleMouseLeave","_isInRadioGroup","activeItem","name","suppressHydrationWarning","placeholder","children","renderLabel","Boolean","e","onSelect","requestAnimationFrame","keyListener","isArrowPressed","isTabPressed","setState","render","current","blur","labelClassNames","label","labelDisabled","Component","__KONTUR_REACT_UI__","contextTypes","PropTypes","any","func","string","bool","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Override } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { styles, globalClasses } from './Radio.styles';\n\nexport interface RadioProps<T>\n extends CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /**\n * Cостояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Cостояние валидации при предупреждении.\n */\n warning?: boolean;\n /**\n * Состояние фокуса.\n */\n focused?: boolean;\n /**\n * Функция, вызываемая при изменении `value`.\n */\n onValueChange?: (value: T) => void;\n /**\n * HTML-событие `onmouseenter`\n */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n /**\n * HTML-событие `mouseleave`\n */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n /**\n * HTML-событие `onmouseover`\n */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n /**\n * HTML-атрибут `value`.\n */\n value: T;\n }\n > {}\n\nexport interface RadioState {\n focusedByKeyboard: boolean;\n}\n\n/**\n * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.\n */\nexport class Radio<T> extends React.Component<RadioProps<T>, RadioState> {\n public static __KONTUR_REACT_UI__ = 'Radio';\n\n public state = {\n focusedByKeyboard: false,\n };\n\n public static contextTypes = {\n activeItem: PropTypes.any,\n onSelect: PropTypes.func,\n name: PropTypes.string,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n warning: PropTypes.bool,\n };\n\n public static defaultProps = {\n focused: false,\n };\n\n private theme!: Theme;\n private inputEl = React.createRef<HTMLInputElement>();\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public focus() {\n keyListener.isTabPressed = true;\n this.inputEl.current?.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n this.inputEl.current?.blur();\n }\n\n public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>) => {\n const {\n disabled = this.context.disabled,\n warning = this.context.warning,\n error = this.context.error,\n focused,\n onMouseOver,\n onMouseEnter,\n onMouseLeave,\n onValueChange,\n ...rest\n } = props;\n\n const radioProps = {\n className: cx({\n [styles.radio(this.theme)]: true,\n [styles.checked(this.theme)]: this.props.checked,\n [styles.focus(this.theme)]: this.props.focused || this.state.focusedByKeyboard,\n [styles.error(this.theme)]: error,\n [styles.warning(this.theme)]: warning,\n [styles.disabled(this.theme)]: disabled,\n [styles.checkedDisabled(this.theme)]: this.props.checked && disabled,\n [globalClasses.radio]: true,\n }),\n };\n\n let value: string | number | undefined;\n if (typeof this.props.value === 'string' || typeof this.props.value === 'number') {\n value = this.props.value;\n }\n\n const inputProps = {\n ...rest,\n type: 'radio',\n className: styles.input(),\n disabled,\n tabIndex: this.props.tabIndex,\n value,\n ref: this.inputEl,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n };\n\n const labelProps = {\n className: cx(styles.root(this.theme), this.props.checked && styles.rootChecked(this.theme)),\n onMouseOver: this.handleMouseOver,\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave,\n };\n\n if (this._isInRadioGroup()) {\n const checked = this.props.value === this.context.activeItem;\n inputProps.checked = checked;\n inputProps.name = this.context.name;\n inputProps.suppressHydrationWarning = true;\n radioProps.className = cx(radioProps.className, {\n [styles.checked(this.theme)]: checked,\n [styles.checkedDisabled(this.theme)]: checked && disabled,\n });\n }\n\n return (\n <label {...labelProps}>\n <input {...inputProps} />\n <span {...radioProps}>\n <span className={styles.placeholder()} />\n </span>\n {this.props.children && this.renderLabel()}\n </label>\n );\n };\n\n private _isInRadioGroup = () => Boolean(this.context.name);\n\n private renderLabel() {\n const labelClassNames = cx({\n [styles.label(this.theme)]: true,\n [styles.labelDisabled()]: !!(this.props.disabled || this.context.disabled),\n });\n\n return <div className={labelClassNames}>{this.props.children}</div>;\n }\n\n private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n this.props.onValueChange?.(this.props.value);\n\n if (this._isInRadioGroup()) {\n this.context.onSelect(this.props.value);\n }\n\n this.props.onChange?.(e);\n };\n\n private handleMouseOver: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseOver?.(e);\n };\n\n private handleMouseEnter: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseEnter?.(e);\n };\n\n private handleMouseLeave: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseLeave?.(e);\n };\n\n private handleFocus = (e: React.FocusEvent<any>) => {\n if (!this.context.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isArrowPressed || keyListener.isTabPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n }\n };\n\n private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n this.props.onBlur?.(e);\n this.setState({ focusedByKeyboard: false });\n };\n}\n"]}
|
|
@@ -1,14 +1,38 @@
|
|
|
1
|
+
Различные виды радио-кнопок.
|
|
2
|
+
|
|
3
|
+
```jsx harmony
|
|
4
|
+
import { Gapped, Radio, RadioGroup } from '@skbkontur/react-ui';
|
|
5
|
+
|
|
6
|
+
const [chosen, setChosen] = React.useState(null);
|
|
7
|
+
|
|
8
|
+
<RadioGroup onValueChange={(value) => setChosen(value)}>
|
|
9
|
+
<Gapped gap={3} vertical>
|
|
10
|
+
<Radio value={1}>
|
|
11
|
+
Обычная радио-кнопка
|
|
12
|
+
</Radio>
|
|
13
|
+
<Radio value={2} disabled>
|
|
14
|
+
Отключенная радио-кнопка
|
|
15
|
+
</Radio>
|
|
16
|
+
<Radio value={3} checked={!chosen}>
|
|
17
|
+
Радио-кнопка отмеченная по умолчанию
|
|
18
|
+
</Radio>
|
|
19
|
+
<Radio value={4} focused>
|
|
20
|
+
Радио-кнопка в состоянии <b>focused</b> (меняется только обводка)
|
|
21
|
+
</Radio>
|
|
22
|
+
<Radio value={5} error>
|
|
23
|
+
Радио-кнопка в состоянии <b>error</b>
|
|
24
|
+
</Radio>
|
|
25
|
+
<Radio value={6} warning>
|
|
26
|
+
Радио-кнопка в состоянии <b>warning</b>
|
|
27
|
+
</Radio>
|
|
28
|
+
</Gapped>
|
|
29
|
+
</RadioGroup>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Радио-кнопки могут иметь сразу несколько состояний.
|
|
33
|
+
|
|
1
34
|
```jsx harmony
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<Radio value="value" />
|
|
6
|
-
<Radio value="value" disabled />
|
|
7
|
-
<Radio value="value" disabled checked />
|
|
8
|
-
<Radio value="value" checked />
|
|
9
|
-
<Radio value="value" focused />
|
|
10
|
-
<Radio value="value" focused checked />
|
|
11
|
-
<Radio value="value" error />
|
|
12
|
-
<Radio value="value" warning />
|
|
13
|
-
</Gapped>;
|
|
35
|
+
<Radio disabled checked warning>
|
|
36
|
+
Отключенная, отмеченная радио-кнопка в состоянии <b>warning</b>
|
|
37
|
+
</Radio>
|
|
14
38
|
```
|
|
@@ -33,11 +33,11 @@ export interface RadioGroupProps<T = string | number> extends CommonProps {
|
|
|
33
33
|
*/
|
|
34
34
|
disabled?: boolean;
|
|
35
35
|
/**
|
|
36
|
-
* Переводит все радиокнопки в состояние
|
|
36
|
+
* Переводит все радиокнопки в состояние валидации: предупреждение.
|
|
37
37
|
*/
|
|
38
38
|
warning?: boolean;
|
|
39
39
|
/**
|
|
40
|
-
* Переводит все радиокнопки в состояние
|
|
40
|
+
* Переводит все радиокнопки в состояние валидации: ошибка.
|
|
41
41
|
*/
|
|
42
42
|
error?: boolean;
|
|
43
43
|
/**
|