@semcore/input 3.2.3 → 3.3.1
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 +12 -0
- package/lib/cjs/Input.js +24 -20
- package/lib/cjs/Input.js.map +1 -1
- package/lib/es6/Input.js +24 -20
- package/lib/es6/Input.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.3.1] - 2022-11-30
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.40.0 ~> 3.41.0], `@semcore/flex-box` [4.6.3 ~> 4.6.4]).
|
|
10
|
+
|
|
11
|
+
## [3.3.0] - 2022-11-17
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Added `aria-invalid` for input in invalid state.
|
|
16
|
+
|
|
5
17
|
## [3.2.3] - 2022-10-28
|
|
6
18
|
|
|
7
19
|
### 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_1a7gv_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1a7gv_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1a7gv_gg_ input:-webkit-autofill~.___SOutline_1a7gv_gg_{background-color:#faffbd}.___SValue_1a7gv_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_1a7gv_gg_:focus{outline:none}.___SValue_1a7gv_gg_::-moz-placeholder{color:#a9abb6}.___SValue_1a7gv_gg_::placeholder{color:#a9abb6}.___SValue_1a7gv_gg_:-moz-read-only~.___SOutline_1a7gv_gg_{background:#f4f5f9}.___SValue_1a7gv_gg_:read-only~.___SOutline_1a7gv_gg_{background:#f4f5f9}.___SValue_1a7gv_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_1a7gv_gg_:disabled~.___SOutline_1a7gv_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1a7gv_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_1a7gv_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_1a7gv_gg_.__interactive_1a7gv_gg_{cursor:pointer}.___SAddon_1a7gv_gg_.__interactive_1a7gv_gg_:hover{color:#8a8e9b}.___SAddon_1a7gv_gg_.__disabled_1a7gv_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1a7gv_gg_._size_m_1a7gv_gg_{font-size:14px;height:28px}.___SValue_1a7gv_gg_._size_l_1a7gv_gg_,.___SValue_1a7gv_gg_._size_m_1a7gv_gg_{padding:0 8px}.___SInput_1a7gv_gg_._size_l_1a7gv_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_1a7gv_gg_.__focused_1a7gv_gg_{z-index:1}.___SInput_1a7gv_gg_._state_normal_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-color:#c4c7cf}.___SInput_1a7gv_gg_._state_normal_1a7gv_gg_ .___SValue_1a7gv_gg_:focus~.___SOutline_1a7gv_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_1a7gv_gg_._state_valid_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-color:#59ddaa}.___SInput_1a7gv_gg_._state_valid_1a7gv_gg_ .___SValue_1a7gv_gg_:focus~.___SOutline_1a7gv_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_1a7gv_gg_._state_invalid_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-color:#ffaeb5}.___SInput_1a7gv_gg_._state_invalid_1a7gv_gg_ .___SValue_1a7gv_gg_:focus~.___SOutline_1a7gv_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_1a7gv_gg_._neighborLocation_right_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1a7gv_gg_._neighborLocation_both_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-radius:0;border-left:none}.___SInput_1a7gv_gg_._neighborLocation_left_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1a7gv_gg_._neighborLocation_right_1a7gv_gg_{padding-right:0}.___SValue_1a7gv_gg_._neighborLocation_both_1a7gv_gg_{padding-left:0;padding-right:0}.___SValue_1a7gv_gg_._neighborLocation_left_1a7gv_gg_{padding-left:0}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "1a7gv_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_1a7gv_gg_",
|
|
61
|
+
"__SOutline": "___SOutline_1a7gv_gg_",
|
|
62
|
+
"__SValue": "___SValue_1a7gv_gg_",
|
|
63
|
+
"__SAddon": "___SAddon_1a7gv_gg_",
|
|
64
|
+
"_interactive": "__interactive_1a7gv_gg_",
|
|
65
|
+
"_disabled": "__disabled_1a7gv_gg_",
|
|
66
|
+
"_size_m": "_size_m_1a7gv_gg_",
|
|
67
|
+
"_size_l": "_size_l_1a7gv_gg_",
|
|
68
|
+
"_focused": "__focused_1a7gv_gg_",
|
|
69
|
+
"_state_normal": "_state_normal_1a7gv_gg_",
|
|
70
|
+
"_state_valid": "_state_valid_1a7gv_gg_",
|
|
71
|
+
"_state_invalid": "_state_invalid_1a7gv_gg_",
|
|
72
|
+
"_neighborLocation_right": "_neighborLocation_right_1a7gv_gg_",
|
|
73
|
+
"_neighborLocation_both": "_neighborLocation_both_1a7gv_gg_",
|
|
74
|
+
"_neighborLocation_left": "_neighborLocation_left_1a7gv_gg_"
|
|
75
75
|
});
|
|
76
76
|
|
|
77
77
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -123,11 +123,13 @@ var Input = /*#__PURE__*/function (_Component) {
|
|
|
123
123
|
value: function getValueProps() {
|
|
124
124
|
var _this$asProps = this.asProps,
|
|
125
125
|
size = _this$asProps.size,
|
|
126
|
-
disabled = _this$asProps.disabled
|
|
126
|
+
disabled = _this$asProps.disabled,
|
|
127
|
+
state = _this$asProps.state;
|
|
127
128
|
return {
|
|
128
129
|
ref: this.inputRef,
|
|
129
130
|
size: size,
|
|
130
131
|
disabled: disabled,
|
|
132
|
+
state: state,
|
|
131
133
|
onFocus: this.bindHandlerValueFocused(true),
|
|
132
134
|
onBlur: this.bindHandlerValueFocused(false)
|
|
133
135
|
};
|
|
@@ -194,7 +196,8 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
194
196
|
var SValue = _flexBox.Box;
|
|
195
197
|
var _this$asProps3 = this.asProps,
|
|
196
198
|
styles = _this$asProps3.styles,
|
|
197
|
-
neighborLocation = _this$asProps3.neighborLocation
|
|
199
|
+
neighborLocation = _this$asProps3.neighborLocation,
|
|
200
|
+
state = _this$asProps3.state;
|
|
198
201
|
return /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"].Detect, {
|
|
199
202
|
neighborLocation: neighborLocation
|
|
200
203
|
}, function (neighborLocation) {
|
|
@@ -203,7 +206,8 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
203
206
|
return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SValue, _ref5.cn("SValue", _objectSpread({}, (0, _core.assignProps)({
|
|
204
207
|
"neighborLocation": neighborLocation,
|
|
205
208
|
"tag": "input",
|
|
206
|
-
"type": "text"
|
|
209
|
+
"type": "text",
|
|
210
|
+
"aria-invalid": state === 'invalid'
|
|
207
211
|
}, _ref2))));
|
|
208
212
|
});
|
|
209
213
|
}
|
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","neighborLocation","controlsLength","
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","focused","React","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","state","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","Box","SOutline","Children","styles","neighborLocation","controlsLength","sstyled","Component","style","Value","value","target","SValue","defaultValue","keyboardFocusEnhance","autoFocusEnhance","Addon","props","SAddon","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 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\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, state } = this.asProps;\n return {\n ref: this.inputRef,\n size,\n disabled,\n state,\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, neighborLocation, controlsLength } = this.asProps;\n const { focused } = this.state;\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SInput render={Box} focused={focused} neighborLocation={neighborLocation}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SOutline />\n </SInput>,\n )\n }\n </NeighborLocation.Detect>\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n };\n static enhance = [keyboardFocusEnhance(), autoFocusEnhance()];\n\n uncontrolledProps() {\n return {\n value: (e) => e.target.value,\n };\n }\n\n render() {\n const SValue = Root;\n const { styles, neighborLocation, state } = this.asProps;\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SValue\n render={Box}\n neighborLocation={neighborLocation}\n tag=\"input\"\n type=\"text\"\n aria-invalid={state === 'invalid'}\n />,\n )\n }\n </NeighborLocation.Detect>\n );\n }\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { Children, styles, neighborLocation } = props;\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SAddon render={Box} neighborLocation={neighborLocation}>\n <Children />\n </SAddon>,\n )\n }\n </NeighborLocation.Detect>\n );\n}\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_1a7gv_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1a7gv_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1a7gv_gg_ input:-webkit-autofill~.___SOutline_1a7gv_gg_{background-color:#faffbd}.___SValue_1a7gv_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_1a7gv_gg_:focus{outline:none}.___SValue_1a7gv_gg_::-moz-placeholder{color:#a9abb6}.___SValue_1a7gv_gg_::placeholder{color:#a9abb6}.___SValue_1a7gv_gg_:-moz-read-only~.___SOutline_1a7gv_gg_{background:#f4f5f9}.___SValue_1a7gv_gg_:read-only~.___SOutline_1a7gv_gg_{background:#f4f5f9}.___SValue_1a7gv_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_1a7gv_gg_:disabled~.___SOutline_1a7gv_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1a7gv_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_1a7gv_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_1a7gv_gg_.__interactive_1a7gv_gg_{cursor:pointer}.___SAddon_1a7gv_gg_.__interactive_1a7gv_gg_:hover{color:#8a8e9b}.___SAddon_1a7gv_gg_.__disabled_1a7gv_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1a7gv_gg_._size_m_1a7gv_gg_{font-size:14px;height:28px}.___SValue_1a7gv_gg_._size_l_1a7gv_gg_,.___SValue_1a7gv_gg_._size_m_1a7gv_gg_{padding:0 8px}.___SInput_1a7gv_gg_._size_l_1a7gv_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_1a7gv_gg_.__focused_1a7gv_gg_{z-index:1}.___SInput_1a7gv_gg_._state_normal_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-color:#c4c7cf}.___SInput_1a7gv_gg_._state_normal_1a7gv_gg_ .___SValue_1a7gv_gg_:focus~.___SOutline_1a7gv_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_1a7gv_gg_._state_valid_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-color:#59ddaa}.___SInput_1a7gv_gg_._state_valid_1a7gv_gg_ .___SValue_1a7gv_gg_:focus~.___SOutline_1a7gv_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_1a7gv_gg_._state_invalid_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-color:#ffaeb5}.___SInput_1a7gv_gg_._state_invalid_1a7gv_gg_ .___SValue_1a7gv_gg_:focus~.___SOutline_1a7gv_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_1a7gv_gg_._neighborLocation_right_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1a7gv_gg_._neighborLocation_both_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-radius:0;border-left:none}.___SInput_1a7gv_gg_._neighborLocation_left_1a7gv_gg_ .___SOutline_1a7gv_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1a7gv_gg_._neighborLocation_right_1a7gv_gg_{padding-right:0}.___SValue_1a7gv_gg_._neighborLocation_both_1a7gv_gg_{padding-left:0;padding-right:0}.___SValue_1a7gv_gg_._neighborLocation_left_1a7gv_gg_{padding-left:0}"
|
|
34
34
|
/*__inner_css_end__*/
|
|
35
|
-
, "
|
|
35
|
+
, "1a7gv_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_1a7gv_gg_",
|
|
39
|
+
"__SOutline": "___SOutline_1a7gv_gg_",
|
|
40
|
+
"__SValue": "___SValue_1a7gv_gg_",
|
|
41
|
+
"__SAddon": "___SAddon_1a7gv_gg_",
|
|
42
|
+
"_interactive": "__interactive_1a7gv_gg_",
|
|
43
|
+
"_disabled": "__disabled_1a7gv_gg_",
|
|
44
|
+
"_size_m": "_size_m_1a7gv_gg_",
|
|
45
|
+
"_size_l": "_size_l_1a7gv_gg_",
|
|
46
|
+
"_focused": "__focused_1a7gv_gg_",
|
|
47
|
+
"_state_normal": "_state_normal_1a7gv_gg_",
|
|
48
|
+
"_state_valid": "_state_valid_1a7gv_gg_",
|
|
49
|
+
"_state_invalid": "_state_invalid_1a7gv_gg_",
|
|
50
|
+
"_neighborLocation_right": "_neighborLocation_right_1a7gv_gg_",
|
|
51
|
+
"_neighborLocation_both": "_neighborLocation_both_1a7gv_gg_",
|
|
52
|
+
"_neighborLocation_left": "_neighborLocation_left_1a7gv_gg_"
|
|
53
53
|
});
|
|
54
54
|
|
|
55
55
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -106,11 +106,13 @@ var Input = /*#__PURE__*/function (_Component) {
|
|
|
106
106
|
value: function getValueProps() {
|
|
107
107
|
var _this$asProps = this.asProps,
|
|
108
108
|
size = _this$asProps.size,
|
|
109
|
-
disabled = _this$asProps.disabled
|
|
109
|
+
disabled = _this$asProps.disabled,
|
|
110
|
+
state = _this$asProps.state;
|
|
110
111
|
return {
|
|
111
112
|
ref: this.inputRef,
|
|
112
113
|
size: size,
|
|
113
114
|
disabled: disabled,
|
|
115
|
+
state: state,
|
|
114
116
|
onFocus: this.bindHandlerValueFocused(true),
|
|
115
117
|
onBlur: this.bindHandlerValueFocused(false)
|
|
116
118
|
};
|
|
@@ -181,7 +183,8 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
181
183
|
var SValue = Box;
|
|
182
184
|
var _this$asProps3 = this.asProps,
|
|
183
185
|
styles = _this$asProps3.styles,
|
|
184
|
-
neighborLocation = _this$asProps3.neighborLocation
|
|
186
|
+
neighborLocation = _this$asProps3.neighborLocation,
|
|
187
|
+
state = _this$asProps3.state;
|
|
185
188
|
return /*#__PURE__*/React.createElement(NeighborLocation.Detect, {
|
|
186
189
|
neighborLocation: neighborLocation
|
|
187
190
|
}, function (neighborLocation) {
|
|
@@ -190,7 +193,8 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
190
193
|
return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, _assignProps2({
|
|
191
194
|
"neighborLocation": neighborLocation,
|
|
192
195
|
"tag": "input",
|
|
193
|
-
"type": "text"
|
|
196
|
+
"type": "text",
|
|
197
|
+
"aria-invalid": state === 'invalid'
|
|
194
198
|
}, _ref2))));
|
|
195
199
|
});
|
|
196
200
|
}
|
package/lib/es6/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","autoFocusEnhance","keyboardFocusEnhance","Input","focused","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","SOutline","Children","styles","neighborLocation","controlsLength","
|
|
1
|
+
{"version":3,"file":"Input.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","autoFocusEnhance","keyboardFocusEnhance","Input","focused","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","state","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","SOutline","Children","styles","neighborLocation","controlsLength","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon"],"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 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\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, state } = this.asProps;\n return {\n ref: this.inputRef,\n size,\n disabled,\n state,\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, neighborLocation, controlsLength } = this.asProps;\n const { focused } = this.state;\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SInput render={Box} focused={focused} neighborLocation={neighborLocation}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SOutline />\n </SInput>,\n )\n }\n </NeighborLocation.Detect>\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n };\n static enhance = [keyboardFocusEnhance(), autoFocusEnhance()];\n\n uncontrolledProps() {\n return {\n value: (e) => e.target.value,\n };\n }\n\n render() {\n const SValue = Root;\n const { styles, neighborLocation, state } = this.asProps;\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SValue\n render={Box}\n neighborLocation={neighborLocation}\n tag=\"input\"\n type=\"text\"\n aria-invalid={state === 'invalid'}\n />,\n )\n }\n </NeighborLocation.Detect>\n );\n }\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { Children, styles, neighborLocation } = props;\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SAddon render={Box} neighborLocation={neighborLocation}>\n <Children />\n </SAddon>,\n )\n }\n </NeighborLocation.Detect>\n );\n}\n\nexport default createComponent(Input, {\n Addon,\n Value,\n});\n"],"mappings":"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"}
|