@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.
Files changed (105) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/cjs/components/Input/Input.d.ts +22 -5
  3. package/cjs/components/Input/Input.js +33 -14
  4. package/cjs/components/Input/Input.js.map +1 -1
  5. package/cjs/components/Input/Input.typings.d.ts +7 -0
  6. package/cjs/components/Input/Input.typings.js +1 -0
  7. package/cjs/components/Input/Input.typings.js.map +1 -0
  8. package/cjs/components/Input/index.d.ts +1 -0
  9. package/cjs/components/Input/index.js +2 -1
  10. package/cjs/components/Input/index.js.map +1 -1
  11. package/cjs/components/MaskedInput/MaskedInput.d.ts +24 -0
  12. package/cjs/components/MaskedInput/MaskedInput.js +78 -0
  13. package/cjs/components/MaskedInput/MaskedInput.js.map +1 -0
  14. package/cjs/components/MaskedInput/MaskedInput.md +21 -0
  15. package/cjs/components/MaskedInput/index.js.map +1 -0
  16. package/cjs/components/Token/Token.js +1 -1
  17. package/cjs/components/Token/Token.js.map +1 -1
  18. package/cjs/internal/{MaskedInput/MaskedInput.d.ts → InternalMaskedInput/InternalMaskedInput.d.ts} +8 -5
  19. package/cjs/internal/{MaskedInput/MaskedInput.js → InternalMaskedInput/InternalMaskedInput.js} +11 -8
  20. package/cjs/internal/InternalMaskedInput/InternalMaskedInput.js.map +1 -0
  21. package/cjs/internal/InternalMaskedInput/InternalMaskedInput.styles.js.map +1 -0
  22. package/cjs/internal/InternalMaskedInput/index.d.ts +1 -0
  23. package/cjs/internal/InternalMaskedInput/index.js +1 -0
  24. package/cjs/internal/InternalMaskedInput/index.js.map +1 -0
  25. package/cjs/internal/MaskedInputElement/MaskedInputElement.d.ts +14 -0
  26. package/cjs/internal/MaskedInputElement/MaskedInputElement.helpers.d.ts +16 -0
  27. package/cjs/internal/MaskedInputElement/MaskedInputElement.helpers.js +52 -0
  28. package/cjs/internal/MaskedInputElement/MaskedInputElement.helpers.js.map +1 -0
  29. package/cjs/internal/MaskedInputElement/MaskedInputElement.js +196 -0
  30. package/cjs/internal/MaskedInputElement/MaskedInputElement.js.map +1 -0
  31. package/cjs/internal/MaskedInputElement/MaskedInputElement.styles.js +29 -0
  32. package/cjs/internal/MaskedInputElement/MaskedInputElement.styles.js.map +1 -0
  33. package/cjs/internal/MaskedInputElement/index.d.ts +1 -0
  34. package/cjs/internal/MaskedInputElement/index.js +1 -0
  35. package/cjs/internal/MaskedInputElement/index.js.map +1 -0
  36. package/cjs/lib/utils.d.ts +7 -0
  37. package/cjs/lib/utils.js +25 -2
  38. package/cjs/lib/utils.js.map +1 -1
  39. package/components/Input/Input/Input.js +14 -5
  40. package/components/Input/Input/Input.js.map +1 -1
  41. package/components/Input/Input.d.ts +22 -5
  42. package/components/Input/Input.typings/Input.typings.js +1 -0
  43. package/components/Input/Input.typings/Input.typings.js.map +1 -0
  44. package/components/Input/Input.typings/package.json +6 -0
  45. package/components/Input/Input.typings.d.ts +7 -0
  46. package/components/Input/index/index.js +2 -1
  47. package/components/Input/index/index.js.map +1 -1
  48. package/components/Input/index.d.ts +1 -0
  49. package/components/MaskedInput/MaskedInput/MaskedInput.js +62 -0
  50. package/components/MaskedInput/MaskedInput/MaskedInput.js.map +1 -0
  51. package/{internal → components}/MaskedInput/MaskedInput/package.json +1 -1
  52. package/components/MaskedInput/MaskedInput.d.ts +24 -0
  53. package/components/MaskedInput/MaskedInput.md +21 -0
  54. package/components/MaskedInput/index/index.js.map +1 -0
  55. package/{internal → components}/MaskedInput/index/package.json +1 -1
  56. package/{internal → components}/MaskedInput/package.json +1 -1
  57. package/components/Token/Token/Token.js +4 -3
  58. package/components/Token/Token/Token.js.map +1 -1
  59. package/internal/{MaskedInput/MaskedInput/MaskedInput.js → InternalMaskedInput/InternalMaskedInput/InternalMaskedInput.js} +13 -9
  60. package/internal/InternalMaskedInput/InternalMaskedInput/InternalMaskedInput.js.map +1 -0
  61. package/internal/InternalMaskedInput/InternalMaskedInput/package.json +6 -0
  62. package/internal/{MaskedInput/MaskedInput.d.ts → InternalMaskedInput/InternalMaskedInput.d.ts} +8 -5
  63. package/{cjs/internal/MaskedInput/MaskedInput.styles.js.map → internal/InternalMaskedInput/InternalMaskedInput.styles/InternalMaskedInput.styles.js.map} +1 -1
  64. package/internal/InternalMaskedInput/InternalMaskedInput.styles/package.json +6 -0
  65. package/internal/InternalMaskedInput/InternalMaskedInput.styles.d.ts +6 -0
  66. package/internal/InternalMaskedInput/index/index.js +1 -0
  67. package/internal/InternalMaskedInput/index/index.js.map +1 -0
  68. package/internal/InternalMaskedInput/index/package.json +6 -0
  69. package/internal/InternalMaskedInput/index.d.ts +1 -0
  70. package/internal/InternalMaskedInput/package.json +6 -0
  71. package/internal/MaskedInputElement/MaskedInputElement/MaskedInputElement.js +206 -0
  72. package/internal/MaskedInputElement/MaskedInputElement/MaskedInputElement.js.map +1 -0
  73. package/internal/MaskedInputElement/MaskedInputElement/package.json +6 -0
  74. package/internal/MaskedInputElement/MaskedInputElement.d.ts +14 -0
  75. package/internal/MaskedInputElement/MaskedInputElement.helpers/MaskedInputElement.helpers.js +43 -0
  76. package/internal/MaskedInputElement/MaskedInputElement.helpers/MaskedInputElement.helpers.js.map +1 -0
  77. package/internal/MaskedInputElement/MaskedInputElement.helpers/package.json +6 -0
  78. package/internal/MaskedInputElement/MaskedInputElement.helpers.d.ts +16 -0
  79. package/internal/MaskedInputElement/MaskedInputElement.styles/MaskedInputElement.styles.js +16 -0
  80. package/internal/MaskedInputElement/MaskedInputElement.styles/MaskedInputElement.styles.js.map +1 -0
  81. package/internal/MaskedInputElement/MaskedInputElement.styles/package.json +6 -0
  82. package/internal/MaskedInputElement/MaskedInputElement.styles.d.ts +6 -0
  83. package/internal/MaskedInputElement/index/index.js +1 -0
  84. package/internal/MaskedInputElement/index/index.js.map +1 -0
  85. package/internal/MaskedInputElement/index/package.json +6 -0
  86. package/internal/MaskedInputElement/index.d.ts +1 -0
  87. package/internal/MaskedInputElement/package.json +6 -0
  88. package/lib/utils/utils.js +27 -1
  89. package/lib/utils/utils.js.map +1 -1
  90. package/lib/utils.d.ts +7 -0
  91. package/package.json +4 -3
  92. package/cjs/internal/MaskedInput/MaskedInput.js.map +0 -1
  93. package/cjs/internal/MaskedInput/index.js.map +0 -1
  94. package/internal/MaskedInput/MaskedInput/MaskedInput.js.map +0 -1
  95. package/internal/MaskedInput/MaskedInput.styles/MaskedInput.styles.js.map +0 -1
  96. package/internal/MaskedInput/MaskedInput.styles/package.json +0 -6
  97. package/internal/MaskedInput/index/index.js.map +0 -1
  98. /package/cjs/{internal → components}/MaskedInput/index.d.ts +0 -0
  99. /package/cjs/{internal → components}/MaskedInput/index.js +0 -0
  100. /package/cjs/internal/{MaskedInput/MaskedInput.styles.d.ts → InternalMaskedInput/InternalMaskedInput.styles.d.ts} +0 -0
  101. /package/cjs/internal/{MaskedInput/MaskedInput.styles.js → InternalMaskedInput/InternalMaskedInput.styles.js} +0 -0
  102. /package/{internal/MaskedInput/MaskedInput.styles.d.ts → cjs/internal/MaskedInputElement/MaskedInputElement.styles.d.ts} +0 -0
  103. /package/{internal → components}/MaskedInput/index/index.js +0 -0
  104. /package/{internal → components}/MaskedInput/index.d.ts +0 -0
  105. /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"]}
