@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":["React","PropTypes","keyListener","ThemeContext","isExternalLink","Spinner","CommonWrapper","cx","styles","Link","state","focusedByTab","theme","renderMain","props","disabled","href","icon","use","loading","_button","_buttonOpened","relOrigin","rel","rest","iconElement","arrow","focused","linkProps","className","root","button","buttonOpened","useDefault","useSuccess","useDanger","useGrayed","useGrayedFocus","focus","onClick","_handleClick","onFocus","_handleFocus","onBlur","_handleBlur","tabIndex","children","event","requestAnimationFrame","isTabPressed","setState","preventDefault","render","Component","__KONTUR_REACT_UI__","propTypes","bool","string","oneOfType","node","oneOf","defaultProps"],"mappings":"oOAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;;AAGA,SAASC,WAAT,QAA4B,8BAA5B;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,cAAT,QAA+B,iBAA/B;AACA,SAASC,OAAT,QAAwB,YAAxB;AACA,SAASC,aAAT,QAAmE,8BAAnE;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,eAAvB
|
|
1
|
+
{"version":3,"sources":["Link.tsx"],"names":["React","PropTypes","keyListener","ThemeContext","isExternalLink","Spinner","CommonWrapper","cx","styles","Link","state","focusedByTab","theme","renderMain","props","disabled","href","icon","use","loading","_button","_buttonOpened","relOrigin","rel","rest","iconElement","arrow","focused","linkProps","className","root","button","buttonOpened","useDefault","useSuccess","useDanger","useGrayed","useGrayedFocus","focus","onClick","_handleClick","onFocus","_handleFocus","onBlur","_handleBlur","tabIndex","children","event","requestAnimationFrame","isTabPressed","setState","preventDefault","render","Component","__KONTUR_REACT_UI__","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"]}
|
|
@@ -3,20 +3,41 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { Override } from '../../typings/utility-types';
|
|
4
4
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
5
5
|
export interface LinkProps extends CommonProps, Override<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Отключенное состояние.
|
|
8
|
+
*/
|
|
7
9
|
disabled?: boolean;
|
|
8
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* HTML-атрибут `href`.
|
|
12
|
+
*/
|
|
9
13
|
href?: string;
|
|
10
|
-
/**
|
|
14
|
+
/**
|
|
15
|
+
* Добавляет ссылке иконку.
|
|
16
|
+
*/
|
|
11
17
|
icon?: React.ReactElement<any>;
|
|
12
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* Тема ссылки.
|
|
20
|
+
*/
|
|
13
21
|
use?: 'default' | 'success' | 'danger' | 'grayed';
|
|
22
|
+
/**
|
|
23
|
+
* @ignore
|
|
24
|
+
*/
|
|
14
25
|
_button?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* @ignore
|
|
28
|
+
*/
|
|
15
29
|
_buttonOpened?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* HTML-атрибут `tabindex`.
|
|
32
|
+
*/
|
|
16
33
|
tabIndex?: number;
|
|
17
|
-
/**
|
|
34
|
+
/**
|
|
35
|
+
* Переводит ссылку в состояние загрузки.
|
|
36
|
+
*/
|
|
18
37
|
loading?: boolean;
|
|
19
|
-
/**
|
|
38
|
+
/**
|
|
39
|
+
* HTML-событие `onclick`.
|
|
40
|
+
*/
|
|
20
41
|
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
21
42
|
}> {
|
|
22
43
|
}
|
|
@@ -24,10 +45,7 @@ export interface LinkState {
|
|
|
24
45
|
focusedByTab: boolean;
|
|
25
46
|
}
|
|
26
47
|
/**
|
|
27
|
-
*
|
|
28
|
-
* Интерфес пропсов наследуется от `React.AnchorHTMLAttributes<HTMLAnchorElement>`.
|
|
29
|
-
* Все свойства передаются в элемент `<a>`.
|
|
30
|
-
* `className` и `style` не поддерживаются
|
|
48
|
+
* Элемент ссылки из HTML.
|
|
31
49
|
*/
|
|
32
50
|
export declare class Link extends React.Component<LinkProps, LinkState> {
|
|
33
51
|
static __KONTUR_REACT_UI__: string;
|
package/components/Link/Link.md
CHANGED
|
@@ -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
|
+
```
|
|
@@ -2,7 +2,7 @@ export var linkMixin = function linkMixin(hoverTextDecoration) {
|
|
|
2
2
|
return "\n border-radius: 1px;\n outline: none;\n text-decoration: none;\n\n &:hover {\n text-decoration: " + hoverTextDecoration + ";\n }\n ";
|
|
3
3
|
};
|
|
4
4
|
export var linkDisabledMixin = function linkDisabledMixin() {
|
|
5
|
-
return "\n box-shadow: none;\n cursor: default;\n text-decoration: none;\n\n &:hover {\n text-decoration: none;\n }\n ";
|
|
5
|
+
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 ";
|
|
6
6
|
};
|
|
7
7
|
export var linkUseColorsMixin = function linkUseColorsMixin(mainColor, hoverColor, activeColor) {
|
|
8
8
|
return "\n color: " + mainColor + ";\n\n &:hover {\n color: " + hoverColor + ";\n }\n\n &:active {\n color: " + activeColor + ";\n }\n ";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Link.mixins.ts"],"names":["linkMixin","hoverTextDecoration","linkDisabledMixin","linkUseColorsMixin","mainColor","hoverColor","activeColor"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,mBAAD,EAAiC;AACxD;;;;;;AAMuBA,EAAAA,mBANvB;;;AASD,CAVM;;AAYP,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC
|
|
1
|
+
{"version":3,"sources":["Link.mixins.ts"],"names":["linkMixin","hoverTextDecoration","linkDisabledMixin","linkUseColorsMixin","mainColor","hoverColor","activeColor"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,mBAAD,EAAiC;AACxD;;;;;;AAMuBA,EAAAA,mBANvB;;;AASD,CAVM;;AAYP,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC;;;;;;;;;;AAUD,CAXM;;AAaP,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,SAAD,EAAoBC,UAApB,EAAwCC,WAAxC,EAAgE;AAChG;AACWF,EAAAA,SADX;;;AAIaC,EAAAA,UAJb;;;;AAQaC,EAAAA,WARb;;;AAWD,CAZM","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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","isFunction","ThemeContext","CommonWrapper","cx","styles","MenuItem","theme","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","__KONTUR_REACT_UI__","__MENU_ITEM__","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 /** @ignore */\n _enableIconPadding?: boolean;\n\n comment?: React.ReactNode;\n disabled?: boolean;\n icon?: React.ReactElement<any>;\n\n /**\n * Меняет цвет текста на синий\n */\n link?: boolean;\n\n /** @ignore */\n loose?: boolean;\n\n /** @ignore */\n state?: MenuItemState;\n onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n /**\n * HTML-атрибут title\n */\n title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\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"]}
|
|
1
|
+
{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","isFunction","ThemeContext","CommonWrapper","cx","styles","MenuItem","theme","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","__KONTUR_REACT_UI__","__MENU_ITEM__","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,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
|
/**
|
|
@@ -8,6 +8,10 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
|
|
|
8
8
|
import { cx } from "../../../lib/theming/Emotion";
|
|
9
9
|
import { keyListener } from "../../../lib/events/keyListener";
|
|
10
10
|
import { styles, globalClasses } from "../Radio.styles";
|
|
11
|
+
/**
|
|
12
|
+
* Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.
|
|
13
|
+
*/
|
|
14
|
+
|
|
11
15
|
export var Radio = /*#__PURE__*/function (_React$Component) {
|
|
12
16
|
_inheritsLoose(Radio, _React$Component);
|
|
13
17
|
|
|
@@ -28,21 +32,18 @@ export var Radio = /*#__PURE__*/function (_React$Component) {
|
|
|
28
32
|
_this.renderMain = function (props) {
|
|
29
33
|
var _cx;
|
|
30
34
|
|
|
31
|
-
var
|
|
32
|
-
_props$disabled = props.disabled,
|
|
35
|
+
var _props$disabled = props.disabled,
|
|
33
36
|
disabled = _props$disabled === void 0 ? _this.context.disabled : _props$disabled,
|
|
34
37
|
_props$warning = props.warning,
|
|
35
38
|
warning = _props$warning === void 0 ? _this.context.warning : _props$warning,
|
|
36
39
|
_props$error = props.error,
|
|
37
40
|
error = _props$error === void 0 ? _this.context.error : _props$error,
|
|
38
41
|
focused = props.focused,
|
|
39
|
-
pressed = props.pressed,
|
|
40
|
-
hovered = props.hovered,
|
|
41
42
|
onMouseOver = props.onMouseOver,
|
|
42
43
|
onMouseEnter = props.onMouseEnter,
|
|
43
44
|
onMouseLeave = props.onMouseLeave,
|
|
44
45
|
onValueChange = props.onValueChange,
|
|
45
|
-
rest = _objectWithoutPropertiesLoose(props, ["
|
|
46
|
+
rest = _objectWithoutPropertiesLoose(props, ["disabled", "warning", "error", "focused", "onMouseOver", "onMouseEnter", "onMouseLeave", "onValueChange"]);
|
|
46
47
|
|
|
47
48
|
var radioProps = {
|
|
48
49
|
className: cx((_cx = {}, _cx[styles.radio(_this.theme)] = true, _cx[styles.checked(_this.theme)] = _this.props.checked, _cx[styles.focus(_this.theme)] = _this.props.focused || _this.state.focusedByKeyboard, _cx[styles.error(_this.theme)] = error, _cx[styles.warning(_this.theme)] = warning, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.checkedDisabled(_this.theme)] = _this.props.checked && disabled, _cx[globalClasses.radio] = true, _cx))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Radio.tsx"],"names":["React","PropTypes","ThemeContext","CommonWrapper","cx","keyListener","styles","globalClasses","Radio","state","focusedByKeyboard","theme","inputEl","createRef","renderMain","props","active","disabled","context","warning","error","focused","pressed","hovered","onMouseOver","onMouseEnter","onMouseLeave","onValueChange","rest","radioProps","className","radio","checked","focus","checkedDisabled","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","isArrowPressed","isTabPressed","setState","render","current","blur","labelClassNames","label","labelDisabled","Component","__KONTUR_REACT_UI__","contextTypes","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":["React","PropTypes","ThemeContext","CommonWrapper","cx","keyListener","styles","globalClasses","Radio","state","focusedByKeyboard","theme","inputEl","createRef","renderMain","props","disabled","context","warning","error","focused","onMouseOver","onMouseEnter","onMouseLeave","onValueChange","rest","radioProps","className","radio","checked","focus","checkedDisabled","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","isArrowPressed","isTabPressed","setState","render","current","blur","labelClassNames","label","labelDisabled","Component","__KONTUR_REACT_UI__","contextTypes","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"]}
|
|
@@ -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: {
|
|
@@ -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
|
```
|