@wireapp/react-ui-kit 8.5.3 → 8.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +33 -0
- package/package.json +2 -2
- package/src/Form/Button.d.ts +1 -0
- package/src/Form/Button.js +19 -4
- package/src/Form/Button.js.map +1 -1
- package/src/Form/Checkbox.js +55 -51
- package/src/Form/Checkbox.js.map +1 -1
- package/src/Form/Checkbox.md +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/InputLabel.js +9 -7
- package/src/Form/InputLabel.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 +83 -60
- package/src/Form/Select.js.map +1 -1
- package/src/Form/Select.md +11 -5
- package/src/Layout/StyledApp.d.js +4 -0
- package/src/Layout/StyledApp.d.ts +13 -10
- package/src/Layout/StyledApp.js +6 -5
- package/src/Layout/StyledApp.js.map +1 -1
- package/src/Layout/Theme.d.ts +18 -1
- package/src/Layout/Theme.js +41 -7
- package/src/Layout/Theme.js.map +1 -1
- package/src/Text/Text.js +1 -1
- package/src/Text/Text.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,39 @@
|
|
|
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.7.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.6.0...@wireapp/react-ui-kit@8.7.0) (2022-07-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* add custom theming to UI kit ([#4299](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4299)) ([9a3e8ee](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/9a3e8ee450d0db1648302b7c7eb0ec7f490c79e2)), closes [#4298](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4298)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [8.6.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.5.4...@wireapp/react-ui-kit@8.6.0) (2022-06-15)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* Add current value for select-component ([#4291](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4291)) ([1fa426e](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/1fa426e5422e92e5f2ffb273e8a48ceb59975fb0))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## [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)
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Bug Fixes
|
|
32
|
+
|
|
33
|
+
* 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))
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
6
39
|
## [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)
|
|
7
40
|
|
|
8
41
|
**Note:** Version bump only for package @wireapp/react-ui-kit
|
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.
|
|
71
|
-
"gitHead": "
|
|
70
|
+
"version": "8.7.0",
|
|
71
|
+
"gitHead": "f53fe4e7d2ac55134c8cad96a2c1eee8b45e835e"
|
|
72
72
|
}
|
package/src/Form/Button.d.ts
CHANGED
package/src/Form/Button.js
CHANGED
|
@@ -39,6 +39,7 @@ exports.ButtonVariant = ButtonVariant;
|
|
|
39
39
|
ButtonVariant["PRIMARY"] = "primary";
|
|
40
40
|
ButtonVariant["SECONDARY"] = "secondary";
|
|
41
41
|
ButtonVariant["TERTIARY"] = "tertiary";
|
|
42
|
+
ButtonVariant["QUATERNARY"] = "quaternary";
|
|
42
43
|
ButtonVariant["SEND"] = "send";
|
|
43
44
|
})(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
|
|
44
45
|
|
|
@@ -67,7 +68,7 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
67
68
|
_ref$truncate = _ref.truncate,
|
|
68
69
|
truncate = _ref$truncate === void 0 ? true : _ref$truncate,
|
|
69
70
|
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
70
|
-
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({
|
|
71
72
|
block: block,
|
|
72
73
|
bold: bold,
|
|
73
74
|
center: center,
|
|
@@ -101,7 +102,7 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
101
102
|
minWidth: '125px',
|
|
102
103
|
padding: '0 16px'
|
|
103
104
|
})), variant === ButtonVariant.PRIMARY && _objectSpread({
|
|
104
|
-
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),
|
|
105
106
|
color: disabled ? _Identity.COLOR_V2.GRAY_80 : _Identity.COLOR_V2.WHITE
|
|
106
107
|
}, !disabled && {
|
|
107
108
|
'&:hover, &:focus': {
|
|
@@ -114,7 +115,7 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
114
115
|
backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_700
|
|
115
116
|
}
|
|
116
117
|
})), variant === ButtonVariant.SECONDARY && _objectSpread({
|
|
117
|
-
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),
|
|
118
119
|
border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
|
|
119
120
|
color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK
|
|
120
121
|
}, !disabled && {
|
|
@@ -139,8 +140,22 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
139
140
|
'&:focus': {
|
|
140
141
|
border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_300)
|
|
141
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
|
+
}
|
|
142
157
|
})), variant === ButtonVariant.SEND && _objectSpread({
|
|
143
|
-
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),
|
|
144
159
|
width: '40px'
|
|
145
160
|
}, !disabled && {
|
|
146
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":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;IAEYA,a;;;WAAAA,a;AAAAA,EAAAA,a;AAAAA,EAAAA,a;AAAAA,EAAAA,a;AAAAA,EAAAA,a;GAAAA,a,6BAAAA,a;;AAeL,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,iGAkB7E,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,IAAIE,QAAnB,GAA8BgC,mBAASC,OAAvC,GAAiDD,mBAASE,IADzE;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,IAAIE,QAAnB,GAA8BgC,mBAASO,OAAvC,GAAiDP,mBAAS1B,KADzE;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,CAACkC,IAA1B;AACF7B,IAAAA,eAAe,EAAEA,eAAe,IAAIE,QAAnB,GAA8BgC,mBAASa,OAAvC,GAAiDb,mBAASE,IADzE;AAEFV,IAAAA,KAAK,EAAE;AAFL,KAGE,CAACxB,QAAD,IAAa;AACf,wBAAoB;AAClBF,MAAAA,eAAe,EAAEkC,mBAASI;AADR,KADL;AAIf,eAAW;AACTxB,MAAAA,MAAM,sBAAeoB,mBAASc,cAAxB;AADG,KAJI;AAOf,gBAAY;AACVhD,MAAAA,eAAe,EAAEkC,mBAASK;AADhB;AAPG,GAHf,CAnG4E;AAAA,CAA3E;;;;AAoHA,IAAMU,MAAM,GAAG,SAATA,MAAS;AAAA,MAAEC,WAAF,SAAEA,WAAF;AAAA,MAAeC,QAAf,SAAeA,QAAf;AAAA,iCAAyBC,YAAzB;AAAA,MAAyBA,YAAzB,mCAAwC7C,gBAAMC,KAA9C;AAAA,MAAwDK,KAAxD;AAAA,SACpB;AAAQ,IAAA,GAAG,EAAE,aAAChB,KAAD;AAAA,aAAkBD,WAAW,CAACC,KAAD,EAAQgB,KAAR,CAA7B;AAAA;AAAb,KAA8DwC,iBAAiB,CAACxC,KAAD,CAA/E,GACGqC,WAAW,GAAG,gBAAC,aAAD;AAAS,IAAA,IAAI,EAAE,EAAf;AAAmB,IAAA,KAAK,EAAEE,YAA1B;AAAwC,IAAA,KAAK,EAAE;AAACpC,MAAAA,OAAO,EAAE,MAAV;AAAkBsC,MAAAA,MAAM,EAAE;AAA1B;AAA/C,IAAH,GAA0FH,QADxG,CADoB;AAAA,CAAf;;;;AAMA,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAACxC,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 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; }
|
|
@@ -44,65 +38,73 @@ var filterStyledLabelProps = function filterStyledLabelProps(props) {
|
|
|
44
38
|
return (0, _util.filterProps)(props, ['markInvalid']);
|
|
45
39
|
};
|
|
46
40
|
|
|
47
|
-
var checkSvg = '<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>';
|
|
48
|
-
|
|
49
41
|
var StyledLabel = function StyledLabel(props) {
|
|
50
42
|
var disabled = props.disabled,
|
|
51
43
|
markInvalid = props.markInvalid;
|
|
52
44
|
return (0, _react.jsx)("label", (0, _extends2["default"])({
|
|
53
45
|
css: function css(theme) {
|
|
54
|
-
var _ref;
|
|
55
|
-
|
|
56
|
-
return _objectSpread(_objectSpread((0, _defineProperty2["default"])(
|
|
57
|
-
background: "".concat(disabled ?
|
|
58
|
-
borderColor:
|
|
59
|
-
}),
|
|
60
|
-
|
|
46
|
+
var _objectSpread2, _ref, _objectSpread3;
|
|
47
|
+
|
|
48
|
+
return _objectSpread(_objectSpread((_objectSpread2 = {}, (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + &::before"), {
|
|
49
|
+
background: "".concat(disabled ? theme.checkbox.disablecheckedBgColor : theme.general.primaryColor),
|
|
50
|
+
borderColor: theme.general.primaryColor
|
|
51
|
+
}), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + & > svg"), {
|
|
52
|
+
fill: theme.general.backgroundColor
|
|
53
|
+
}), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, " + & > svg"), {
|
|
54
|
+
fill: 'none',
|
|
55
|
+
position: 'absolute',
|
|
56
|
+
left: '-0.75rem',
|
|
57
|
+
top: '0.25rem'
|
|
58
|
+
}), _objectSpread2), !disabled && (_ref = {}, (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ":focus-visible + &::before"), {
|
|
59
|
+
borderColor: theme.general.primaryColor
|
|
61
60
|
}), (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ":hover + &::before"), {
|
|
62
|
-
borderColor:
|
|
63
|
-
}), _ref)), {}, {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
a: _objectSpread({}, (0, _Text.textLinkStyle)(theme, {})),
|
|
81
|
-
lineHeight: '22px',
|
|
82
|
-
display: 'flex',
|
|
83
|
-
opacity: disabled ? 0.56 : 1
|
|
84
|
-
});
|
|
61
|
+
borderColor: theme.general.primaryColor
|
|
62
|
+
}), _ref)), {}, (_objectSpread3 = {}, (0, _defineProperty2["default"])(_objectSpread3, ".".concat(_Input.INPUT_CLASSNAME, " + &::before"), _objectSpread(_objectSpread({
|
|
63
|
+
background: disabled ? theme.checkbox.disableBgColor : theme.checkbox.background
|
|
64
|
+
}, !disabled ? {
|
|
65
|
+
border: markInvalid ? "1.5px solid ".concat(theme.checkbox.invalidBorderColor) : "1.5px solid ".concat(theme.checkbox.border)
|
|
66
|
+
} : {
|
|
67
|
+
border: "1.5px solid ".concat(theme.checkbox.disableBorderColor)
|
|
68
|
+
}), {}, {
|
|
69
|
+
borderRadius: '3px',
|
|
70
|
+
boxSizing: 'border-box',
|
|
71
|
+
content: '""',
|
|
72
|
+
display: 'inline-block',
|
|
73
|
+
height: '22px',
|
|
74
|
+
lineHeight: 1.4,
|
|
75
|
+
margin: '0 8px 0 -16px',
|
|
76
|
+
width: '22px',
|
|
77
|
+
color: theme.general.color
|
|
78
|
+
})), (0, _defineProperty2["default"])(_objectSpread3, "a", _objectSpread({}, (0, _Text.textLinkStyle)(theme, {}))), (0, _defineProperty2["default"])(_objectSpread3, "position", 'relative'), (0, _defineProperty2["default"])(_objectSpread3, "lineHeight", 1.4), (0, _defineProperty2["default"])(_objectSpread3, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread3, "opacity", disabled ? 0.56 : 1), (0, _defineProperty2["default"])(_objectSpread3, "cursor", disabled ? 'not-allowed' : 'pointer'), _objectSpread3));
|
|
85
79
|
}
|
|
86
|
-
}, filterStyledLabelProps(props)))
|
|
80
|
+
}, filterStyledLabelProps(props)), props.children, (0, _react.jsx)("svg", {
|
|
81
|
+
width: "15",
|
|
82
|
+
height: "13",
|
|
83
|
+
viewBox: "0 0 16 13",
|
|
84
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
85
|
+
}, (0, _react.jsx)("path", {
|
|
86
|
+
d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z"
|
|
87
|
+
})));
|
|
87
88
|
};
|
|
88
89
|
|
|
89
90
|
var filterCheckboxProps = function filterCheckboxProps(props) {
|
|
90
91
|
return (0, _util.filterProps)(props, ['markInvalid']);
|
|
91
|
-
};
|
|
92
|
+
}; // We use Math.random..., because some of apps doesn't migrated to newest version of React.
|
|
93
|
+
|
|
92
94
|
|
|
93
95
|
var _ref3 = process.env.NODE_ENV === "production" ? {
|
|
94
|
-
name: "
|
|
95
|
-
styles: "align-items:center;display:flex;justify-content:flex-start"
|
|
96
|
+
name: "1emb0lq",
|
|
97
|
+
styles: "align-items:center;display:flex;justify-content:flex-start;position:relative;left:-0.3rem"
|
|
96
98
|
} : {
|
|
97
|
-
name: "
|
|
98
|
-
styles: "align-items:center;display:flex;justify-content:flex-start;label:Checkbox;",
|
|
99
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
99
|
+
name: "nkfm6i-Checkbox",
|
|
100
|
+
styles: "align-items:center;display:flex;justify-content:flex-start;position:relative;left:-0.3rem;label:Checkbox;",
|
|
101
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoZWNrYm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrSEkiLCJmaWxlIjoiQ2hlY2tib3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtqc3h9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7Q09MT1J9IGZyb20gJy4uL0lkZW50aXR5JztcbmltcG9ydCB7VGhlbWV9IGZyb20gJy4uL0xheW91dCc7XG5pbXBvcnQge1RleHQsIFRleHRQcm9wcywgdGV4dFN0eWxlLCB0ZXh0TGlua1N0eWxlfSBmcm9tICcuLi9UZXh0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHN9IGZyb20gJy4uL3V0aWwnO1xuaW1wb3J0IHtJTlBVVF9DTEFTU05BTUUsIElucHV0UHJvcHN9IGZyb20gJy4vSW5wdXQnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFN0eWxlZExhYmVsUHJvcHM8VCA9IEhUTUxMYWJlbEVsZW1lbnQ+IGV4dGVuZHMgUmVhY3QuSFRNTFByb3BzPFQ+IHtcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICBtYXJrSW52YWxpZD86IGJvb2xlYW47XG59XG5cbmNvbnN0IGZpbHRlclN0eWxlZExhYmVsUHJvcHMgPSAocHJvcHM6IFN0eWxlZExhYmVsUHJvcHMpID0+IGZpbHRlclByb3BzKHByb3BzLCBbJ21hcmtJbnZhbGlkJ10pO1xuXG5jb25zdCBTdHlsZWRMYWJlbCA9IChwcm9wczogU3R5bGVkTGFiZWxQcm9wcykgPT4ge1xuICBjb25zdCB7ZGlzYWJsZWQsIG1hcmtJbnZhbGlkfSA9IHByb3BzO1xuICByZXR1cm4gKFxuICAgIDxsYWJlbFxuICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICBbYC4ke0lOUFVUX0NMQVNTTkFNRX06Y2hlY2tlZCArICY6OmJlZm9yZWBdOiB7XG4gICAgICAgICAgYmFja2dyb3VuZDogYCR7ZGlzYWJsZWQgPyB0aGVtZS5jaGVja2JveC5kaXNhYmxlY2hlY2tlZEJnQ29sb3IgOiB0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcn1gLFxuICAgICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcixcbiAgICAgICAgfSxcbiAgICAgICAgW2AuJHtJTlBVVF9DTEFTU05BTUV9OmNoZWNrZWQgKyAmID4gc3ZnYF06IHtcbiAgICAgICAgICBmaWxsOiB0aGVtZS5nZW5lcmFsLmJhY2tncm91bmRDb2xvcixcbiAgICAgICAgfSxcbiAgICAgICAgW2AuJHtJTlBVVF9DTEFTU05BTUV9ICsgJiA+IHN2Z2BdOiB7XG4gICAgICAgICAgZmlsbDogJ25vbmUnLFxuICAgICAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgICAgIGxlZnQ6ICctMC43NXJlbScsXG4gICAgICAgICAgdG9wOiAnMC4yNXJlbScsXG4gICAgICAgIH0sXG4gICAgICAgIC4uLighZGlzYWJsZWQgJiYge1xuICAgICAgICAgIFtgLiR7SU5QVVRfQ0xBU1NOQU1FfTpmb2N1cy12aXNpYmxlICsgJjo6YmVmb3JlYF06IHtcbiAgICAgICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcixcbiAgICAgICAgICB9LFxuICAgICAgICAgIFtgLiR7SU5QVVRfQ0xBU1NOQU1FfTpob3ZlciArICY6OmJlZm9yZWBdOiB7XG4gICAgICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUuZ2VuZXJhbC5wcmltYXJ5Q29sb3IsXG4gICAgICAgICAgfSxcbiAgICAgICAgfSksXG4gICAgICAgIFtgLiR7SU5QVVRfQ0xBU1NOQU1FfSArICY6OmJlZm9yZWBdOiB7XG4gICAgICAgICAgYmFja2dyb3VuZDogZGlzYWJsZWQgPyB0aGVtZS5jaGVja2JveC5kaXNhYmxlQmdDb2xvciA6IHRoZW1lLmNoZWNrYm94LmJhY2tncm91bmQsXG4gICAgICAgICAgLi4uKCFkaXNhYmxlZFxuICAgICAgICAgICAgPyB7XG4gICAgICAgICAgICAgICAgYm9yZGVyOiBtYXJrSW52YWxpZFxuICAgICAgICAgICAgICAgICAgPyBgMS41cHggc29saWQgJHt0aGVtZS5jaGVja2JveC5pbnZhbGlkQm9yZGVyQ29sb3J9YFxuICAgICAgICAgICAgICAgICAgOiBgMS41cHggc29saWQgJHt0aGVtZS5jaGVja2JveC5ib3JkZXJ9YCxcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgOiB7XG4gICAgICAgICAgICAgICAgYm9yZGVyOiBgMS41cHggc29saWQgJHt0aGVtZS5jaGVja2JveC5kaXNhYmxlQm9yZGVyQ29sb3J9YCxcbiAgICAgICAgICAgICAgfSksXG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiAnM3B4JyxcbiAgICAgICAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgICAgICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICAgICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgICAgICAgaGVpZ2h0OiAnMjJweCcsXG4gICAgICAgICAgbGluZUhlaWdodDogMS40LFxuICAgICAgICAgIG1hcmdpbjogJzAgOHB4IDAgLTE2cHgnLFxuICAgICAgICAgIHdpZHRoOiAnMjJweCcsXG4gICAgICAgICAgY29sb3I6IHRoZW1lLmdlbmVyYWwuY29sb3IsXG4gICAgICAgIH0sXG4gICAgICAgIGE6IHtcbiAgICAgICAgICAuLi50ZXh0TGlua1N0eWxlKHRoZW1lLCB7fSksXG4gICAgICAgIH0sXG4gICAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgICBsaW5lSGVpZ2h0OiAxLjQsXG4gICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgICAgb3BhY2l0eTogZGlzYWJsZWQgPyAwLjU2IDogMSxcbiAgICAgICAgY3Vyc29yOiBkaXNhYmxlZCA/ICdub3QtYWxsb3dlZCcgOiAncG9pbnRlcicsXG4gICAgICB9KX1cbiAgICAgIHsuLi5maWx0ZXJTdHlsZWRMYWJlbFByb3BzKHByb3BzKX1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgICA8c3ZnIHdpZHRoPVwiMTVcIiBoZWlnaHQ9XCIxM1wiIHZpZXdCb3g9XCIwIDAgMTYgMTNcIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCI+XG4gICAgICAgIDxwYXRoIGQ9XCJNNS42NTY4NSAxMi4wNzExTDE1Ljk4NDIgMS42MjczOEwxNC41NyAwLjIxMzE2N0w1LjY1Njg1IDkuMjQyNjRMMS40MTQyMSA1TDAgNi40MTQyMUw1LjY1Njg1IDEyLjA3MTFaXCIgLz5cbiAgICAgIDwvc3ZnPlxuICAgIDwvbGFiZWw+XG4gICk7XG59O1xuXG5pbnRlcmZhY2UgQ2hlY2tib3hQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gZXh0ZW5kcyBJbnB1dFByb3BzPFQ+IHtcbiAgaWQ/OiBzdHJpbmc7XG59XG5cbmNvbnN0IGZpbHRlckNoZWNrYm94UHJvcHMgPSAocHJvcHM6IENoZWNrYm94UHJvcHMpID0+IGZpbHRlclByb3BzKHByb3BzLCBbJ21hcmtJbnZhbGlkJ10pO1xuXG4vLyBXZSB1c2UgTWF0aC5yYW5kb20uLi4sIGJlY2F1c2Ugc29tZSBvZiBhcHBzIGRvZXNuJ3QgbWlncmF0ZWQgdG8gbmV3ZXN0IHZlcnNpb24gb2YgUmVhY3QuXG5leHBvcnQgY29uc3QgQ2hlY2tib3g6IFJlYWN0LkZDPENoZWNrYm94UHJvcHM8SFRNTElucHV0RWxlbWVudD4+ID0gUmVhY3QuZm9yd2FyZFJlZjxcbiAgSFRNTElucHV0RWxlbWVudCxcbiAgQ2hlY2tib3hQcm9wczxIVE1MSW5wdXRFbGVtZW50PlxuPigoe2lkID0gTWF0aC5yYW5kb20oKS50b1N0cmluZygpLCBjaGlsZHJlbiwgc3R5bGUsIGRpc2FibGVkLCAuLi5wcm9wc30sIHJlZikgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXt7XG4gICAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgIGp1c3RpZnlDb250ZW50OiAnZmxleC1zdGFydCcsXG4gICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgIGxlZnQ6ICctMC4zcmVtJyxcbiAgICB9fVxuICAgIHN0eWxlPXtzdHlsZX1cbiAgPlxuICAgIDxpbnB1dFxuICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgIGlkPXtpZH1cbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIGhlaWdodDogJzIycHgnLFxuICAgICAgICBtYXJnaW5Cb3R0b206ICcwJyxcbiAgICAgICAgb3BhY2l0eTogMCxcbiAgICAgICAgd2lkdGg6ICcyMnB4JyxcbiAgICAgICAgY3Vyc29yOiBkaXNhYmxlZCA/ICdub3QtYWxsb3dlZCcgOiAncG9pbnRlcicsXG4gICAgICB9fVxuICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjbGFzc05hbWU9e0lOUFVUX0NMQVNTTkFNRX1cbiAgICAgIHsuLi5maWx0ZXJDaGVja2JveFByb3BzKHByb3BzKX1cbiAgICAvPlxuXG4gICAgPFN0eWxlZExhYmVsIGh0bWxGb3I9e2lkfSBkaXNhYmxlZD17ZGlzYWJsZWR9IG1hcmtJbnZhbGlkPXtwcm9wcy5tYXJrSW52YWxpZH0+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9TdHlsZWRMYWJlbD5cbiAgPC9kaXY+XG4pKTtcblxuZXhwb3J0IHR5cGUgQ2hlY2tib3hMYWJlbFByb3BzPFQgPSBIVE1MU3BhbkVsZW1lbnQ+ID0gVGV4dFByb3BzPFQ+O1xuXG5leHBvcnQgY29uc3QgQ2hlY2tib3hMYWJlbCA9ICh7Y29sb3IgPSBDT0xPUi5URVhULCAuLi5wcm9wc306IENoZWNrYm94TGFiZWxQcm9wcykgPT4gKFxuICA8VGV4dFxuICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgICAgIC4uLnRleHRTdHlsZSh0aGVtZSwge1xuICAgICAgICBjb2xvcixcbiAgICAgICAgLi4ucHJvcHMsXG4gICAgICB9KSxcbiAgICAgIGE6IHtcbiAgICAgICAgY29sb3I6IENPTE9SLkxJTkssXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gICAgICB9LFxuICAgIH0pfVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG4iXX0= */",
|
|
100
102
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
101
103
|
};
|
|
102
104
|
|
|
103
105
|
var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
|
|
104
106
|
var _ref2$id = _ref2.id,
|
|
105
|
-
id = _ref2$id === void 0 ? (
|
|
107
|
+
id = _ref2$id === void 0 ? Math.random().toString() : _ref2$id,
|
|
106
108
|
children = _ref2.children,
|
|
107
109
|
style = _ref2.style,
|
|
108
110
|
disabled = _ref2.disabled,
|
|
@@ -110,17 +112,19 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
|
|
|
110
112
|
return (0, _react.jsx)("div", {
|
|
111
113
|
css: _ref3,
|
|
112
114
|
style: style
|
|
113
|
-
}, (0, _react.jsx)(
|
|
114
|
-
type:
|
|
115
|
+
}, (0, _react.jsx)("input", (0, _extends2["default"])({
|
|
116
|
+
type: "checkbox",
|
|
115
117
|
id: id,
|
|
116
118
|
style: {
|
|
117
119
|
height: '22px',
|
|
118
120
|
marginBottom: '0',
|
|
119
121
|
opacity: 0,
|
|
120
|
-
width: '22px'
|
|
122
|
+
width: '22px',
|
|
123
|
+
cursor: disabled ? 'not-allowed' : 'pointer'
|
|
121
124
|
},
|
|
122
125
|
disabled: disabled,
|
|
123
|
-
ref: ref
|
|
126
|
+
ref: ref,
|
|
127
|
+
className: _Input.INPUT_CLASSNAME
|
|
124
128
|
}, filterCheckboxProps(props))), (0, _react.jsx)(StyledLabel, {
|
|
125
129
|
htmlFor: id,
|
|
126
130
|
disabled: disabled,
|
package/src/Form/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","
|
|
1
|
+
{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","StyledLabel","disabled","markInvalid","theme","INPUT_CLASSNAME","background","checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","left","top","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","height","lineHeight","margin","width","color","children","filterCheckboxProps","Checkbox","React","forwardRef","ref","id","Math","random","toString","style","marginBottom","opacity","cursor","CheckboxLabel","COLOR","TEXT","a","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} 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 StyledLabel = (props: StyledLabelProps) => {\n const {disabled, markInvalid} = props;\n return (\n <label\n css={(theme: Theme) => ({\n [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n background: `${disabled ? theme.checkbox.disablecheckedBgColor : theme.general.primaryColor}`,\n borderColor: theme.general.primaryColor,\n },\n [`.${INPUT_CLASSNAME}:checked + & > svg`]: {\n fill: theme.general.backgroundColor,\n },\n [`.${INPUT_CLASSNAME} + & > svg`]: {\n fill: 'none',\n position: 'absolute',\n left: '-0.75rem',\n top: '0.25rem',\n },\n ...(!disabled && {\n [`.${INPUT_CLASSNAME}:focus-visible + &::before`]: {\n borderColor: theme.general.primaryColor,\n },\n [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n borderColor: theme.general.primaryColor,\n },\n }),\n [`.${INPUT_CLASSNAME} + &::before`]: {\n background: disabled ? theme.checkbox.disableBgColor : theme.checkbox.background,\n ...(!disabled\n ? {\n border: markInvalid\n ? `1.5px solid ${theme.checkbox.invalidBorderColor}`\n : `1.5px solid ${theme.checkbox.border}`,\n }\n : {\n border: `1.5px solid ${theme.checkbox.disableBorderColor}`,\n }),\n borderRadius: '3px',\n boxSizing: 'border-box',\n content: '\"\"',\n display: 'inline-block',\n height: '22px',\n lineHeight: 1.4,\n margin: '0 8px 0 -16px',\n width: '22px',\n color: theme.general.color,\n },\n a: {\n ...textLinkStyle(theme, {}),\n },\n position: 'relative',\n lineHeight: 1.4,\n display: 'flex',\n opacity: disabled ? 0.56 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n })}\n {...filterStyledLabelProps(props)}\n >\n {props.children}\n <svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" />\n </svg>\n </label>\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 position: 'relative',\n left: '-0.3rem',\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 cursor: disabled ? 'not-allowed' : 'pointer',\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/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";
|