@wireapp/react-ui-kit 8.5.1 → 8.5.4
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 +30 -0
- package/package.json +2 -2
- package/src/Form/Button.d.js +0 -4
- package/src/Form/Button.d.ts +2 -2
- package/src/Form/Button.js +22 -6
- package/src/Form/Button.js.map +1 -1
- package/src/Form/Checkbox.js +9 -13
- package/src/Form/Checkbox.js.map +1 -1
- package/src/Form/Checkbox.md +1 -1
- package/src/Form/CodeInput.js +2 -1
- package/src/Form/CodeInput.js.map +1 -1
- package/src/Form/Input.d.ts +1 -0
- package/src/Form/Input.js +11 -6
- package/src/Form/Input.js.map +1 -1
- package/src/Form/Select.d.js +0 -4
- package/src/Form/Select.d.ts +8 -7
- package/src/Form/Select.js +30 -20
- package/src/Form/Select.js.map +1 -1
- package/src/Form/Select.md +11 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,36 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [8.5.4](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.5.3...@wireapp/react-ui-kit@8.5.4) (2022-06-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* Improve Checkbox and Select behaviors ([#4286](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4286)) ([3ebe6a2](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/3ebe6a27021e49c5e13c818a031d91fdb6cb83e6))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [8.5.3](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.5.2...@wireapp/react-ui-kit@8.5.3) (2022-06-10)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @wireapp/react-ui-kit
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [8.5.2](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.5.1...@wireapp/react-ui-kit@8.5.2) (2022-06-01)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Bug Fixes
|
|
29
|
+
|
|
30
|
+
* Select default value ([#4279](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4279)) ([2241ecb](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/2241ecbc752bf0fa898f046efe94f84c510d8904))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
6
36
|
## [8.5.1](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.5.0...@wireapp/react-ui-kit@8.5.1) (2022-05-31)
|
|
7
37
|
|
|
8
38
|
|
package/package.json
CHANGED
|
@@ -67,6 +67,6 @@
|
|
|
67
67
|
"test:update": "yarn test --updateSnapshot",
|
|
68
68
|
"test:project": "yarn dist && yarn test"
|
|
69
69
|
},
|
|
70
|
-
"version": "8.5.
|
|
71
|
-
"gitHead": "
|
|
70
|
+
"version": "8.5.4",
|
|
71
|
+
"gitHead": "d9b71b067cf68fb1fbb2c619f413bcd884bc090c"
|
|
72
72
|
}
|
package/src/Form/Button.d.js
CHANGED
package/src/Form/Button.d.ts
CHANGED
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
import { CSSObject, jsx } from '@emotion/react';
|
|
3
3
|
import type { Theme } from '../Layout';
|
|
4
4
|
import { TextProps } from '../Text';
|
|
5
|
-
declare enum ButtonVariant {
|
|
5
|
+
export declare enum ButtonVariant {
|
|
6
6
|
PRIMARY = "primary",
|
|
7
7
|
SECONDARY = "secondary",
|
|
8
8
|
TERTIARY = "tertiary",
|
|
9
|
+
QUATERNARY = "quaternary",
|
|
9
10
|
SEND = "send"
|
|
10
11
|
}
|
|
11
12
|
export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
|
|
@@ -18,4 +19,3 @@ export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
|
|
|
18
19
|
export declare const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject;
|
|
19
20
|
export declare const Button: ({ showLoading, children, loadingColor, ...props }: ButtonProps) => jsx.JSX.Element;
|
|
20
21
|
export declare const filterButtonProps: (props: ButtonProps) => Object;
|
|
21
|
-
export {};
|
package/src/Form/Button.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.filterButtonProps = exports.Button = exports.buttonStyle = void 0;
|
|
8
|
+
exports.filterButtonProps = exports.Button = exports.buttonStyle = exports.ButtonVariant = void 0;
|
|
9
9
|
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
11
|
|
|
@@ -33,13 +33,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
33
33
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
34
34
|
|
|
35
35
|
var ButtonVariant;
|
|
36
|
+
exports.ButtonVariant = ButtonVariant;
|
|
36
37
|
|
|
37
38
|
(function (ButtonVariant) {
|
|
38
39
|
ButtonVariant["PRIMARY"] = "primary";
|
|
39
40
|
ButtonVariant["SECONDARY"] = "secondary";
|
|
40
41
|
ButtonVariant["TERTIARY"] = "tertiary";
|
|
42
|
+
ButtonVariant["QUATERNARY"] = "quaternary";
|
|
41
43
|
ButtonVariant["SEND"] = "send";
|
|
42
|
-
})(ButtonVariant || (ButtonVariant = {}));
|
|
44
|
+
})(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
|
|
43
45
|
|
|
44
46
|
var buttonStyle = function buttonStyle(theme, _ref) {
|
|
45
47
|
var _ref$variant = _ref.variant,
|
|
@@ -66,7 +68,7 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
66
68
|
_ref$truncate = _ref.truncate,
|
|
67
69
|
truncate = _ref$truncate === void 0 ? true : _ref$truncate,
|
|
68
70
|
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
69
|
-
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
71
|
+
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
70
72
|
block: block,
|
|
71
73
|
bold: bold,
|
|
72
74
|
center: center,
|
|
@@ -100,7 +102,7 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
100
102
|
minWidth: '125px',
|
|
101
103
|
padding: '0 16px'
|
|
102
104
|
})), variant === ButtonVariant.PRIMARY && _objectSpread({
|
|
103
|
-
backgroundColor: backgroundColor || disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.BLUE,
|
|
105
|
+
backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.BLUE),
|
|
104
106
|
color: disabled ? _Identity.COLOR_V2.GRAY_80 : _Identity.COLOR_V2.WHITE
|
|
105
107
|
}, !disabled && {
|
|
106
108
|
'&:hover, &:focus': {
|
|
@@ -113,7 +115,7 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
113
115
|
backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_700
|
|
114
116
|
}
|
|
115
117
|
})), variant === ButtonVariant.SECONDARY && _objectSpread({
|
|
116
|
-
backgroundColor: backgroundColor || disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE,
|
|
118
|
+
backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE),
|
|
117
119
|
border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
|
|
118
120
|
color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK
|
|
119
121
|
}, !disabled && {
|
|
@@ -138,8 +140,22 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
138
140
|
'&:focus': {
|
|
139
141
|
border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_300)
|
|
140
142
|
}
|
|
143
|
+
})), variant === ButtonVariant.QUATERNARY && _objectSpread({
|
|
144
|
+
backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.GREEN),
|
|
145
|
+
color: disabled ? _Identity.COLOR_V2.GRAY_80 : _Identity.COLOR_V2.WHITE,
|
|
146
|
+
lineHeight: '24px'
|
|
147
|
+
}, !disabled && {
|
|
148
|
+
'&:hover, &:focus': {
|
|
149
|
+
backgroundColor: _Identity.COLOR_V2.GREEN_LIGHT_600
|
|
150
|
+
},
|
|
151
|
+
'&:focus': {
|
|
152
|
+
border: "1px solid ".concat(_Identity.COLOR_V2.GREEN_LIGHT_700)
|
|
153
|
+
},
|
|
154
|
+
'&:active': {
|
|
155
|
+
backgroundColor: _Identity.COLOR_V2.GREEN_LIGHT_700
|
|
156
|
+
}
|
|
141
157
|
})), variant === ButtonVariant.SEND && _objectSpread({
|
|
142
|
-
backgroundColor: backgroundColor || disabled ? _Identity.COLOR_V2.GRAY_70 : _Identity.COLOR_V2.BLUE,
|
|
158
|
+
backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_70 : _Identity.COLOR_V2.BLUE),
|
|
143
159
|
width: '40px'
|
|
144
160
|
}, !disabled && {
|
|
145
161
|
'&:hover, &:focus': {
|
package/src/Form/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","COLOR_V2","GRAY_50","BLUE","GRAY_80","BLUE_LIGHT_600","BLUE_LIGHT_700","SECONDARY","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE_LIGHT_50","BLUE_LIGHT_300","GRAY_70","BLUE_LIGHT_800","Button","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nenum ButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n TERTIARY = 'tertiary',\n SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n variant?: ButtonVariant;\n backgroundColor?: string;\n loadingColor?: string;\n noCapital?: boolean;\n showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n theme,\n {\n variant = ButtonVariant.PRIMARY,\n backgroundColor,\n block = false,\n disabled = false,\n noCapital = false,\n bold = true,\n center = true,\n color = COLOR.WHITE,\n fontSize = '16px',\n noWrap = true,\n textTransform = 'none',\n truncate = true,\n ...props\n },\n) => ({\n ...textStyle(theme, {\n block,\n bold,\n center,\n disabled,\n fontSize,\n noWrap,\n textTransform,\n truncate,\n ...props,\n }),\n border: 0,\n cursor: disabled ? 'default' : 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: '16px',\n padding: 0,\n outline: 'none',\n textDecoration: 'none',\n touchAction: 'manipulation',\n transition: defaultTransition,\n width: block ? '100%' : 'auto',\n '&:hover, &:focus': {\n textDecoration: 'none',\n },\n ...(variant !== ButtonVariant.TERTIARY && {\n borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n height: variant === ButtonVariant.SEND ? '40px' : '48px',\n lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n ...(variant !== ButtonVariant.SEND && {\n maxWidth: '100%',\n minWidth: '125px',\n padding: '0 16px',\n }),\n }),\n ...(variant === ButtonVariant.PRIMARY && {\n backgroundColor: backgroundColor || disabled ? COLOR_V2.GRAY_50 : COLOR_V2.BLUE,\n color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_700}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n },\n }),\n }),\n ...(variant === ButtonVariant.SECONDARY && {\n backgroundColor: backgroundColor || disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE,\n border: `1px solid ${COLOR_V2.GRAY_40}`,\n color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n ...(!disabled && {\n '&:hover, &:focus': {\n border: `1px solid ${COLOR_V2.BLUE}`,\n },\n '&:focus': {\n color: COLOR_V2.BLUE,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n border: `1px solid ${COLOR_V2.BLUE}`,\n color: COLOR_V2.BLUE,\n },\n }),\n }),\n ...(variant === ButtonVariant.TERTIARY && {\n color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n lineHeight: '24px',\n ...(!disabled && {\n '&:hover, &:focus': {\n color: COLOR_V2.BLUE,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_300}`,\n },\n }),\n }),\n ...(variant === ButtonVariant.SEND && {\n backgroundColor: backgroundColor || disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE,\n width: '40px',\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n },\n }),\n }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}
|
|
1
|
+
{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","COLOR_V2","GRAY_50","BLUE","GRAY_80","BLUE_LIGHT_600","BLUE_LIGHT_700","SECONDARY","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE_LIGHT_50","BLUE_LIGHT_300","QUATERNARY","GREEN","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE_LIGHT_800","Button","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;IAEYA,a;;;WAAAA,a;AAAAA,EAAAA,a;AAAAA,EAAAA,a;AAAAA,EAAAA,a;AAAAA,EAAAA,a;AAAAA,EAAAA,a;GAAAA,a,6BAAAA,a;;AAgBL,IAAMC,WAAkE,GAAG,SAArEA,WAAqE,CAChFC,KADgF;AAAA,0BAG9EC,OAH8E;AAAA,MAG9EA,OAH8E,6BAGpEH,aAAa,CAACI,OAHsD;AAAA,MAI9EC,eAJ8E,QAI9EA,eAJ8E;AAAA,wBAK9EC,KAL8E;AAAA,MAK9EA,KAL8E,2BAKtE,KALsE;AAAA,2BAM9EC,QAN8E;AAAA,MAM9EA,QAN8E,8BAMnE,KANmE;AAAA,4BAO9EC,SAP8E;AAAA,MAO9EA,SAP8E,+BAOlE,KAPkE;AAAA,uBAQ9EC,IAR8E;AAAA,MAQ9EA,IAR8E,0BAQvE,IARuE;AAAA,yBAS9EC,MAT8E;AAAA,MAS9EA,MAT8E,4BASrE,IATqE;AAAA,wBAU9EC,KAV8E;AAAA,MAU9EA,KAV8E,2BAUtEC,gBAAMC,KAVgE;AAAA,2BAW9EC,QAX8E;AAAA,MAW9EA,QAX8E,8BAWnE,MAXmE;AAAA,yBAY9EC,MAZ8E;AAAA,MAY9EA,MAZ8E,4BAYrE,IAZqE;AAAA,gCAa9EC,aAb8E;AAAA,MAa9EA,aAb8E,mCAa9D,MAb8D;AAAA,2BAc9EC,QAd8E;AAAA,MAc9EA,QAd8E,8BAcnE,IAdmE;AAAA,MAe3EC,KAf2E;AAAA,+GAkB7E,qBAAUhB,KAAV;AACDI,IAAAA,KAAK,EAALA,KADC;AAEDG,IAAAA,IAAI,EAAJA,IAFC;AAGDC,IAAAA,MAAM,EAANA,MAHC;AAIDH,IAAAA,QAAQ,EAARA,QAJC;AAKDO,IAAAA,QAAQ,EAARA,QALC;AAMDC,IAAAA,MAAM,EAANA,MANC;AAODC,IAAAA,aAAa,EAAbA,aAPC;AAQDC,IAAAA,QAAQ,EAARA;AARC,KASEC,KATF,EAlB6E;AA6BhFC,IAAAA,MAAM,EAAE,CA7BwE;AA8BhFC,IAAAA,MAAM,EAAEb,QAAQ,GAAG,SAAH,GAAe,SA9BiD;AA+BhFc,IAAAA,OAAO,EAAE,MA/BuE;AAgChFC,IAAAA,UAAU,EAAE,QAhCoE;AAiChFC,IAAAA,cAAc,EAAE,QAjCgE;AAkChFC,IAAAA,YAAY,EAAE,MAlCkE;AAmChFC,IAAAA,OAAO,EAAE,CAnCuE;AAoChFC,IAAAA,OAAO,EAAE,MApCuE;AAqChFC,IAAAA,cAAc,EAAE,MArCgE;AAsChFC,IAAAA,WAAW,EAAE,cAtCmE;AAuChFC,IAAAA,UAAU,EAAEC,0BAvCoE;AAwChFC,IAAAA,KAAK,EAAEzB,KAAK,GAAG,MAAH,GAAY,MAxCwD;AAyChF,wBAAoB;AAClBqB,MAAAA,cAAc,EAAE;AADE;AAzC4D,KA4C5ExB,OAAO,KAAKH,aAAa,CAACgC,QAA1B;AACFC,IAAAA,YAAY,EAAE9B,OAAO,KAAKH,aAAa,CAACkC,IAA1B,GAAiC,MAAjC,GAA0C,MADtD;AAEFC,IAAAA,MAAM,EAAEhC,OAAO,KAAKH,aAAa,CAACkC,IAA1B,GAAiC,MAAjC,GAA0C,MAFhD;AAGFE,IAAAA,UAAU,EAAEjC,OAAO,KAAKH,aAAa,CAACkC,IAA1B,GAAiC,MAAjC,GAA0C;AAHpD,KAIE/B,OAAO,KAAKH,aAAa,CAACkC,IAA1B,IAAkC;AACpCG,IAAAA,QAAQ,EAAE,MAD0B;AAEpCC,IAAAA,QAAQ,EAAE,OAF0B;AAGpCb,IAAAA,OAAO,EAAE;AAH2B,GAJpC,CA5C4E,GAsD5EtB,OAAO,KAAKH,aAAa,CAACI,OAA1B;AACFC,IAAAA,eAAe,EAAEA,eAAe,KAAKE,QAAQ,GAAGgC,mBAASC,OAAZ,GAAsBD,mBAASE,IAA5C,CAD9B;AAEF9B,IAAAA,KAAK,EAAEJ,QAAQ,GAAGgC,mBAASG,OAAZ,GAAsBH,mBAAS1B;AAF5C,KAGE,CAACN,QAAD,IAAa;AACf,wBAAoB;AAClBF,MAAAA,eAAe,EAAEkC,mBAASI;AADR,KADL;AAIf,eAAW;AACTxB,MAAAA,MAAM,sBAAeoB,mBAASK,cAAxB;AADG,KAJI;AAOf,gBAAY;AACVvC,MAAAA,eAAe,EAAEkC,mBAASK;AADhB;AAPG,GAHf,CAtD4E,GAqE5EzC,OAAO,KAAKH,aAAa,CAAC6C,SAA1B;AACFxC,IAAAA,eAAe,EAAEA,eAAe,KAAKE,QAAQ,GAAGgC,mBAASO,OAAZ,GAAsBP,mBAAS1B,KAA5C,CAD9B;AAEFM,IAAAA,MAAM,sBAAeoB,mBAASQ,OAAxB,CAFJ;AAGFpC,IAAAA,KAAK,EAAEJ,QAAQ,GAAGgC,mBAASS,OAAZ,GAAsBT,mBAASU;AAH5C,KAIE,CAAC1C,QAAD,IAAa;AACf,wBAAoB;AAClBY,MAAAA,MAAM,sBAAeoB,mBAASE,IAAxB;AADY,KADL;AAIf,eAAW;AACT9B,MAAAA,KAAK,EAAE4B,mBAASE;AADP,KAJI;AAOf,gBAAY;AACVpC,MAAAA,eAAe,EAAEkC,mBAASW,aADhB;AAEV/B,MAAAA,MAAM,sBAAeoB,mBAASE,IAAxB,CAFI;AAGV9B,MAAAA,KAAK,EAAE4B,mBAASE;AAHN;AAPG,GAJf,CArE4E,GAuF5EtC,OAAO,KAAKH,aAAa,CAACgC,QAA1B;AACFrB,IAAAA,KAAK,EAAEJ,QAAQ,GAAGgC,mBAASS,OAAZ,GAAsBT,mBAASU,KAD5C;AAEFb,IAAAA,UAAU,EAAE;AAFV,KAGE,CAAC7B,QAAD,IAAa;AACf,wBAAoB;AAClBI,MAAAA,KAAK,EAAE4B,mBAASE;AADE,KADL;AAIf,eAAW;AACTtB,MAAAA,MAAM,sBAAeoB,mBAASY,cAAxB;AADG;AAJI,GAHf,CAvF4E,GAmG5EhD,OAAO,KAAKH,aAAa,CAACoD,UAA1B;AACF/C,IAAAA,eAAe,EAAEA,eAAe,KAAKE,QAAQ,GAAGgC,mBAASC,OAAZ,GAAsBD,mBAASc,KAA5C,CAD9B;AAEF1C,IAAAA,KAAK,EAAEJ,QAAQ,GAAGgC,mBAASG,OAAZ,GAAsBH,mBAAS1B,KAF5C;AAGFuB,IAAAA,UAAU,EAAE;AAHV,KAIE,CAAC7B,QAAD,IAAa;AACf,wBAAoB;AAClBF,MAAAA,eAAe,EAAEkC,mBAASe;AADR,KADL;AAIf,eAAW;AACTnC,MAAAA,MAAM,sBAAeoB,mBAASgB,eAAxB;AADG,KAJI;AAOf,gBAAY;AACVlD,MAAAA,eAAe,EAAEkC,mBAASgB;AADhB;AAPG,GAJf,CAnG4E,GAmH5EpD,OAAO,KAAKH,aAAa,CAACkC,IAA1B;AACF7B,IAAAA,eAAe,EAAEA,eAAe,KAAKE,QAAQ,GAAGgC,mBAASiB,OAAZ,GAAsBjB,mBAASE,IAA5C,CAD9B;AAEFV,IAAAA,KAAK,EAAE;AAFL,KAGE,CAACxB,QAAD,IAAa;AACf,wBAAoB;AAClBF,MAAAA,eAAe,EAAEkC,mBAASI;AADR,KADL;AAIf,eAAW;AACTxB,MAAAA,MAAM,sBAAeoB,mBAASkB,cAAxB;AADG,KAJI;AAOf,gBAAY;AACVpD,MAAAA,eAAe,EAAEkC,mBAASK;AADhB;AAPG,GAHf,CAnH4E;AAAA,CAA3E;;;;AAoIA,IAAMc,MAAM,GAAG,SAATA,MAAS;AAAA,MAAEC,WAAF,SAAEA,WAAF;AAAA,MAAeC,QAAf,SAAeA,QAAf;AAAA,iCAAyBC,YAAzB;AAAA,MAAyBA,YAAzB,mCAAwCjD,gBAAMC,KAA9C;AAAA,MAAwDK,KAAxD;AAAA,SACpB;AAAQ,IAAA,GAAG,EAAE,aAAChB,KAAD;AAAA,aAAkBD,WAAW,CAACC,KAAD,EAAQgB,KAAR,CAA7B;AAAA;AAAb,KAA8D4C,iBAAiB,CAAC5C,KAAD,CAA/E,GACGyC,WAAW,GAAG,gBAAC,aAAD;AAAS,IAAA,IAAI,EAAE,EAAf;AAAmB,IAAA,KAAK,EAAEE,YAA1B;AAAwC,IAAA,KAAK,EAAE;AAACxC,MAAAA,OAAO,EAAE,MAAV;AAAkB0C,MAAAA,MAAM,EAAE;AAA1B;AAA/C,IAAH,GAA0FH,QADxG,CADoB;AAAA,CAAf;;;;AAMA,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAAC5C,KAAD,EAAwB;AACvD,SAAO,uBAAY,2BAAgBA,KAAhB,CAAZ,EAAmD,CAAC,iBAAD,EAAoB,WAApB,CAAnD,CAAP;AACD,CAFM","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n TERTIARY = 'tertiary',\n QUATERNARY = 'quaternary',\n SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n variant?: ButtonVariant;\n backgroundColor?: string;\n loadingColor?: string;\n noCapital?: boolean;\n showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n theme,\n {\n variant = ButtonVariant.PRIMARY,\n backgroundColor,\n block = false,\n disabled = false,\n noCapital = false,\n bold = true,\n center = true,\n color = COLOR.WHITE,\n fontSize = '16px',\n noWrap = true,\n textTransform = 'none',\n truncate = true,\n ...props\n },\n) => ({\n ...textStyle(theme, {\n block,\n bold,\n center,\n disabled,\n fontSize,\n noWrap,\n textTransform,\n truncate,\n ...props,\n }),\n border: 0,\n cursor: disabled ? 'default' : 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: '16px',\n padding: 0,\n outline: 'none',\n textDecoration: 'none',\n touchAction: 'manipulation',\n transition: defaultTransition,\n width: block ? '100%' : 'auto',\n '&:hover, &:focus': {\n textDecoration: 'none',\n },\n ...(variant !== ButtonVariant.TERTIARY && {\n borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n height: variant === ButtonVariant.SEND ? '40px' : '48px',\n lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n ...(variant !== ButtonVariant.SEND && {\n maxWidth: '100%',\n minWidth: '125px',\n padding: '0 16px',\n }),\n }),\n ...(variant === ButtonVariant.PRIMARY && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.BLUE),\n color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_700}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n },\n }),\n }),\n ...(variant === ButtonVariant.SECONDARY && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE),\n border: `1px solid ${COLOR_V2.GRAY_40}`,\n color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n ...(!disabled && {\n '&:hover, &:focus': {\n border: `1px solid ${COLOR_V2.BLUE}`,\n },\n '&:focus': {\n color: COLOR_V2.BLUE,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n border: `1px solid ${COLOR_V2.BLUE}`,\n color: COLOR_V2.BLUE,\n },\n }),\n }),\n ...(variant === ButtonVariant.TERTIARY && {\n color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n lineHeight: '24px',\n ...(!disabled && {\n '&:hover, &:focus': {\n color: COLOR_V2.BLUE,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_300}`,\n },\n }),\n }),\n ...(variant === ButtonVariant.QUATERNARY && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n lineHeight: '24px',\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.GREEN_LIGHT_700,\n },\n }),\n }),\n ...(variant === ButtonVariant.SEND && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE),\n width: '40px',\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n },\n }),\n }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}
|
package/src/Form/Checkbox.js
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
@@ -17,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
17
15
|
|
|
18
16
|
var _react = require("@emotion/react");
|
|
19
17
|
|
|
20
|
-
var _react2 =
|
|
18
|
+
var _react2 = _interopRequireDefault(require("react"));
|
|
21
19
|
|
|
22
20
|
var _Identity = require("../Identity");
|
|
23
21
|
|
|
@@ -30,10 +28,6 @@ var _Input = require("./Input");
|
|
|
30
28
|
var _excluded = ["id", "children", "style", "disabled"],
|
|
31
29
|
_excluded2 = ["color"];
|
|
32
30
|
|
|
33
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
34
|
-
|
|
35
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
36
|
-
|
|
37
31
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
38
32
|
|
|
39
33
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -88,7 +82,8 @@ var StyledLabel = function StyledLabel(props) {
|
|
|
88
82
|
|
|
89
83
|
var filterCheckboxProps = function filterCheckboxProps(props) {
|
|
90
84
|
return (0, _util.filterProps)(props, ['markInvalid']);
|
|
91
|
-
};
|
|
85
|
+
}; // We use Math.random..., because some of apps doesn't migrated to newest version of React.
|
|
86
|
+
|
|
92
87
|
|
|
93
88
|
var _ref3 = process.env.NODE_ENV === "production" ? {
|
|
94
89
|
name: "cz23tk",
|
|
@@ -96,13 +91,13 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
|
|
|
96
91
|
} : {
|
|
97
92
|
name: "1uw42d7-Checkbox",
|
|
98
93
|
styles: "align-items:center;display:flex;justify-content:flex-start;label:Checkbox;",
|
|
99
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
94
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoZWNrYm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxR0kiLCJmaWxlIjoiQ2hlY2tib3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtqc3h9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7Q09MT1IsIENPTE9SX1YyfSBmcm9tICcuLi9JZGVudGl0eSc7XG5pbXBvcnQge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHtUZXh0LCBUZXh0UHJvcHMsIHRleHRTdHlsZSwgdGV4dExpbmtTdHlsZX0gZnJvbSAnLi4vVGV4dCc7XG5pbXBvcnQge2ZpbHRlclByb3BzfSBmcm9tICcuLi91dGlsJztcbmltcG9ydCB7SU5QVVRfQ0xBU1NOQU1FLCBJbnB1dFByb3BzfSBmcm9tICcuL0lucHV0JztcblxuZXhwb3J0IGludGVyZmFjZSBTdHlsZWRMYWJlbFByb3BzPFQgPSBIVE1MTGFiZWxFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgbWFya0ludmFsaWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBmaWx0ZXJTdHlsZWRMYWJlbFByb3BzID0gKHByb3BzOiBTdHlsZWRMYWJlbFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuY29uc3QgY2hlY2tTdmcgPVxuICAnPHN2ZyB3aWR0aD1cIjE1XCIgaGVpZ2h0PVwiMTNcIiB2aWV3Qm94PVwiMCAwIDE2IDEzXCIgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiPjxwYXRoIGQ9XCJNNS42NTY4NSAxMi4wNzExTDE1Ljk4NDIgMS42MjczOEwxNC41NyAwLjIxMzE2N0w1LjY1Njg1IDkuMjQyNjRMMS40MTQyMSA1TDAgNi40MTQyMUw1LjY1Njg1IDEyLjA3MTFaXCIgZmlsbD1cIndoaXRlXCIvPjwvc3ZnPic7XG5cbmNvbnN0IFN0eWxlZExhYmVsID0gKHByb3BzOiBTdHlsZWRMYWJlbFByb3BzKSA9PiB7XG4gIGNvbnN0IHtkaXNhYmxlZCwgbWFya0ludmFsaWR9ID0gcHJvcHM7XG5cbiAgcmV0dXJuIChcbiAgICA8bGFiZWxcbiAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgICAgICAgW2AuJHtJTlBVVF9DTEFTU05BTUV9OmNoZWNrZWQgKyAmOjpiZWZvcmVgXToge1xuICAgICAgICAgIGJhY2tncm91bmQ6IGAke1xuICAgICAgICAgICAgZGlzYWJsZWQgPyBDT0xPUl9WMi5HUkFZXzYwIDogQ09MT1JfVjIuQkxVRVxuICAgICAgICAgIH0gdXJsKCdkYXRhOmltYWdlL3N2Zyt4bWw7IHV0ZjgsICR7Y2hlY2tTdmd9Jykgbm8tcmVwZWF0IGNlbnRlcmAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgIH0sXG4gICAgICAgIC4uLighZGlzYWJsZWQgJiYge1xuICAgICAgICAgIFtgLiR7SU5QVVRfQ0xBU1NOQU1FfTpmb2N1cyArICY6OmJlZm9yZWBdOiB7XG4gICAgICAgICAgICBib3JkZXJDb2xvcjogQ09MT1JfVjIuQkxVRSxcbiAgICAgICAgICB9LFxuICAgICAgICAgIFtgLiR7SU5QVVRfQ0xBU1NOQU1FfTpob3ZlciArICY6OmJlZm9yZWBdOiB7XG4gICAgICAgICAgICBib3JkZXJDb2xvcjogQ09MT1JfVjIuQkxVRSxcbiAgICAgICAgICB9LFxuICAgICAgICB9KSxcbiAgICAgICAgJyY6OmJlZm9yZSc6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kOiBkaXNhYmxlZCA/IENPTE9SX1YyLkdSQVlfMTAgOiBDT0xPUl9WMi5HUkFZXzIwLFxuICAgICAgICAgIC4uLighZGlzYWJsZWRcbiAgICAgICAgICAgID8ge1xuICAgICAgICAgICAgICAgIGJvcmRlcjogbWFya0ludmFsaWQgPyBgMS41cHggc29saWQgJHtDT0xPUl9WMi5SRUR9YCA6IGAxLjVweCBzb2xpZCAke0NPTE9SX1YyLkdSQVlfODB9YCxcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgOiB7XG4gICAgICAgICAgICAgICAgYm9yZGVyOiBgMS41cHggc29saWQgJHtDT0xPUl9WMi5HUkFZXzYwfWAsXG4gICAgICAgICAgICAgIH0pLFxuICAgICAgICAgIGJvcmRlclJhZGl1czogJzNweCcsXG4gICAgICAgICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gICAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgICAgICAgIGhlaWdodDogJzIycHgnLFxuICAgICAgICAgIGxpbmVIZWlnaHQ6ICcyMnB4JyxcbiAgICAgICAgICBtYXJnaW46ICcwIDhweCAwIC0xNnB4JyxcbiAgICAgICAgICB3aWR0aDogJzIycHgnLFxuICAgICAgICB9LFxuICAgICAgICBhOiB7XG4gICAgICAgICAgLi4udGV4dExpbmtTdHlsZSh0aGVtZSwge30pLFxuICAgICAgICB9LFxuICAgICAgICBsaW5lSGVpZ2h0OiAnMjJweCcsXG4gICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgICAgb3BhY2l0eTogZGlzYWJsZWQgPyAwLjU2IDogMSxcbiAgICAgIH0pfVxuICAgICAgey4uLmZpbHRlclN0eWxlZExhYmVsUHJvcHMocHJvcHMpfVxuICAgIC8+XG4gICk7XG59O1xuXG5pbnRlcmZhY2UgQ2hlY2tib3hQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gZXh0ZW5kcyBJbnB1dFByb3BzPFQ+IHtcbiAgaWQ/OiBzdHJpbmc7XG59XG5cbmNvbnN0IGZpbHRlckNoZWNrYm94UHJvcHMgPSAocHJvcHM6IENoZWNrYm94UHJvcHMpID0+IGZpbHRlclByb3BzKHByb3BzLCBbJ21hcmtJbnZhbGlkJ10pO1xuXG4vLyBXZSB1c2UgTWF0aC5yYW5kb20uLi4sIGJlY2F1c2Ugc29tZSBvZiBhcHBzIGRvZXNuJ3QgbWlncmF0ZWQgdG8gbmV3ZXN0IHZlcnNpb24gb2YgUmVhY3QuXG5leHBvcnQgY29uc3QgQ2hlY2tib3g6IFJlYWN0LkZDPENoZWNrYm94UHJvcHM8SFRNTElucHV0RWxlbWVudD4+ID0gUmVhY3QuZm9yd2FyZFJlZjxcbiAgSFRNTElucHV0RWxlbWVudCxcbiAgQ2hlY2tib3hQcm9wczxIVE1MSW5wdXRFbGVtZW50PlxuPigoe2lkID0gTWF0aC5yYW5kb20oKS50b1N0cmluZygpLCBjaGlsZHJlbiwgc3R5bGUsIGRpc2FibGVkLCAuLi5wcm9wc30sIHJlZikgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXt7XG4gICAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgIGp1c3RpZnlDb250ZW50OiAnZmxleC1zdGFydCcsXG4gICAgfX1cbiAgICBzdHlsZT17c3R5bGV9XG4gID5cbiAgICA8aW5wdXRcbiAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICBpZD17aWR9XG4gICAgICBzdHlsZT17e1xuICAgICAgICBoZWlnaHQ6ICcyMnB4JyxcbiAgICAgICAgbWFyZ2luQm90dG9tOiAnMCcsXG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIHdpZHRoOiAnMjJweCcsXG4gICAgICB9fVxuICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjbGFzc05hbWU9e0lOUFVUX0NMQVNTTkFNRX1cbiAgICAgIHsuLi5maWx0ZXJDaGVja2JveFByb3BzKHByb3BzKX1cbiAgICAvPlxuXG4gICAgPFN0eWxlZExhYmVsIGh0bWxGb3I9e2lkfSBkaXNhYmxlZD17ZGlzYWJsZWR9IG1hcmtJbnZhbGlkPXtwcm9wcy5tYXJrSW52YWxpZH0+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9TdHlsZWRMYWJlbD5cbiAgPC9kaXY+XG4pKTtcblxuZXhwb3J0IHR5cGUgQ2hlY2tib3hMYWJlbFByb3BzPFQgPSBIVE1MU3BhbkVsZW1lbnQ+ID0gVGV4dFByb3BzPFQ+O1xuXG5leHBvcnQgY29uc3QgQ2hlY2tib3hMYWJlbCA9ICh7Y29sb3IgPSBDT0xPUi5URVhULCAuLi5wcm9wc306IENoZWNrYm94TGFiZWxQcm9wcykgPT4gKFxuICA8VGV4dFxuICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgICAgIC4uLnRleHRTdHlsZSh0aGVtZSwge1xuICAgICAgICBjb2xvcixcbiAgICAgICAgLi4ucHJvcHMsXG4gICAgICB9KSxcbiAgICAgIGE6IHtcbiAgICAgICAgY29sb3I6IENPTE9SLkxJTkssXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gICAgICB9LFxuICAgIH0pfVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG4iXX0= */",
|
|
100
95
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
101
96
|
};
|
|
102
97
|
|
|
103
98
|
var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
|
|
104
99
|
var _ref2$id = _ref2.id,
|
|
105
|
-
id = _ref2$id === void 0 ? (
|
|
100
|
+
id = _ref2$id === void 0 ? Math.random().toString() : _ref2$id,
|
|
106
101
|
children = _ref2.children,
|
|
107
102
|
style = _ref2.style,
|
|
108
103
|
disabled = _ref2.disabled,
|
|
@@ -110,8 +105,8 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
|
|
|
110
105
|
return (0, _react.jsx)("div", {
|
|
111
106
|
css: _ref3,
|
|
112
107
|
style: style
|
|
113
|
-
}, (0, _react.jsx)(
|
|
114
|
-
type:
|
|
108
|
+
}, (0, _react.jsx)("input", (0, _extends2["default"])({
|
|
109
|
+
type: "checkbox",
|
|
115
110
|
id: id,
|
|
116
111
|
style: {
|
|
117
112
|
height: '22px',
|
|
@@ -120,7 +115,8 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
|
|
|
120
115
|
width: '22px'
|
|
121
116
|
},
|
|
122
117
|
disabled: disabled,
|
|
123
|
-
ref: ref
|
|
118
|
+
ref: ref,
|
|
119
|
+
className: _Input.INPUT_CLASSNAME
|
|
124
120
|
}, filterCheckboxProps(props))), (0, _react.jsx)(StyledLabel, {
|
|
125
121
|
htmlFor: id,
|
|
126
122
|
disabled: disabled,
|
package/src/Form/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","checkSvg","StyledLabel","disabled","markInvalid","theme","INPUT_CLASSNAME","background","COLOR_V2","GRAY_60","BLUE","borderColor","GRAY_10","GRAY_20","border","RED","GRAY_80","borderRadius","boxSizing","content","display","height","lineHeight","margin","width","a","opacity","filterCheckboxProps","Checkbox","React","forwardRef","ref","id","children","style","marginBottom","CheckboxLabel","color","COLOR","TEXT","LINK","textDecoration"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","checkSvg","StyledLabel","disabled","markInvalid","theme","INPUT_CLASSNAME","background","COLOR_V2","GRAY_60","BLUE","borderColor","GRAY_10","GRAY_20","border","RED","GRAY_80","borderRadius","boxSizing","content","display","height","lineHeight","margin","width","a","opacity","filterCheckboxProps","Checkbox","React","forwardRef","ref","id","Math","random","toString","children","style","marginBottom","CheckboxLabel","color","COLOR","TEXT","LINK","textDecoration"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle, textLinkStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n disabled?: boolean;\n markInvalid?: boolean;\n}\n\nconst filterStyledLabelProps = (props: StyledLabelProps) => filterProps(props, ['markInvalid']);\n\nconst checkSvg =\n '<svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" fill=\"white\"/></svg>';\n\nconst StyledLabel = (props: StyledLabelProps) => {\n const {disabled, markInvalid} = props;\n\n return (\n <label\n css={(theme: Theme) => ({\n [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n background: `${\n disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLUE\n } url('data:image/svg+xml; utf8, ${checkSvg}') no-repeat center`,\n borderColor: COLOR_V2.BLUE,\n },\n ...(!disabled && {\n [`.${INPUT_CLASSNAME}:focus + &::before`]: {\n borderColor: COLOR_V2.BLUE,\n },\n [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n borderColor: COLOR_V2.BLUE,\n },\n }),\n '&::before': {\n background: disabled ? COLOR_V2.GRAY_10 : COLOR_V2.GRAY_20,\n ...(!disabled\n ? {\n border: markInvalid ? `1.5px solid ${COLOR_V2.RED}` : `1.5px solid ${COLOR_V2.GRAY_80}`,\n }\n : {\n border: `1.5px solid ${COLOR_V2.GRAY_60}`,\n }),\n borderRadius: '3px',\n boxSizing: 'border-box',\n content: '\"\"',\n display: 'inline-block',\n height: '22px',\n lineHeight: '22px',\n margin: '0 8px 0 -16px',\n width: '22px',\n },\n a: {\n ...textLinkStyle(theme, {}),\n },\n lineHeight: '22px',\n display: 'flex',\n opacity: disabled ? 0.56 : 1,\n })}\n {...filterStyledLabelProps(props)}\n />\n );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n id?: string;\n}\n\nconst filterCheckboxProps = (props: CheckboxProps) => filterProps(props, ['markInvalid']);\n\n// We use Math.random..., because some of apps doesn't migrated to newest version of React.\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n HTMLInputElement,\n CheckboxProps<HTMLInputElement>\n>(({id = Math.random().toString(), children, style, disabled, ...props}, ref) => (\n <div\n css={{\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n }}\n style={style}\n >\n <input\n type=\"checkbox\"\n id={id}\n style={{\n height: '22px',\n marginBottom: '0',\n opacity: 0,\n width: '22px',\n }}\n disabled={disabled}\n ref={ref}\n className={INPUT_CLASSNAME}\n {...filterCheckboxProps(props)}\n />\n\n <StyledLabel htmlFor={id} disabled={disabled} markInvalid={props.markInvalid}>\n {children}\n </StyledLabel>\n </div>\n));\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({color = COLOR.TEXT, ...props}: CheckboxLabelProps) => (\n <Text\n css={(theme: Theme) => ({\n ...textStyle(theme, {\n color,\n ...props,\n }),\n a: {\n color: COLOR.LINK,\n textDecoration: 'none',\n },\n })}\n {...props}\n />\n);\n"],"file":"Checkbox.js"}
|
package/src/Form/Checkbox.md
CHANGED
package/src/Form/CodeInput.js
CHANGED
|
@@ -41,7 +41,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
41
41
|
} : {
|
|
42
42
|
name: "tvpiqi-CodeInputWrapper",
|
|
43
43
|
styles: "display:flex;justify-content:center;label:CodeInputWrapper;",
|
|
44
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvZGVJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJJIiwiZmlsZSI6IkNvZGVJbnB1dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7bm9vcH0gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0lucHV0UHJvcHMsIGlucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuaW1wb3J0IHtDT0xPUl9WMn0gZnJvbSAnLi4vSWRlbnRpdHknO1xuXG5jb25zdCBDb2RlSW5wdXRXcmFwcGVyID0gKHByb3BzOiBSZWFjdC5IVE1MUHJvcHM8SFRNTERpdkVsZW1lbnQ+KSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e3tcbiAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG5cbnR5cGUgRGlnaXRJbnB1dFByb3BzPFQgPSBIVE1MSW5wdXRFbGVtZW50PiA9IElucHV0UHJvcHM8VD47XG5cbmNvbnN0IGRpZ2l0SW5wdXRTdHlsZTogPFQ+
|
|
44
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvZGVJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJJIiwiZmlsZSI6IkNvZGVJbnB1dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7bm9vcH0gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0lucHV0UHJvcHMsIGlucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuaW1wb3J0IHtDT0xPUl9WMn0gZnJvbSAnLi4vSWRlbnRpdHknO1xuXG5jb25zdCBDb2RlSW5wdXRXcmFwcGVyID0gKHByb3BzOiBSZWFjdC5IVE1MUHJvcHM8SFRNTERpdkVsZW1lbnQ+KSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e3tcbiAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG5cbnR5cGUgRGlnaXRJbnB1dFByb3BzPFQgPSBIVE1MSW5wdXRFbGVtZW50PiA9IElucHV0UHJvcHM8VD47XG5cbmNvbnN0IGRpZ2l0SW5wdXRTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgcHJvcHM6IERpZ2l0SW5wdXRQcm9wczxUPikgPT4gQ1NTT2JqZWN0ID0gKHRoZW1lLCBwcm9wcykgPT4gKHtcbiAgLi4uaW5wdXRTdHlsZSh0aGVtZSwgcHJvcHMpLFxuICAnJiArICYnOiB7XG4gICAgbWFyZ2luTGVmdDogJzE5cHgnLFxuICB9LFxuICAnJjpob3Zlcic6IHtcbiAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzYwfWAsXG4gIH0sXG4gIGZvbnRTaXplOiAnMjRweCcsXG4gIGxpbmVIZWlnaHQ6ICcyOHB4JyxcbiAgYm9yZGVyUmFkaXVzOiAnMTJweCcsXG4gIHBhZGRpbmc6IDAsXG4gIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIHdpZHRoOiAnNDhweCcsXG4gIGhlaWdodDogJzU2cHgnLFxufSk7XG5cbmNvbnN0IERpZ2l0SW5wdXQ6IFJlYWN0LkZDPERpZ2l0SW5wdXRQcm9wczxIVE1MSW5wdXRFbGVtZW50Pj4gPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MSW5wdXRFbGVtZW50LFxuICBEaWdpdElucHV0UHJvcHM8SFRNTElucHV0RWxlbWVudD5cbj4oKHByb3BzLCByZWYpID0+IDxpbnB1dCByZWY9e3JlZn0gY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkaWdpdElucHV0U3R5bGUodGhlbWUsIHByb3BzKX0gey4uLnByb3BzfSB0eXBlPVwidGVsXCIgLz4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvZGVJbnB1dFByb3BzPFQgPSBIVE1MSW5wdXRFbGVtZW50PiBleHRlbmRzIElucHV0UHJvcHM8VD4ge1xuICBhdXRvRm9jdXM/OiBib29sZWFuO1xuICBkaWdpdHM/OiBudW1iZXI7XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbiAgb25Db2RlQ29tcGxldGU/OiAoY29tcGxldGVDb2RlPzogc3RyaW5nKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY29uc3QgQ29kZUlucHV0ID0gKHtcbiAgc3R5bGUsXG4gIGRpZ2l0cyA9IDYsXG4gIGF1dG9Gb2N1cyA9IGZhbHNlLFxuICBtYXJrSW52YWxpZCxcbiAgb25Db2RlQ29tcGxldGUgPSBub29wLFxuICBkaXNhYmxlZCxcbn06IENvZGVJbnB1dFByb3BzKSA9PiB7XG4gIGNvbnN0IFt2YWx1ZXMsIHNldFZhbHVlc10gPSB1c2VTdGF0ZShBcnJheShkaWdpdHMpLmZpbGwoJycpKTtcbiAgY29uc3QgaW5wdXRzID0gQXJyYXkoZGlnaXRzKTtcblxuICBjb25zdCBmb3JjZVNlbGVjdGlvbiA9IChcbiAgICBldmVudDpcbiAgICAgIHwgUmVhY3QuTW91c2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PlxuICAgICAgfCBSZWFjdC5Ub3VjaEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+XG4gICAgICB8IFJlYWN0LktleWJvYXJkRXZlbnQ8SFRNTElucHV0RWxlbWVudD5cbiAgICAgIHwgUmVhY3QuRm9jdXNFdmVudDxIVE1MSW5wdXRFbGVtZW50PixcbiAgKSA9PiB7XG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQ7XG4gICAgdGFyZ2V0LnNlbGVjdCgpO1xuICB9O1xuXG4gIGNvbnN0IGZvcmNlU2VsZWN0aW9uUHJldmVudERlZmF1bHQgPSAoXG4gICAgZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQ8SFRNTElucHV0RWxlbWVudD4gfCBSZWFjdC5Ub3VjaEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+LFxuICApID0+IHtcbiAgICBmb3JjZVNlbGVjdGlvbihldmVudCk7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgfTtcblxuICBjb25zdCBuZXh0RmllbGQgPSAoY3VycmVudEZpZWxkSW5kZXg6IG51bWJlcikgPT4ge1xuICAgIGNvbnN0IG5leHRGaWVsZEluZGV4ID0gY3VycmVudEZpZWxkSW5kZXggKyAxO1xuICAgIGlmIChuZXh0RmllbGRJbmRleCA8IGRpZ2l0cykge1xuICAgICAgaW5wdXRzW25leHRGaWVsZEluZGV4XS5mb2N1cygpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBwcmV2aW91c0ZpZWxkID0gKGN1cnJlbnRGaWVsZEluZGV4OiBudW1iZXIpID0+IHtcbiAgICBpZiAoY3VycmVudEZpZWxkSW5kZXggPiAwKSB7XG4gICAgICBpbnB1dHNbY3VycmVudEZpZWxkSW5kZXggLSAxXS5mb2N1cygpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBzZXRWYWx1ZSA9IChmaWVsZEluZGV4OiBudW1iZXIsIHZhbHVlOiBzdHJpbmcpID0+IHtcbiAgICBpZiAoL15bMC05XT8kLy50ZXN0KHZhbHVlKSkge1xuICAgICAgY29uc3QgdmFsdWVzQ29weSA9IHZhbHVlcy5zbGljZSgpO1xuICAgICAgdmFsdWVzQ29weVtmaWVsZEluZGV4XSA9IHZhbHVlO1xuICAgICAgc2V0VmFsdWVzKHZhbHVlc0NvcHkpO1xuICAgICAgaWYgKHZhbHVlLmxlbmd0aCkge1xuICAgICAgICBuZXh0RmllbGQoZmllbGRJbmRleCk7XG4gICAgICB9XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUtleURvd24gPSAoZmllbGRJbmRleDogbnVtYmVyLCB7a2V5fTogUmVhY3QuS2V5Ym9hcmRFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgIHN3aXRjaCAoa2V5KSB7XG4gICAgICBjYXNlICdCYWNrc3BhY2UnOlxuICAgICAgICBzZXRWYWx1ZShmaWVsZEluZGV4LCAnJyk7XG4gICAgICAgIHByZXZpb3VzRmllbGQoZmllbGRJbmRleCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnQXJyb3dMZWZ0JzpcbiAgICAgICAgcHJldmlvdXNGaWVsZChmaWVsZEluZGV4KTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdBcnJvd1JpZ2h0JzpcbiAgICAgICAgbmV4dEZpZWxkKGZpZWxkSW5kZXgpO1xuICAgICAgICBicmVhaztcbiAgICB9XG4gICAgaWYgKC9eWzAtOV0kLy50ZXN0KGtleSkpIHtcbiAgICAgIHNldFZhbHVlKGZpZWxkSW5kZXgsIGtleSk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZVBhc3RlID0gKGZpZWxkSW5kZXg6IG51bWJlciwgZXZlbnQ6IFJlYWN0LkNsaXBib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgY29uc3QgcGFzdGVkVmFsdWUgPSBldmVudC5jbGlwYm9hcmREYXRhLmdldERhdGEoJ1RleHQnKTtcbiAgICBjb25zdCBjbGVhbmVkUGFzdGUgPSBwYXN0ZWRWYWx1ZS5yZXBsYWNlKC9bXjAtOV0vZywgJycpO1xuICAgIGlmICgvXlswLTldKyQvLnRlc3QoY2xlYW5lZFBhc3RlKSkge1xuICAgICAgc2V0VmFsdWVzKHZhbHVlcy5zbGljZSgwLCBmaWVsZEluZGV4KS5jb25jYXQoY2xlYW5lZFBhc3RlLnNwbGl0KCcnKSkuc2xpY2UoMCwgZGlnaXRzKSk7XG4gICAgfVxuICB9O1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgY29tcGxldGVDb2RlID0gdmFsdWVzLmpvaW4oJycpO1xuICAgIGlmIChjb21wbGV0ZUNvZGUubGVuZ3RoID09PSBkaWdpdHMpIHtcbiAgICAgIG9uQ29kZUNvbXBsZXRlKGNvbXBsZXRlQ29kZSk7XG4gICAgfVxuICB9LCBbdmFsdWVzXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q29kZUlucHV0V3JhcHBlciBzdHlsZT17c3R5bGV9PlxuICAgICAge0FycmF5LmZyb20oe2xlbmd0aDogZGlnaXRzfSwgKF8sIGluZGV4KSA9PiAoXG4gICAgICAgIDxEaWdpdElucHV0XG4gICAgICAgICAgYXV0b0ZvY3VzPXtpbmRleCA9PT0gMCAmJiBhdXRvRm9jdXN9XG4gICAgICAgICAga2V5PXtpbmRleH1cbiAgICAgICAgICBvblBhc3RlPXtldmVudCA9PiBoYW5kbGVQYXN0ZShpbmRleCwgZXZlbnQpfVxuICAgICAgICAgIG9uRm9jdXM9e2ZvcmNlU2VsZWN0aW9ufVxuICAgICAgICAgIG9uTW91c2VEb3duPXtmb3JjZVNlbGVjdGlvblByZXZlbnREZWZhdWx0fVxuICAgICAgICAgIG9uVG91Y2hTdGFydD17Zm9yY2VTZWxlY3Rpb25QcmV2ZW50RGVmYXVsdH1cbiAgICAgICAgICBvbktleURvd249e2V2ZW50ID0+IGhhbmRsZUtleURvd24oaW5kZXgsIGV2ZW50KX1cbiAgICAgICAgICBvbktleVVwPXtmb3JjZVNlbGVjdGlvbn1cbiAgICAgICAgICBtYXJrSW52YWxpZD17bWFya0ludmFsaWR9XG4gICAgICAgICAgcmVmPXtub2RlID0+IChpbnB1dHNbaW5kZXhdID0gbm9kZSl9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlc1tpbmRleF19XG4gICAgICAgICAgb25DaGFuZ2U9eygpID0+IHt9fVxuICAgICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgLz5cbiAgICAgICkpfVxuICAgIDwvQ29kZUlucHV0V3JhcHBlcj5cbiAgKTtcbn07XG4iXX0= */",
|
|
45
45
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
46
46
|
};
|
|
47
47
|
|
|
@@ -61,6 +61,7 @@ var digitInputStyle = function digitInputStyle(theme, props) {
|
|
|
61
61
|
},
|
|
62
62
|
fontSize: '24px',
|
|
63
63
|
lineHeight: '28px',
|
|
64
|
+
borderRadius: '12px',
|
|
64
65
|
padding: 0,
|
|
65
66
|
textAlign: 'center',
|
|
66
67
|
width: '48px',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CodeInput.tsx"],"names":["CodeInputWrapper","props","digitInputStyle","theme","marginLeft","boxShadow","COLOR_V2","GRAY_60","fontSize","lineHeight","padding","textAlign","width","height","DigitInput","React","forwardRef","ref","CodeInput","style","digits","autoFocus","markInvalid","onCodeComplete","noop","disabled","Array","fill","values","setValues","inputs","forceSelection","event","target","select","forceSelectionPreventDefault","preventDefault","nextField","currentFieldIndex","nextFieldIndex","focus","previousField","setValue","fieldIndex","value","test","valuesCopy","slice","length","handleKeyDown","key","handlePaste","pastedValue","clipboardData","getData","cleanedPaste","replace","concat","split","completeCode","join","from","_","index","node"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React, {useEffect, useState} from 'react';\n\nimport type {Theme} from '../Layout';\nimport {noop} from '../util';\nimport {InputProps, inputStyle} from './Input';\nimport {COLOR_V2} from '../Identity';\n\nconst CodeInputWrapper = (props: React.HTMLProps<HTMLDivElement>) => (\n <div\n css={{\n display: 'flex',\n justifyContent: 'center',\n }}\n {...props}\n />\n);\n\ntype DigitInputProps<T = HTMLInputElement> = InputProps<T>;\n\nconst digitInputStyle: <T>(theme: Theme, props: DigitInputProps<T>) => CSSObject = (theme, props) => ({\n ...inputStyle(theme, props),\n '& + &': {\n marginLeft: '19px',\n },\n '&:hover': {\n boxShadow: `0 0 0 1px ${COLOR_V2.GRAY_60}`,\n },\n fontSize: '24px',\n lineHeight: '28px',\n padding: 0,\n textAlign: 'center',\n width: '48px',\n height: '56px',\n});\n\nconst DigitInput: React.FC<DigitInputProps<HTMLInputElement>> = React.forwardRef<\n HTMLInputElement,\n DigitInputProps<HTMLInputElement>\n>((props, ref) => <input ref={ref} css={(theme: Theme) => digitInputStyle(theme, props)} {...props} type=\"tel\" />);\n\nexport interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {\n autoFocus?: boolean;\n digits?: number;\n markInvalid?: boolean;\n onCodeComplete?: (completeCode?: string) => void;\n}\n\nexport const CodeInput = ({\n style,\n digits = 6,\n autoFocus = false,\n markInvalid,\n onCodeComplete = noop,\n disabled,\n}: CodeInputProps) => {\n const [values, setValues] = useState(Array(digits).fill(''));\n const inputs = Array(digits);\n\n const forceSelection = (\n event:\n | React.MouseEvent<HTMLInputElement>\n | React.TouchEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.FocusEvent<HTMLInputElement>,\n ) => {\n const target = event.target as HTMLInputElement;\n target.select();\n };\n\n const forceSelectionPreventDefault = (\n event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>,\n ) => {\n forceSelection(event);\n event.preventDefault();\n };\n\n const nextField = (currentFieldIndex: number) => {\n const nextFieldIndex = currentFieldIndex + 1;\n if (nextFieldIndex < digits) {\n inputs[nextFieldIndex].focus();\n }\n };\n\n const previousField = (currentFieldIndex: number) => {\n if (currentFieldIndex > 0) {\n inputs[currentFieldIndex - 1].focus();\n }\n };\n\n const setValue = (fieldIndex: number, value: string) => {\n if (/^[0-9]?$/.test(value)) {\n const valuesCopy = values.slice();\n valuesCopy[fieldIndex] = value;\n setValues(valuesCopy);\n if (value.length) {\n nextField(fieldIndex);\n }\n }\n };\n\n const handleKeyDown = (fieldIndex: number, {key}: React.KeyboardEvent<HTMLInputElement>) => {\n switch (key) {\n case 'Backspace':\n setValue(fieldIndex, '');\n previousField(fieldIndex);\n break;\n case 'ArrowLeft':\n previousField(fieldIndex);\n break;\n case 'ArrowRight':\n nextField(fieldIndex);\n break;\n }\n if (/^[0-9]$/.test(key)) {\n setValue(fieldIndex, key);\n }\n };\n\n const handlePaste = (fieldIndex: number, event: React.ClipboardEvent<HTMLInputElement>) => {\n const pastedValue = event.clipboardData.getData('Text');\n const cleanedPaste = pastedValue.replace(/[^0-9]/g, '');\n if (/^[0-9]+$/.test(cleanedPaste)) {\n setValues(values.slice(0, fieldIndex).concat(cleanedPaste.split('')).slice(0, digits));\n }\n };\n\n useEffect(() => {\n const completeCode = values.join('');\n if (completeCode.length === digits) {\n onCodeComplete(completeCode);\n }\n }, [values]);\n\n return (\n <CodeInputWrapper style={style}>\n {Array.from({length: digits}, (_, index) => (\n <DigitInput\n autoFocus={index === 0 && autoFocus}\n key={index}\n onPaste={event => handlePaste(index, event)}\n onFocus={forceSelection}\n onMouseDown={forceSelectionPreventDefault}\n onTouchStart={forceSelectionPreventDefault}\n onKeyDown={event => handleKeyDown(index, event)}\n onKeyUp={forceSelection}\n markInvalid={markInvalid}\n ref={node => (inputs[index] = node)}\n value={values[index]}\n onChange={() => {}}\n disabled={disabled}\n />\n ))}\n </CodeInputWrapper>\n );\n};\n"],"file":"CodeInput.js"}
|
|
1
|
+
{"version":3,"sources":["CodeInput.tsx"],"names":["CodeInputWrapper","props","digitInputStyle","theme","marginLeft","boxShadow","COLOR_V2","GRAY_60","fontSize","lineHeight","borderRadius","padding","textAlign","width","height","DigitInput","React","forwardRef","ref","CodeInput","style","digits","autoFocus","markInvalid","onCodeComplete","noop","disabled","Array","fill","values","setValues","inputs","forceSelection","event","target","select","forceSelectionPreventDefault","preventDefault","nextField","currentFieldIndex","nextFieldIndex","focus","previousField","setValue","fieldIndex","value","test","valuesCopy","slice","length","handleKeyDown","key","handlePaste","pastedValue","clipboardData","getData","cleanedPaste","replace","concat","split","completeCode","join","from","_","index","node"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React, {useEffect, useState} from 'react';\n\nimport type {Theme} from '../Layout';\nimport {noop} from '../util';\nimport {InputProps, inputStyle} from './Input';\nimport {COLOR_V2} from '../Identity';\n\nconst CodeInputWrapper = (props: React.HTMLProps<HTMLDivElement>) => (\n <div\n css={{\n display: 'flex',\n justifyContent: 'center',\n }}\n {...props}\n />\n);\n\ntype DigitInputProps<T = HTMLInputElement> = InputProps<T>;\n\nconst digitInputStyle: <T>(theme: Theme, props: DigitInputProps<T>) => CSSObject = (theme, props) => ({\n ...inputStyle(theme, props),\n '& + &': {\n marginLeft: '19px',\n },\n '&:hover': {\n boxShadow: `0 0 0 1px ${COLOR_V2.GRAY_60}`,\n },\n fontSize: '24px',\n lineHeight: '28px',\n borderRadius: '12px',\n padding: 0,\n textAlign: 'center',\n width: '48px',\n height: '56px',\n});\n\nconst DigitInput: React.FC<DigitInputProps<HTMLInputElement>> = React.forwardRef<\n HTMLInputElement,\n DigitInputProps<HTMLInputElement>\n>((props, ref) => <input ref={ref} css={(theme: Theme) => digitInputStyle(theme, props)} {...props} type=\"tel\" />);\n\nexport interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {\n autoFocus?: boolean;\n digits?: number;\n markInvalid?: boolean;\n onCodeComplete?: (completeCode?: string) => void;\n}\n\nexport const CodeInput = ({\n style,\n digits = 6,\n autoFocus = false,\n markInvalid,\n onCodeComplete = noop,\n disabled,\n}: CodeInputProps) => {\n const [values, setValues] = useState(Array(digits).fill(''));\n const inputs = Array(digits);\n\n const forceSelection = (\n event:\n | React.MouseEvent<HTMLInputElement>\n | React.TouchEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.FocusEvent<HTMLInputElement>,\n ) => {\n const target = event.target as HTMLInputElement;\n target.select();\n };\n\n const forceSelectionPreventDefault = (\n event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>,\n ) => {\n forceSelection(event);\n event.preventDefault();\n };\n\n const nextField = (currentFieldIndex: number) => {\n const nextFieldIndex = currentFieldIndex + 1;\n if (nextFieldIndex < digits) {\n inputs[nextFieldIndex].focus();\n }\n };\n\n const previousField = (currentFieldIndex: number) => {\n if (currentFieldIndex > 0) {\n inputs[currentFieldIndex - 1].focus();\n }\n };\n\n const setValue = (fieldIndex: number, value: string) => {\n if (/^[0-9]?$/.test(value)) {\n const valuesCopy = values.slice();\n valuesCopy[fieldIndex] = value;\n setValues(valuesCopy);\n if (value.length) {\n nextField(fieldIndex);\n }\n }\n };\n\n const handleKeyDown = (fieldIndex: number, {key}: React.KeyboardEvent<HTMLInputElement>) => {\n switch (key) {\n case 'Backspace':\n setValue(fieldIndex, '');\n previousField(fieldIndex);\n break;\n case 'ArrowLeft':\n previousField(fieldIndex);\n break;\n case 'ArrowRight':\n nextField(fieldIndex);\n break;\n }\n if (/^[0-9]$/.test(key)) {\n setValue(fieldIndex, key);\n }\n };\n\n const handlePaste = (fieldIndex: number, event: React.ClipboardEvent<HTMLInputElement>) => {\n const pastedValue = event.clipboardData.getData('Text');\n const cleanedPaste = pastedValue.replace(/[^0-9]/g, '');\n if (/^[0-9]+$/.test(cleanedPaste)) {\n setValues(values.slice(0, fieldIndex).concat(cleanedPaste.split('')).slice(0, digits));\n }\n };\n\n useEffect(() => {\n const completeCode = values.join('');\n if (completeCode.length === digits) {\n onCodeComplete(completeCode);\n }\n }, [values]);\n\n return (\n <CodeInputWrapper style={style}>\n {Array.from({length: digits}, (_, index) => (\n <DigitInput\n autoFocus={index === 0 && autoFocus}\n key={index}\n onPaste={event => handlePaste(index, event)}\n onFocus={forceSelection}\n onMouseDown={forceSelectionPreventDefault}\n onTouchStart={forceSelectionPreventDefault}\n onKeyDown={event => handleKeyDown(index, event)}\n onKeyUp={forceSelection}\n markInvalid={markInvalid}\n ref={node => (inputs[index] = node)}\n value={values[index]}\n onChange={() => {}}\n disabled={disabled}\n />\n ))}\n </CodeInputWrapper>\n );\n};\n"],"file":"CodeInput.js"}
|
package/src/Form/Input.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export interface InputProps<T = HTMLInputElement> extends TextProps<T> {
|
|
|
10
10
|
markInvalid?: boolean;
|
|
11
11
|
helperText?: string;
|
|
12
12
|
placeholderTextTransform?: Property.TextTransform;
|
|
13
|
+
wrapperCSS?: CSSObject;
|
|
13
14
|
}
|
|
14
15
|
export declare const inputStyle: <T>(theme: Theme, props: InputProps<T>, hasError?: boolean) => CSSObject;
|
|
15
16
|
export declare const INPUT_CLASSNAME = "wireinput";
|