@semcore/input 2.1.3 → 2.2.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 +27 -0
- package/lib/cjs/Input.js +49 -85
- package/lib/cjs/Input.js.map +1 -1
- package/lib/cjs/style/input.shadow.css +15 -15
- package/lib/es6/Input.js +53 -86
- package/lib/es6/Input.js.map +1 -1
- package/lib/es6/style/input.shadow.css +15 -15
- package/package.json +3 -2
- package/src/Input.js +10 -28
- package/src/style/input.shadow.css +15 -15
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [2.2.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
|
+
## [2.2.2] - 2021-8-26
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Add 'sideEffect=false' for more optimal build via webpack
|
|
16
|
+
|
|
17
|
+
## [2.2.1] - 2021-08-18
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- Changed height of the inner real input to fix horizontal display with adjacent elements.
|
|
22
|
+
|
|
23
|
+
## [2.2.0] - 2021-04-26
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
|
|
27
|
+
- Version of dependence `@semcore/core` has been changed to `1.11`.
|
|
28
|
+
- Improved performance. Removed one component wrapper.
|
|
29
|
+
- The style processing system has been changed.
|
|
30
|
+
- Removed the ability to apply media styles via a plugin `babel-plugin-react-semcore`.
|
|
31
|
+
|
|
5
32
|
## [2.1.3] - 2021-04-16
|
|
6
33
|
|
|
7
34
|
### Changed
|
package/lib/cjs/Input.js
CHANGED
|
@@ -23,68 +23,52 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
|
|
|
23
23
|
|
|
24
24
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
27
27
|
|
|
28
28
|
var _react = _interopRequireDefault(require("react"));
|
|
29
29
|
|
|
30
|
-
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
31
|
-
|
|
32
30
|
var _flexBox = require("@semcore/flex-box");
|
|
33
31
|
|
|
34
32
|
var _neighborLocation = _interopRequireWildcard(require("@semcore/neighbor-location"));
|
|
35
33
|
|
|
36
34
|
var _autoFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/autoFocusEnhance"));
|
|
37
35
|
|
|
36
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
37
|
+
|
|
38
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
39
|
+
|
|
38
40
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
39
41
|
|
|
40
42
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
41
43
|
|
|
42
44
|
/*__reshadow-styles__:"./style/input.shadow.css"*/
|
|
43
|
-
var
|
|
45
|
+
var style = (
|
|
44
46
|
/*__reshadow_css_start__*/
|
|
45
|
-
|
|
47
|
+
_core.sstyled.insert(
|
|
46
48
|
/*__inner_css_start__*/
|
|
47
|
-
".
|
|
49
|
+
".___SInput_ltf8j_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_ltf8j_gg_ input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_ltf8j_gg_ input:-webkit-autofill~.___SOutline_ltf8j_gg_{background-color:#faffbd}.___SValue_ltf8j_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#333;font-size:inherit;line-height:1.1;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_ltf8j_gg_:focus{outline:none}.___SValue_ltf8j_gg_::-moz-placeholder{color:#aaa}.___SValue_ltf8j_gg_:-ms-input-placeholder{color:#aaa}.___SValue_ltf8j_gg_::placeholder{color:#aaa}.___SValue_ltf8j_gg_:-moz-read-only~.___SOutline_ltf8j_gg_{background:#f5f5f5}.___SValue_ltf8j_gg_:read-only~.___SOutline_ltf8j_gg_{background:#f5f5f5}.___SValue_ltf8j_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.3}.___SValue_ltf8j_gg_:disabled~.___SOutline_ltf8j_gg_{opacity:.3;cursor:default;pointer-events:none}.___SOutline_ltf8j_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;z-index:-1;background:#fff}.___SAddon_ltf8j_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;height:100%;color:#666}.___SAddon_ltf8j_gg_.__interactive_ltf8j_gg_{color:#a6b0b3;cursor:pointer}.___SAddon_ltf8j_gg_.__interactive_ltf8j_gg_:hover{color:#929b9e}.___SAddon_ltf8j_gg_.__disabled_ltf8j_gg_{opacity:.3;cursor:default;pointer-events:none}.___SInput_ltf8j_gg_._size_s_ltf8j_gg_{font-size:10px;height:18px}.___SInput_ltf8j_gg_._size_s_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:2px}.___SInput_ltf8j_gg_._size_s_ltf8j_gg_ input:-webkit-autofill{border-radius:1px}.___SAddon_ltf8j_gg_._size_s_ltf8j_gg_,.___SValue_ltf8j_gg_._size_s_ltf8j_gg_{padding:0 4px}.___SInput_ltf8j_gg_._size_m_ltf8j_gg_{font-size:12px;height:26px}.___SInput_ltf8j_gg_._size_m_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:3px}.___SInput_ltf8j_gg_._size_m_ltf8j_gg_ input:-webkit-autofill{border-radius:2px}.___SAddon_ltf8j_gg_._size_m_ltf8j_gg_,.___SValue_ltf8j_gg_._size_m_ltf8j_gg_{padding:0 8px}.___SInput_ltf8j_gg_._size_l_ltf8j_gg_{font-size:14px;height:32px}.___SInput_ltf8j_gg_._size_l_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:4px}.___SInput_ltf8j_gg_._size_l_ltf8j_gg_ input:-webkit-autofill{border-radius:3px}.___SAddon_ltf8j_gg_._size_l_ltf8j_gg_,.___SValue_ltf8j_gg_._size_l_ltf8j_gg_{padding:0 8px}.___SInput_ltf8j_gg_._size_xl_ltf8j_gg_{font-size:16px;height:42px}.___SInput_ltf8j_gg_._size_xl_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:5px}.___SInput_ltf8j_gg_._size_xl_ltf8j_gg_ input:-webkit-autofill{border-radius:4px}.___SAddon_ltf8j_gg_._size_xl_ltf8j_gg_,.___SValue_ltf8j_gg_._size_xl_ltf8j_gg_{padding:0 12px}.___SInput_ltf8j_gg_.__focused_ltf8j_gg_{z-index:1}.___SInput_ltf8j_gg_._state_normal_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-color:#a6b0b3}.___SInput_ltf8j_gg_._state_normal_ltf8j_gg_ .___SValue_ltf8j_gg_:focus~.___SOutline_ltf8j_gg_{border-color:#2b94e1;box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SInput_ltf8j_gg_._state_valid_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-color:#4fae33}.___SInput_ltf8j_gg_._state_valid_ltf8j_gg_ .___SValue_ltf8j_gg_:focus~.___SOutline_ltf8j_gg_{border-color:#4fae33;box-shadow:0 0 0 3px rgba(79,174,51,.3)}.___SInput_ltf8j_gg_._state_invalid_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-color:#ff7f00}.___SInput_ltf8j_gg_._state_invalid_ltf8j_gg_ .___SValue_ltf8j_gg_:focus~.___SOutline_ltf8j_gg_{border-color:#ff7f00;box-shadow:0 0 0 3px rgba(255,127,0,.3)}.___SInput_ltf8j_gg_._neighborLocation_right_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_ltf8j_gg_._neighborLocation_both_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:0;border-left:none}.___SInput_ltf8j_gg_._neighborLocation_left_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_ltf8j_gg_._neighborLocation_right_ltf8j_gg_{padding-right:0}.___SValue_ltf8j_gg_._neighborLocation_both_ltf8j_gg_{padding-left:0;padding-right:0}.___SValue_ltf8j_gg_._neighborLocation_left_ltf8j_gg_{padding-left:0}"
|
|
48
50
|
/*__inner_css_end__*/
|
|
49
|
-
, "
|
|
51
|
+
, "oj6rjz_gg_")
|
|
50
52
|
/*__reshadow_css_end__*/
|
|
51
53
|
, {
|
|
52
|
-
"__SInput": "
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
|
|
70
|
-
"_neighborLocation_right": "__neighborLocation_right_hh9fd_gg_",
|
|
71
|
-
"_neighborLocation_both": "__neighborLocation_both_hh9fd_gg_",
|
|
72
|
-
"_neighborLocation_left": "__neighborLocation_left_hh9fd_gg_"
|
|
73
|
-
}),
|
|
74
|
-
style = (0, _extends2["default"])({}, _ref);
|
|
75
|
-
|
|
76
|
-
if (false) {
|
|
77
|
-
/*__reshadow_css_start__*/
|
|
78
|
-
(0, _core.__css__)(
|
|
79
|
-
/*__inner_css_start__*/
|
|
80
|
-
"@media (max-width: 768px) {\n\n.___SInput_hh9fd_gg_.__size_hh9fd_gg_.__size_s_hh9fd_gg_ {\n font-size: 13px;\n height: 23.4px\n}\n\n.___SValue_hh9fd_gg_.__size_hh9fd_gg_.__size_s_hh9fd_gg_,.___SAddon_hh9fd_gg_.__size_hh9fd_gg_.__size_s_hh9fd_gg_ {\n padding: 0 5.2px;\n}\n\n.___SInput_hh9fd_gg_.__size_hh9fd_gg_.__size_m_hh9fd_gg_ {\n font-size: 15.6px;\n height: 33.8px\n}\n\n.___SValue_hh9fd_gg_.__size_hh9fd_gg_.__size_m_hh9fd_gg_,.___SAddon_hh9fd_gg_.__size_hh9fd_gg_.__size_m_hh9fd_gg_ {\n padding: 0 10.4px;\n}\n\n.___SInput_hh9fd_gg_.__size_hh9fd_gg_.__size_l_hh9fd_gg_ {\n font-size: 18.2px;\n height: 41.6px\n}\n\n.___SValue_hh9fd_gg_.__size_hh9fd_gg_.__size_l_hh9fd_gg_,.___SAddon_hh9fd_gg_.__size_hh9fd_gg_.__size_l_hh9fd_gg_ {\n padding: 0 10.4px;\n}\n\n.___SInput_hh9fd_gg_.__size_hh9fd_gg_.__size_xl_hh9fd_gg_ {\n font-size: 20.8px;\n height: 54.6px\n}\n\n.___SValue_hh9fd_gg_.__size_hh9fd_gg_.__size_xl_hh9fd_gg_,.___SAddon_hh9fd_gg_.__size_hh9fd_gg_.__size_xl_hh9fd_gg_ {\n padding: 0 15.6px;\n}}"
|
|
81
|
-
/*__inner_css_end__*/
|
|
82
|
-
, "18myx13_gg_")
|
|
83
|
-
/*__reshadow_css_end__*/
|
|
84
|
-
;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
var styled_c8 = (0, _core.create)([]);
|
|
54
|
+
"__SInput": "___SInput_ltf8j_gg_",
|
|
55
|
+
"__SOutline": "___SOutline_ltf8j_gg_",
|
|
56
|
+
"__SValue": "___SValue_ltf8j_gg_",
|
|
57
|
+
"__SAddon": "___SAddon_ltf8j_gg_",
|
|
58
|
+
"_interactive": "__interactive_ltf8j_gg_",
|
|
59
|
+
"_disabled": "__disabled_ltf8j_gg_",
|
|
60
|
+
"_size_s": "_size_s_ltf8j_gg_",
|
|
61
|
+
"_size_m": "_size_m_ltf8j_gg_",
|
|
62
|
+
"_size_l": "_size_l_ltf8j_gg_",
|
|
63
|
+
"_size_xl": "_size_xl_ltf8j_gg_",
|
|
64
|
+
"_focused": "__focused_ltf8j_gg_",
|
|
65
|
+
"_state_normal": "_state_normal_ltf8j_gg_",
|
|
66
|
+
"_state_valid": "_state_valid_ltf8j_gg_",
|
|
67
|
+
"_state_invalid": "_state_invalid_ltf8j_gg_",
|
|
68
|
+
"_neighborLocation_right": "_neighborLocation_right_ltf8j_gg_",
|
|
69
|
+
"_neighborLocation_both": "_neighborLocation_both_ltf8j_gg_",
|
|
70
|
+
"_neighborLocation_left": "_neighborLocation_left_ltf8j_gg_"
|
|
71
|
+
});
|
|
88
72
|
|
|
89
73
|
var Input = /*#__PURE__*/function (_Component) {
|
|
90
74
|
(0, _inherits2["default"])(Input, _Component);
|
|
@@ -144,29 +128,21 @@ var Input = /*#__PURE__*/function (_Component) {
|
|
|
144
128
|
}, {
|
|
145
129
|
key: "render",
|
|
146
130
|
value: function render() {
|
|
147
|
-
var
|
|
131
|
+
var _ref = this ? this.asProps : arguments[0],
|
|
132
|
+
_ref4;
|
|
133
|
+
|
|
134
|
+
var SInput = _flexBox.Box;
|
|
148
135
|
var SOutline = 'div';
|
|
149
136
|
var _this$asProps = this.asProps,
|
|
150
137
|
Children = _this$asProps.Children,
|
|
151
138
|
styles = _this$asProps.styles,
|
|
152
|
-
size = _this$asProps.size,
|
|
153
|
-
state = _this$asProps.state,
|
|
154
|
-
neighborLocation = _this$asProps.neighborLocation,
|
|
155
139
|
controlsLength = _this$asProps.controlsLength;
|
|
156
140
|
var focused = this.state.focused;
|
|
157
|
-
return
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
focused: focused
|
|
163
|
-
}), /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"], (0, _core.map)("NeighborLocation", {
|
|
164
|
-
controlsLength: controlsLength
|
|
165
|
-
}), /*#__PURE__*/_react["default"].createElement(Children, {
|
|
166
|
-
className: _core.styled.styles["__Children"]
|
|
167
|
-
})), /*#__PURE__*/_react["default"].createElement(SOutline, {
|
|
168
|
-
className: _core.styled.styles["__SOutline"]
|
|
169
|
-
}))));
|
|
141
|
+
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SInput, _ref4.cn("SInput", _objectSpread({}, (0, _core.assignProps)({
|
|
142
|
+
"focused": focused
|
|
143
|
+
}, _ref))), /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"], _ref4.cn("NeighborLocation", {
|
|
144
|
+
"controlsLength": controlsLength
|
|
145
|
+
}), /*#__PURE__*/_react["default"].createElement(Children, _ref4.cn("Children", {}))), /*#__PURE__*/_react["default"].createElement(SOutline, _ref4.cn("SOutline", {})));
|
|
170
146
|
}
|
|
171
147
|
}]);
|
|
172
148
|
return Input;
|
|
@@ -179,7 +155,6 @@ var Input = /*#__PURE__*/function (_Component) {
|
|
|
179
155
|
});
|
|
180
156
|
(0, _defineProperty2["default"])(Input, "style", style);
|
|
181
157
|
(0, _defineProperty2["default"])(Input, "enhance", [(0, _neighborLocation.neighborLocationEnhance)()]);
|
|
182
|
-
var styled_12c = (0, _core.create)([]);
|
|
183
158
|
|
|
184
159
|
var Value = /*#__PURE__*/function (_Component2) {
|
|
185
160
|
(0, _inherits2["default"])(Value, _Component2);
|
|
@@ -203,18 +178,14 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
203
178
|
}, {
|
|
204
179
|
key: "render",
|
|
205
180
|
value: function render() {
|
|
206
|
-
var
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
type: "text",
|
|
215
|
-
neighborLocation: neighborLocation,
|
|
216
|
-
size: size
|
|
217
|
-
}))));
|
|
181
|
+
var _ref2 = this ? this.asProps : arguments[0],
|
|
182
|
+
_ref5;
|
|
183
|
+
|
|
184
|
+
var SValue = _flexBox.Box;
|
|
185
|
+
return _ref5 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react["default"].createElement(SValue, _ref5.cn("SValue", _objectSpread({}, (0, _core.assignProps)({
|
|
186
|
+
"tag": "input",
|
|
187
|
+
"type": "text"
|
|
188
|
+
}, _ref2))));
|
|
218
189
|
}
|
|
219
190
|
}]);
|
|
220
191
|
return Value;
|
|
@@ -224,20 +195,13 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
224
195
|
defaultValue: ''
|
|
225
196
|
});
|
|
226
197
|
(0, _defineProperty2["default"])(Value, "enhance", [(0, _autoFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()]);
|
|
227
|
-
var styled_190 = (0, _core.create)([]);
|
|
228
198
|
|
|
229
199
|
function Addon(props) {
|
|
230
|
-
var
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
return (0, _core.styled)(((0, _core.set)([styled_190, styles]), /*#__PURE__*/_react["default"].createElement(SAddon, (0, _core.map)("SAddon", {
|
|
236
|
-
render: _flexBox.Box,
|
|
237
|
-
interactive: interactive,
|
|
238
|
-
disabled: disabled,
|
|
239
|
-
size: size
|
|
240
|
-
}))));
|
|
200
|
+
var _ref3 = this ? this.asProps : arguments[0],
|
|
201
|
+
_ref6;
|
|
202
|
+
|
|
203
|
+
var SAddon = _flexBox.Box;
|
|
204
|
+
return _ref6 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, (0, _core.assignProps)({}, _ref3))));
|
|
241
205
|
}
|
|
242
206
|
|
|
243
207
|
Addon.enhance = [(0, _neighborLocation.neighborLocationEnhance)()];
|
package/lib/cjs/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Input.js"],"names":["Input","focused","React","createRef","e","preventDefault","inputRef","current","focus","setState","size","asProps","onMouseDown","handleMouseDownAddon","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","
|
|
1
|
+
{"version":3,"sources":["../../src/Input.js"],"names":["Input","focused","React","createRef","e","preventDefault","inputRef","current","focus","setState","size","asProps","onMouseDown","handleMouseDownAddon","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","Box","SOutline","Children","styles","controlsLength","state","Component","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"mappings":"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","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';\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 { size } = this.asProps;\n return {\n size,\n onMouseDown: this.handleMouseDownAddon,\n };\n }\n\n getValueProps() {\n const { size } = this.asProps;\n return {\n ref: this.inputRef,\n size,\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 = [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} />);\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n Addon,\n Value,\n});\n"],"file":"Input.js"}
|
|
@@ -7,7 +7,7 @@ SInput {
|
|
|
7
7
|
position: relative;
|
|
8
8
|
z-index: 0;
|
|
9
9
|
vertical-align: middle;
|
|
10
|
-
padding:
|
|
10
|
+
padding: 1px;
|
|
11
11
|
box-sizing: border-box;
|
|
12
12
|
|
|
13
13
|
& input:-webkit-autofill {
|
|
@@ -23,13 +23,13 @@ SValue {
|
|
|
23
23
|
/* hack for firefox */
|
|
24
24
|
min-width: 0;
|
|
25
25
|
width: 100%;
|
|
26
|
-
height:
|
|
26
|
+
height: 100%;
|
|
27
27
|
padding: 0;
|
|
28
28
|
border: none;
|
|
29
29
|
box-sizing: border-box;
|
|
30
30
|
color: var(--gray20);
|
|
31
31
|
font-size: inherit;
|
|
32
|
-
line-height: 1.
|
|
32
|
+
line-height: 1.1;
|
|
33
33
|
text-overflow: ellipsis;
|
|
34
34
|
font-family: inherit;
|
|
35
35
|
background: transparent;
|
|
@@ -94,8 +94,8 @@ SAddon[disabled] {
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
SInput[size='s'] {
|
|
97
|
-
font-size:
|
|
98
|
-
height:
|
|
97
|
+
font-size: 10px;
|
|
98
|
+
height: 18px;
|
|
99
99
|
|
|
100
100
|
& SOutline {
|
|
101
101
|
border-radius: 2px;
|
|
@@ -108,12 +108,12 @@ SInput[size='s'] {
|
|
|
108
108
|
|
|
109
109
|
SValue[size='s'],
|
|
110
110
|
SAddon[size='s'] {
|
|
111
|
-
padding: 0
|
|
111
|
+
padding: 0 4px;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
SInput[size='m'] {
|
|
115
|
-
font-size:
|
|
116
|
-
height:
|
|
115
|
+
font-size: 12px;
|
|
116
|
+
height: 26px;
|
|
117
117
|
|
|
118
118
|
& SOutline {
|
|
119
119
|
border-radius: 3px;
|
|
@@ -126,12 +126,12 @@ SInput[size='m'] {
|
|
|
126
126
|
|
|
127
127
|
SValue[size='m'],
|
|
128
128
|
SAddon[size='m'] {
|
|
129
|
-
padding: 0
|
|
129
|
+
padding: 0 8px;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
SInput[size='l'] {
|
|
133
|
-
font-size:
|
|
134
|
-
height:
|
|
133
|
+
font-size: 14px;
|
|
134
|
+
height: 32px;
|
|
135
135
|
|
|
136
136
|
& SOutline {
|
|
137
137
|
border-radius: 4px;
|
|
@@ -144,12 +144,12 @@ SInput[size='l'] {
|
|
|
144
144
|
|
|
145
145
|
SValue[size='l'],
|
|
146
146
|
SAddon[size='l'] {
|
|
147
|
-
padding: 0
|
|
147
|
+
padding: 0 8px;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
SInput[size='xl'] {
|
|
151
|
-
font-size:
|
|
152
|
-
height:
|
|
151
|
+
font-size: 16px;
|
|
152
|
+
height: 42px;
|
|
153
153
|
|
|
154
154
|
& SOutline {
|
|
155
155
|
border-radius: 5px;
|
|
@@ -162,7 +162,7 @@ SInput[size='xl'] {
|
|
|
162
162
|
|
|
163
163
|
SValue[size='xl'],
|
|
164
164
|
SAddon[size='xl'] {
|
|
165
|
-
padding: 0
|
|
165
|
+
padding: 0 12px;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
168
|
SInput[focused] {
|
package/lib/es6/Input.js
CHANGED
|
@@ -5,64 +5,53 @@ import _inherits from "@babel/runtime/helpers/inherits";
|
|
|
5
5
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
6
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
-
import
|
|
8
|
+
import { sstyled as _sstyled } from "@semcore/core";
|
|
9
|
+
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
10
|
+
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
11
|
+
import { assignProps as _assignProps } from "@semcore/core";
|
|
12
|
+
|
|
13
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
+
|
|
15
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
9
16
|
|
|
10
17
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
11
18
|
|
|
12
19
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
13
20
|
|
|
14
21
|
import React from 'react';
|
|
15
|
-
import createComponent, { Component,
|
|
22
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
16
23
|
import { Box } from '@semcore/flex-box';
|
|
17
24
|
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
18
25
|
import autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
19
26
|
|
|
20
27
|
/*__reshadow-styles__:"./style/input.shadow.css"*/
|
|
21
|
-
var
|
|
28
|
+
var style = (
|
|
22
29
|
/*__reshadow_css_start__*/
|
|
23
|
-
|
|
30
|
+
_sstyled.insert(
|
|
24
31
|
/*__inner_css_start__*/
|
|
25
|
-
".
|
|
32
|
+
".___SInput_ltf8j_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_ltf8j_gg_ input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_ltf8j_gg_ input:-webkit-autofill~.___SOutline_ltf8j_gg_{background-color:#faffbd}.___SValue_ltf8j_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#333;font-size:inherit;line-height:1.1;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_ltf8j_gg_:focus{outline:none}.___SValue_ltf8j_gg_::-moz-placeholder{color:#aaa}.___SValue_ltf8j_gg_:-ms-input-placeholder{color:#aaa}.___SValue_ltf8j_gg_::placeholder{color:#aaa}.___SValue_ltf8j_gg_:-moz-read-only~.___SOutline_ltf8j_gg_{background:#f5f5f5}.___SValue_ltf8j_gg_:read-only~.___SOutline_ltf8j_gg_{background:#f5f5f5}.___SValue_ltf8j_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.3}.___SValue_ltf8j_gg_:disabled~.___SOutline_ltf8j_gg_{opacity:.3;cursor:default;pointer-events:none}.___SOutline_ltf8j_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;z-index:-1;background:#fff}.___SAddon_ltf8j_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;height:100%;color:#666}.___SAddon_ltf8j_gg_.__interactive_ltf8j_gg_{color:#a6b0b3;cursor:pointer}.___SAddon_ltf8j_gg_.__interactive_ltf8j_gg_:hover{color:#929b9e}.___SAddon_ltf8j_gg_.__disabled_ltf8j_gg_{opacity:.3;cursor:default;pointer-events:none}.___SInput_ltf8j_gg_._size_s_ltf8j_gg_{font-size:10px;height:18px}.___SInput_ltf8j_gg_._size_s_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:2px}.___SInput_ltf8j_gg_._size_s_ltf8j_gg_ input:-webkit-autofill{border-radius:1px}.___SAddon_ltf8j_gg_._size_s_ltf8j_gg_,.___SValue_ltf8j_gg_._size_s_ltf8j_gg_{padding:0 4px}.___SInput_ltf8j_gg_._size_m_ltf8j_gg_{font-size:12px;height:26px}.___SInput_ltf8j_gg_._size_m_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:3px}.___SInput_ltf8j_gg_._size_m_ltf8j_gg_ input:-webkit-autofill{border-radius:2px}.___SAddon_ltf8j_gg_._size_m_ltf8j_gg_,.___SValue_ltf8j_gg_._size_m_ltf8j_gg_{padding:0 8px}.___SInput_ltf8j_gg_._size_l_ltf8j_gg_{font-size:14px;height:32px}.___SInput_ltf8j_gg_._size_l_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:4px}.___SInput_ltf8j_gg_._size_l_ltf8j_gg_ input:-webkit-autofill{border-radius:3px}.___SAddon_ltf8j_gg_._size_l_ltf8j_gg_,.___SValue_ltf8j_gg_._size_l_ltf8j_gg_{padding:0 8px}.___SInput_ltf8j_gg_._size_xl_ltf8j_gg_{font-size:16px;height:42px}.___SInput_ltf8j_gg_._size_xl_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:5px}.___SInput_ltf8j_gg_._size_xl_ltf8j_gg_ input:-webkit-autofill{border-radius:4px}.___SAddon_ltf8j_gg_._size_xl_ltf8j_gg_,.___SValue_ltf8j_gg_._size_xl_ltf8j_gg_{padding:0 12px}.___SInput_ltf8j_gg_.__focused_ltf8j_gg_{z-index:1}.___SInput_ltf8j_gg_._state_normal_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-color:#a6b0b3}.___SInput_ltf8j_gg_._state_normal_ltf8j_gg_ .___SValue_ltf8j_gg_:focus~.___SOutline_ltf8j_gg_{border-color:#2b94e1;box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SInput_ltf8j_gg_._state_valid_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-color:#4fae33}.___SInput_ltf8j_gg_._state_valid_ltf8j_gg_ .___SValue_ltf8j_gg_:focus~.___SOutline_ltf8j_gg_{border-color:#4fae33;box-shadow:0 0 0 3px rgba(79,174,51,.3)}.___SInput_ltf8j_gg_._state_invalid_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-color:#ff7f00}.___SInput_ltf8j_gg_._state_invalid_ltf8j_gg_ .___SValue_ltf8j_gg_:focus~.___SOutline_ltf8j_gg_{border-color:#ff7f00;box-shadow:0 0 0 3px rgba(255,127,0,.3)}.___SInput_ltf8j_gg_._neighborLocation_right_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_ltf8j_gg_._neighborLocation_both_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-radius:0;border-left:none}.___SInput_ltf8j_gg_._neighborLocation_left_ltf8j_gg_ .___SOutline_ltf8j_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_ltf8j_gg_._neighborLocation_right_ltf8j_gg_{padding-right:0}.___SValue_ltf8j_gg_._neighborLocation_both_ltf8j_gg_{padding-left:0;padding-right:0}.___SValue_ltf8j_gg_._neighborLocation_left_ltf8j_gg_{padding-left:0}"
|
|
26
33
|
/*__inner_css_end__*/
|
|
27
|
-
, "
|
|
34
|
+
, "oj6rjz_gg_")
|
|
28
35
|
/*__reshadow_css_end__*/
|
|
29
36
|
, {
|
|
30
|
-
"__SInput": "
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
"_neighborLocation_right": "__neighborLocation_right_hh9fd_gg_",
|
|
49
|
-
"_neighborLocation_both": "__neighborLocation_both_hh9fd_gg_",
|
|
50
|
-
"_neighborLocation_left": "__neighborLocation_left_hh9fd_gg_"
|
|
51
|
-
}),
|
|
52
|
-
style = _extends({}, _ref);
|
|
53
|
-
|
|
54
|
-
if (false) {
|
|
55
|
-
/*__reshadow_css_start__*/
|
|
56
|
-
__css__(
|
|
57
|
-
/*__inner_css_start__*/
|
|
58
|
-
"@media (max-width: 768px) {\n\n.___SInput_hh9fd_gg_.__size_hh9fd_gg_.__size_s_hh9fd_gg_ {\n font-size: 13px;\n height: 23.4px\n}\n\n.___SValue_hh9fd_gg_.__size_hh9fd_gg_.__size_s_hh9fd_gg_,.___SAddon_hh9fd_gg_.__size_hh9fd_gg_.__size_s_hh9fd_gg_ {\n padding: 0 5.2px;\n}\n\n.___SInput_hh9fd_gg_.__size_hh9fd_gg_.__size_m_hh9fd_gg_ {\n font-size: 15.6px;\n height: 33.8px\n}\n\n.___SValue_hh9fd_gg_.__size_hh9fd_gg_.__size_m_hh9fd_gg_,.___SAddon_hh9fd_gg_.__size_hh9fd_gg_.__size_m_hh9fd_gg_ {\n padding: 0 10.4px;\n}\n\n.___SInput_hh9fd_gg_.__size_hh9fd_gg_.__size_l_hh9fd_gg_ {\n font-size: 18.2px;\n height: 41.6px\n}\n\n.___SValue_hh9fd_gg_.__size_hh9fd_gg_.__size_l_hh9fd_gg_,.___SAddon_hh9fd_gg_.__size_hh9fd_gg_.__size_l_hh9fd_gg_ {\n padding: 0 10.4px;\n}\n\n.___SInput_hh9fd_gg_.__size_hh9fd_gg_.__size_xl_hh9fd_gg_ {\n font-size: 20.8px;\n height: 54.6px\n}\n\n.___SValue_hh9fd_gg_.__size_hh9fd_gg_.__size_xl_hh9fd_gg_,.___SAddon_hh9fd_gg_.__size_hh9fd_gg_.__size_xl_hh9fd_gg_ {\n padding: 0 15.6px;\n}}"
|
|
59
|
-
/*__inner_css_end__*/
|
|
60
|
-
, "18myx13_gg_")
|
|
61
|
-
/*__reshadow_css_end__*/
|
|
62
|
-
;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
var styled_c8 = create([]);
|
|
37
|
+
"__SInput": "___SInput_ltf8j_gg_",
|
|
38
|
+
"__SOutline": "___SOutline_ltf8j_gg_",
|
|
39
|
+
"__SValue": "___SValue_ltf8j_gg_",
|
|
40
|
+
"__SAddon": "___SAddon_ltf8j_gg_",
|
|
41
|
+
"_interactive": "__interactive_ltf8j_gg_",
|
|
42
|
+
"_disabled": "__disabled_ltf8j_gg_",
|
|
43
|
+
"_size_s": "_size_s_ltf8j_gg_",
|
|
44
|
+
"_size_m": "_size_m_ltf8j_gg_",
|
|
45
|
+
"_size_l": "_size_l_ltf8j_gg_",
|
|
46
|
+
"_size_xl": "_size_xl_ltf8j_gg_",
|
|
47
|
+
"_focused": "__focused_ltf8j_gg_",
|
|
48
|
+
"_state_normal": "_state_normal_ltf8j_gg_",
|
|
49
|
+
"_state_valid": "_state_valid_ltf8j_gg_",
|
|
50
|
+
"_state_invalid": "_state_invalid_ltf8j_gg_",
|
|
51
|
+
"_neighborLocation_right": "_neighborLocation_right_ltf8j_gg_",
|
|
52
|
+
"_neighborLocation_both": "_neighborLocation_both_ltf8j_gg_",
|
|
53
|
+
"_neighborLocation_left": "_neighborLocation_left_ltf8j_gg_"
|
|
54
|
+
});
|
|
66
55
|
|
|
67
56
|
var Input = /*#__PURE__*/function (_Component) {
|
|
68
57
|
_inherits(Input, _Component);
|
|
@@ -127,29 +116,21 @@ var Input = /*#__PURE__*/function (_Component) {
|
|
|
127
116
|
}, {
|
|
128
117
|
key: "render",
|
|
129
118
|
value: function render() {
|
|
130
|
-
var
|
|
119
|
+
var _ref = this ? this.asProps : arguments[0],
|
|
120
|
+
_ref4;
|
|
121
|
+
|
|
122
|
+
var SInput = Box;
|
|
131
123
|
var SOutline = 'div';
|
|
132
124
|
var _this$asProps = this.asProps,
|
|
133
125
|
Children = _this$asProps.Children,
|
|
134
126
|
styles = _this$asProps.styles,
|
|
135
|
-
size = _this$asProps.size,
|
|
136
|
-
state = _this$asProps.state,
|
|
137
|
-
neighborLocation = _this$asProps.neighborLocation,
|
|
138
127
|
controlsLength = _this$asProps.controlsLength;
|
|
139
128
|
var focused = this.state.focused;
|
|
140
|
-
return
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
focused: focused
|
|
146
|
-
}), /*#__PURE__*/React.createElement(NeighborLocation, map("NeighborLocation", {
|
|
147
|
-
controlsLength: controlsLength
|
|
148
|
-
}), /*#__PURE__*/React.createElement(Children, {
|
|
149
|
-
className: styled.styles["__Children"]
|
|
150
|
-
})), /*#__PURE__*/React.createElement(SOutline, {
|
|
151
|
-
className: styled.styles["__SOutline"]
|
|
152
|
-
}))));
|
|
129
|
+
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, _assignProps({
|
|
130
|
+
"focused": focused
|
|
131
|
+
}, _ref))), /*#__PURE__*/React.createElement(NeighborLocation, _ref4.cn("NeighborLocation", {
|
|
132
|
+
"controlsLength": controlsLength
|
|
133
|
+
}), /*#__PURE__*/React.createElement(Children, _ref4.cn("Children", {}))), /*#__PURE__*/React.createElement(SOutline, _ref4.cn("SOutline", {})));
|
|
153
134
|
}
|
|
154
135
|
}]);
|
|
155
136
|
|
|
@@ -167,8 +148,6 @@ _defineProperty(Input, "style", style);
|
|
|
167
148
|
|
|
168
149
|
_defineProperty(Input, "enhance", [neighborLocationEnhance()]);
|
|
169
150
|
|
|
170
|
-
var styled_12c = create([]);
|
|
171
|
-
|
|
172
151
|
var Value = /*#__PURE__*/function (_Component2) {
|
|
173
152
|
_inherits(Value, _Component2);
|
|
174
153
|
|
|
@@ -192,18 +171,14 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
192
171
|
}, {
|
|
193
172
|
key: "render",
|
|
194
173
|
value: function render() {
|
|
195
|
-
var
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
type: "text",
|
|
204
|
-
neighborLocation: neighborLocation,
|
|
205
|
-
size: size
|
|
206
|
-
}))));
|
|
174
|
+
var _ref2 = this ? this.asProps : arguments[0],
|
|
175
|
+
_ref5;
|
|
176
|
+
|
|
177
|
+
var SValue = Box;
|
|
178
|
+
return _ref5 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, _assignProps2({
|
|
179
|
+
"tag": "input",
|
|
180
|
+
"type": "text"
|
|
181
|
+
}, _ref2))));
|
|
207
182
|
}
|
|
208
183
|
}]);
|
|
209
184
|
|
|
@@ -216,20 +191,12 @@ _defineProperty(Value, "defaultProps", {
|
|
|
216
191
|
|
|
217
192
|
_defineProperty(Value, "enhance", [autoFocusEnhance(), neighborLocationEnhance()]);
|
|
218
193
|
|
|
219
|
-
var styled_190 = create([]);
|
|
220
|
-
|
|
221
194
|
function Addon(props) {
|
|
222
|
-
var
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
return styled((set([styled_190, styles]), /*#__PURE__*/React.createElement(SAddon, map("SAddon", {
|
|
228
|
-
render: Box,
|
|
229
|
-
interactive: interactive,
|
|
230
|
-
disabled: disabled,
|
|
231
|
-
size: size
|
|
232
|
-
}))));
|
|
195
|
+
var _ref3 = this ? this.asProps : arguments[0],
|
|
196
|
+
_ref6;
|
|
197
|
+
|
|
198
|
+
var SAddon = Box;
|
|
199
|
+
return _ref6 = sstyled(props.styles), /*#__PURE__*/React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, _assignProps3({}, _ref3))));
|
|
233
200
|
}
|
|
234
201
|
|
|
235
202
|
Addon.enhance = [neighborLocationEnhance()];
|
package/lib/es6/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Input.js"],"names":["React","createComponent","Component","
|
|
1
|
+
{"version":3,"sources":["../../src/Input.js"],"names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","autoFocusEnhance","Input","focused","createRef","e","preventDefault","inputRef","current","focus","setState","size","asProps","onMouseDown","handleMouseDownAddon","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","SOutline","Children","styles","controlsLength","state","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"mappings":"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","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';\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 { size } = this.asProps;\n return {\n size,\n onMouseDown: this.handleMouseDownAddon,\n };\n }\n\n getValueProps() {\n const { size } = this.asProps;\n return {\n ref: this.inputRef,\n size,\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 = [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} />);\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n Addon,\n Value,\n});\n"],"file":"Input.js"}
|
|
@@ -7,7 +7,7 @@ SInput {
|
|
|
7
7
|
position: relative;
|
|
8
8
|
z-index: 0;
|
|
9
9
|
vertical-align: middle;
|
|
10
|
-
padding:
|
|
10
|
+
padding: 1px;
|
|
11
11
|
box-sizing: border-box;
|
|
12
12
|
|
|
13
13
|
& input:-webkit-autofill {
|
|
@@ -23,13 +23,13 @@ SValue {
|
|
|
23
23
|
/* hack for firefox */
|
|
24
24
|
min-width: 0;
|
|
25
25
|
width: 100%;
|
|
26
|
-
height:
|
|
26
|
+
height: 100%;
|
|
27
27
|
padding: 0;
|
|
28
28
|
border: none;
|
|
29
29
|
box-sizing: border-box;
|
|
30
30
|
color: var(--gray20);
|
|
31
31
|
font-size: inherit;
|
|
32
|
-
line-height: 1.
|
|
32
|
+
line-height: 1.1;
|
|
33
33
|
text-overflow: ellipsis;
|
|
34
34
|
font-family: inherit;
|
|
35
35
|
background: transparent;
|
|
@@ -94,8 +94,8 @@ SAddon[disabled] {
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
SInput[size='s'] {
|
|
97
|
-
font-size:
|
|
98
|
-
height:
|
|
97
|
+
font-size: 10px;
|
|
98
|
+
height: 18px;
|
|
99
99
|
|
|
100
100
|
& SOutline {
|
|
101
101
|
border-radius: 2px;
|
|
@@ -108,12 +108,12 @@ SInput[size='s'] {
|
|
|
108
108
|
|
|
109
109
|
SValue[size='s'],
|
|
110
110
|
SAddon[size='s'] {
|
|
111
|
-
padding: 0
|
|
111
|
+
padding: 0 4px;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
SInput[size='m'] {
|
|
115
|
-
font-size:
|
|
116
|
-
height:
|
|
115
|
+
font-size: 12px;
|
|
116
|
+
height: 26px;
|
|
117
117
|
|
|
118
118
|
& SOutline {
|
|
119
119
|
border-radius: 3px;
|
|
@@ -126,12 +126,12 @@ SInput[size='m'] {
|
|
|
126
126
|
|
|
127
127
|
SValue[size='m'],
|
|
128
128
|
SAddon[size='m'] {
|
|
129
|
-
padding: 0
|
|
129
|
+
padding: 0 8px;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
SInput[size='l'] {
|
|
133
|
-
font-size:
|
|
134
|
-
height:
|
|
133
|
+
font-size: 14px;
|
|
134
|
+
height: 32px;
|
|
135
135
|
|
|
136
136
|
& SOutline {
|
|
137
137
|
border-radius: 4px;
|
|
@@ -144,12 +144,12 @@ SInput[size='l'] {
|
|
|
144
144
|
|
|
145
145
|
SValue[size='l'],
|
|
146
146
|
SAddon[size='l'] {
|
|
147
|
-
padding: 0
|
|
147
|
+
padding: 0 8px;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
SInput[size='xl'] {
|
|
151
|
-
font-size:
|
|
152
|
-
height:
|
|
151
|
+
font-size: 16px;
|
|
152
|
+
height: 42px;
|
|
153
153
|
|
|
154
154
|
& SOutline {
|
|
155
155
|
border-radius: 5px;
|
|
@@ -162,7 +162,7 @@ SInput[size='xl'] {
|
|
|
162
162
|
|
|
163
163
|
SValue[size='xl'],
|
|
164
164
|
SAddon[size='xl'] {
|
|
165
|
-
padding: 0
|
|
165
|
+
padding: 0 12px;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
168
|
SInput[focused] {
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/input",
|
|
3
3
|
"description": "SEMRush Input Component",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.2.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": {
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
"@semcore/flex-box": "^4"
|
|
18
19
|
},
|
|
19
20
|
"peerDependencies": {
|
|
20
|
-
"@semcore/core": "^1",
|
|
21
|
+
"@semcore/core": "^1.11",
|
|
21
22
|
"react": "16.8 - 17"
|
|
22
23
|
},
|
|
23
24
|
"jest": {
|
package/src/Input.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import createComponent, { Component,
|
|
2
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
3
|
import { Box } from '@semcore/flex-box';
|
|
4
4
|
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
5
5
|
import autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
@@ -48,19 +48,13 @@ class Input extends Component {
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
render() {
|
|
51
|
-
const
|
|
51
|
+
const SInput = Root;
|
|
52
52
|
const SOutline = 'div';
|
|
53
|
-
const { Children, styles,
|
|
53
|
+
const { Children, styles, controlsLength } = this.asProps;
|
|
54
54
|
const { focused } = this.state;
|
|
55
55
|
|
|
56
|
-
return
|
|
57
|
-
<SInput
|
|
58
|
-
render={Box}
|
|
59
|
-
neighborLocation={neighborLocation}
|
|
60
|
-
state={state}
|
|
61
|
-
size={size}
|
|
62
|
-
focused={focused}
|
|
63
|
-
>
|
|
56
|
+
return sstyled(styles)(
|
|
57
|
+
<SInput render={Box} focused={focused}>
|
|
64
58
|
<NeighborLocation controlsLength={controlsLength}>
|
|
65
59
|
<Children />
|
|
66
60
|
</NeighborLocation>
|
|
@@ -83,27 +77,15 @@ class Value extends Component {
|
|
|
83
77
|
}
|
|
84
78
|
|
|
85
79
|
render() {
|
|
86
|
-
const SValue =
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
return styled(styles)(
|
|
90
|
-
<SValue
|
|
91
|
-
render={Box}
|
|
92
|
-
tag="input"
|
|
93
|
-
type="text"
|
|
94
|
-
neighborLocation={neighborLocation}
|
|
95
|
-
size={size}
|
|
96
|
-
/>,
|
|
97
|
-
);
|
|
80
|
+
const SValue = Root;
|
|
81
|
+
|
|
82
|
+
return sstyled(this.asProps.styles)(<SValue render={Box} tag="input" type="text" />);
|
|
98
83
|
}
|
|
99
84
|
}
|
|
100
85
|
|
|
101
86
|
function Addon(props) {
|
|
102
|
-
const
|
|
103
|
-
|
|
104
|
-
return styled(styles)(
|
|
105
|
-
<SAddon render={Box} interactive={interactive} disabled={disabled} size={size} />,
|
|
106
|
-
);
|
|
87
|
+
const SAddon = Root;
|
|
88
|
+
return sstyled(props.styles)(<SAddon render={Box} />);
|
|
107
89
|
}
|
|
108
90
|
|
|
109
91
|
Addon.enhance = [neighborLocationEnhance()];
|
|
@@ -7,7 +7,7 @@ SInput {
|
|
|
7
7
|
position: relative;
|
|
8
8
|
z-index: 0;
|
|
9
9
|
vertical-align: middle;
|
|
10
|
-
padding:
|
|
10
|
+
padding: 1px;
|
|
11
11
|
box-sizing: border-box;
|
|
12
12
|
|
|
13
13
|
& input:-webkit-autofill {
|
|
@@ -23,13 +23,13 @@ SValue {
|
|
|
23
23
|
/* hack for firefox */
|
|
24
24
|
min-width: 0;
|
|
25
25
|
width: 100%;
|
|
26
|
-
height:
|
|
26
|
+
height: 100%;
|
|
27
27
|
padding: 0;
|
|
28
28
|
border: none;
|
|
29
29
|
box-sizing: border-box;
|
|
30
30
|
color: var(--gray20);
|
|
31
31
|
font-size: inherit;
|
|
32
|
-
line-height: 1.
|
|
32
|
+
line-height: 1.1;
|
|
33
33
|
text-overflow: ellipsis;
|
|
34
34
|
font-family: inherit;
|
|
35
35
|
background: transparent;
|
|
@@ -94,8 +94,8 @@ SAddon[disabled] {
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
SInput[size='s'] {
|
|
97
|
-
font-size:
|
|
98
|
-
height:
|
|
97
|
+
font-size: 10px;
|
|
98
|
+
height: 18px;
|
|
99
99
|
|
|
100
100
|
& SOutline {
|
|
101
101
|
border-radius: 2px;
|
|
@@ -108,12 +108,12 @@ SInput[size='s'] {
|
|
|
108
108
|
|
|
109
109
|
SValue[size='s'],
|
|
110
110
|
SAddon[size='s'] {
|
|
111
|
-
padding: 0
|
|
111
|
+
padding: 0 4px;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
SInput[size='m'] {
|
|
115
|
-
font-size:
|
|
116
|
-
height:
|
|
115
|
+
font-size: 12px;
|
|
116
|
+
height: 26px;
|
|
117
117
|
|
|
118
118
|
& SOutline {
|
|
119
119
|
border-radius: 3px;
|
|
@@ -126,12 +126,12 @@ SInput[size='m'] {
|
|
|
126
126
|
|
|
127
127
|
SValue[size='m'],
|
|
128
128
|
SAddon[size='m'] {
|
|
129
|
-
padding: 0
|
|
129
|
+
padding: 0 8px;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
SInput[size='l'] {
|
|
133
|
-
font-size:
|
|
134
|
-
height:
|
|
133
|
+
font-size: 14px;
|
|
134
|
+
height: 32px;
|
|
135
135
|
|
|
136
136
|
& SOutline {
|
|
137
137
|
border-radius: 4px;
|
|
@@ -144,12 +144,12 @@ SInput[size='l'] {
|
|
|
144
144
|
|
|
145
145
|
SValue[size='l'],
|
|
146
146
|
SAddon[size='l'] {
|
|
147
|
-
padding: 0
|
|
147
|
+
padding: 0 8px;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
SInput[size='xl'] {
|
|
151
|
-
font-size:
|
|
152
|
-
height:
|
|
151
|
+
font-size: 16px;
|
|
152
|
+
height: 42px;
|
|
153
153
|
|
|
154
154
|
& SOutline {
|
|
155
155
|
border-radius: 5px;
|
|
@@ -162,7 +162,7 @@ SInput[size='xl'] {
|
|
|
162
162
|
|
|
163
163
|
SValue[size='xl'],
|
|
164
164
|
SAddon[size='xl'] {
|
|
165
|
-
padding: 0
|
|
165
|
+
padding: 0 12px;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
168
|
SInput[focused] {
|