@semcore/radio 5.0.5 → 5.0.6
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 +6 -0
- package/README.md +2 -2
- package/lib/cjs/Radio.js +14 -14
- package/lib/cjs/Radio.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/Radio.js +14 -14
- package/lib/es6/Radio.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Radio.jsx +0 -133
- package/src/index.d.ts +0 -76
- package/src/index.js +0 -2
- package/src/style/radio.shadow.css +0 -120
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [5.0.6] - 2022-07-22
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/flex-box` [4.5.6 ~> 4.5.7]).
|
|
10
|
+
|
|
5
11
|
## [5.0.5] - 2022-07-07
|
|
6
12
|
|
|
7
13
|
### Changed
|
package/README.md
CHANGED
|
@@ -42,12 +42,12 @@ of the components that is discussed below. There should only be one version of t
|
|
|
42
42
|
|
|
43
43
|
You can use the package the same way but without `/ui/` in the import path.
|
|
44
44
|
|
|
45
|
-
</details>
|
|
46
|
-
|
|
47
45
|
```jsx
|
|
48
46
|
import Radio, { RadioGroup } from '@semcore/radio';
|
|
49
47
|
```
|
|
50
48
|
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
51
|
## 👤 Author
|
|
52
52
|
|
|
53
53
|
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
package/lib/cjs/Radio.js
CHANGED
|
@@ -62,23 +62,23 @@ var style = (
|
|
|
62
62
|
/*__reshadow_css_start__*/
|
|
63
63
|
_core.sstyled.insert(
|
|
64
64
|
/*__inner_css_start__*/
|
|
65
|
-
".
|
|
65
|
+
".___SRadio_yze3n_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_yze3n_gg_.__disabled_yze3n_gg_{opacity:0.3;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.___SText_yze3n_gg_{margin-left:8px}.___SText_yze3n_gg_._size_m_yze3n_gg_{font-size:14px;line-height:1.42}.___SText_yze3n_gg_._size_l_yze3n_gg_{font-size:16px;line-height:1.5}.___SValue_yze3n_gg_{position:relative;flex-shrink:0;padding:0;outline:none;z-index:0;margin-top:2px}.___SValue_yze3n_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:50%}.___SValue_yze3n_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:0;height:0;border-radius:50%;background:#fff}.___SValue_yze3n_gg_._size_m_yze3n_gg_{width:16px;height:16px}.___SValue_yze3n_gg_._size_l_yze3n_gg_{width:20px;height:20px}.___SValue_yze3n_gg_._state_normal_yze3n_gg_:before{border-color:#c4c7cf}.___SValue_yze3n_gg_._state_invalid_yze3n_gg_:before{border-color:#ff4953}.___SControl_yze3n_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_yze3n_gg_:checked~.___SValue_yze3n_gg_:before{border-color:#008ff8;background-color:#008ff8}.___SControl_yze3n_gg_:checked~.___SValue_yze3n_gg_._size_m_yze3n_gg_:after{width:6px;height:6px}.___SControl_yze3n_gg_:checked~.___SValue_yze3n_gg_._size_l_yze3n_gg_:after{width:8px;height:8px}.___SValue_yze3n_gg_._state_normal_yze3n_gg_.__keyboardFocused_yze3n_gg_:before{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);border-color:#008ff8}.___SValue_yze3n_gg_._state_invalid_yze3n_gg_.__keyboardFocused_yze3n_gg_:before{box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SControl_yze3n_gg_:checked~.___SValue_yze3n_gg_.__theme_yze3n_gg_:before{border-color:var(--theme_yze3n);background-color:var(--theme_yze3n)}.___SValue_yze3n_gg_._state_normal_yze3n_gg_.__theme_yze3n_gg_:before{border-color:var(--theme_yze3n)}"
|
|
66
66
|
/*__inner_css_end__*/
|
|
67
|
-
, "
|
|
67
|
+
, "yze3n_gg_")
|
|
68
68
|
/*__reshadow_css_end__*/
|
|
69
69
|
, {
|
|
70
|
-
"__SRadio": "
|
|
71
|
-
"_disabled": "
|
|
72
|
-
"__SText": "
|
|
73
|
-
"_size_m": "
|
|
74
|
-
"_size_l": "
|
|
75
|
-
"__SValue": "
|
|
76
|
-
"_state_normal": "
|
|
77
|
-
"_state_invalid": "
|
|
78
|
-
"__SControl": "
|
|
79
|
-
"_keyboardFocused": "
|
|
80
|
-
"_theme": "
|
|
81
|
-
"--theme": "--
|
|
70
|
+
"__SRadio": "___SRadio_yze3n_gg_",
|
|
71
|
+
"_disabled": "__disabled_yze3n_gg_",
|
|
72
|
+
"__SText": "___SText_yze3n_gg_",
|
|
73
|
+
"_size_m": "_size_m_yze3n_gg_",
|
|
74
|
+
"_size_l": "_size_l_yze3n_gg_",
|
|
75
|
+
"__SValue": "___SValue_yze3n_gg_",
|
|
76
|
+
"_state_normal": "_state_normal_yze3n_gg_",
|
|
77
|
+
"_state_invalid": "_state_invalid_yze3n_gg_",
|
|
78
|
+
"__SControl": "___SControl_yze3n_gg_",
|
|
79
|
+
"_keyboardFocused": "__keyboardFocused_yze3n_gg_",
|
|
80
|
+
"_theme": "__theme_yze3n_gg_",
|
|
81
|
+
"--theme": "--theme_yze3n"
|
|
82
82
|
});
|
|
83
83
|
|
|
84
84
|
var RadioGroupRoot = /*#__PURE__*/function (_Component) {
|
package/lib/cjs/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Radio.js","names":["RadioGroupRoot","value","asProps","theme","size","name","onChange","Children","Component","state","defaultValue","RadioGroup","createComponent","Radio","checked","e","context","props","assignProps","other","undefined","bindHandlerChange","SRadio","Box","styles","sstyled","style","CONTEXT_COMPONENT","Value","target","SValue","SControl","forwardRef","includeInputProps","getInputProps","controlProps","boxProps","resolveColor","inputProps","defaultChecked","keyboardFocusEnhance","Text","SText"],"sources":["../../src/Radio.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport assignProps from '@semcore/utils/lib/assignProps';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\n\nimport style from './style/radio.shadow.css';\n\nclass RadioGroupRoot extends Component {\n static displayName = 'RadioGroup';\n\n static defaultProps = {\n state: 'normal',\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n setContext() {\n const { theme, size, name, value, onChange } = this.asProps;\n return {\n onChange,\n value,\n theme,\n size,\n name,\n };\n }\n\n render() {\n const { Children } = this.asProps;\n return <Children />;\n }\n}\n\nconst RadioGroup = createComponent(RadioGroupRoot);\n\nclass Radio extends Component {\n static displayName = 'Radio';\n static style = style;\n static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n bindHandlerChange = (value) => (checked, e) => {\n this.context.onChange(value, e);\n };\n\n getValueProps(props) {\n // The default values are here, since you cannot rewrite out of context\n const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);\n const { value } = this.context;\n const other = {};\n // if used with the context\n if (value !== undefined) {\n other['checked'] = value === props.value;\n other['onChange'] = this.bindHandlerChange(props.value);\n }\n return {\n ...other,\n state,\n size,\n theme,\n name,\n };\n }\n\n getTextProps() {\n // The default values are here, since you cannot rewrite out of context\n const { size = 'm' } = assignProps(this.props, this.context);\n return {\n size: size,\n };\n }\n\n render() {\n const SRadio = Root;\n const { styles, Children } = this.asProps;\n\n return sstyled(styles)(\n <SRadio render={Box} tag=\"label\">\n <Children />\n </SRadio>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n includeInputProps: inputProps,\n defaultChecked: false,\n };\n static enhance = [keyboardFocusEnhance()];\n static hoistProps = ['disabled'];\n\n uncontrolledProps() {\n return {\n checked: (e) => e.target.checked,\n };\n }\n\n render() {\n const SValue = Box;\n const SControl = Box;\n const { forwardRef, styles, includeInputProps, theme } = this.asProps;\n\n const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);\n\n return sstyled(styles)(\n <>\n <SControl tag=\"input\" type=\"radio\" {...controlProps} />\n <SValue ref={forwardRef} use:theme={resolveColor(theme)} {...boxProps} />\n </>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} />);\n}\n\nexport { inputProps, RadioGroup };\nexport default createComponent(Radio, {\n Value,\n Text,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,c;;;;;;;;;;;;WASJ,6BAAoB;MAClB,OAAO;QACLC,KAAK,EAAE;MADF,CAAP;IAGD;;;WAED,sBAAa;MACX,oBAA+C,KAAKC,OAApD;MAAA,IAAQC,KAAR,iBAAQA,KAAR;MAAA,IAAeC,IAAf,iBAAeA,IAAf;MAAA,IAAqBC,IAArB,iBAAqBA,IAArB;MAAA,IAA2BJ,KAA3B,iBAA2BA,KAA3B;MAAA,IAAkCK,QAAlC,iBAAkCA,QAAlC;MACA,OAAO;QACLA,QAAQ,EAARA,QADK;QAELL,KAAK,EAALA,KAFK;QAGLE,KAAK,EAALA,KAHK;QAILC,IAAI,EAAJA,IAJK;QAKLC,IAAI,EAAJA;MALK,CAAP;IAOD;;;WAED,kBAAS;MACP,IAAQE,QAAR,GAAqB,KAAKL,OAA1B,CAAQK,QAAR;MACA,oBAAO,gCAAC,QAAD,OAAP;IACD;;;EA7B0BC,e;;iCAAvBR,c,iBACiB,Y;iCADjBA,c,kBAGkB;EACpBS,KAAK,EAAE,QADa;EAEpBL,IAAI,EAAE,GAFc;EAGpBM,YAAY,EAAE;AAHM,C;AA6BxB,IAAMC,UAAU,GAAG,IAAAC,gBAAA,EAAgBZ,cAAhB,CAAnB;;;IAEMa,K;;;;;;;;;;;;;;;0GAKgB,UAACZ,KAAD;MAAA,OAAW,UAACa,OAAD,EAAUC,CAAV,EAAgB;QAC7C,MAAKC,OAAL,CAAaV,QAAb,CAAsBL,KAAtB,EAA6Bc,CAA7B;MACD,CAFmB;IAAA,C;;;;;;WAIpB,uBAAcE,KAAd,EAAqB;MACnB;MACA,oBAAsD,IAAAC,wBAAA,EAAY,KAAKD,KAAjB,EAAwB,KAAKD,OAA7B,CAAtD;MAAA,wCAAQP,KAAR;MAAA,IAAQA,KAAR,oCAAgB,QAAhB;MAAA,uCAA0BL,IAA1B;MAAA,IAA0BA,IAA1B,mCAAiC,GAAjC;MAAA,IAAsCD,KAAtC,iBAAsCA,KAAtC;MAAA,IAA6CE,IAA7C,iBAA6CA,IAA7C;;MACA,IAAQJ,KAAR,GAAkB,KAAKe,OAAvB,CAAQf,KAAR;MACA,IAAMkB,KAAK,GAAG,EAAd,CAJmB,CAKnB;;MACA,IAAIlB,KAAK,KAAKmB,SAAd,EAAyB;QACvBD,KAAK,CAAC,SAAD,CAAL,GAAmBlB,KAAK,KAAKgB,KAAK,CAAChB,KAAnC;QACAkB,KAAK,CAAC,UAAD,CAAL,GAAoB,KAAKE,iBAAL,CAAuBJ,KAAK,CAAChB,KAA7B,CAApB;MACD;;MACD,uCACKkB,KADL;QAEEV,KAAK,EAALA,KAFF;QAGEL,IAAI,EAAJA,IAHF;QAIED,KAAK,EAALA,KAJF;QAKEE,IAAI,EAAJA;MALF;IAOD;;;WAED,wBAAe;MACb;MACA,oBAAuB,IAAAa,wBAAA,EAAY,KAAKD,KAAjB,EAAwB,KAAKD,OAA7B,CAAvB;MAAA,uCAAQZ,IAAR;MAAA,IAAQA,IAAR,mCAAe,GAAf;;MACA,OAAO;QACLA,IAAI,EAAEA;MADD,CAAP;IAGD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMkB,MAAM,GAIMC,YAJlB;MACA,qBAA6B,KAAKrB,OAAlC;MAAA,IAAQsB,MAAR,kBAAQA,MAAR;MAAA,IAAgBjB,QAAhB,kBAAgBA,QAAhB;MAEA,eAAO,IAAAkB,aAAA,EAAQD,MAAR,CAAP,eACE,gCAAC,MAAD;QAAA,OAAyB;MAAzB,yBACE,gCAAC,QAAD,2BADF,CADF;IAKD;;;EA7CiBhB,e;;iCAAdK,K,iBACiB,O;iCADjBA,K,WAEWa,K;iCAFXb,K,iBAGiBF,UAAU,CAACgB,uBAAD,C;;IA6C3BC,K;;;;;;;;;;;;WAQJ,6BAAoB;MAClB,OAAO;QACLd,OAAO,EAAE,iBAACC,CAAD;UAAA,OAAOA,CAAC,CAACc,MAAF,CAASf,OAAhB;QAAA;MADJ,CAAP;IAGD;;;WAED,kBAAS;MAAA;;MACP,IAAMgB,MAAM,GAAGP,YAAf;MACA,IAAMQ,QAAQ,GAAGR,YAAjB;MACA,qBAAyD,KAAKrB,OAA9D;MAAA,IAAQ8B,UAAR,kBAAQA,UAAR;MAAA,IAAoBR,MAApB,kBAAoBA,MAApB;MAAA,IAA4BS,iBAA5B,kBAA4BA,iBAA5B;MAAA,IAA+C9B,KAA/C,kBAA+CA,KAA/C;;MAEA,qBAAiC,IAAA+B,sBAAA,EAAc,KAAKhC,OAAnB,EAA4B+B,iBAA5B,CAAjC;MAAA;MAAA,IAAOE,YAAP;MAAA,IAAqBC,QAArB;;MAEA,eAAO,IAAAX,aAAA,EAAQD,MAAR,CAAP,eACE,+EACE,gCAAC,QAAD;QAAA,OAAc,OAAd;QAAA,QAA2B;MAA3B,GAAuCW,YAAvC,GADF,eAEE,gCAAC,MAAD;QAAA,OAAaH,UAAb;QAAA,aAAoC,IAAAK,iBAAA,EAAalC,KAAb;MAApC,GAA6DiC,QAA7D,GAFF,CADF;IAMD;;;EA3BiB5B,e;;iCAAdoB,K,kBACkB;EACpBK,iBAAiB,EAAEK,sBADC;EAEpBC,cAAc,EAAE;AAFI,C;iCADlBX,K,aAKa,CAAC,IAAAY,gCAAA,GAAD,C;iCALbZ,K,gBAMgB,CAAC,UAAD,C;;AAwBtB,SAASa,IAAT,CAAcxB,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAMyB,KAAK,GAE2BnB,YAFtC;EACA,IAAQC,MAAR,GAAmBP,KAAnB,CAAQO,MAAR;EACA,eAAO,IAAAC,aAAA,EAAQD,MAAR,CAAP,eAAuB,gCAAC,KAAD,0EAAvB;AACD;;eAGc,IAAAZ,gBAAA,EAAgBC,KAAhB,EAAuB;EACpCe,KAAK,EAALA,KADoC;EAEpCa,IAAI,EAAJA;AAFoC,CAAvB,C"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Radio';\nexport * from './Radio';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
package/lib/es6/Radio.js
CHANGED
|
@@ -31,23 +31,23 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SRadio_yze3n_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_yze3n_gg_.__disabled_yze3n_gg_{opacity:0.3;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.___SText_yze3n_gg_{margin-left:8px}.___SText_yze3n_gg_._size_m_yze3n_gg_{font-size:14px;line-height:1.42}.___SText_yze3n_gg_._size_l_yze3n_gg_{font-size:16px;line-height:1.5}.___SValue_yze3n_gg_{position:relative;flex-shrink:0;padding:0;outline:none;z-index:0;margin-top:2px}.___SValue_yze3n_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:50%}.___SValue_yze3n_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:0;height:0;border-radius:50%;background:#fff}.___SValue_yze3n_gg_._size_m_yze3n_gg_{width:16px;height:16px}.___SValue_yze3n_gg_._size_l_yze3n_gg_{width:20px;height:20px}.___SValue_yze3n_gg_._state_normal_yze3n_gg_:before{border-color:#c4c7cf}.___SValue_yze3n_gg_._state_invalid_yze3n_gg_:before{border-color:#ff4953}.___SControl_yze3n_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_yze3n_gg_:checked~.___SValue_yze3n_gg_:before{border-color:#008ff8;background-color:#008ff8}.___SControl_yze3n_gg_:checked~.___SValue_yze3n_gg_._size_m_yze3n_gg_:after{width:6px;height:6px}.___SControl_yze3n_gg_:checked~.___SValue_yze3n_gg_._size_l_yze3n_gg_:after{width:8px;height:8px}.___SValue_yze3n_gg_._state_normal_yze3n_gg_.__keyboardFocused_yze3n_gg_:before{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);border-color:#008ff8}.___SValue_yze3n_gg_._state_invalid_yze3n_gg_.__keyboardFocused_yze3n_gg_:before{box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SControl_yze3n_gg_:checked~.___SValue_yze3n_gg_.__theme_yze3n_gg_:before{border-color:var(--theme_yze3n);background-color:var(--theme_yze3n)}.___SValue_yze3n_gg_._state_normal_yze3n_gg_.__theme_yze3n_gg_:before{border-color:var(--theme_yze3n)}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "yze3n_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SRadio": "
|
|
40
|
-
"_disabled": "
|
|
41
|
-
"__SText": "
|
|
42
|
-
"_size_m": "
|
|
43
|
-
"_size_l": "
|
|
44
|
-
"__SValue": "
|
|
45
|
-
"_state_normal": "
|
|
46
|
-
"_state_invalid": "
|
|
47
|
-
"__SControl": "
|
|
48
|
-
"_keyboardFocused": "
|
|
49
|
-
"_theme": "
|
|
50
|
-
"--theme": "--
|
|
39
|
+
"__SRadio": "___SRadio_yze3n_gg_",
|
|
40
|
+
"_disabled": "__disabled_yze3n_gg_",
|
|
41
|
+
"__SText": "___SText_yze3n_gg_",
|
|
42
|
+
"_size_m": "_size_m_yze3n_gg_",
|
|
43
|
+
"_size_l": "_size_l_yze3n_gg_",
|
|
44
|
+
"__SValue": "___SValue_yze3n_gg_",
|
|
45
|
+
"_state_normal": "_state_normal_yze3n_gg_",
|
|
46
|
+
"_state_invalid": "_state_invalid_yze3n_gg_",
|
|
47
|
+
"__SControl": "___SControl_yze3n_gg_",
|
|
48
|
+
"_keyboardFocused": "__keyboardFocused_yze3n_gg_",
|
|
49
|
+
"_theme": "__theme_yze3n_gg_",
|
|
50
|
+
"--theme": "--theme_yze3n"
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
var RadioGroupRoot = /*#__PURE__*/function (_Component) {
|
package/lib/es6/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Radio.js","names":["React","createComponent","Component","CONTEXT_COMPONENT","sstyled","Root","Box","assignProps","keyboardFocusEnhance","resolveColor","getInputProps","inputProps","RadioGroupRoot","value","asProps","theme","size","name","onChange","Children","state","defaultValue","RadioGroup","Radio","checked","e","context","props","other","undefined","bindHandlerChange","SRadio","styles","style","Value","target","SValue","SControl","forwardRef","includeInputProps","controlProps","boxProps","defaultChecked","Text","SText"],"sources":["../../src/Radio.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport assignProps from '@semcore/utils/lib/assignProps';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\n\nimport style from './style/radio.shadow.css';\n\nclass RadioGroupRoot extends Component {\n static displayName = 'RadioGroup';\n\n static defaultProps = {\n state: 'normal',\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n setContext() {\n const { theme, size, name, value, onChange } = this.asProps;\n return {\n onChange,\n value,\n theme,\n size,\n name,\n };\n }\n\n render() {\n const { Children } = this.asProps;\n return <Children />;\n }\n}\n\nconst RadioGroup = createComponent(RadioGroupRoot);\n\nclass Radio extends Component {\n static displayName = 'Radio';\n static style = style;\n static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n bindHandlerChange = (value) => (checked, e) => {\n this.context.onChange(value, e);\n };\n\n getValueProps(props) {\n // The default values are here, since you cannot rewrite out of context\n const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);\n const { value } = this.context;\n const other = {};\n // if used with the context\n if (value !== undefined) {\n other['checked'] = value === props.value;\n other['onChange'] = this.bindHandlerChange(props.value);\n }\n return {\n ...other,\n state,\n size,\n theme,\n name,\n };\n }\n\n getTextProps() {\n // The default values are here, since you cannot rewrite out of context\n const { size = 'm' } = assignProps(this.props, this.context);\n return {\n size: size,\n };\n }\n\n render() {\n const SRadio = Root;\n const { styles, Children } = this.asProps;\n\n return sstyled(styles)(\n <SRadio render={Box} tag=\"label\">\n <Children />\n </SRadio>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n includeInputProps: inputProps,\n defaultChecked: false,\n };\n static enhance = [keyboardFocusEnhance()];\n static hoistProps = ['disabled'];\n\n uncontrolledProps() {\n return {\n checked: (e) => e.target.checked,\n };\n }\n\n render() {\n const SValue = Box;\n const SControl = Box;\n const { forwardRef, styles, includeInputProps, theme } = this.asProps;\n\n const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);\n\n return sstyled(styles)(\n <>\n <SControl tag=\"input\" type=\"radio\" {...controlProps} />\n <SValue ref={forwardRef} use:theme={resolveColor(theme)} {...boxProps} />\n </>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} />);\n}\n\nexport { inputProps, RadioGroup };\nexport default createComponent(Radio, {\n Value,\n Text,\n});\n"],"mappings":"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"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Radio';\nexport * from './Radio';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB;AACA,cAAc,SAAd"}
|
package/package.json
CHANGED
package/src/Radio.jsx
DELETED
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import assignProps from '@semcore/utils/lib/assignProps';
|
|
5
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
import resolveColor from '@semcore/utils/lib/color';
|
|
7
|
-
import getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';
|
|
8
|
-
|
|
9
|
-
import style from './style/radio.shadow.css';
|
|
10
|
-
|
|
11
|
-
class RadioGroupRoot extends Component {
|
|
12
|
-
static displayName = 'RadioGroup';
|
|
13
|
-
|
|
14
|
-
static defaultProps = {
|
|
15
|
-
state: 'normal',
|
|
16
|
-
size: 'm',
|
|
17
|
-
defaultValue: null,
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
uncontrolledProps() {
|
|
21
|
-
return {
|
|
22
|
-
value: null,
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
setContext() {
|
|
27
|
-
const { theme, size, name, value, onChange } = this.asProps;
|
|
28
|
-
return {
|
|
29
|
-
onChange,
|
|
30
|
-
value,
|
|
31
|
-
theme,
|
|
32
|
-
size,
|
|
33
|
-
name,
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
render() {
|
|
38
|
-
const { Children } = this.asProps;
|
|
39
|
-
return <Children />;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
const RadioGroup = createComponent(RadioGroupRoot);
|
|
44
|
-
|
|
45
|
-
class Radio extends Component {
|
|
46
|
-
static displayName = 'Radio';
|
|
47
|
-
static style = style;
|
|
48
|
-
static contextType = RadioGroup[CONTEXT_COMPONENT];
|
|
49
|
-
|
|
50
|
-
bindHandlerChange = (value) => (checked, e) => {
|
|
51
|
-
this.context.onChange(value, e);
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
getValueProps(props) {
|
|
55
|
-
// The default values are here, since you cannot rewrite out of context
|
|
56
|
-
const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);
|
|
57
|
-
const { value } = this.context;
|
|
58
|
-
const other = {};
|
|
59
|
-
// if used with the context
|
|
60
|
-
if (value !== undefined) {
|
|
61
|
-
other['checked'] = value === props.value;
|
|
62
|
-
other['onChange'] = this.bindHandlerChange(props.value);
|
|
63
|
-
}
|
|
64
|
-
return {
|
|
65
|
-
...other,
|
|
66
|
-
state,
|
|
67
|
-
size,
|
|
68
|
-
theme,
|
|
69
|
-
name,
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
getTextProps() {
|
|
74
|
-
// The default values are here, since you cannot rewrite out of context
|
|
75
|
-
const { size = 'm' } = assignProps(this.props, this.context);
|
|
76
|
-
return {
|
|
77
|
-
size: size,
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
render() {
|
|
82
|
-
const SRadio = Root;
|
|
83
|
-
const { styles, Children } = this.asProps;
|
|
84
|
-
|
|
85
|
-
return sstyled(styles)(
|
|
86
|
-
<SRadio render={Box} tag="label">
|
|
87
|
-
<Children />
|
|
88
|
-
</SRadio>,
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
class Value extends Component {
|
|
94
|
-
static defaultProps = {
|
|
95
|
-
includeInputProps: inputProps,
|
|
96
|
-
defaultChecked: false,
|
|
97
|
-
};
|
|
98
|
-
static enhance = [keyboardFocusEnhance()];
|
|
99
|
-
static hoistProps = ['disabled'];
|
|
100
|
-
|
|
101
|
-
uncontrolledProps() {
|
|
102
|
-
return {
|
|
103
|
-
checked: (e) => e.target.checked,
|
|
104
|
-
};
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
render() {
|
|
108
|
-
const SValue = Box;
|
|
109
|
-
const SControl = Box;
|
|
110
|
-
const { forwardRef, styles, includeInputProps, theme } = this.asProps;
|
|
111
|
-
|
|
112
|
-
const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);
|
|
113
|
-
|
|
114
|
-
return sstyled(styles)(
|
|
115
|
-
<>
|
|
116
|
-
<SControl tag="input" type="radio" {...controlProps} />
|
|
117
|
-
<SValue ref={forwardRef} use:theme={resolveColor(theme)} {...boxProps} />
|
|
118
|
-
</>,
|
|
119
|
-
);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
function Text(props) {
|
|
124
|
-
const SText = Root;
|
|
125
|
-
const { styles } = props;
|
|
126
|
-
return sstyled(styles)(<SText render={Box} />);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
export { inputProps, RadioGroup };
|
|
130
|
-
export default createComponent(Radio, {
|
|
131
|
-
Value,
|
|
132
|
-
Text,
|
|
133
|
-
});
|
package/src/index.d.ts
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
2
|
-
import { IBoxProps } from '@semcore/flex-box';
|
|
3
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
4
|
-
import { Text } from '@semcore/typography';
|
|
5
|
-
|
|
6
|
-
export type RadioSize = 'm' | 'l';
|
|
7
|
-
export type RadioState = 'normal' | 'invalid';
|
|
8
|
-
export type RadioValue = string | number | boolean;
|
|
9
|
-
|
|
10
|
-
export interface IRadioProps extends IBoxProps {
|
|
11
|
-
/**
|
|
12
|
-
* The value displaying the state of the component
|
|
13
|
-
* @default normal
|
|
14
|
-
*/
|
|
15
|
-
state?: RadioState;
|
|
16
|
-
/**
|
|
17
|
-
* Radio button size
|
|
18
|
-
* @default m
|
|
19
|
-
**/
|
|
20
|
-
size?: RadioSize;
|
|
21
|
-
/** The theme of the radio button that you can send your color to */
|
|
22
|
-
theme?: string;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export interface IRadioGroupProps {
|
|
26
|
-
/** Radio group name */
|
|
27
|
-
name?: string;
|
|
28
|
-
/** Active default value */
|
|
29
|
-
defaultValue?: RadioValue;
|
|
30
|
-
/** Active value */
|
|
31
|
-
value?: RadioValue;
|
|
32
|
-
/** Called when the selected element is changed */
|
|
33
|
-
onChange?: (value: RadioValue, e?: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
34
|
-
/** Radio button size */
|
|
35
|
-
size?: RadioSize;
|
|
36
|
-
/** The theme of the radio button that you can send your color to */
|
|
37
|
-
theme?: string;
|
|
38
|
-
/** Blocks access and changes to the form field */
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export interface IRadioValueProps extends IBoxProps, IKeyboardFocusProps {
|
|
43
|
-
/** List of elements that can be put on a hidden input */
|
|
44
|
-
includeInputProps?: string[];
|
|
45
|
-
/**
|
|
46
|
-
* The value displaying the state of the component
|
|
47
|
-
* @default normal
|
|
48
|
-
*/
|
|
49
|
-
state?: RadioState;
|
|
50
|
-
/** The theme of the radio button that you can send your color to */
|
|
51
|
-
theme?: string;
|
|
52
|
-
/** Radio button size */
|
|
53
|
-
size?: RadioSize;
|
|
54
|
-
/** The element value is required for RadioGroup */
|
|
55
|
-
value?: RadioValue;
|
|
56
|
-
/** Called when the value changes */
|
|
57
|
-
onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
58
|
-
/** Blocks access and changes to the form field */
|
|
59
|
-
disabled?: boolean;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
export interface IRadioCtx {
|
|
63
|
-
getValueProps: PropGetterFn;
|
|
64
|
-
getTextProps: PropGetterFn;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
declare const RadioGroup: <T>(props: CProps<IRadioGroupProps & T>) => ReturnEl;
|
|
68
|
-
|
|
69
|
-
export { RadioGroup };
|
|
70
|
-
|
|
71
|
-
declare const Radio: (<T>(props: CProps<IRadioProps & T, IRadioCtx>) => ReturnEl) & {
|
|
72
|
-
Value: <T>(props: IRadioValueProps & T) => ReturnEl;
|
|
73
|
-
Text: typeof Text;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export default Radio;
|
package/src/index.js
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SRadio {
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
align-items: flex-start;
|
|
6
|
-
cursor: pointer;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
SRadio[disabled] {
|
|
10
|
-
opacity: var(--disabled-opacity);
|
|
11
|
-
cursor: default;
|
|
12
|
-
pointer-events: none;
|
|
13
|
-
user-select: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
SText {
|
|
17
|
-
margin-left: 8px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
SText[size='m'] {
|
|
21
|
-
font-size: var(--fs-200);
|
|
22
|
-
line-height: var(--lh-200);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
SText[size='l'] {
|
|
26
|
-
font-size: var(--fs-300);
|
|
27
|
-
line-height: var(--lh-300);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
SValue {
|
|
31
|
-
position: relative;
|
|
32
|
-
flex-shrink: 0;
|
|
33
|
-
padding: 0;
|
|
34
|
-
outline: none;
|
|
35
|
-
z-index: 0;
|
|
36
|
-
|
|
37
|
-
margin-top: 2px;
|
|
38
|
-
|
|
39
|
-
&::before {
|
|
40
|
-
content: '';
|
|
41
|
-
position: absolute;
|
|
42
|
-
top: 0;
|
|
43
|
-
left: 0;
|
|
44
|
-
right: 0;
|
|
45
|
-
bottom: 0;
|
|
46
|
-
background: #fff;
|
|
47
|
-
border: 1px solid;
|
|
48
|
-
border-radius: 50%;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&::after {
|
|
52
|
-
content: '';
|
|
53
|
-
position: absolute;
|
|
54
|
-
top: 0;
|
|
55
|
-
left: 0;
|
|
56
|
-
right: 0;
|
|
57
|
-
bottom: 0;
|
|
58
|
-
margin: auto;
|
|
59
|
-
width: 0;
|
|
60
|
-
height: 0;
|
|
61
|
-
border-radius: 50%;
|
|
62
|
-
background: #fff;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
SValue[size='m'] {
|
|
67
|
-
width: 16px;
|
|
68
|
-
height: 16px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
SValue[size='l'] {
|
|
72
|
-
width: 20px;
|
|
73
|
-
height: 20px;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
SValue[state='normal']::before {
|
|
77
|
-
border-color: var(--gray-200);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
SValue[state='invalid']::before {
|
|
81
|
-
border-color: var(--red-400);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
SControl {
|
|
85
|
-
position: absolute;
|
|
86
|
-
clip: rect(1px, 1px, 1px, 1px);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
SControl:checked ~ SValue::before {
|
|
90
|
-
border-color: var(--blue-400);
|
|
91
|
-
background-color: var(--blue-400);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
SControl:checked ~ SValue[size='m']::after {
|
|
95
|
-
width: 6px;
|
|
96
|
-
height: 6px;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
SControl:checked ~ SValue[size='l']::after {
|
|
100
|
-
width: 8px;
|
|
101
|
-
height: 8px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
SValue[state='normal'][keyboardFocused]::before {
|
|
105
|
-
box-shadow: var(--keyboard-focus);
|
|
106
|
-
border-color: var(--blue-400);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
SValue[state='invalid'][keyboardFocused]::before {
|
|
110
|
-
box-shadow: var(--keyboard-focus-invalid);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
SControl:checked ~ SValue[theme]::before {
|
|
114
|
-
border-color: var(--theme);
|
|
115
|
-
background-color: var(--theme);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
SValue[state='normal'][theme]::before {
|
|
119
|
-
border-color: var(--theme);
|
|
120
|
-
}
|