@semcore/input 3.0.7 → 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 +18 -0
- package/lib/cjs/Input.js +26 -21
- package/lib/cjs/Input.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/Input.js +25 -21
- package/lib/es6/Input.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Input.jsx +0 -97
- package/src/index.d.ts +0 -85
- package/src/index.js +0 -1
- package/src/style/input.shadow.css +0 -188
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
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
|
+
|
|
11
|
+
## [3.0.9] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- 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]).
|
|
16
|
+
|
|
17
|
+
## [3.0.8] - 2022-07-14
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- Fixed the reaction when interacting with the keyboard for the correct work of other components with keyboard support.
|
|
22
|
+
|
|
5
23
|
## [3.0.7] - 2022-07-13
|
|
6
24
|
|
|
7
25
|
### Fixed
|
package/lib/cjs/Input.js
CHANGED
|
@@ -33,6 +33,8 @@ var _neighborLocation = _interopRequireWildcard(require("@semcore/neighbor-locat
|
|
|
33
33
|
|
|
34
34
|
var _autoFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/autoFocusEnhance"));
|
|
35
35
|
|
|
36
|
+
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
37
|
+
|
|
36
38
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
39
|
|
|
38
40
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -50,26 +52,26 @@ var style = (
|
|
|
50
52
|
/*__reshadow_css_start__*/
|
|
51
53
|
_core.sstyled.insert(
|
|
52
54
|
/*__inner_css_start__*/
|
|
53
|
-
".
|
|
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}"
|
|
54
56
|
/*__inner_css_end__*/
|
|
55
|
-
, "
|
|
57
|
+
, "jr0eh_gg_")
|
|
56
58
|
/*__reshadow_css_end__*/
|
|
57
59
|
, {
|
|
58
|
-
"__SInput": "
|
|
59
|
-
"__SOutline": "
|
|
60
|
-
"__SValue": "
|
|
61
|
-
"__SAddon": "
|
|
62
|
-
"_interactive": "
|
|
63
|
-
"_disabled": "
|
|
64
|
-
"_size_m": "
|
|
65
|
-
"_size_l": "
|
|
66
|
-
"_focused": "
|
|
67
|
-
"_state_normal": "
|
|
68
|
-
"_state_valid": "
|
|
69
|
-
"_state_invalid": "
|
|
70
|
-
"_neighborLocation_right": "
|
|
71
|
-
"_neighborLocation_both": "
|
|
72
|
-
"_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_"
|
|
73
75
|
});
|
|
74
76
|
|
|
75
77
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -90,10 +92,12 @@ var Input = /*#__PURE__*/function (_Component) {
|
|
|
90
92
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
|
|
91
93
|
focused: false
|
|
92
94
|
});
|
|
93
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", _react["default"].createRef());
|
|
95
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", /*#__PURE__*/_react["default"].createRef());
|
|
94
96
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseDownAddon", function (e) {
|
|
97
|
+
var _this$inputRef$curren;
|
|
98
|
+
|
|
95
99
|
e.preventDefault();
|
|
96
|
-
_this.inputRef.current
|
|
100
|
+
(_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
97
101
|
});
|
|
98
102
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerValueFocused", function (focused) {
|
|
99
103
|
return function () {
|
|
@@ -197,14 +201,15 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
197
201
|
(0, _defineProperty2["default"])(Value, "defaultProps", {
|
|
198
202
|
defaultValue: ''
|
|
199
203
|
});
|
|
200
|
-
(0, _defineProperty2["default"])(Value, "enhance", [(0, _autoFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()]);
|
|
204
|
+
(0, _defineProperty2["default"])(Value, "enhance", [(0, _keyboardFocusEnhance["default"])(), (0, _autoFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()]);
|
|
201
205
|
|
|
202
206
|
function Addon(props) {
|
|
203
207
|
var _ref3 = arguments[0],
|
|
204
208
|
_ref6;
|
|
205
209
|
|
|
206
210
|
var SAddon = _flexBox.Box;
|
|
207
|
-
|
|
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", {})));
|
|
208
213
|
}
|
|
209
214
|
|
|
210
215
|
Addon.enhance = [(0, _neighborLocation.neighborLocationEnhance)()];
|
package/lib/cjs/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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/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 './Input';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/Input.js
CHANGED
|
@@ -23,32 +23,33 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
23
23
|
import { Box } from '@semcore/flex-box';
|
|
24
24
|
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
25
25
|
import autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
26
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
26
27
|
|
|
27
28
|
/*__reshadow-styles__:"./style/input.shadow.css"*/
|
|
28
29
|
var style = (
|
|
29
30
|
/*__reshadow_css_start__*/
|
|
30
31
|
_sstyled.insert(
|
|
31
32
|
/*__inner_css_start__*/
|
|
32
|
-
".
|
|
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}"
|
|
33
34
|
/*__inner_css_end__*/
|
|
34
|
-
, "
|
|
35
|
+
, "jr0eh_gg_")
|
|
35
36
|
/*__reshadow_css_end__*/
|
|
36
37
|
, {
|
|
37
|
-
"__SInput": "
|
|
38
|
-
"__SOutline": "
|
|
39
|
-
"__SValue": "
|
|
40
|
-
"__SAddon": "
|
|
41
|
-
"_interactive": "
|
|
42
|
-
"_disabled": "
|
|
43
|
-
"_size_m": "
|
|
44
|
-
"_size_l": "
|
|
45
|
-
"_focused": "
|
|
46
|
-
"_state_normal": "
|
|
47
|
-
"_state_valid": "
|
|
48
|
-
"_state_invalid": "
|
|
49
|
-
"_neighborLocation_right": "
|
|
50
|
-
"_neighborLocation_both": "
|
|
51
|
-
"_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_"
|
|
52
53
|
});
|
|
53
54
|
|
|
54
55
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -71,11 +72,13 @@ var Input = /*#__PURE__*/function (_Component) {
|
|
|
71
72
|
focused: false
|
|
72
73
|
});
|
|
73
74
|
|
|
74
|
-
_defineProperty(_assertThisInitialized(_this), "inputRef", React.createRef());
|
|
75
|
+
_defineProperty(_assertThisInitialized(_this), "inputRef", /*#__PURE__*/React.createRef());
|
|
75
76
|
|
|
76
77
|
_defineProperty(_assertThisInitialized(_this), "handleMouseDownAddon", function (e) {
|
|
78
|
+
var _this$inputRef$curren;
|
|
79
|
+
|
|
77
80
|
e.preventDefault();
|
|
78
|
-
_this.inputRef.current
|
|
81
|
+
(_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
79
82
|
});
|
|
80
83
|
|
|
81
84
|
_defineProperty(_assertThisInitialized(_this), "bindHandlerValueFocused", function (focused) {
|
|
@@ -188,14 +191,15 @@ _defineProperty(Value, "defaultProps", {
|
|
|
188
191
|
defaultValue: ''
|
|
189
192
|
});
|
|
190
193
|
|
|
191
|
-
_defineProperty(Value, "enhance", [autoFocusEnhance(), neighborLocationEnhance()]);
|
|
194
|
+
_defineProperty(Value, "enhance", [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()]);
|
|
192
195
|
|
|
193
196
|
function Addon(props) {
|
|
194
197
|
var _ref3 = arguments[0],
|
|
195
198
|
_ref6;
|
|
196
199
|
|
|
197
200
|
var SAddon = Box;
|
|
198
|
-
|
|
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", {})));
|
|
199
203
|
}
|
|
200
204
|
|
|
201
205
|
Addon.enhance = [neighborLocationEnhance()];
|
package/lib/es6/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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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"}
|
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 './Input';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB"}
|
package/package.json
CHANGED
package/src/Input.jsx
DELETED
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
5
|
-
import autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
6
|
-
|
|
7
|
-
import style from './style/input.shadow.css';
|
|
8
|
-
|
|
9
|
-
class Input extends Component {
|
|
10
|
-
static displayName = 'Input';
|
|
11
|
-
|
|
12
|
-
static defaultProps = {
|
|
13
|
-
size: 'm',
|
|
14
|
-
state: 'normal',
|
|
15
|
-
};
|
|
16
|
-
static style = style;
|
|
17
|
-
static enhance = [neighborLocationEnhance()];
|
|
18
|
-
|
|
19
|
-
state = {
|
|
20
|
-
focused: false,
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
inputRef = React.createRef();
|
|
24
|
-
|
|
25
|
-
handleMouseDownAddon = (e) => {
|
|
26
|
-
e.preventDefault();
|
|
27
|
-
this.inputRef.current?.focus();
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
bindHandlerValueFocused = (focused) => () => this.setState({ focused });
|
|
31
|
-
|
|
32
|
-
getAddonProps() {
|
|
33
|
-
const { disabled } = this.asProps;
|
|
34
|
-
return {
|
|
35
|
-
disabled,
|
|
36
|
-
onMouseDown: this.handleMouseDownAddon,
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
getValueProps() {
|
|
41
|
-
const { size, disabled } = this.asProps;
|
|
42
|
-
return {
|
|
43
|
-
ref: this.inputRef,
|
|
44
|
-
size,
|
|
45
|
-
disabled,
|
|
46
|
-
onFocus: this.bindHandlerValueFocused(true),
|
|
47
|
-
onBlur: this.bindHandlerValueFocused(false),
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
render() {
|
|
52
|
-
const SInput = Root;
|
|
53
|
-
const SOutline = 'div';
|
|
54
|
-
const { Children, styles, controlsLength } = this.asProps;
|
|
55
|
-
const { focused } = this.state;
|
|
56
|
-
|
|
57
|
-
return sstyled(styles)(
|
|
58
|
-
<SInput render={Box} focused={focused}>
|
|
59
|
-
<NeighborLocation controlsLength={controlsLength}>
|
|
60
|
-
<Children />
|
|
61
|
-
</NeighborLocation>
|
|
62
|
-
<SOutline />
|
|
63
|
-
</SInput>,
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
class Value extends Component {
|
|
69
|
-
static defaultProps = {
|
|
70
|
-
defaultValue: '',
|
|
71
|
-
};
|
|
72
|
-
static enhance = [autoFocusEnhance(), neighborLocationEnhance()];
|
|
73
|
-
|
|
74
|
-
uncontrolledProps() {
|
|
75
|
-
return {
|
|
76
|
-
value: (e) => e.target.value,
|
|
77
|
-
};
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
render() {
|
|
81
|
-
const SValue = Root;
|
|
82
|
-
|
|
83
|
-
return sstyled(this.asProps.styles)(<SValue render={Box} tag="input" type="text" />);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function Addon(props) {
|
|
88
|
-
const SAddon = Root;
|
|
89
|
-
return sstyled(props.styles)(<SAddon render={Box} />);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
Addon.enhance = [neighborLocationEnhance()];
|
|
93
|
-
|
|
94
|
-
export default createComponent(Input, {
|
|
95
|
-
Addon,
|
|
96
|
-
Value,
|
|
97
|
-
});
|
package/src/index.d.ts
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PropGetterFn } from '@semcore/core';
|
|
3
|
-
import { IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
-
import { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
6
|
-
|
|
7
|
-
/* utils type */
|
|
8
|
-
type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
|
|
9
|
-
children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;
|
|
10
|
-
};
|
|
11
|
-
type ReturnEl = React.ReactElement | null;
|
|
12
|
-
/* utils type */
|
|
13
|
-
|
|
14
|
-
export type InputSize = 'm' | 'l';
|
|
15
|
-
|
|
16
|
-
export interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {
|
|
17
|
-
/**
|
|
18
|
-
* Sets the input and addons to the disabled state
|
|
19
|
-
* */
|
|
20
|
-
disabled?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Input size
|
|
23
|
-
* @default m
|
|
24
|
-
*/
|
|
25
|
-
size?: InputSize;
|
|
26
|
-
/**
|
|
27
|
-
* Sets the input state
|
|
28
|
-
* @default normal
|
|
29
|
-
*/
|
|
30
|
-
state?: 'normal' | 'invalid' | 'valid';
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export interface IInputValueProps
|
|
34
|
-
extends IBoxProps,
|
|
35
|
-
INeighborItemProps,
|
|
36
|
-
IWithAutoFocusEnhanceProps {
|
|
37
|
-
/**
|
|
38
|
-
* Input value
|
|
39
|
-
*/
|
|
40
|
-
value?: string;
|
|
41
|
-
/**
|
|
42
|
-
* Handler for changing the value
|
|
43
|
-
*/
|
|
44
|
-
onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
45
|
-
/**
|
|
46
|
-
* Sets the input to the disabled state
|
|
47
|
-
* */
|
|
48
|
-
disabled?: boolean;
|
|
49
|
-
/**
|
|
50
|
-
* Sets the input to the read-only state
|
|
51
|
-
* */
|
|
52
|
-
readOnly?: boolean;
|
|
53
|
-
/**
|
|
54
|
-
* Input size
|
|
55
|
-
* @default m
|
|
56
|
-
*/
|
|
57
|
-
size?: InputSize;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
export interface IInputAddonProps extends IBoxProps, INeighborItemProps {
|
|
61
|
-
/**
|
|
62
|
-
* Adds styles for interactive icons
|
|
63
|
-
*/
|
|
64
|
-
interactive?: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* Blocks the addon
|
|
67
|
-
* */
|
|
68
|
-
disabled?: boolean;
|
|
69
|
-
/**
|
|
70
|
-
* Input size
|
|
71
|
-
* @default m
|
|
72
|
-
*/
|
|
73
|
-
size?: InputSize;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
interface IInputCtx {
|
|
77
|
-
getValueProps: PropGetterFn;
|
|
78
|
-
getAddonProps: PropGetterFn;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
declare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {
|
|
82
|
-
Value: <T>(props: IInputValueProps & T) => ReturnEl;
|
|
83
|
-
Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;
|
|
84
|
-
};
|
|
85
|
-
export default Input;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './Input';
|
|
@@ -1,188 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SInput {
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
width: 100%;
|
|
6
|
-
align-items: center;
|
|
7
|
-
position: relative;
|
|
8
|
-
z-index: 0;
|
|
9
|
-
vertical-align: middle;
|
|
10
|
-
padding: 1px;
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
|
|
13
|
-
& input:-webkit-autofill {
|
|
14
|
-
border-radius: var(--rounded-m);
|
|
15
|
-
-webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
|
|
16
|
-
|
|
17
|
-
& ~ SOutline {
|
|
18
|
-
background-color: rgb(250, 255, 189);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
SValue {
|
|
24
|
-
/* hack for firefox */
|
|
25
|
-
min-width: 0;
|
|
26
|
-
width: 100%;
|
|
27
|
-
height: 100%;
|
|
28
|
-
padding: 0;
|
|
29
|
-
border: none;
|
|
30
|
-
box-sizing: border-box;
|
|
31
|
-
color: var(--gray-800);
|
|
32
|
-
font-size: inherit;
|
|
33
|
-
text-overflow: ellipsis;
|
|
34
|
-
font-family: inherit;
|
|
35
|
-
background: transparent;
|
|
36
|
-
|
|
37
|
-
&:focus {
|
|
38
|
-
outline: none;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&::placeholder {
|
|
42
|
-
color: var(--gray-300);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&:read-only ~ SOutline {
|
|
46
|
-
background: var(--gray-50);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&:disabled {
|
|
50
|
-
user-select: none;
|
|
51
|
-
opacity: var(--disabled-opacity);
|
|
52
|
-
|
|
53
|
-
& ~ SOutline {
|
|
54
|
-
opacity: var(--disabled-opacity);
|
|
55
|
-
cursor: default;
|
|
56
|
-
pointer-events: none;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
SOutline {
|
|
62
|
-
position: absolute;
|
|
63
|
-
top: 0;
|
|
64
|
-
right: 0;
|
|
65
|
-
bottom: 0;
|
|
66
|
-
left: 0;
|
|
67
|
-
border: 1px solid;
|
|
68
|
-
border-radius: var(--rounded-m);
|
|
69
|
-
z-index: -1;
|
|
70
|
-
background: #fff;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
SAddon {
|
|
74
|
-
display: inline-flex;
|
|
75
|
-
justify-content: center;
|
|
76
|
-
align-items: center;
|
|
77
|
-
flex: 0 0 auto;
|
|
78
|
-
padding: 0 8px;
|
|
79
|
-
height: 100%;
|
|
80
|
-
color: var(--gray-300);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
SAddon[interactive] {
|
|
84
|
-
cursor: pointer;
|
|
85
|
-
|
|
86
|
-
&:hover {
|
|
87
|
-
color: var(--gray-400);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
SAddon[disabled] {
|
|
92
|
-
opacity: var(--disabled-opacity);
|
|
93
|
-
cursor: default;
|
|
94
|
-
pointer-events: none;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
SInput[size='m'] {
|
|
98
|
-
font-size: var(--fs-200);
|
|
99
|
-
height: var(--form-control-m);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
SValue[size='m'],
|
|
103
|
-
SValue[size='l'] {
|
|
104
|
-
padding: 0 8px;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
SInput[size='l'] {
|
|
108
|
-
font-size: var(--fs-300);
|
|
109
|
-
height: var(--form-control-l);
|
|
110
|
-
padding-left: 4px;
|
|
111
|
-
padding-right: 4px;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
SInput[focused] {
|
|
115
|
-
z-index: 1;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
SInput[state='normal'] {
|
|
119
|
-
& SOutline {
|
|
120
|
-
border-color: var(--gray-200);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
& SValue:focus ~ SOutline {
|
|
124
|
-
border-color: var(--blue-400);
|
|
125
|
-
box-shadow: var(--keyboard-focus);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
SInput[state='valid'] {
|
|
129
|
-
& SOutline {
|
|
130
|
-
border-color: var(--green-200);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
& SValue:focus ~ SOutline {
|
|
134
|
-
border-color: var(--green-400);
|
|
135
|
-
box-shadow: var(--keyboard-focus-valid);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
SInput[state='invalid'] {
|
|
139
|
-
& SOutline {
|
|
140
|
-
border-color: var(--red-200);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
& SValue:focus ~ SOutline {
|
|
144
|
-
border-color: var(--red-400);
|
|
145
|
-
box-shadow: var(--keyboard-focus-invalid);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
SInput[neighborLocation='right'] {
|
|
150
|
-
& SOutline {
|
|
151
|
-
border-top-right-radius: 0;
|
|
152
|
-
border-bottom-right-radius: 0;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
SInput[neighborLocation='both'] {
|
|
156
|
-
& SOutline {
|
|
157
|
-
border-radius: 0;
|
|
158
|
-
border-left: none;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
SInput[neighborLocation='left'] {
|
|
162
|
-
& SOutline {
|
|
163
|
-
border-top-left-radius: 0;
|
|
164
|
-
border-bottom-left-radius: 0;
|
|
165
|
-
border-left: none;
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
SAddon[neighborLocation='right'] {
|
|
170
|
-
padding-right: 8px;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
SAddon[neighborLocation='left'] {
|
|
174
|
-
padding-left: 8px;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
SValue[neighborLocation='right'] {
|
|
178
|
-
padding-right: 0;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
SValue[neighborLocation='both'] {
|
|
182
|
-
padding-left: 0;
|
|
183
|
-
padding-right: 0;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
SValue[neighborLocation='left'] {
|
|
187
|
-
padding-left: 0;
|
|
188
|
-
}
|