@semcore/pills 3.4.0 → 3.5.3
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 +24 -0
- package/lib/cjs/Pills.js +17 -19
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/pills.shadow.css +3 -3
- package/lib/es6/Pills.js +17 -19
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/pills.shadow.css +3 -3
- package/lib/types/index.d.ts +50 -2
- package/package.json +3 -2
- package/src/Pills.js +87 -0
- package/src/index.d.ts +50 -0
- package/src/{index.tsx → index.js} +0 -0
- package/src/style/pills.shadow.css +3 -3
- package/lib/types/Pills.d.ts +0 -65
- package/src/Pills.tsx +0 -139
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.5.3] - 2021-12-23
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Changed `line-height` from 1.2 to 1.1 for correct display in all browsers.
|
|
10
|
+
|
|
11
|
+
## [3.5.2] - 2021-8-26
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Add 'sideEffect=false' for more optimal build via webpack
|
|
16
|
+
|
|
17
|
+
## [3.5.1] - 2021-07-05
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- Add default type for generic value
|
|
22
|
+
|
|
23
|
+
## [3.5.0] - 2021-06-08
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
|
|
27
|
+
- Rewrite code from TS to JS 🧑💻
|
|
28
|
+
|
|
5
29
|
## [3.4.0] - 2021-04-26
|
|
6
30
|
|
|
7
31
|
### Changed
|
package/lib/cjs/Pills.js
CHANGED
|
@@ -48,25 +48,25 @@ var style = (
|
|
|
48
48
|
/*__reshadow_css_start__*/
|
|
49
49
|
_core.sstyled.insert(
|
|
50
50
|
/*__inner_css_start__*/
|
|
51
|
-
".
|
|
51
|
+
".___SPill_1lpqi_gg_,.___SPills_1lpqi_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1lpqi_gg_{line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;color:#666;background:#fff;border:1px solid #a6b0b3}.___SPill_1lpqi_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1lpqi_gg_:active,.___SPill_1lpqi_gg_:focus,.___SPill_1lpqi_gg_:hover{outline:0;text-decoration:none}.___SPill_1lpqi_gg_:hover{background:rgba(166,176,179,.2)}.___SPill_1lpqi_gg_.__selected_1lpqi_gg_{border-color:#2b94e1;z-index:1}.___SPill_1lpqi_gg_.__selected_1lpqi_gg_,.___SPill_1lpqi_gg_.__selected_1lpqi_gg_:enabled:hover{background:rgba(43,148,225,.2)}.___SPill_1lpqi_gg_.__disabled_1lpqi_gg_{cursor:default;pointer-events:none}.___SPill_1lpqi_gg_.__disabled_1lpqi_gg_>*{opacity:.3}.___SPill_1lpqi_gg_.__keyboardFocused_1lpqi_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SText_1lpqi_gg_{color:#333}.___SAddon_1lpqi_gg_,.___SText_1lpqi_gg_{display:inline-flex;line-height:1.1}.___SAddon_1lpqi_gg_{color:#757575;align-items:center;justify-content:center}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:4px;margin-right:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-2px;margin-right:-2px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:8px;margin-right:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:8px;margin-right:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:12px;margin-right:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-6px;margin-right:-6px}.___SPill_1lpqi_gg_._neighborLocation_right_1lpqi_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1lpqi_gg_._neighborLocation_both_1lpqi_gg_{border-radius:0;margin-left:-1px}.___SPill_1lpqi_gg_._neighborLocation_left_1lpqi_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
52
52
|
/*__inner_css_end__*/
|
|
53
|
-
, "
|
|
53
|
+
, "1y1hdgc_gg_")
|
|
54
54
|
/*__reshadow_css_end__*/
|
|
55
55
|
, {
|
|
56
|
-
"__SPill": "
|
|
57
|
-
"__SPills": "
|
|
58
|
-
"
|
|
59
|
-
"_disabled": "
|
|
60
|
-
"_keyboardFocused": "
|
|
61
|
-
"__SText": "
|
|
62
|
-
"__SAddon": "
|
|
63
|
-
"_size_s": "
|
|
64
|
-
"_size_m": "
|
|
65
|
-
"_size_l": "
|
|
66
|
-
"_size_xl": "
|
|
67
|
-
"_neighborLocation_right": "
|
|
68
|
-
"_neighborLocation_both": "
|
|
69
|
-
"_neighborLocation_left": "
|
|
56
|
+
"__SPill": "___SPill_1lpqi_gg_",
|
|
57
|
+
"__SPills": "___SPills_1lpqi_gg_",
|
|
58
|
+
"_selected": "__selected_1lpqi_gg_",
|
|
59
|
+
"_disabled": "__disabled_1lpqi_gg_",
|
|
60
|
+
"_keyboardFocused": "__keyboardFocused_1lpqi_gg_",
|
|
61
|
+
"__SText": "___SText_1lpqi_gg_",
|
|
62
|
+
"__SAddon": "___SAddon_1lpqi_gg_",
|
|
63
|
+
"_size_s": "_size_s_1lpqi_gg_",
|
|
64
|
+
"_size_m": "_size_m_1lpqi_gg_",
|
|
65
|
+
"_size_l": "_size_l_1lpqi_gg_",
|
|
66
|
+
"_size_xl": "_size_xl_1lpqi_gg_",
|
|
67
|
+
"_neighborLocation_right": "_neighborLocation_right_1lpqi_gg_",
|
|
68
|
+
"_neighborLocation_both": "_neighborLocation_both_1lpqi_gg_",
|
|
69
|
+
"_neighborLocation_left": "_neighborLocation_left_1lpqi_gg_"
|
|
70
70
|
});
|
|
71
71
|
|
|
72
72
|
var RootPills = /*#__PURE__*/function (_Component) {
|
|
@@ -146,13 +146,11 @@ function Pill(props) {
|
|
|
146
146
|
var SPill = _flexBox.Box;
|
|
147
147
|
var Children = props.Children,
|
|
148
148
|
styles = props.styles,
|
|
149
|
-
selected = props.selected,
|
|
150
149
|
addonLeft = props.addonLeft,
|
|
151
150
|
addonRight = props.addonRight;
|
|
152
151
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPill, _ref6.cn("SPill", _objectSpread({}, (0, _core.assignProps)({
|
|
153
152
|
"type": "button",
|
|
154
|
-
"tag": "button"
|
|
155
|
-
"active": selected
|
|
153
|
+
"tag": "button"
|
|
156
154
|
}, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Pills.Item.Addon, {
|
|
157
155
|
tag: addonLeft
|
|
158
156
|
}) : null, (0, _addonTextChildren["default"])(Children, Pills.Item.Text, Pills.Item.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Pills.Item.Addon, {
|
package/lib/cjs/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Pills.
|
|
1
|
+
{"version":3,"sources":["../../src/Pills.js"],"names":["RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Box","Children","styles","controlsLength","Component","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, {\n Component,\n sstyled,\n Root,\n} from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, {\n neighborLocationEnhance,\n} from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = {\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props) {\n const { value, size, disabled } = this.asProps;\n return {\n size,\n disabled,\n selected: value === props.value,\n onClick: this.bindHandlerClick(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <SPills render={Box}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <SPill render={Box} type=\"button\" tag=\"button\">\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"file":"Pills.js"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './Pills';\nexport * from './Pills';\n"],"file":"index.js"}
|
|
@@ -49,7 +49,7 @@ SPill {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
SPill[
|
|
52
|
+
SPill[selected] {
|
|
53
53
|
background: color-mod(var(--light-blue) a(20%));
|
|
54
54
|
border-color: var(--light-blue);
|
|
55
55
|
z-index: 1;
|
|
@@ -75,7 +75,7 @@ SPill[keyboardFocused] {
|
|
|
75
75
|
SText {
|
|
76
76
|
color: var(--gray20);
|
|
77
77
|
display: inline-flex;
|
|
78
|
-
line-height: 1.
|
|
78
|
+
line-height: 1.1;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
SAddon {
|
|
@@ -83,7 +83,7 @@ SAddon {
|
|
|
83
83
|
display: inline-flex;
|
|
84
84
|
align-items: center;
|
|
85
85
|
justify-content: center;
|
|
86
|
-
line-height: 1.
|
|
86
|
+
line-height: 1.1;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
SPill[size='s'] {
|
package/lib/es6/Pills.js
CHANGED
|
@@ -31,25 +31,25 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SPill_1lpqi_gg_,.___SPills_1lpqi_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1lpqi_gg_{line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;color:#666;background:#fff;border:1px solid #a6b0b3}.___SPill_1lpqi_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1lpqi_gg_:active,.___SPill_1lpqi_gg_:focus,.___SPill_1lpqi_gg_:hover{outline:0;text-decoration:none}.___SPill_1lpqi_gg_:hover{background:rgba(166,176,179,.2)}.___SPill_1lpqi_gg_.__selected_1lpqi_gg_{border-color:#2b94e1;z-index:1}.___SPill_1lpqi_gg_.__selected_1lpqi_gg_,.___SPill_1lpqi_gg_.__selected_1lpqi_gg_:enabled:hover{background:rgba(43,148,225,.2)}.___SPill_1lpqi_gg_.__disabled_1lpqi_gg_{cursor:default;pointer-events:none}.___SPill_1lpqi_gg_.__disabled_1lpqi_gg_>*{opacity:.3}.___SPill_1lpqi_gg_.__keyboardFocused_1lpqi_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SText_1lpqi_gg_{color:#333}.___SAddon_1lpqi_gg_,.___SText_1lpqi_gg_{display:inline-flex;line-height:1.1}.___SAddon_1lpqi_gg_{color:#757575;align-items:center;justify-content:center}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:4px;margin-right:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-2px;margin-right:-2px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:8px;margin-right:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:8px;margin-right:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:12px;margin-right:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-6px;margin-right:-6px}.___SPill_1lpqi_gg_._neighborLocation_right_1lpqi_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1lpqi_gg_._neighborLocation_both_1lpqi_gg_{border-radius:0;margin-left:-1px}.___SPill_1lpqi_gg_._neighborLocation_left_1lpqi_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "1y1hdgc_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SPill": "
|
|
40
|
-
"__SPills": "
|
|
41
|
-
"
|
|
42
|
-
"_disabled": "
|
|
43
|
-
"_keyboardFocused": "
|
|
44
|
-
"__SText": "
|
|
45
|
-
"__SAddon": "
|
|
46
|
-
"_size_s": "
|
|
47
|
-
"_size_m": "
|
|
48
|
-
"_size_l": "
|
|
49
|
-
"_size_xl": "
|
|
50
|
-
"_neighborLocation_right": "
|
|
51
|
-
"_neighborLocation_both": "
|
|
52
|
-
"_neighborLocation_left": "
|
|
39
|
+
"__SPill": "___SPill_1lpqi_gg_",
|
|
40
|
+
"__SPills": "___SPills_1lpqi_gg_",
|
|
41
|
+
"_selected": "__selected_1lpqi_gg_",
|
|
42
|
+
"_disabled": "__disabled_1lpqi_gg_",
|
|
43
|
+
"_keyboardFocused": "__keyboardFocused_1lpqi_gg_",
|
|
44
|
+
"__SText": "___SText_1lpqi_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_1lpqi_gg_",
|
|
46
|
+
"_size_s": "_size_s_1lpqi_gg_",
|
|
47
|
+
"_size_m": "_size_m_1lpqi_gg_",
|
|
48
|
+
"_size_l": "_size_l_1lpqi_gg_",
|
|
49
|
+
"_size_xl": "_size_xl_1lpqi_gg_",
|
|
50
|
+
"_neighborLocation_right": "_neighborLocation_right_1lpqi_gg_",
|
|
51
|
+
"_neighborLocation_both": "_neighborLocation_both_1lpqi_gg_",
|
|
52
|
+
"_neighborLocation_left": "_neighborLocation_left_1lpqi_gg_"
|
|
53
53
|
});
|
|
54
54
|
|
|
55
55
|
var RootPills = /*#__PURE__*/function (_Component) {
|
|
@@ -134,13 +134,11 @@ function Pill(props) {
|
|
|
134
134
|
var SPill = Box;
|
|
135
135
|
var Children = props.Children,
|
|
136
136
|
styles = props.styles,
|
|
137
|
-
selected = props.selected,
|
|
138
137
|
addonLeft = props.addonLeft,
|
|
139
138
|
addonRight = props.addonRight;
|
|
140
139
|
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SPill, _ref6.cn("SPill", _objectSpread({}, _assignProps2({
|
|
141
140
|
"type": "button",
|
|
142
|
-
"tag": "button"
|
|
143
|
-
"active": selected
|
|
141
|
+
"tag": "button"
|
|
144
142
|
}, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
|
|
145
143
|
tag: addonLeft
|
|
146
144
|
}) : null, addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon), addonRight ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
|
package/lib/es6/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Pills.
|
|
1
|
+
{"version":3,"sources":["../../src/Pills.js"],"names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","keyboardFocusEnhance","addonTextChildren","RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Children","styles","controlsLength","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, {\n Component,\n sstyled,\n Root,\n} from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, {\n neighborLocationEnhance,\n} from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = {\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props) {\n const { value, size, disabled } = this.asProps;\n return {\n size,\n disabled,\n selected: value === props.value,\n onClick: this.bindHandlerClick(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <SPills render={Box}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <SPill render={Box} type=\"button\" tag=\"button\">\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"file":"Pills.js"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB;AACA,cAAc,SAAd","sourcesContent":["export { default } from './Pills';\nexport * from './Pills';\n"],"file":"index.js"}
|
|
@@ -49,7 +49,7 @@ SPill {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
SPill[
|
|
52
|
+
SPill[selected] {
|
|
53
53
|
background: color-mod(var(--light-blue) a(20%));
|
|
54
54
|
border-color: var(--light-blue);
|
|
55
55
|
z-index: 1;
|
|
@@ -75,7 +75,7 @@ SPill[keyboardFocused] {
|
|
|
75
75
|
SText {
|
|
76
76
|
color: var(--gray20);
|
|
77
77
|
display: inline-flex;
|
|
78
|
-
line-height: 1.
|
|
78
|
+
line-height: 1.1;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
SAddon {
|
|
@@ -83,7 +83,7 @@ SAddon {
|
|
|
83
83
|
display: inline-flex;
|
|
84
84
|
align-items: center;
|
|
85
85
|
justify-content: center;
|
|
86
|
-
line-height: 1.
|
|
86
|
+
line-height: 1.1;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
SPill[size='s'] {
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,2 +1,50 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
+
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
+
|
|
7
|
+
export type PillsValue = string | number | boolean;
|
|
8
|
+
|
|
9
|
+
export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
|
|
10
|
+
/** Pills size */
|
|
11
|
+
size?: 'xl' | 'l' | 'm' | 's' | false;
|
|
12
|
+
/** Disabled state */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** Called when the selection is changed */
|
|
15
|
+
onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;
|
|
16
|
+
/** Value for the selected pill */
|
|
17
|
+
value?: T;
|
|
18
|
+
/** Default value for the selected pill */
|
|
19
|
+
defaultValue?: T;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
23
|
+
/** Disabled state */
|
|
24
|
+
disabled?: boolean;
|
|
25
|
+
/** Pill value */
|
|
26
|
+
value: PillsValue;
|
|
27
|
+
/** Left addon text */
|
|
28
|
+
addonLeft?: React.ElementType;
|
|
29
|
+
/** Right addon tag */
|
|
30
|
+
addonRight?: React.ElementType;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export interface IPillsContext {
|
|
34
|
+
getItemProps: PropGetterFn;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export interface IPopperHandlers {
|
|
38
|
+
value: (value: PillsValue) => void;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
declare const Pills: (<T, V extends PillsValue = PillsValue>(
|
|
42
|
+
props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
|
|
43
|
+
) => ReturnEl) & {
|
|
44
|
+
Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
|
|
45
|
+
Text: typeof Box
|
|
46
|
+
Addon: typeof Box
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export default Pills;
|
package/package.json
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/pills",
|
|
3
3
|
"description": "SEMRush Pills Component",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.5.3",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
|
+
"sideEffects": false,
|
|
8
9
|
"author": "Roman Lysov <r.lysov@semrush.com>",
|
|
9
10
|
"license": "MIT",
|
|
10
11
|
"scripts": {
|
|
11
|
-
"build": "build",
|
|
12
|
+
"build": "build --source=js",
|
|
12
13
|
"test": "jest"
|
|
13
14
|
},
|
|
14
15
|
"dependencies": {
|
package/src/Pills.js
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import createComponent, {
|
|
3
|
+
Component,
|
|
4
|
+
sstyled,
|
|
5
|
+
Root,
|
|
6
|
+
} from '@semcore/core';
|
|
7
|
+
import { Box } from '@semcore/flex-box';
|
|
8
|
+
import NeighborLocation, {
|
|
9
|
+
neighborLocationEnhance,
|
|
10
|
+
} from '@semcore/neighbor-location';
|
|
11
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
12
|
+
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
13
|
+
|
|
14
|
+
import style from './style/pills.shadow.css';
|
|
15
|
+
|
|
16
|
+
class RootPills extends Component {
|
|
17
|
+
static displayName = 'Pills';
|
|
18
|
+
static style = style;
|
|
19
|
+
static defaultProps = {
|
|
20
|
+
size: 'm',
|
|
21
|
+
defaultValue: null,
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
uncontrolledProps() {
|
|
25
|
+
return {
|
|
26
|
+
value: null,
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
bindHandlerClick = (value) => (e) => {
|
|
31
|
+
this.handlers.value(value, e);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
getItemProps(props) {
|
|
35
|
+
const { value, size, disabled } = this.asProps;
|
|
36
|
+
return {
|
|
37
|
+
size,
|
|
38
|
+
disabled,
|
|
39
|
+
selected: value === props.value,
|
|
40
|
+
onClick: this.bindHandlerClick(props.value),
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
render() {
|
|
45
|
+
const SPills = Root;
|
|
46
|
+
const { Children, styles, controlsLength } = this.asProps;
|
|
47
|
+
|
|
48
|
+
return sstyled(styles)(
|
|
49
|
+
<SPills render={Box}>
|
|
50
|
+
<NeighborLocation controlsLength={controlsLength}>
|
|
51
|
+
<Children />
|
|
52
|
+
</NeighborLocation>
|
|
53
|
+
</SPills>,
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function Pill(props) {
|
|
59
|
+
const SPill = Root;
|
|
60
|
+
const { Children, styles, addonLeft, addonRight } = props;
|
|
61
|
+
|
|
62
|
+
return sstyled(styles)(
|
|
63
|
+
<SPill render={Box} type="button" tag="button">
|
|
64
|
+
{addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}
|
|
65
|
+
{addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}
|
|
66
|
+
{addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}
|
|
67
|
+
</SPill>,
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
Pill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
|
|
72
|
+
|
|
73
|
+
function Text(props) {
|
|
74
|
+
const SText = Root;
|
|
75
|
+
return sstyled(props.styles)(<SText render={Box} tag="span" />);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function Addon(props) {
|
|
79
|
+
const SAddon = Root;
|
|
80
|
+
return sstyled(props.styles)(<SAddon render={Box} tag="span" />);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
const Pills = createComponent(RootPills, {
|
|
84
|
+
Item: [Pill, { Text, Addon }],
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
export default Pills;
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
+
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
+
|
|
7
|
+
export type PillsValue = string | number | boolean;
|
|
8
|
+
|
|
9
|
+
export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
|
|
10
|
+
/** Pills size */
|
|
11
|
+
size?: 'xl' | 'l' | 'm' | 's' | false;
|
|
12
|
+
/** Disabled state */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** Called when the selection is changed */
|
|
15
|
+
onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;
|
|
16
|
+
/** Value for the selected pill */
|
|
17
|
+
value?: T;
|
|
18
|
+
/** Default value for the selected pill */
|
|
19
|
+
defaultValue?: T;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
23
|
+
/** Disabled state */
|
|
24
|
+
disabled?: boolean;
|
|
25
|
+
/** Pill value */
|
|
26
|
+
value: PillsValue;
|
|
27
|
+
/** Left addon text */
|
|
28
|
+
addonLeft?: React.ElementType;
|
|
29
|
+
/** Right addon tag */
|
|
30
|
+
addonRight?: React.ElementType;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export interface IPillsContext {
|
|
34
|
+
getItemProps: PropGetterFn;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export interface IPopperHandlers {
|
|
38
|
+
value: (value: PillsValue) => void;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
declare const Pills: (<T, V extends PillsValue = PillsValue>(
|
|
42
|
+
props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
|
|
43
|
+
) => ReturnEl) & {
|
|
44
|
+
Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
|
|
45
|
+
Text: typeof Box
|
|
46
|
+
Addon: typeof Box
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export default Pills;
|
|
File without changes
|
|
@@ -49,7 +49,7 @@ SPill {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
SPill[
|
|
52
|
+
SPill[selected] {
|
|
53
53
|
background: color-mod(var(--light-blue) a(20%));
|
|
54
54
|
border-color: var(--light-blue);
|
|
55
55
|
z-index: 1;
|
|
@@ -75,7 +75,7 @@ SPill[keyboardFocused] {
|
|
|
75
75
|
SText {
|
|
76
76
|
color: var(--gray20);
|
|
77
77
|
display: inline-flex;
|
|
78
|
-
line-height: 1.
|
|
78
|
+
line-height: 1.1;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
SAddon {
|
|
@@ -83,7 +83,7 @@ SAddon {
|
|
|
83
83
|
display: inline-flex;
|
|
84
84
|
align-items: center;
|
|
85
85
|
justify-content: center;
|
|
86
|
-
line-height: 1.
|
|
86
|
+
line-height: 1.1;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
SPill[size='s'] {
|
package/lib/types/Pills.d.ts
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import React, { ComponentProps, HTMLAttributes } from 'react';
|
|
2
|
-
import { Component, Merge, PropGetterFn, PropsAndRef } from '@semcore/core';
|
|
3
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
export declare type PillsValue = string | number | boolean;
|
|
7
|
-
export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
|
|
8
|
-
/** Pills size */
|
|
9
|
-
size?: 'xl' | 'l' | 'm' | 's' | false;
|
|
10
|
-
/** Disabled state */
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
/** Called when the selection is changed */
|
|
13
|
-
onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;
|
|
14
|
-
/** Value for the selected pill */
|
|
15
|
-
value?: T;
|
|
16
|
-
/** Default value for the selected pill */
|
|
17
|
-
defaultValue?: T;
|
|
18
|
-
}
|
|
19
|
-
export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
20
|
-
/** Disabled state */
|
|
21
|
-
disabled?: boolean;
|
|
22
|
-
/** Pill value */
|
|
23
|
-
value: PillsValue;
|
|
24
|
-
/** Left addon text */
|
|
25
|
-
addonLeft?: React.ElementType;
|
|
26
|
-
/** Right addon tag */
|
|
27
|
-
addonRight?: React.ElementType;
|
|
28
|
-
}
|
|
29
|
-
export interface IPillsContext {
|
|
30
|
-
getItemProps: PropGetterFn;
|
|
31
|
-
}
|
|
32
|
-
declare class RootPills extends Component<IPillsProps> {
|
|
33
|
-
static displayName: string;
|
|
34
|
-
static style: {
|
|
35
|
-
[key: string]: string;
|
|
36
|
-
};
|
|
37
|
-
static defaultProps: {
|
|
38
|
-
size: string;
|
|
39
|
-
defaultValue: any;
|
|
40
|
-
};
|
|
41
|
-
uncontrolledProps(): {
|
|
42
|
-
value: any;
|
|
43
|
-
};
|
|
44
|
-
bindHandlerClick: (value: any) => (e: any) => void;
|
|
45
|
-
getItemProps(props: any): {
|
|
46
|
-
size: false | "xl" | "l" | "m" | "s";
|
|
47
|
-
disabled: boolean;
|
|
48
|
-
selected: boolean;
|
|
49
|
-
onClick: (e: any) => void;
|
|
50
|
-
};
|
|
51
|
-
render(): React.ReactNode;
|
|
52
|
-
}
|
|
53
|
-
declare function Text(props: any): React.ReactNode;
|
|
54
|
-
declare function Addon(props: any): React.ReactNode;
|
|
55
|
-
declare const Pills: import("@semcore/core").ComponentType<IPillsProps<PillsValue>, {
|
|
56
|
-
Item: [Merge<IPillProps, HTMLAttributes<HTMLButtonElement>>, {
|
|
57
|
-
Text: ComponentProps<typeof Box>;
|
|
58
|
-
Addon: ComponentProps<typeof Box>;
|
|
59
|
-
}];
|
|
60
|
-
}, Merge<IPillsContext, IPillProps>, {
|
|
61
|
-
value: any;
|
|
62
|
-
}, <T extends PillsValue = PillsValue>(props: PropsAndRef<IPillsProps<T>, IPillsContext, {
|
|
63
|
-
value: any;
|
|
64
|
-
}>) => React.ReactElement>;
|
|
65
|
-
export default Pills;
|
package/src/Pills.tsx
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import React, { ComponentProps, HTMLAttributes } from 'react';
|
|
2
|
-
import createComponent, {
|
|
3
|
-
Component,
|
|
4
|
-
Merge,
|
|
5
|
-
PropGetterFn,
|
|
6
|
-
PropsAndRef,
|
|
7
|
-
sstyled,
|
|
8
|
-
Root,
|
|
9
|
-
} from '@semcore/core';
|
|
10
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
11
|
-
import NeighborLocation, {
|
|
12
|
-
INeighborItemProps,
|
|
13
|
-
INeighborLocationProps,
|
|
14
|
-
neighborLocationEnhance,
|
|
15
|
-
} from '@semcore/neighbor-location';
|
|
16
|
-
import keyboardFocusEnhance, {
|
|
17
|
-
IKeyboardFocusProps,
|
|
18
|
-
} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
19
|
-
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
20
|
-
|
|
21
|
-
import style from './style/pills.shadow.css';
|
|
22
|
-
|
|
23
|
-
export type PillsValue = string | number | boolean;
|
|
24
|
-
|
|
25
|
-
export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
|
|
26
|
-
/** Pills size */
|
|
27
|
-
size?: 'xl' | 'l' | 'm' | 's' | false;
|
|
28
|
-
/** Disabled state */
|
|
29
|
-
disabled?: boolean;
|
|
30
|
-
/** Called when the selection is changed */
|
|
31
|
-
onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;
|
|
32
|
-
/** Value for the selected pill */
|
|
33
|
-
value?: T;
|
|
34
|
-
/** Default value for the selected pill */
|
|
35
|
-
defaultValue?: T;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
39
|
-
/** Disabled state */
|
|
40
|
-
disabled?: boolean;
|
|
41
|
-
/** Pill value */
|
|
42
|
-
value: PillsValue;
|
|
43
|
-
/** Left addon text */
|
|
44
|
-
addonLeft?: React.ElementType;
|
|
45
|
-
/** Right addon tag */
|
|
46
|
-
addonRight?: React.ElementType;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export interface IPillsContext {
|
|
50
|
-
getItemProps: PropGetterFn;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
class RootPills extends Component<IPillsProps> {
|
|
54
|
-
static displayName = 'Pills';
|
|
55
|
-
static style = style;
|
|
56
|
-
static defaultProps = {
|
|
57
|
-
size: 'm',
|
|
58
|
-
defaultValue: null,
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
uncontrolledProps() {
|
|
62
|
-
return {
|
|
63
|
-
value: null,
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
bindHandlerClick = (value) => (e) => {
|
|
68
|
-
this.handlers.value(value, e);
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
getItemProps(props) {
|
|
72
|
-
const { value, size, disabled } = this.asProps;
|
|
73
|
-
return {
|
|
74
|
-
size,
|
|
75
|
-
disabled,
|
|
76
|
-
selected: value === props.value,
|
|
77
|
-
onClick: this.bindHandlerClick(props.value),
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
render() {
|
|
82
|
-
const SPills = Root;
|
|
83
|
-
const { Children, styles, controlsLength } = this.asProps;
|
|
84
|
-
|
|
85
|
-
return sstyled(styles)(
|
|
86
|
-
<SPills render={Box}>
|
|
87
|
-
<NeighborLocation controlsLength={controlsLength}>
|
|
88
|
-
<Children />
|
|
89
|
-
</NeighborLocation>
|
|
90
|
-
</SPills>,
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
function Pill(props) {
|
|
96
|
-
const SPill = Root;
|
|
97
|
-
const { Children, styles, selected, addonLeft, addonRight } = props;
|
|
98
|
-
|
|
99
|
-
return sstyled(styles)(
|
|
100
|
-
<SPill render={Box} type="button" tag="button" active={selected}>
|
|
101
|
-
{addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}
|
|
102
|
-
{addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}
|
|
103
|
-
{addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}
|
|
104
|
-
</SPill>,
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
Pill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
|
|
109
|
-
|
|
110
|
-
function Text(props) {
|
|
111
|
-
const SText = Root;
|
|
112
|
-
return sstyled(props.styles)(<SText render={Box} tag="span" />);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
function Addon(props) {
|
|
116
|
-
const SAddon = Root;
|
|
117
|
-
return sstyled(props.styles)(<SAddon render={Box} tag="span" />);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
const Pills = createComponent<
|
|
121
|
-
RootPills,
|
|
122
|
-
{
|
|
123
|
-
Item: [
|
|
124
|
-
Merge<IPillProps, HTMLAttributes<HTMLButtonElement>>,
|
|
125
|
-
{
|
|
126
|
-
Text: ComponentProps<typeof Box>;
|
|
127
|
-
Addon: ComponentProps<typeof Box>;
|
|
128
|
-
},
|
|
129
|
-
];
|
|
130
|
-
},
|
|
131
|
-
Merge<IPillsContext, IPillProps>,
|
|
132
|
-
<T extends PillsValue = PillsValue>(
|
|
133
|
-
props: PropsAndRef<IPillsProps<T>, IPillsContext, ReturnType<RootPills['uncontrolledProps']>>,
|
|
134
|
-
) => React.ReactElement
|
|
135
|
-
>(RootPills, {
|
|
136
|
-
Item: [Pill, { Text, Addon }],
|
|
137
|
-
});
|
|
138
|
-
|
|
139
|
-
export default Pills;
|