@semcore/input 3.0.9 → 3.0.10
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/lib/cjs/Input.js +19 -18
- package/lib/cjs/Input.js.map +1 -1
- package/lib/es6/Input.js +19 -18
- package/lib/es6/Input.js.map +1 -1
- package/package.json +1 -1
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
|
+
## [3.0.10] - 2022-07-22
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Fixed `Input.Addon` css classes were missing during server-side rendering.
|
|
10
|
+
|
|
5
11
|
## [3.0.9] - 2022-07-22
|
|
6
12
|
|
|
7
13
|
### Changed
|
package/lib/cjs/Input.js
CHANGED
|
@@ -52,26 +52,26 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
55
|
+
".___SInput_jr0eh_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_jr0eh_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_jr0eh_gg_ input:-webkit-autofill~.___SOutline_jr0eh_gg_{background-color:#faffbd}.___SValue_jr0eh_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_jr0eh_gg_:focus{outline:none}.___SValue_jr0eh_gg_::-moz-placeholder{color:#a9abb6}.___SValue_jr0eh_gg_:-ms-input-placeholder{color:#a9abb6}.___SValue_jr0eh_gg_::placeholder{color:#a9abb6}.___SValue_jr0eh_gg_:-moz-read-only~.___SOutline_jr0eh_gg_{background:#f4f5f9}.___SValue_jr0eh_gg_:read-only~.___SOutline_jr0eh_gg_{background:#f4f5f9}.___SValue_jr0eh_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_jr0eh_gg_:disabled~.___SOutline_jr0eh_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_jr0eh_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_jr0eh_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_jr0eh_gg_.__interactive_jr0eh_gg_{cursor:pointer}.___SAddon_jr0eh_gg_.__interactive_jr0eh_gg_:hover{color:#8a8e9b}.___SAddon_jr0eh_gg_.__disabled_jr0eh_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_jr0eh_gg_._size_m_jr0eh_gg_{font-size:14px;height:28px}.___SValue_jr0eh_gg_._size_l_jr0eh_gg_,.___SValue_jr0eh_gg_._size_m_jr0eh_gg_{padding:0 8px}.___SInput_jr0eh_gg_._size_l_jr0eh_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_jr0eh_gg_.__focused_jr0eh_gg_{z-index:1}.___SInput_jr0eh_gg_._state_normal_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-color:#c4c7cf}.___SInput_jr0eh_gg_._state_normal_jr0eh_gg_ .___SValue_jr0eh_gg_:focus~.___SOutline_jr0eh_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_jr0eh_gg_._state_valid_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-color:#59ddaa}.___SInput_jr0eh_gg_._state_valid_jr0eh_gg_ .___SValue_jr0eh_gg_:focus~.___SOutline_jr0eh_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_jr0eh_gg_._state_invalid_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-color:#ffaeb5}.___SInput_jr0eh_gg_._state_invalid_jr0eh_gg_ .___SValue_jr0eh_gg_:focus~.___SOutline_jr0eh_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_jr0eh_gg_._neighborLocation_right_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_jr0eh_gg_._neighborLocation_both_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-radius:0;border-left:none}.___SInput_jr0eh_gg_._neighborLocation_left_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SAddon_jr0eh_gg_._neighborLocation_right_jr0eh_gg_{padding-right:8px}.___SAddon_jr0eh_gg_._neighborLocation_left_jr0eh_gg_{padding-left:8px}.___SValue_jr0eh_gg_._neighborLocation_right_jr0eh_gg_{padding-right:0}.___SValue_jr0eh_gg_._neighborLocation_both_jr0eh_gg_{padding-left:0;padding-right:0}.___SValue_jr0eh_gg_._neighborLocation_left_jr0eh_gg_{padding-left:0}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "jr0eh_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__SInput": "
|
|
61
|
-
"__SOutline": "
|
|
62
|
-
"__SValue": "
|
|
63
|
-
"__SAddon": "
|
|
64
|
-
"_interactive": "
|
|
65
|
-
"_disabled": "
|
|
66
|
-
"_size_m": "
|
|
67
|
-
"_size_l": "
|
|
68
|
-
"_focused": "
|
|
69
|
-
"_state_normal": "
|
|
70
|
-
"_state_valid": "
|
|
71
|
-
"_state_invalid": "
|
|
72
|
-
"_neighborLocation_right": "
|
|
73
|
-
"_neighborLocation_both": "
|
|
74
|
-
"_neighborLocation_left": "
|
|
60
|
+
"__SInput": "___SInput_jr0eh_gg_",
|
|
61
|
+
"__SOutline": "___SOutline_jr0eh_gg_",
|
|
62
|
+
"__SValue": "___SValue_jr0eh_gg_",
|
|
63
|
+
"__SAddon": "___SAddon_jr0eh_gg_",
|
|
64
|
+
"_interactive": "__interactive_jr0eh_gg_",
|
|
65
|
+
"_disabled": "__disabled_jr0eh_gg_",
|
|
66
|
+
"_size_m": "_size_m_jr0eh_gg_",
|
|
67
|
+
"_size_l": "_size_l_jr0eh_gg_",
|
|
68
|
+
"_focused": "__focused_jr0eh_gg_",
|
|
69
|
+
"_state_normal": "_state_normal_jr0eh_gg_",
|
|
70
|
+
"_state_valid": "_state_valid_jr0eh_gg_",
|
|
71
|
+
"_state_invalid": "_state_invalid_jr0eh_gg_",
|
|
72
|
+
"_neighborLocation_right": "_neighborLocation_right_jr0eh_gg_",
|
|
73
|
+
"_neighborLocation_both": "_neighborLocation_both_jr0eh_gg_",
|
|
74
|
+
"_neighborLocation_left": "_neighborLocation_left_jr0eh_gg_"
|
|
75
75
|
});
|
|
76
76
|
|
|
77
77
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -208,7 +208,8 @@ function Addon(props) {
|
|
|
208
208
|
_ref6;
|
|
209
209
|
|
|
210
210
|
var SAddon = _flexBox.Box;
|
|
211
|
-
|
|
211
|
+
var Children = props.Children;
|
|
212
|
+
return _ref6 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, (0, _core.assignProps)({}, _ref3))), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {})));
|
|
212
213
|
}
|
|
213
214
|
|
|
214
215
|
Addon.enhance = [(0, _neighborLocation.neighborLocationEnhance)()];
|
package/lib/cjs/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["Input","focused","React","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","Box","SOutline","Children","styles","controlsLength","state","sstyled","Component","style","neighborLocationEnhance","Value","value","target","SValue","defaultValue","keyboardFocusEnhance","autoFocusEnhance","Addon","props","SAddon","enhance","createComponent"],"sources":["../../src/Input.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n static displayName = 'Input';\n\n static defaultProps = {\n size: 'm',\n state: 'normal',\n };\n static style = style;\n static enhance = [neighborLocationEnhance()];\n\n state = {\n focused: false,\n };\n\n inputRef = React.createRef();\n\n handleMouseDownAddon = (e) => {\n e.preventDefault();\n this.inputRef.current?.focus();\n };\n\n bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n getAddonProps() {\n const { disabled } = this.asProps;\n return {\n disabled,\n onMouseDown: this.handleMouseDownAddon,\n };\n }\n\n getValueProps() {\n const { size, disabled } = this.asProps;\n return {\n ref: this.inputRef,\n size,\n disabled,\n onFocus: this.bindHandlerValueFocused(true),\n onBlur: this.bindHandlerValueFocused(false),\n };\n }\n\n render() {\n const SInput = Root;\n const SOutline = 'div';\n const { Children, styles, controlsLength } = this.asProps;\n const { focused } = this.state;\n\n return sstyled(styles)(\n <SInput render={Box} focused={focused}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SOutline />\n </SInput>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n };\n static enhance = [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()];\n\n uncontrolledProps() {\n return {\n value: (e) => e.target.value,\n };\n }\n\n render() {\n const SValue = Root;\n\n return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n }\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box}
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","focused","React","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","Box","SOutline","Children","styles","controlsLength","state","sstyled","Component","style","neighborLocationEnhance","Value","value","target","SValue","defaultValue","keyboardFocusEnhance","autoFocusEnhance","Addon","props","SAddon","enhance","createComponent"],"sources":["../../src/Input.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n static displayName = 'Input';\n\n static defaultProps = {\n size: 'm',\n state: 'normal',\n };\n static style = style;\n static enhance = [neighborLocationEnhance()];\n\n state = {\n focused: false,\n };\n\n inputRef = React.createRef();\n\n handleMouseDownAddon = (e) => {\n e.preventDefault();\n this.inputRef.current?.focus();\n };\n\n bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n getAddonProps() {\n const { disabled } = this.asProps;\n return {\n disabled,\n onMouseDown: this.handleMouseDownAddon,\n };\n }\n\n getValueProps() {\n const { size, disabled } = this.asProps;\n return {\n ref: this.inputRef,\n size,\n disabled,\n onFocus: this.bindHandlerValueFocused(true),\n onBlur: this.bindHandlerValueFocused(false),\n };\n }\n\n render() {\n const SInput = Root;\n const SOutline = 'div';\n const { Children, styles, controlsLength } = this.asProps;\n const { focused } = this.state;\n\n return sstyled(styles)(\n <SInput render={Box} focused={focused}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SOutline />\n </SInput>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n };\n static enhance = [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()];\n\n uncontrolledProps() {\n return {\n value: (e) => e.target.value,\n };\n }\n\n render() {\n const SValue = Root;\n\n return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n }\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { Children } = props;\n return sstyled(props.styles)(\n <SAddon render={Box}>\n <Children />\n </SAddon>,\n );\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n Addon,\n Value,\n});\n"],"mappings":"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"}
|
package/lib/es6/Input.js
CHANGED
|
@@ -30,26 +30,26 @@ var style = (
|
|
|
30
30
|
/*__reshadow_css_start__*/
|
|
31
31
|
_sstyled.insert(
|
|
32
32
|
/*__inner_css_start__*/
|
|
33
|
-
".
|
|
33
|
+
".___SInput_jr0eh_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_jr0eh_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_jr0eh_gg_ input:-webkit-autofill~.___SOutline_jr0eh_gg_{background-color:#faffbd}.___SValue_jr0eh_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_jr0eh_gg_:focus{outline:none}.___SValue_jr0eh_gg_::-moz-placeholder{color:#a9abb6}.___SValue_jr0eh_gg_:-ms-input-placeholder{color:#a9abb6}.___SValue_jr0eh_gg_::placeholder{color:#a9abb6}.___SValue_jr0eh_gg_:-moz-read-only~.___SOutline_jr0eh_gg_{background:#f4f5f9}.___SValue_jr0eh_gg_:read-only~.___SOutline_jr0eh_gg_{background:#f4f5f9}.___SValue_jr0eh_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_jr0eh_gg_:disabled~.___SOutline_jr0eh_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_jr0eh_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_jr0eh_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_jr0eh_gg_.__interactive_jr0eh_gg_{cursor:pointer}.___SAddon_jr0eh_gg_.__interactive_jr0eh_gg_:hover{color:#8a8e9b}.___SAddon_jr0eh_gg_.__disabled_jr0eh_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_jr0eh_gg_._size_m_jr0eh_gg_{font-size:14px;height:28px}.___SValue_jr0eh_gg_._size_l_jr0eh_gg_,.___SValue_jr0eh_gg_._size_m_jr0eh_gg_{padding:0 8px}.___SInput_jr0eh_gg_._size_l_jr0eh_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_jr0eh_gg_.__focused_jr0eh_gg_{z-index:1}.___SInput_jr0eh_gg_._state_normal_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-color:#c4c7cf}.___SInput_jr0eh_gg_._state_normal_jr0eh_gg_ .___SValue_jr0eh_gg_:focus~.___SOutline_jr0eh_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_jr0eh_gg_._state_valid_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-color:#59ddaa}.___SInput_jr0eh_gg_._state_valid_jr0eh_gg_ .___SValue_jr0eh_gg_:focus~.___SOutline_jr0eh_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_jr0eh_gg_._state_invalid_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-color:#ffaeb5}.___SInput_jr0eh_gg_._state_invalid_jr0eh_gg_ .___SValue_jr0eh_gg_:focus~.___SOutline_jr0eh_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_jr0eh_gg_._neighborLocation_right_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_jr0eh_gg_._neighborLocation_both_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-radius:0;border-left:none}.___SInput_jr0eh_gg_._neighborLocation_left_jr0eh_gg_ .___SOutline_jr0eh_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SAddon_jr0eh_gg_._neighborLocation_right_jr0eh_gg_{padding-right:8px}.___SAddon_jr0eh_gg_._neighborLocation_left_jr0eh_gg_{padding-left:8px}.___SValue_jr0eh_gg_._neighborLocation_right_jr0eh_gg_{padding-right:0}.___SValue_jr0eh_gg_._neighborLocation_both_jr0eh_gg_{padding-left:0;padding-right:0}.___SValue_jr0eh_gg_._neighborLocation_left_jr0eh_gg_{padding-left:0}"
|
|
34
34
|
/*__inner_css_end__*/
|
|
35
|
-
, "
|
|
35
|
+
, "jr0eh_gg_")
|
|
36
36
|
/*__reshadow_css_end__*/
|
|
37
37
|
, {
|
|
38
|
-
"__SInput": "
|
|
39
|
-
"__SOutline": "
|
|
40
|
-
"__SValue": "
|
|
41
|
-
"__SAddon": "
|
|
42
|
-
"_interactive": "
|
|
43
|
-
"_disabled": "
|
|
44
|
-
"_size_m": "
|
|
45
|
-
"_size_l": "
|
|
46
|
-
"_focused": "
|
|
47
|
-
"_state_normal": "
|
|
48
|
-
"_state_valid": "
|
|
49
|
-
"_state_invalid": "
|
|
50
|
-
"_neighborLocation_right": "
|
|
51
|
-
"_neighborLocation_both": "
|
|
52
|
-
"_neighborLocation_left": "
|
|
38
|
+
"__SInput": "___SInput_jr0eh_gg_",
|
|
39
|
+
"__SOutline": "___SOutline_jr0eh_gg_",
|
|
40
|
+
"__SValue": "___SValue_jr0eh_gg_",
|
|
41
|
+
"__SAddon": "___SAddon_jr0eh_gg_",
|
|
42
|
+
"_interactive": "__interactive_jr0eh_gg_",
|
|
43
|
+
"_disabled": "__disabled_jr0eh_gg_",
|
|
44
|
+
"_size_m": "_size_m_jr0eh_gg_",
|
|
45
|
+
"_size_l": "_size_l_jr0eh_gg_",
|
|
46
|
+
"_focused": "__focused_jr0eh_gg_",
|
|
47
|
+
"_state_normal": "_state_normal_jr0eh_gg_",
|
|
48
|
+
"_state_valid": "_state_valid_jr0eh_gg_",
|
|
49
|
+
"_state_invalid": "_state_invalid_jr0eh_gg_",
|
|
50
|
+
"_neighborLocation_right": "_neighborLocation_right_jr0eh_gg_",
|
|
51
|
+
"_neighborLocation_both": "_neighborLocation_both_jr0eh_gg_",
|
|
52
|
+
"_neighborLocation_left": "_neighborLocation_left_jr0eh_gg_"
|
|
53
53
|
});
|
|
54
54
|
|
|
55
55
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -198,7 +198,8 @@ function Addon(props) {
|
|
|
198
198
|
_ref6;
|
|
199
199
|
|
|
200
200
|
var SAddon = Box;
|
|
201
|
-
|
|
201
|
+
var Children = props.Children;
|
|
202
|
+
return _ref6 = sstyled(props.styles), /*#__PURE__*/React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, _assignProps3({}, _ref3))), /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})));
|
|
202
203
|
}
|
|
203
204
|
|
|
204
205
|
Addon.enhance = [neighborLocationEnhance()];
|
package/lib/es6/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","autoFocusEnhance","keyboardFocusEnhance","Input","focused","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","SOutline","Children","styles","controlsLength","state","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"sources":["../../src/Input.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n static displayName = 'Input';\n\n static defaultProps = {\n size: 'm',\n state: 'normal',\n };\n static style = style;\n static enhance = [neighborLocationEnhance()];\n\n state = {\n focused: false,\n };\n\n inputRef = React.createRef();\n\n handleMouseDownAddon = (e) => {\n e.preventDefault();\n this.inputRef.current?.focus();\n };\n\n bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n getAddonProps() {\n const { disabled } = this.asProps;\n return {\n disabled,\n onMouseDown: this.handleMouseDownAddon,\n };\n }\n\n getValueProps() {\n const { size, disabled } = this.asProps;\n return {\n ref: this.inputRef,\n size,\n disabled,\n onFocus: this.bindHandlerValueFocused(true),\n onBlur: this.bindHandlerValueFocused(false),\n };\n }\n\n render() {\n const SInput = Root;\n const SOutline = 'div';\n const { Children, styles, controlsLength } = this.asProps;\n const { focused } = this.state;\n\n return sstyled(styles)(\n <SInput render={Box} focused={focused}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SOutline />\n </SInput>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n };\n static enhance = [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()];\n\n uncontrolledProps() {\n return {\n value: (e) => e.target.value,\n };\n }\n\n render() {\n const SValue = Root;\n\n return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n }\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box}
|
|
1
|
+
{"version":3,"file":"Input.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","autoFocusEnhance","keyboardFocusEnhance","Input","focused","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","SOutline","Children","styles","controlsLength","state","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"sources":["../../src/Input.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n static displayName = 'Input';\n\n static defaultProps = {\n size: 'm',\n state: 'normal',\n };\n static style = style;\n static enhance = [neighborLocationEnhance()];\n\n state = {\n focused: false,\n };\n\n inputRef = React.createRef();\n\n handleMouseDownAddon = (e) => {\n e.preventDefault();\n this.inputRef.current?.focus();\n };\n\n bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n getAddonProps() {\n const { disabled } = this.asProps;\n return {\n disabled,\n onMouseDown: this.handleMouseDownAddon,\n };\n }\n\n getValueProps() {\n const { size, disabled } = this.asProps;\n return {\n ref: this.inputRef,\n size,\n disabled,\n onFocus: this.bindHandlerValueFocused(true),\n onBlur: this.bindHandlerValueFocused(false),\n };\n }\n\n render() {\n const SInput = Root;\n const SOutline = 'div';\n const { Children, styles, controlsLength } = this.asProps;\n const { focused } = this.state;\n\n return sstyled(styles)(\n <SInput render={Box} focused={focused}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SOutline />\n </SInput>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n };\n static enhance = [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()];\n\n uncontrolledProps() {\n return {\n value: (e) => e.target.value,\n };\n }\n\n render() {\n const SValue = Root;\n\n return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n }\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { Children } = props;\n return sstyled(props.styles)(\n <SAddon render={Box}>\n <Children />\n </SAddon>,\n );\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n Addon,\n Value,\n});\n"],"mappings":"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"}
|