@skbkontur/react-ui 4.21.0-next.2 → 4.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/cjs/components/Input/Input.d.ts +22 -5
- package/cjs/components/Input/Input.js +33 -14
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Input/Input.typings.d.ts +7 -0
- package/cjs/components/Input/Input.typings.js +1 -0
- package/cjs/components/Input/Input.typings.js.map +1 -0
- package/cjs/components/Input/index.d.ts +1 -0
- package/cjs/components/Input/index.js +2 -1
- package/cjs/components/Input/index.js.map +1 -1
- package/cjs/components/MaskedInput/MaskedInput.d.ts +24 -0
- package/cjs/components/MaskedInput/MaskedInput.js +78 -0
- package/cjs/components/MaskedInput/MaskedInput.js.map +1 -0
- package/cjs/components/MaskedInput/MaskedInput.md +21 -0
- package/cjs/components/MaskedInput/index.js.map +1 -0
- package/cjs/components/Token/Token.js +1 -1
- package/cjs/components/Token/Token.js.map +1 -1
- package/cjs/internal/{MaskedInput/MaskedInput.d.ts → InternalMaskedInput/InternalMaskedInput.d.ts} +8 -5
- package/cjs/internal/{MaskedInput/MaskedInput.js → InternalMaskedInput/InternalMaskedInput.js} +11 -8
- package/cjs/internal/InternalMaskedInput/InternalMaskedInput.js.map +1 -0
- package/cjs/internal/InternalMaskedInput/InternalMaskedInput.styles.js.map +1 -0
- package/cjs/internal/InternalMaskedInput/index.d.ts +1 -0
- package/cjs/internal/InternalMaskedInput/index.js +1 -0
- package/cjs/internal/InternalMaskedInput/index.js.map +1 -0
- package/cjs/internal/MaskedInputElement/MaskedInputElement.d.ts +14 -0
- package/cjs/internal/MaskedInputElement/MaskedInputElement.helpers.d.ts +16 -0
- package/cjs/internal/MaskedInputElement/MaskedInputElement.helpers.js +52 -0
- package/cjs/internal/MaskedInputElement/MaskedInputElement.helpers.js.map +1 -0
- package/cjs/internal/MaskedInputElement/MaskedInputElement.js +196 -0
- package/cjs/internal/MaskedInputElement/MaskedInputElement.js.map +1 -0
- package/cjs/internal/MaskedInputElement/MaskedInputElement.styles.js +29 -0
- package/cjs/internal/MaskedInputElement/MaskedInputElement.styles.js.map +1 -0
- package/cjs/internal/MaskedInputElement/index.d.ts +1 -0
- package/cjs/internal/MaskedInputElement/index.js +1 -0
- package/cjs/internal/MaskedInputElement/index.js.map +1 -0
- package/cjs/lib/utils.d.ts +7 -0
- package/cjs/lib/utils.js +25 -2
- package/cjs/lib/utils.js.map +1 -1
- package/components/Input/Input/Input.js +14 -5
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.d.ts +22 -5
- package/components/Input/Input.typings/Input.typings.js +1 -0
- package/components/Input/Input.typings/Input.typings.js.map +1 -0
- package/components/Input/Input.typings/package.json +6 -0
- package/components/Input/Input.typings.d.ts +7 -0
- package/components/Input/index/index.js +2 -1
- package/components/Input/index/index.js.map +1 -1
- package/components/Input/index.d.ts +1 -0
- package/components/MaskedInput/MaskedInput/MaskedInput.js +62 -0
- package/components/MaskedInput/MaskedInput/MaskedInput.js.map +1 -0
- package/{internal → components}/MaskedInput/MaskedInput/package.json +1 -1
- package/components/MaskedInput/MaskedInput.d.ts +24 -0
- package/components/MaskedInput/MaskedInput.md +21 -0
- package/components/MaskedInput/index/index.js.map +1 -0
- package/{internal → components}/MaskedInput/index/package.json +1 -1
- package/{internal → components}/MaskedInput/package.json +1 -1
- package/components/Token/Token/Token.js +4 -3
- package/components/Token/Token/Token.js.map +1 -1
- package/internal/{MaskedInput/MaskedInput/MaskedInput.js → InternalMaskedInput/InternalMaskedInput/InternalMaskedInput.js} +13 -9
- package/internal/InternalMaskedInput/InternalMaskedInput/InternalMaskedInput.js.map +1 -0
- package/internal/InternalMaskedInput/InternalMaskedInput/package.json +6 -0
- package/internal/{MaskedInput/MaskedInput.d.ts → InternalMaskedInput/InternalMaskedInput.d.ts} +8 -5
- package/{cjs/internal/MaskedInput/MaskedInput.styles.js.map → internal/InternalMaskedInput/InternalMaskedInput.styles/InternalMaskedInput.styles.js.map} +1 -1
- package/internal/InternalMaskedInput/InternalMaskedInput.styles/package.json +6 -0
- package/internal/InternalMaskedInput/InternalMaskedInput.styles.d.ts +6 -0
- package/internal/InternalMaskedInput/index/index.js +1 -0
- package/internal/InternalMaskedInput/index/index.js.map +1 -0
- package/internal/InternalMaskedInput/index/package.json +6 -0
- package/internal/InternalMaskedInput/index.d.ts +1 -0
- package/internal/InternalMaskedInput/package.json +6 -0
- package/internal/MaskedInputElement/MaskedInputElement/MaskedInputElement.js +206 -0
- package/internal/MaskedInputElement/MaskedInputElement/MaskedInputElement.js.map +1 -0
- package/internal/MaskedInputElement/MaskedInputElement/package.json +6 -0
- package/internal/MaskedInputElement/MaskedInputElement.d.ts +14 -0
- package/internal/MaskedInputElement/MaskedInputElement.helpers/MaskedInputElement.helpers.js +43 -0
- package/internal/MaskedInputElement/MaskedInputElement.helpers/MaskedInputElement.helpers.js.map +1 -0
- package/internal/MaskedInputElement/MaskedInputElement.helpers/package.json +6 -0
- package/internal/MaskedInputElement/MaskedInputElement.helpers.d.ts +16 -0
- package/internal/MaskedInputElement/MaskedInputElement.styles/MaskedInputElement.styles.js +16 -0
- package/internal/MaskedInputElement/MaskedInputElement.styles/MaskedInputElement.styles.js.map +1 -0
- package/internal/MaskedInputElement/MaskedInputElement.styles/package.json +6 -0
- package/internal/MaskedInputElement/MaskedInputElement.styles.d.ts +6 -0
- package/internal/MaskedInputElement/index/index.js +1 -0
- package/internal/MaskedInputElement/index/index.js.map +1 -0
- package/internal/MaskedInputElement/index/package.json +6 -0
- package/internal/MaskedInputElement/index.d.ts +1 -0
- package/internal/MaskedInputElement/package.json +6 -0
- package/lib/utils/utils.js +27 -1
- package/lib/utils/utils.js.map +1 -1
- package/lib/utils.d.ts +7 -0
- package/package.json +4 -3
- package/cjs/internal/MaskedInput/MaskedInput.js.map +0 -1
- package/cjs/internal/MaskedInput/index.js.map +0 -1
- package/internal/MaskedInput/MaskedInput/MaskedInput.js.map +0 -1
- package/internal/MaskedInput/MaskedInput.styles/MaskedInput.styles.js.map +0 -1
- package/internal/MaskedInput/MaskedInput.styles/package.json +0 -6
- package/internal/MaskedInput/index/index.js.map +0 -1
- /package/cjs/{internal → components}/MaskedInput/index.d.ts +0 -0
- /package/cjs/{internal → components}/MaskedInput/index.js +0 -0
- /package/cjs/internal/{MaskedInput/MaskedInput.styles.d.ts → InternalMaskedInput/InternalMaskedInput.styles.d.ts} +0 -0
- /package/cjs/internal/{MaskedInput/MaskedInput.styles.js → InternalMaskedInput/InternalMaskedInput.styles.js} +0 -0
- /package/{internal/MaskedInput/MaskedInput.styles.d.ts → cjs/internal/MaskedInputElement/MaskedInputElement.styles.d.ts} +0 -0
- /package/{internal → components}/MaskedInput/index/index.js +0 -0
- /package/{internal → components}/MaskedInput/index.d.ts +0 -0
- /package/internal/{MaskedInput/MaskedInput.styles/MaskedInput.styles.js → InternalMaskedInput/InternalMaskedInput.styles/InternalMaskedInput.styles.js} +0 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
```jsx harmony
|
|
2
|
+
<MaskedInput mask={'+7 999 999-99-99'} placeholder={"Номер телефона"} />
|
|
3
|
+
```
|
|
4
|
+
|
|
5
|
+
Можно изменить символ значения с маской
|
|
6
|
+
```jsx harmony
|
|
7
|
+
<MaskedInput mask={'9999 9999 9999 9999'} maskChar={'X'} placeholder={"Номер карты"} />
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
**alwaysShowMask** позволяет показывать маску всегда. Placeholder в этом случае игнорируется.
|
|
11
|
+
```jsx harmony
|
|
12
|
+
<MaskedInput mask={'9999 9999 9999 9999'} alwaysShowMask maskChar={'X'} placeholder={"Номер карты"} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Для форматирования по маске используется пакет [iMask](https://imask.js.org/). Используйте особенности пакета принимая всю ответственность на себя.
|
|
16
|
+
|
|
17
|
+
`MaskedInput` гарантирует поддержку работы 3 пропов: **mask**, **maskChar**, **alwaysShowMask** с заданными по-умолчанию **formatChars**.
|
|
18
|
+
|
|
19
|
+
Остальное поведение может меняться в мажорных релизах.
|
|
20
|
+
|
|
21
|
+
Например, iMask [позволяет добавлять](https://imask.js.org/guide.html#masked-pattern) в значения без форматирования константы с помощью фигурных скобок. Использовать этот вариант **НЕ РЕКОМЕНДУЕТСЯ**.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd","sourcesContent":["export * from './MaskedInput';\n"]}
|
|
@@ -6,7 +6,7 @@ var _dec, _class, _class2, _temp;
|
|
|
6
6
|
import React from 'react';
|
|
7
7
|
import { locale } from "../../../lib/locale/decorators";
|
|
8
8
|
import { CrossIcon } from "../../../internal/icons/CrossIcon";
|
|
9
|
-
import { emptyHandler } from "../../../lib/utils";
|
|
9
|
+
import { emptyHandler, getChildrenText } from "../../../lib/utils";
|
|
10
10
|
import { ThemeContext } from "../../../lib/theming/ThemeContext";
|
|
11
11
|
import { CommonWrapper } from "../../../internal/CommonWrapper";
|
|
12
12
|
import { cx } from "../../../lib/theming/Emotion";
|
|
@@ -97,12 +97,13 @@ export var Token = (_dec = locale('Token', TokenLocaleHelper), rootNode(_class =
|
|
|
97
97
|
onBlur = _this$props2$onBlur === void 0 ? emptyHandler : _this$props2$onBlur;
|
|
98
98
|
var theme = this.theme;
|
|
99
99
|
var validation = getValidation(error, warning);
|
|
100
|
-
var removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + children;
|
|
100
|
+
var removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + getChildrenText(children);
|
|
101
101
|
var icon = isTheme2022(theme) ? /*#__PURE__*/React.createElement(CloseButtonIcon, {
|
|
102
102
|
side: 16,
|
|
103
103
|
color: "inherit",
|
|
104
104
|
colorHover: "inherit",
|
|
105
|
-
role: "none"
|
|
105
|
+
role: "none",
|
|
106
|
+
tabbable: false
|
|
106
107
|
}) : /*#__PURE__*/React.createElement(CrossIcon, null);
|
|
107
108
|
var classNames = '';
|
|
108
109
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Token.tsx"],"names":["React","locale","CrossIcon","emptyHandler","ThemeContext","CommonWrapper","cx","rootNode","isTheme2022","CloseButtonIcon","styles","colorStyles","globalClasses","TokenLocaleHelper","getValidation","error","warning","TokenDataTids","root","removeIcon","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","theme","renderMain","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","removeButtonAriaLabel","icon","classNames","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassNames","token","setRootNode","text","undefined","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\nimport { TokenLocale, TokenLocaleHelper } from './locale';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n idle: TokenColorName;\n active?: TokenColorName;\n}\n\nexport interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {\n colors?: TokenColors;\n isActive?: boolean;\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n disabled?: boolean;\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n onRemove?: React.MouseEventHandler<HTMLElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n if (error) {\n return 'error';\n } else if (warning) {\n return 'warning';\n }\n\n return null;\n};\n\nexport const TokenDataTids = {\n root: 'Token__root',\n removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\n@locale('Token', TokenLocaleHelper)\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n private readonly locale!: TokenLocale;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n children,\n isActive,\n colors = { idle: 'defaultIdle', active: 'defaultActive' },\n error,\n warning,\n disabled,\n 'aria-describedby': ariaDescribedby,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const theme = this.theme;\n\n const validation = getValidation(error, warning);\n const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + children;\n\n const icon = isTheme2022(theme) ? (\n <CloseButtonIcon side={16} color=\"inherit\" colorHover=\"inherit\" role=\"none\" />\n ) : (\n <CrossIcon />\n );\n\n let classNames = '';\n if (isTheme2022(theme)) {\n classNames = cx(\n styles.tokenDefaultIdle2022(theme),\n !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n isActive && styles.tokenDefaultActive2022(theme),\n warning && styles.tokenWarning2022(theme),\n error && styles.tokenError2022(theme),\n disabled && styles.tokenDisabled2022(theme),\n );\n } else {\n classNames = cx(\n colorStyles[colors.idle](theme, validation),\n !!isActive && colorStyles[colors.active || colors.idle](theme, validation),\n !!disabled && styles.disabled(theme),\n !!disabled && colorStyles.defaultDisabled(theme),\n !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n !!disabled && error && colorStyles.defaultDisabledError(theme),\n );\n }\n\n const tokenClassNames = cx(styles.token(this.theme), classNames);\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={TokenDataTids.root}\n className={tokenClassNames}\n aria-describedby={ariaDescribedby}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n <span className={styles.text(this.theme)}>{children}</span>\n <span\n role={isTheme2022(theme) ? undefined : 'button'}\n aria-label={isTheme2022(theme) ? undefined : removeButtonAriaLabel}\n className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)}\n onClick={this.onRemoveClick}\n data-tid={TokenDataTids.removeIcon}\n >\n {icon}\n </span>\n </div>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Token.tsx"],"names":["React","locale","CrossIcon","emptyHandler","getChildrenText","ThemeContext","CommonWrapper","cx","rootNode","isTheme2022","CloseButtonIcon","styles","colorStyles","globalClasses","TokenLocaleHelper","getValidation","error","warning","TokenDataTids","root","removeIcon","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","theme","renderMain","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","removeButtonAriaLabel","icon","classNames","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassNames","token","setRootNode","text","undefined","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler, getChildrenText } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\nimport { TokenLocale, TokenLocaleHelper } from './locale';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n idle: TokenColorName;\n active?: TokenColorName;\n}\n\nexport interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {\n colors?: TokenColors;\n isActive?: boolean;\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n disabled?: boolean;\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n onRemove?: React.MouseEventHandler<HTMLElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n if (error) {\n return 'error';\n } else if (warning) {\n return 'warning';\n }\n\n return null;\n};\n\nexport const TokenDataTids = {\n root: 'Token__root',\n removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\n@locale('Token', TokenLocaleHelper)\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n private readonly locale!: TokenLocale;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n children,\n isActive,\n colors = { idle: 'defaultIdle', active: 'defaultActive' },\n error,\n warning,\n disabled,\n 'aria-describedby': ariaDescribedby,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const theme = this.theme;\n\n const validation = getValidation(error, warning);\n const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + getChildrenText(children);\n\n const icon = isTheme2022(theme) ? (\n <CloseButtonIcon side={16} color=\"inherit\" colorHover=\"inherit\" role=\"none\" tabbable={false} />\n ) : (\n <CrossIcon />\n );\n\n let classNames = '';\n if (isTheme2022(theme)) {\n classNames = cx(\n styles.tokenDefaultIdle2022(theme),\n !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n isActive && styles.tokenDefaultActive2022(theme),\n warning && styles.tokenWarning2022(theme),\n error && styles.tokenError2022(theme),\n disabled && styles.tokenDisabled2022(theme),\n );\n } else {\n classNames = cx(\n colorStyles[colors.idle](theme, validation),\n !!isActive && colorStyles[colors.active || colors.idle](theme, validation),\n !!disabled && styles.disabled(theme),\n !!disabled && colorStyles.defaultDisabled(theme),\n !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n !!disabled && error && colorStyles.defaultDisabledError(theme),\n );\n }\n\n const tokenClassNames = cx(styles.token(this.theme), classNames);\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={TokenDataTids.root}\n className={tokenClassNames}\n aria-describedby={ariaDescribedby}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n <span className={styles.text(this.theme)}>{children}</span>\n <span\n role={isTheme2022(theme) ? undefined : 'button'}\n aria-label={isTheme2022(theme) ? undefined : removeButtonAriaLabel}\n className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)}\n onClick={this.onRemoveClick}\n data-tid={TokenDataTids.removeIcon}\n >\n {icon}\n </span>\n </div>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}
|
|
@@ -12,18 +12,22 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
|
|
|
12
12
|
import { MaskCharLowLine } from "../../MaskCharLowLine";
|
|
13
13
|
import { cx } from "../../../lib/theming/Emotion";
|
|
14
14
|
import { createPropsGetter } from "../../../lib/createPropsGetter";
|
|
15
|
-
import { styles } from "../
|
|
15
|
+
import { styles } from "../InternalMaskedInput.styles";
|
|
16
16
|
export var MaskedInputDataTids = {
|
|
17
17
|
root: 'MaskedInput__root'
|
|
18
18
|
};
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
/** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.
|
|
20
|
+
* todo: выпилить в 5 версии библиотеки.
|
|
21
|
+
* */
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
export var InternalMaskedInput = /*#__PURE__*/function (_React$PureComponent) {
|
|
24
|
+
_inheritsLoose(InternalMaskedInput, _React$PureComponent);
|
|
25
|
+
|
|
26
|
+
function InternalMaskedInput(_props) {
|
|
23
27
|
var _this;
|
|
24
28
|
|
|
25
29
|
_this = _React$PureComponent.call(this, _props) || this;
|
|
26
|
-
_this.getProps = createPropsGetter(
|
|
30
|
+
_this.getProps = createPropsGetter(InternalMaskedInput.defaultProps);
|
|
27
31
|
_this.input = null;
|
|
28
32
|
_this.reactInputMask = null;
|
|
29
33
|
|
|
@@ -135,7 +139,7 @@ export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
135
139
|
return _this;
|
|
136
140
|
}
|
|
137
141
|
|
|
138
|
-
var _proto =
|
|
142
|
+
var _proto = InternalMaskedInput.prototype;
|
|
139
143
|
|
|
140
144
|
_proto.componentDidMount = function componentDidMount() {
|
|
141
145
|
if (this.reactInputMask) {
|
|
@@ -209,9 +213,9 @@ export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
209
213
|
}, leftHelper, rightHelper));
|
|
210
214
|
};
|
|
211
215
|
|
|
212
|
-
return
|
|
216
|
+
return InternalMaskedInput;
|
|
213
217
|
}(React.PureComponent);
|
|
214
|
-
|
|
215
|
-
|
|
218
|
+
InternalMaskedInput.__KONTUR_REACT_UI__ = 'MaskedInput';
|
|
219
|
+
InternalMaskedInput.defaultProps = {
|
|
216
220
|
maskChar: '_'
|
|
217
221
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["InternalMaskedInput.tsx"],"names":["React","ReactInputMask","isNonNullable","ThemeContext","MaskCharLowLine","cx","createPropsGetter","styles","MaskedInputDataTids","root","InternalMaskedInput","props","getProps","defaultProps","input","reactInputMask","getValue","value","toString","defaultValue","refInput","refMaskedInput","handleChange","event","target","state","handleUnexpectedInput","setState","originValue","onValueChange","onChange","handleFocus","focused","onFocus","handleBlur","onBlur","preprocess","newState","oldState","userInput","options","visibleMaskChars","Array","mask","length","fill","maskChar","split","forEach","char","index","permanents","includes","emptyValue","join","isMaskVisible","alwaysShowMask","onUnexpectedInput","componentDidMount","forceUpdate","componentDidUpdate","prevProps","render","theme","renderMain","hasLeftIcon","hasRightIcon","maxLength","style","inputProps","leftHelper","textAlign","color","slice","leftClass","inputMaskLeft","rightHelper","map","_char","i","container","inputMask","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport ReactInputMask, { InputState, MaskOptions } from 'react-input-mask';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './InternalMaskedInput.styles';\n\nexport interface InternalMaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n mask: string;\n maskChar?: string | null;\n formatChars?: { [key: string]: string };\n alwaysShowMask?: boolean;\n hasLeftIcon?: boolean;\n hasRightIcon?: boolean;\n onUnexpectedInput?: (value: string) => void;\n onValueChange?: (value: string) => void;\n}\n\ninterface MaskedInputState {\n value: string;\n\n // Users can unmask value themselves. In these cases we take origin value length\n originValue: string;\n\n emptyValue: string;\n focused: boolean;\n}\n\ntype DefaultProps = Required<Pick<InternalMaskedInputProps, 'maskChar'>>;\n\nexport const MaskedInputDataTids = {\n root: 'MaskedInput__root',\n} as const;\n\n/** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.\n * todo: выпилить в 5 версии библиотеки.\n * */\nexport class InternalMaskedInput extends React.PureComponent<InternalMaskedInputProps, MaskedInputState> {\n public static __KONTUR_REACT_UI__ = 'MaskedInput';\n\n public static defaultProps: DefaultProps = {\n maskChar: '_',\n };\n\n private getProps = createPropsGetter(InternalMaskedInput.defaultProps);\n\n public input: HTMLInputElement | null = null;\n private theme!: Theme;\n private reactInputMask: ReactInputMask | null = null;\n\n public constructor(props: InternalMaskedInputProps) {\n super(props);\n\n this.state = {\n value: this.getValue(props),\n originValue: this.getValue(props),\n emptyValue: '',\n focused: false,\n };\n }\n\n public componentDidMount() {\n if (this.reactInputMask) {\n // FIXME: принудительно вызываем beforeMaskedValueChange, чтобы получить emptyValue\n this.reactInputMask.forceUpdate();\n }\n }\n\n public componentDidUpdate(prevProps: InternalMaskedInputProps) {\n if (this.props.value !== prevProps.value) {\n this.setState({\n value: this.props.value ? this.props.value.toString() : '',\n });\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n maskChar,\n alwaysShowMask,\n hasLeftIcon,\n hasRightIcon,\n maxLength,\n onValueChange,\n onUnexpectedInput,\n defaultValue,\n style,\n ...inputProps\n } = this.props;\n const { emptyValue, value, originValue } = this.state;\n\n const leftHelper = style?.textAlign !== 'right' && (\n <span style={{ color: 'transparent' }}>{emptyValue.slice(0, originValue.length)}</span>\n );\n const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n\n const rightHelper = emptyValue\n .slice(originValue.length)\n .split('')\n .map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n\n return (\n <span data-tid={MaskedInputDataTids.root} className={styles.container()} x-ms-format-detection=\"none\">\n <ReactInputMask\n {...inputProps}\n maskChar={null}\n beforeMaskedValueChange={this.preprocess}\n alwaysShowMask={false}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n value={value}\n inputRef={this.refInput}\n ref={this.refMaskedInput}\n style={{ ...style }}\n />\n {this.isMaskVisible() && (\n <span className={cx(styles.inputMask(this.theme), leftClass)}>\n {leftHelper}\n {rightHelper}\n </span>\n )}\n </span>\n );\n }\n\n private getValue = (props: InternalMaskedInputProps): string => {\n if (isNonNullable(props.value)) {\n return props.value.toString();\n }\n\n if (isNonNullable(props.defaultValue)) {\n return props.defaultValue.toString();\n }\n\n return '';\n };\n\n private refInput = (input: HTMLInputElement | null) => {\n this.input = input;\n };\n\n private refMaskedInput = (reactInputMask: ReactInputMask) => {\n this.reactInputMask = reactInputMask;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.target.value === this.state.value) {\n this.handleUnexpectedInput();\n } else {\n this.setState({ value: event.target.value, originValue: event.target.value });\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.value);\n }\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: true });\n\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: false });\n\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n };\n\n private preprocess = (\n newState: InputState,\n oldState: InputState,\n userInput: string,\n options: MaskOptions & Pick<InternalMaskedInputProps, 'mask'>,\n ) => {\n const visibleMaskChars = new Array(options.mask.length).fill(this.getProps().maskChar);\n\n if (newState.value !== oldState.value && userInput === null) {\n this.setState({\n value: newState.value,\n originValue: newState.value,\n });\n }\n\n options.mask.split('').forEach((char: string, index: number) => {\n if (options.permanents.includes(index)) {\n visibleMaskChars[index] = char;\n }\n\n if (newState.value[index]) {\n visibleMaskChars[index] = newState.value[index];\n }\n });\n\n const emptyValue = visibleMaskChars.join('');\n\n if (this.state.emptyValue !== emptyValue) {\n this.setState({\n emptyValue,\n });\n }\n\n return newState;\n };\n\n private isMaskVisible = () => this.props.alwaysShowMask || this.state.focused;\n\n private handleUnexpectedInput = () => {\n if (this.props.onUnexpectedInput) {\n this.props.onUnexpectedInput(this.state.value);\n }\n };\n}\n"]}
|
package/internal/{MaskedInput/MaskedInput.d.ts → InternalMaskedInput/InternalMaskedInput.d.ts}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export interface
|
|
2
|
+
export interface InternalMaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
3
3
|
mask: string;
|
|
4
4
|
maskChar?: string | null;
|
|
5
5
|
formatChars?: {
|
|
@@ -17,20 +17,23 @@ interface MaskedInputState {
|
|
|
17
17
|
emptyValue: string;
|
|
18
18
|
focused: boolean;
|
|
19
19
|
}
|
|
20
|
-
declare type DefaultProps = Required<Pick<
|
|
20
|
+
declare type DefaultProps = Required<Pick<InternalMaskedInputProps, 'maskChar'>>;
|
|
21
21
|
export declare const MaskedInputDataTids: {
|
|
22
22
|
readonly root: "MaskedInput__root";
|
|
23
23
|
};
|
|
24
|
-
|
|
24
|
+
/** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.
|
|
25
|
+
* todo: выпилить в 5 версии библиотеки.
|
|
26
|
+
* */
|
|
27
|
+
export declare class InternalMaskedInput extends React.PureComponent<InternalMaskedInputProps, MaskedInputState> {
|
|
25
28
|
static __KONTUR_REACT_UI__: string;
|
|
26
29
|
static defaultProps: DefaultProps;
|
|
27
30
|
private getProps;
|
|
28
31
|
input: HTMLInputElement | null;
|
|
29
32
|
private theme;
|
|
30
33
|
private reactInputMask;
|
|
31
|
-
constructor(props:
|
|
34
|
+
constructor(props: InternalMaskedInputProps);
|
|
32
35
|
componentDidMount(): void;
|
|
33
|
-
componentDidUpdate(prevProps:
|
|
36
|
+
componentDidUpdate(prevProps: InternalMaskedInputProps): void;
|
|
34
37
|
render(): JSX.Element;
|
|
35
38
|
private renderMain;
|
|
36
39
|
private getValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["InternalMaskedInput.styles.ts"],"names":["css","memoizeStyle","styles","container","inputMask","t","placeholderColor","inputMaskLeft"],"mappings":"wJAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,SADiC,uBACrB;AACV,WAAOH,GAAP;;;;;;AAMD,GARgC;AASjCI,EAAAA,SATiC,qBASvBC,CATuB,EASb;AAClB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,gBADb;;;;;;AAOD,GAjBgC;AAkBjCC,EAAAA,aAlBiC,2BAkBjB;AACd,WAAOP,GAAP;;;;;;AAMD,GAzBgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n container() {\n return css`\n display: inline-flex;\n position: relative;\n font-size: inherit;\n flex: 100% 1 1;\n `;\n },\n inputMask(t: Theme) {\n return css`\n color: ${t.placeholderColor};\n pointer-events: none;\n font-size: inherit;\n z-index: 5;\n user-select: none;\n `;\n },\n inputMaskLeft() {\n return css`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n `;\n },\n});\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "../InternalMaskedInput";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAd","sourcesContent":["export * from './InternalMaskedInput';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './InternalMaskedInput';
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "maxLength", "onUnexpectedInput", "defaultValue", "style"];
|
|
4
|
+
import React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
5
|
+
import { IMaskInput, IMask } from 'react-imask';
|
|
6
|
+
import { ThemeContext } from "../../../lib/theming/ThemeContext";
|
|
7
|
+
import { MaskCharLowLine } from "../../MaskCharLowLine";
|
|
8
|
+
import { cx } from "../../../lib/theming/Emotion";
|
|
9
|
+
import { forwardRefAndName } from "../../../lib/forwardRefAndName";
|
|
10
|
+
import { styles } from "../MaskedInputElement.styles";
|
|
11
|
+
import { getCurrentValue, getDefinitions, getFocusPrefix, getMaskChar } from "../MaskedInputElement.helpers";
|
|
12
|
+
export var MaskedInputElementDataTids = {
|
|
13
|
+
root: 'MaskedInput__root'
|
|
14
|
+
};
|
|
15
|
+
export var MaskedInputElement = forwardRefAndName('MaskedInputElement', function MaskedInputElement(props, ref) {
|
|
16
|
+
var _useState = useState(function () {
|
|
17
|
+
var value = getValue(props);
|
|
18
|
+
return {
|
|
19
|
+
value: value,
|
|
20
|
+
originValue: value
|
|
21
|
+
};
|
|
22
|
+
}),
|
|
23
|
+
values = _useState[0],
|
|
24
|
+
setValues = _useState[1];
|
|
25
|
+
|
|
26
|
+
var value = values.value,
|
|
27
|
+
originValue = values.originValue;
|
|
28
|
+
|
|
29
|
+
var _useState2 = useState(''),
|
|
30
|
+
emptyValue = _useState2[0],
|
|
31
|
+
setEmptyValue = _useState2[1];
|
|
32
|
+
|
|
33
|
+
var _useState3 = useState(false),
|
|
34
|
+
focused = _useState3[0],
|
|
35
|
+
setFocused = _useState3[1];
|
|
36
|
+
|
|
37
|
+
var inputRef = useRef(null);
|
|
38
|
+
var rootNodeRef = React.useRef(null);
|
|
39
|
+
var theme = useContext(ThemeContext);
|
|
40
|
+
var expectedChangesRef = useRef(false);
|
|
41
|
+
var isFirstRender = useRef(true);
|
|
42
|
+
useImperativeHandle(ref, function () {
|
|
43
|
+
return {
|
|
44
|
+
input: inputRef.current,
|
|
45
|
+
getRootNode: function getRootNode() {
|
|
46
|
+
return rootNodeRef.current;
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}, []);
|
|
50
|
+
useEffect(function () {
|
|
51
|
+
setEmptyValue(getEmptyValue(props.mask, props.maskChar, props.formatChars));
|
|
52
|
+
}, [props.mask, props.maskChar]);
|
|
53
|
+
useEffect(function () {
|
|
54
|
+
if (isFirstRender.current) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
var value = props.value ? props.value.toString() : '';
|
|
59
|
+
setValues(function (values) {
|
|
60
|
+
return _extends({}, values, {
|
|
61
|
+
value: value
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
}, [props.value]);
|
|
65
|
+
useEffect(function () {
|
|
66
|
+
isFirstRender.current = false;
|
|
67
|
+
}, []);
|
|
68
|
+
|
|
69
|
+
var mask = props.mask,
|
|
70
|
+
maskChar = props.maskChar,
|
|
71
|
+
formatChars = props.formatChars,
|
|
72
|
+
alwaysShowMask = props.alwaysShowMask,
|
|
73
|
+
maxLength = props.maxLength,
|
|
74
|
+
onUnexpectedInput = props.onUnexpectedInput,
|
|
75
|
+
defaultValue = props.defaultValue,
|
|
76
|
+
style = props.style,
|
|
77
|
+
inputProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
78
|
+
|
|
79
|
+
var leftClass = (style == null ? void 0 : style.textAlign) !== 'right' && styles.inputMaskLeft();
|
|
80
|
+
|
|
81
|
+
var _getCurrentValue = getCurrentValue({
|
|
82
|
+
value: value,
|
|
83
|
+
originValue: originValue,
|
|
84
|
+
emptyValue: emptyValue
|
|
85
|
+
}, focused, maskChar),
|
|
86
|
+
currentValue = _getCurrentValue[0],
|
|
87
|
+
left = _getCurrentValue[1],
|
|
88
|
+
right = _getCurrentValue[2];
|
|
89
|
+
/* В rightHelper не DEFAULT_MASK_CHAR, а специальная логика для обработки подчркивания('_').
|
|
90
|
+
* Не менять на DEFAULT_MASK_CHAR
|
|
91
|
+
*/
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
var rightHelper = right.split('').map(function (_char, i) {
|
|
95
|
+
return _char === '_' ? /*#__PURE__*/React.createElement(MaskCharLowLine, {
|
|
96
|
+
key: i
|
|
97
|
+
}) : _char;
|
|
98
|
+
});
|
|
99
|
+
var leftHelper = (style == null ? void 0 : style.textAlign) !== 'right' && /*#__PURE__*/React.createElement("span", {
|
|
100
|
+
style: {
|
|
101
|
+
color: 'transparent'
|
|
102
|
+
}
|
|
103
|
+
}, left);
|
|
104
|
+
var isMaskVisible = alwaysShowMask || focused;
|
|
105
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
106
|
+
"data-tid": MaskedInputElementDataTids.root,
|
|
107
|
+
ref: rootNodeRef,
|
|
108
|
+
className: styles.container(),
|
|
109
|
+
"x-ms-format-detection": "none"
|
|
110
|
+
}, /*#__PURE__*/React.createElement(IMaskInput, _extends({}, inputProps, {
|
|
111
|
+
mask: mask,
|
|
112
|
+
definitions: getDefinitions(formatChars),
|
|
113
|
+
eager: true,
|
|
114
|
+
overwrite: 'shift',
|
|
115
|
+
onAccept: handleAccept,
|
|
116
|
+
onInput: handleInput,
|
|
117
|
+
onFocus: handleFocus,
|
|
118
|
+
onBlur: handleBlur,
|
|
119
|
+
value: currentValue,
|
|
120
|
+
inputRef: inputRef,
|
|
121
|
+
style: _extends({}, style)
|
|
122
|
+
})), isMaskVisible && /*#__PURE__*/React.createElement("span", {
|
|
123
|
+
className: cx(styles.inputMask(theme), leftClass)
|
|
124
|
+
}, leftHelper, rightHelper));
|
|
125
|
+
|
|
126
|
+
function getValue(props) {
|
|
127
|
+
var _ref, _props$value;
|
|
128
|
+
|
|
129
|
+
return ((_ref = (_props$value = props.value) != null ? _props$value : props.defaultValue) != null ? _ref : '').toString();
|
|
130
|
+
}
|
|
131
|
+
/** В imask вызывается только когда значение с маской меняется*/
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
function handleAccept(value) {
|
|
135
|
+
expectedChangesRef.current = true; // Если разделить на 2 setState - между первым и вторым происходит рендер и иногда символы "съедаются"
|
|
136
|
+
|
|
137
|
+
setValues({
|
|
138
|
+
value: value,
|
|
139
|
+
originValue: value
|
|
140
|
+
});
|
|
141
|
+
setTimeout(function () {
|
|
142
|
+
/** При вводе с клавиатуры срабатывает handleAccept, за ним handleInput
|
|
143
|
+
* expectedChanges - нужен чтобы сообщить из handleAccept в handleInput, что значение с маской изменилось.
|
|
144
|
+
* Если маска не изменилась и сработал handleInput, вызываем handleUnexpectedInput. Ввели значение не по маске.
|
|
145
|
+
* setTimeout нужен чтобы сбросить expectedChanges, например, если изменилось значение в пропах.
|
|
146
|
+
* Маска изменится, вызовется handleAccept, но не handleInput
|
|
147
|
+
*/
|
|
148
|
+
expectedChangesRef.current = false;
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
/** Отслеживаем неправильные нажатия,
|
|
152
|
+
* handleAccept не вызывается когда значение с маской не меняется, а handleInput вызывается
|
|
153
|
+
* Сначала вызывается handleAccept, затем handleInput
|
|
154
|
+
* */
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
function handleInput(e) {
|
|
158
|
+
var value = e.target.value;
|
|
159
|
+
|
|
160
|
+
if (!expectedChangesRef.current && value === originValue) {
|
|
161
|
+
handleUnexpectedInput();
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
expectedChangesRef.current = false;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
function handleFocus(event) {
|
|
168
|
+
setFocused(true);
|
|
169
|
+
expectedChangesRef.current = false;
|
|
170
|
+
|
|
171
|
+
if (props.onFocus) {
|
|
172
|
+
props.onFocus(event);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
function handleBlur(event) {
|
|
177
|
+
if (value === getFocusPrefix(emptyValue, maskChar)) {
|
|
178
|
+
setValues({
|
|
179
|
+
value: '',
|
|
180
|
+
originValue: ''
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
setFocused(false);
|
|
185
|
+
|
|
186
|
+
if (props.onBlur) {
|
|
187
|
+
props.onBlur(event);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
function handleUnexpectedInput() {
|
|
192
|
+
if (props.onUnexpectedInput) {
|
|
193
|
+
props.onUnexpectedInput(value);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
function getEmptyValue(mask, maskChar, formatChars) {
|
|
198
|
+
var maskPattern = IMask.createMask({
|
|
199
|
+
mask: mask,
|
|
200
|
+
definitions: getDefinitions(formatChars),
|
|
201
|
+
lazy: false,
|
|
202
|
+
placeholderChar: getMaskChar(maskChar)
|
|
203
|
+
});
|
|
204
|
+
return maskPattern.appendTail('').inserted;
|
|
205
|
+
}
|
|
206
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["MaskedInputElement.tsx"],"names":["React","useContext","useEffect","useImperativeHandle","useRef","useState","IMaskInput","IMask","ThemeContext","MaskCharLowLine","cx","forwardRefAndName","styles","getCurrentValue","getDefinitions","getFocusPrefix","getMaskChar","MaskedInputElementDataTids","root","MaskedInputElement","props","ref","value","getValue","originValue","values","setValues","emptyValue","setEmptyValue","focused","setFocused","inputRef","rootNodeRef","theme","expectedChangesRef","isFirstRender","input","current","getRootNode","getEmptyValue","mask","maskChar","formatChars","toString","alwaysShowMask","maxLength","onUnexpectedInput","defaultValue","style","inputProps","leftClass","textAlign","inputMaskLeft","currentValue","left","right","rightHelper","split","map","_char","i","leftHelper","color","isMaskVisible","container","handleAccept","handleInput","handleFocus","handleBlur","inputMask","setTimeout","e","target","handleUnexpectedInput","event","onFocus","onBlur","maskPattern","createMask","definitions","lazy","placeholderChar","appendTail","inserted"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { IMaskInput, IMask } from 'react-imask';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InputElement, InputElementProps } from '../../components/Input';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { styles } from './MaskedInputElement.styles';\nimport { getCurrentValue, getDefinitions, getFocusPrefix, getMaskChar } from './MaskedInputElement.helpers';\n\nexport interface MaskedInputElementProps extends InputElementProps {\n mask: string;\n maskChar?: string | null;\n formatChars?: { [key: string]: string };\n alwaysShowMask?: boolean;\n onUnexpectedInput: (value: string) => void;\n}\n\nexport const MaskedInputElementDataTids = {\n root: 'MaskedInput__root',\n} as const;\n\nexport const MaskedInputElement = forwardRefAndName(\n 'MaskedInputElement',\n function MaskedInputElement(props: MaskedInputElementProps, ref: ForwardedRef<InputElement>) {\n const [values, setValues] = useState<{ value: string; originValue: string }>(() => {\n const value = getValue(props);\n return { value, originValue: value };\n });\n const { value, originValue } = values;\n\n const [emptyValue, setEmptyValue] = useState('');\n const [focused, setFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const rootNodeRef = React.useRef<HTMLDivElement>(null);\n const theme = useContext(ThemeContext);\n const expectedChangesRef = useRef(false);\n const isFirstRender = useRef(true);\n\n useImperativeHandle(\n ref,\n () => ({\n input: inputRef.current,\n getRootNode: () => rootNodeRef.current,\n }),\n [],\n );\n\n useEffect(() => {\n setEmptyValue(getEmptyValue(props.mask, props.maskChar, props.formatChars));\n }, [props.mask, props.maskChar]);\n\n useEffect(() => {\n if (isFirstRender.current) {\n return;\n }\n\n const value = props.value ? props.value.toString() : '';\n setValues((values) => ({ ...values, value }));\n }, [props.value]);\n\n useEffect(() => {\n isFirstRender.current = false;\n }, []);\n\n const {\n mask,\n maskChar,\n formatChars,\n alwaysShowMask,\n maxLength,\n onUnexpectedInput,\n defaultValue,\n style,\n ...inputProps\n } = props;\n\n const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n const [currentValue, left, right] = getCurrentValue({ value, originValue, emptyValue }, focused, maskChar);\n\n /* В rightHelper не DEFAULT_MASK_CHAR, а специальная логика для обработки подчркивания('_').\n * Не менять на DEFAULT_MASK_CHAR\n */\n const rightHelper = right.split('').map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n const leftHelper = style?.textAlign !== 'right' && <span style={{ color: 'transparent' }}>{left}</span>;\n const isMaskVisible = alwaysShowMask || focused;\n\n return (\n <span\n data-tid={MaskedInputElementDataTids.root}\n ref={rootNodeRef}\n className={styles.container()}\n x-ms-format-detection=\"none\"\n >\n <IMaskInput\n {...inputProps}\n mask={mask}\n definitions={getDefinitions(formatChars)}\n eager\n overwrite={'shift'}\n onAccept={handleAccept}\n onInput={handleInput}\n onFocus={handleFocus}\n onBlur={handleBlur}\n value={currentValue}\n inputRef={inputRef}\n style={{ ...style }}\n />\n {isMaskVisible && (\n <span className={cx(styles.inputMask(theme), leftClass)}>\n {leftHelper}\n {rightHelper}\n </span>\n )}\n </span>\n );\n\n function getValue(props: MaskedInputElementProps): string {\n return (props.value ?? props.defaultValue ?? '').toString();\n }\n\n /** В imask вызывается только когда значение с маской меняется*/\n function handleAccept(value: string) {\n expectedChangesRef.current = true;\n // Если разделить на 2 setState - между первым и вторым происходит рендер и иногда символы \"съедаются\"\n setValues({ value, originValue: value });\n\n setTimeout(() => {\n /** При вводе с клавиатуры срабатывает handleAccept, за ним handleInput\n * expectedChanges - нужен чтобы сообщить из handleAccept в handleInput, что значение с маской изменилось.\n * Если маска не изменилась и сработал handleInput, вызываем handleUnexpectedInput. Ввели значение не по маске.\n * setTimeout нужен чтобы сбросить expectedChanges, например, если изменилось значение в пропах.\n * Маска изменится, вызовется handleAccept, но не handleInput\n */\n expectedChangesRef.current = false;\n });\n }\n\n /** Отслеживаем неправильные нажатия,\n * handleAccept не вызывается когда значение с маской не меняется, а handleInput вызывается\n * Сначала вызывается handleAccept, затем handleInput\n * */\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const value = e.target.value;\n\n if (!expectedChangesRef.current && value === originValue) {\n handleUnexpectedInput();\n }\n\n expectedChangesRef.current = false;\n }\n\n function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n setFocused(true);\n\n expectedChangesRef.current = false;\n\n if (props.onFocus) {\n props.onFocus(event);\n }\n }\n\n function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n if (value === getFocusPrefix(emptyValue, maskChar)) {\n setValues({ value: '', originValue: '' });\n }\n\n setFocused(false);\n\n if (props.onBlur) {\n props.onBlur(event);\n }\n }\n\n function handleUnexpectedInput() {\n if (props.onUnexpectedInput) {\n props.onUnexpectedInput(value);\n }\n }\n\n function getEmptyValue(\n mask: MaskedInputElementProps['mask'],\n maskChar: MaskedInputElementProps['maskChar'],\n formatChars: MaskedInputElementProps['formatChars'],\n ): string {\n const maskPattern = IMask.createMask({\n mask,\n definitions: getDefinitions(formatChars),\n lazy: false,\n placeholderChar: getMaskChar(maskChar),\n });\n return maskPattern.appendTail('').inserted;\n }\n },\n);\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { InputElement, InputElementProps } from '../../components/Input';
|
|
2
|
+
export interface MaskedInputElementProps extends InputElementProps {
|
|
3
|
+
mask: string;
|
|
4
|
+
maskChar?: string | null;
|
|
5
|
+
formatChars?: {
|
|
6
|
+
[key: string]: string;
|
|
7
|
+
};
|
|
8
|
+
alwaysShowMask?: boolean;
|
|
9
|
+
onUnexpectedInput: (value: string) => void;
|
|
10
|
+
}
|
|
11
|
+
export declare const MaskedInputElementDataTids: {
|
|
12
|
+
readonly root: "MaskedInput__root";
|
|
13
|
+
};
|
|
14
|
+
export declare const MaskedInputElement: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<InputElement, MaskedInputElementProps> & Record<never, never>;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { isNonNullable } from "../../../lib/utils";
|
|
2
|
+
export var DEFAULT_MASK_CHAR = '_';
|
|
3
|
+
export var DEFINITIONS = {
|
|
4
|
+
'9': /[0-9]/,
|
|
5
|
+
a: /[A-Za-z]/,
|
|
6
|
+
'*': /[A-Za-z0-9]/
|
|
7
|
+
};
|
|
8
|
+
export function getDefinitions(formatChars) {
|
|
9
|
+
if (isNonNullable(formatChars)) {
|
|
10
|
+
var chars = {};
|
|
11
|
+
|
|
12
|
+
for (var key in formatChars) {
|
|
13
|
+
chars[key] = new RegExp(formatChars[key]);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
return chars;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return DEFINITIONS;
|
|
20
|
+
}
|
|
21
|
+
export function getMaskChar(maskChar) {
|
|
22
|
+
if (maskChar === null) {
|
|
23
|
+
return '';
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return maskChar === undefined ? DEFAULT_MASK_CHAR : maskChar;
|
|
27
|
+
}
|
|
28
|
+
export function getFocusPrefix(emptyValue, maskChar) {
|
|
29
|
+
return emptyValue.slice(0, emptyValue.indexOf(getMaskChar(maskChar)));
|
|
30
|
+
}
|
|
31
|
+
export function getCurrentValue(values, focused, maskChar) {
|
|
32
|
+
var emptyValue = values.emptyValue,
|
|
33
|
+
value = values.value,
|
|
34
|
+
originValue = values.originValue;
|
|
35
|
+
|
|
36
|
+
if (focused && originValue.length === 0 && emptyValue.length > 0) {
|
|
37
|
+
var _currentValue = getFocusPrefix(emptyValue, maskChar);
|
|
38
|
+
|
|
39
|
+
return [_currentValue, _currentValue, emptyValue.slice(_currentValue.length)];
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return [value, originValue, emptyValue.slice(originValue.length)];
|
|
43
|
+
}
|
package/internal/MaskedInputElement/MaskedInputElement.helpers/MaskedInputElement.helpers.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["MaskedInputElement.helpers.ts"],"names":["isNonNullable","DEFAULT_MASK_CHAR","DEFINITIONS","a","getDefinitions","formatChars","chars","key","RegExp","getMaskChar","maskChar","undefined","getFocusPrefix","emptyValue","slice","indexOf","getCurrentValue","values","focused","value","originValue","length","currentValue"],"mappings":"AAAA,SAASA,aAAT,QAA8B,iBAA9B;;AAEA,OAAO,IAAMC,iBAAiB,GAAG,GAA1B;AACP,OAAO,IAAMC,WAAW,GAAG,EAAE,KAAK,OAAP,EAAgBC,CAAC,EAAE,UAAnB,EAA+B,KAAK,aAApC,EAApB;;AAEP,OAAO,SAASC,cAAT,CAAwBC,WAAxB,EAAiG;AACtG,MAAIL,aAAa,CAACK,WAAD,CAAjB,EAAgC;AAC9B,QAAMC,KAA6B,GAAG,EAAtC;;AAEA,SAAK,IAAMC,GAAX,IAAkBF,WAAlB,EAA+B;AAC7BC,MAAAA,KAAK,CAACC,GAAD,CAAL,GAAa,IAAIC,MAAJ,CAAWH,WAAW,CAACE,GAAD,CAAtB,CAAb;AACD;;AAED,WAAOD,KAAP;AACD;;AAED,SAAOJ,WAAP;AACD;;AAED,OAAO,SAASO,WAAT,CAAqBC,QAArB,EAAkE;AACvE,MAAIA,QAAQ,KAAK,IAAjB,EAAuB;AACrB,WAAO,EAAP;AACD;;AAED,SAAOA,QAAQ,KAAKC,SAAb,GAAyBV,iBAAzB,GAA6CS,QAApD;AACD;;;;;;;;;AASD,OAAO,SAASE,cAAT,CAAwBC,UAAxB,EAA4CH,QAA5C,EAAyF;AAC9F,SAAOG,UAAU,CAACC,KAAX,CAAiB,CAAjB,EAAoBD,UAAU,CAACE,OAAX,CAAmBN,WAAW,CAACC,QAAD,CAA9B,CAApB,CAAP;AACD;;AAED,OAAO,SAASM,eAAT;AACLC,MADK;AAELC,OAFK;AAGLR,QAHK;AAIgD;AACrD,MAAQG,UAAR,GAA2CI,MAA3C,CAAQJ,UAAR,CAAoBM,KAApB,GAA2CF,MAA3C,CAAoBE,KAApB,CAA2BC,WAA3B,GAA2CH,MAA3C,CAA2BG,WAA3B;;AAEA,MAAIF,OAAO,IAAIE,WAAW,CAACC,MAAZ,KAAuB,CAAlC,IAAuCR,UAAU,CAACQ,MAAX,GAAoB,CAA/D,EAAkE;AAChE,QAAMC,aAAY,GAAGV,cAAc,CAACC,UAAD,EAAaH,QAAb,CAAnC;AACA,WAAO,CAACY,aAAD,EAAeA,aAAf,EAA6BT,UAAU,CAACC,KAAX,CAAiBQ,aAAY,CAACD,MAA9B,CAA7B,CAAP;AACD;;AAED,SAAO,CAACF,KAAD,EAAQC,WAAR,EAAqBP,UAAU,CAACC,KAAX,CAAiBM,WAAW,CAACC,MAA7B,CAArB,CAAP;AACD","sourcesContent":["import { isNonNullable } from '../../lib/utils';\n\nexport const DEFAULT_MASK_CHAR = '_';\nexport const DEFINITIONS = { '9': /[0-9]/, a: /[A-Za-z]/, '*': /[A-Za-z0-9]/ };\n\nexport function getDefinitions(formatChars: Record<string, string> | undefined): Record<string, RegExp> {\n if (isNonNullable(formatChars)) {\n const chars: Record<string, RegExp> = {};\n\n for (const key in formatChars) {\n chars[key] = new RegExp(formatChars[key]);\n }\n\n return chars;\n }\n\n return DEFINITIONS;\n}\n\nexport function getMaskChar(maskChar: string | null | undefined): string {\n if (maskChar === null) {\n return '';\n }\n\n return maskChar === undefined ? DEFAULT_MASK_CHAR : maskChar;\n}\n\ninterface MaskedInputValues {\n // Users can unmask value themselves. In these cases we take origin value length\n originValue: string;\n value: string;\n emptyValue: string;\n}\n\nexport function getFocusPrefix(emptyValue: string, maskChar: string | null | undefined): string {\n return emptyValue.slice(0, emptyValue.indexOf(getMaskChar(maskChar)));\n}\n\nexport function getCurrentValue(\n values: MaskedInputValues,\n focused: boolean,\n maskChar: string | null | undefined,\n): [currentValue: string, left: string, right: string] {\n const { emptyValue, value, originValue } = values;\n\n if (focused && originValue.length === 0 && emptyValue.length > 0) {\n const currentValue = getFocusPrefix(emptyValue, maskChar);\n return [currentValue, currentValue, emptyValue.slice(currentValue.length)];\n }\n\n return [value, originValue, emptyValue.slice(originValue.length)];\n}\n"]}
|