@@ -1,5 +1,5 @@
1
1
  {
2
- "main": "../../../cjs/internal/MaskedInput/index.js",
2
+ "main": "../../../cjs/components/MaskedInput/index.js",
3
3
  "module": "index",
4
4
  "types": "../index.d.ts",
5
5
  "sideEffects": false
@@ -1,5 +1,5 @@
1
1
  {
2
- "main": "../../cjs/internal/MaskedInput/index.js",
2
+ "main": "../../cjs/components/MaskedInput/index.js",
3
3
  "module": "index",
4
4
  "types": "index.d.ts",
5
5
  "sideEffects": false
@@ -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 "../MaskedInput.styles";
15
+ import { styles } from "../InternalMaskedInput.styles";
16
16
  export var MaskedInputDataTids = {
17
17
  root: 'MaskedInput__root'
18
18
  };
19
- export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
20
- _inheritsLoose(MaskedInput, _React$PureComponent);
19
+ /** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.
20
+ * todo: выпилить в 5 версии библиотеки.
21
+ * */
21
22
 
22
- function MaskedInput(_props) {
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(MaskedInput.defaultProps);
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 = MaskedInput.prototype;
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 MaskedInput;
216
+ return InternalMaskedInput;
213
217
  }(React.PureComponent);
214
- MaskedInput.__KONTUR_REACT_UI__ = 'MaskedInput';
215
- MaskedInput.defaultProps = {
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"]}
@@ -0,0 +1,6 @@
1
+ {
2
+ "main": "../../../cjs/internal/InternalMaskedInput/InternalMaskedInput.js",
3
+ "module": "InternalMaskedInput",
4
+ "types": "../InternalMaskedInput.d.ts",
5
+ "sideEffects": false
6
+ }
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- export interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
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<MaskedInputProps, 'maskChar'>>;
20
+ declare type DefaultProps = Required<Pick<InternalMaskedInputProps, 'maskChar'>>;
21
21
  export declare const MaskedInputDataTids: {
22
22
  readonly root: "MaskedInput__root";
23
23
  };
24
- export declare class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {
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: MaskedInputProps);
34
+ constructor(props: InternalMaskedInputProps);
32
35
  componentDidMount(): void;
33
- componentDidUpdate(prevProps: MaskedInputProps): void;
36
+ componentDidUpdate(prevProps: InternalMaskedInputProps): void;
34
37
  render(): JSX.Element;
35
38
  private renderMain;
36
39
  private getValue;
@@ -1 +1 @@
1
- {"version":3,"sources":["MaskedInput.styles.ts"],"names":["styles","container","css","inputMask","t","placeholderColor","inputMaskLeft"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,SADiC,uBACrB;AACV,eAAOC,YAAP;;;;;;AAMD,GARgC;AASjCC,EAAAA,SATiC,qBASvBC,CATuB,EASb;AAClB,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACC,gBADb;;;;;;AAOD,GAjBgC;AAkBjCC,EAAAA,aAlBiC,2BAkBjB;AACd,eAAOJ,YAAP;;;;;;AAMD,GAzBgC,EAAb,CAAf,C","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"]}
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,6 @@
1
+ {
2
+ "main": "../../../cjs/internal/InternalMaskedInput/InternalMaskedInput.styles.js",
3
+ "module": "InternalMaskedInput.styles",
4
+ "types": "../InternalMaskedInput.styles.d.ts",
5
+ "sideEffects": false
6
+ }
@@ -0,0 +1,6 @@
1
+ import { Theme } from '../../lib/theming/Theme';
2
+ export declare const styles: {
3
+ container(): string;
4
+ inputMask(t: Theme): string;
5
+ inputMaskLeft(): string;
6
+ };
@@ -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,6 @@
1
+ {
2
+ "main": "../../../cjs/internal/InternalMaskedInput/index.js",
3
+ "module": "index",
4
+ "types": "../index.d.ts",
5
+ "sideEffects": false
6
+ }
@@ -0,0 +1 @@
1
+ export * from './InternalMaskedInput';
@@ -0,0 +1,6 @@
1
+ {
2
+ "main": "../../cjs/internal/InternalMaskedInput/index.js",
3
+ "module": "index",
4
+ "types": "index.d.ts",
5
+ "sideEffects": false
6
+ }
@@ -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,6 @@
1
+ {
2
+ "main": "../../../cjs/internal/MaskedInputElement/MaskedInputElement.js",
3
+ "module": "MaskedInputElement",
4
+ "types": "../MaskedInputElement.d.ts",
5
+ "sideEffects": false
6
+ }
@@ -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
+ }
@@ -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"]}
@@ -0,0 +1,6 @@
1
+ {
2
+ "main": "../../../cjs/internal/MaskedInputElement/MaskedInputElement.helpers.js",
3
+ "module": "MaskedInputElement.helpers",
4
+ "types": "../MaskedInputElement.helpers.d.ts",
5
+ "sideEffects": false
6
+ }