@semcore/input-number 3.0.6 → 4.0.0
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 +7 -0
- package/lib/cjs/InputNumber.js +25 -39
- package/lib/cjs/InputNumber.js.map +1 -1
- package/lib/cjs/buttons.js +2 -10
- package/lib/cjs/buttons.js.map +1 -1
- package/lib/cjs/index.d.ts +55 -0
- package/lib/cjs/index.js +2 -19
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/input-number.shadow.css +18 -53
- package/lib/es6/InputNumber.js +25 -39
- package/lib/es6/InputNumber.js.map +1 -1
- package/lib/es6/buttons.js +2 -10
- package/lib/es6/buttons.js.map +1 -1
- package/lib/es6/index.d.ts +55 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/input-number.shadow.css +18 -53
- package/lib/types/index.d.ts +1 -1
- package/package.json +5 -2
- package/src/InputNumber.jsx +4 -4
- package/src/buttons.jsx +2 -10
- package/src/index.d.ts +1 -1
- package/src/index.js +0 -1
- package/src/style/input-number.shadow.css +18 -53
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.0.0] - 2022-05-17
|
|
6
|
+
|
|
7
|
+
### BREAK
|
|
8
|
+
|
|
9
|
+
- Updated styles according to the library redesign policy.
|
|
10
|
+
- Major dependency update Input.
|
|
11
|
+
|
|
5
12
|
## [3.0.6] - 2022-03-14
|
|
6
13
|
|
|
7
14
|
### Changed
|
package/lib/cjs/InputNumber.js
CHANGED
|
@@ -48,23 +48,19 @@ var style = (
|
|
|
48
48
|
/*__reshadow_css_start__*/
|
|
49
49
|
_core.sstyled.insert(
|
|
50
50
|
/*__inner_css_start__*/
|
|
51
|
-
".
|
|
51
|
+
".___SInputNumber_11apo_gg_:hover .___SValue_11apo_gg_:not(.__disabled_11apo_gg_)~.___SControls_11apo_gg_{visibility:visible}.___SValue_11apo_gg_:focus~.___SControls_11apo_gg_{visibility:visible}.___SControls_11apo_gg_{display:flex;flex-flow:column;justify-content:center;height:100%;visibility:hidden;box-sizing:border-box}.___SControls_11apo_gg_.__showControls_11apo_gg_{visibility:visible}.___SDown_11apo_gg_,.___SUp_11apo_gg_{padding:0;width:16px;color:#a9abb6;box-sizing:border-box;display:inline-flex;justify-content:center;border:none;background:none;cursor:pointer}.___SDown_11apo_gg_:focus,.___SUp_11apo_gg_:focus{outline:none}.___SDown_11apo_gg_:hover,.___SUp_11apo_gg_:hover{color:#484a54}.___SUp_11apo_gg_{padding-bottom:1px}.___SDown_11apo_gg_{padding-top:1px}.___SValue_11apo_gg_::-webkit-inner-spin-button,.___SValue_11apo_gg_::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.___SValue_11apo_gg_._type_number_11apo_gg_{-moz-appearance:textfield}.___SValue_11apo_gg_.__disabled_11apo_gg_~.___SControls_11apo_gg_{opacity:0.3;cursor:default;pointer-events:none}"
|
|
52
52
|
/*__inner_css_end__*/
|
|
53
|
-
, "
|
|
53
|
+
, "24cc6q_gg_")
|
|
54
54
|
/*__reshadow_css_end__*/
|
|
55
55
|
, {
|
|
56
|
-
"__SInputNumber": "
|
|
57
|
-
"__SValue": "
|
|
58
|
-
"_disabled": "
|
|
59
|
-
"__SControls": "
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"_showControls": "__showControls_14xqd_gg_",
|
|
65
|
-
"__SDown": "___SDown_14xqd_gg_",
|
|
66
|
-
"__SUp": "___SUp_14xqd_gg_",
|
|
67
|
-
"_type_number": "_type_number_14xqd_gg_"
|
|
56
|
+
"__SInputNumber": "___SInputNumber_11apo_gg_",
|
|
57
|
+
"__SValue": "___SValue_11apo_gg_",
|
|
58
|
+
"_disabled": "__disabled_11apo_gg_",
|
|
59
|
+
"__SControls": "___SControls_11apo_gg_",
|
|
60
|
+
"_showControls": "__showControls_11apo_gg_",
|
|
61
|
+
"__SDown": "___SDown_11apo_gg_",
|
|
62
|
+
"__SUp": "___SUp_11apo_gg_",
|
|
63
|
+
"_type_number": "_type_number_11apo_gg_"
|
|
68
64
|
});
|
|
69
65
|
|
|
70
66
|
function parseValueWithMinMax(value) {
|
|
@@ -73,14 +69,12 @@ function parseValueWithMinMax(value) {
|
|
|
73
69
|
return Math.max(min, Math.min(max, value));
|
|
74
70
|
}
|
|
75
71
|
|
|
76
|
-
var IconUp = function IconUp(
|
|
77
|
-
|
|
78
|
-
return _buttons["default"].up[size] || _buttons["default"].up['m'];
|
|
72
|
+
var IconUp = function IconUp() {
|
|
73
|
+
return _buttons["default"].up;
|
|
79
74
|
};
|
|
80
75
|
|
|
81
|
-
var IconDown = function IconDown(
|
|
82
|
-
|
|
83
|
-
return _buttons["default"].down[size] || _buttons["default"].down['m'];
|
|
76
|
+
var IconDown = function IconDown() {
|
|
77
|
+
return _buttons["default"].down;
|
|
84
78
|
};
|
|
85
79
|
|
|
86
80
|
var InputNumber = /*#__PURE__*/function (_Component) {
|
|
@@ -98,21 +92,17 @@ var InputNumber = /*#__PURE__*/function (_Component) {
|
|
|
98
92
|
}
|
|
99
93
|
|
|
100
94
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
101
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef",
|
|
102
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputHandlersRef",
|
|
95
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", _react["default"].createRef());
|
|
96
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputHandlersRef", _react["default"].createRef());
|
|
103
97
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerInc", function (e) {
|
|
104
|
-
var _this$inputRef$curren, _this$inputRef$curren2, _this$inputHandlersRe;
|
|
105
|
-
|
|
106
98
|
// TODO: IE11 dont work
|
|
107
|
-
|
|
108
|
-
|
|
99
|
+
_this.inputRef.current?.stepUp && _this.inputRef.current?.stepUp();
|
|
100
|
+
_this.inputHandlersRef.current?.value(_this.inputRef.current.value, e);
|
|
109
101
|
});
|
|
110
102
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerDec", function (e) {
|
|
111
|
-
var _this$inputRef$curren3, _this$inputRef$curren4, _this$inputHandlersRe2;
|
|
112
|
-
|
|
113
103
|
// TODO: IE11 dont work
|
|
114
|
-
|
|
115
|
-
|
|
104
|
+
_this.inputRef.current?.stepDown && _this.inputRef.current?.stepDown();
|
|
105
|
+
_this.inputHandlersRef.current?.value(_this.inputRef.current.value, e);
|
|
116
106
|
});
|
|
117
107
|
return _this;
|
|
118
108
|
}
|
|
@@ -138,7 +128,7 @@ var InputNumber = /*#__PURE__*/function (_Component) {
|
|
|
138
128
|
}, {
|
|
139
129
|
key: "render",
|
|
140
130
|
value: function render() {
|
|
141
|
-
var _ref = this
|
|
131
|
+
var _ref = this.asProps,
|
|
142
132
|
_ref4;
|
|
143
133
|
|
|
144
134
|
var SInputNumber = _input["default"];
|
|
@@ -215,7 +205,7 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
215
205
|
}, {
|
|
216
206
|
key: "render",
|
|
217
207
|
value: function render() {
|
|
218
|
-
var _ref2 = this
|
|
208
|
+
var _ref2 = this.asProps,
|
|
219
209
|
_ref5;
|
|
220
210
|
|
|
221
211
|
var SValue = _input["default"].Value;
|
|
@@ -241,7 +231,7 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
241
231
|
});
|
|
242
232
|
|
|
243
233
|
function Controls(props) {
|
|
244
|
-
var _ref3 =
|
|
234
|
+
var _ref3 = arguments[0],
|
|
245
235
|
_ref6;
|
|
246
236
|
|
|
247
237
|
var Children = props.Children,
|
|
@@ -258,17 +248,13 @@ function Controls(props) {
|
|
|
258
248
|
"type": "button",
|
|
259
249
|
"size": size,
|
|
260
250
|
"aria-label": "Increment number"
|
|
261
|
-
}), /*#__PURE__*/_react["default"].createElement(IconUp, _ref6.cn("IconUp", {
|
|
262
|
-
"size": size
|
|
263
|
-
}))), /*#__PURE__*/_react["default"].createElement(SDown, _ref6.cn("SDown", {
|
|
251
|
+
}), /*#__PURE__*/_react["default"].createElement(IconUp, _ref6.cn("IconUp", {}))), /*#__PURE__*/_react["default"].createElement(SDown, _ref6.cn("SDown", {
|
|
264
252
|
"onClick": dec,
|
|
265
253
|
"tabIndex": -1,
|
|
266
254
|
"type": "button",
|
|
267
255
|
"size": size,
|
|
268
256
|
"aria-label": "Decrement number"
|
|
269
|
-
}), /*#__PURE__*/_react["default"].createElement(IconDown, _ref6.cn("IconDown", {
|
|
270
|
-
"size": size
|
|
271
|
-
}))), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {})));
|
|
257
|
+
}), /*#__PURE__*/_react["default"].createElement(IconDown, _ref6.cn("IconDown", {}))), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {})));
|
|
272
258
|
}
|
|
273
259
|
|
|
274
260
|
var _default = (0, _core["default"])(InputNumber, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputNumber.jsx"],"names":["parseValueWithMinMax","value","min","Number","MIN_SAFE_INTEGER","max","MAX_SAFE_INTEGER","Math","IconUp","
|
|
1
|
+
{"version":3,"sources":["../../src/InputNumber.jsx"],"names":["parseValueWithMinMax","value","min","Number","MIN_SAFE_INTEGER","max","MAX_SAFE_INTEGER","Math","IconUp","BUTTONS","up","IconDown","down","InputNumber","React","createRef","e","inputRef","current","stepUp","inputHandlersRef","stepDown","ref","$inputHandlers","size","asProps","inc","handlerInc","dec","handlerDec","SInputNumber","Input","style","Component","Value","step","isNaN","currentTarget","valueAsNumber","handlers","numberValue","parseFloat","r","roundRemainder","abs","String","countDecimals","floor","toString","split","length","toPrecision","SValue","styles","handleValidation","defaultValue","Controls","props","Children","SControls","Addon","SUp","SDown"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport BUTTONS from './buttons';\n\nimport style from './style/input-number.shadow.css';\n\nfunction parseValueWithMinMax(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {\n return Math.max(min, Math.min(max, value));\n}\n\nconst IconUp = () => BUTTONS.up;\nconst IconDown = () => BUTTONS.down;\n\nclass InputNumber extends Component {\n static displayName = 'InputNumber';\n static style = style;\n static defaultProps = {\n size: 'm',\n };\n\n inputRef = React.createRef();\n inputHandlersRef = React.createRef();\n\n handlerInc = (e) => {\n // TODO: IE11 dont work\n this.inputRef.current?.stepUp && this.inputRef.current?.stepUp();\n this.inputHandlersRef.current?.value(this.inputRef.current.value, e);\n };\n\n handlerDec = (e) => {\n // TODO: IE11 dont work\n this.inputRef.current?.stepDown && this.inputRef.current?.stepDown();\n this.inputHandlersRef.current?.value(this.inputRef.current.value, e);\n };\n\n getValueProps() {\n return {\n ref: this.inputRef,\n $inputHandlers: this.inputHandlersRef,\n };\n }\n\n getControlsProps() {\n const { size } = this.asProps;\n return {\n size,\n inc: this.handlerInc,\n dec: this.handlerDec,\n };\n }\n\n render() {\n const SInputNumber = Root;\n return sstyled(this.asProps.style)(<SInputNumber render={Input} />);\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n step: 1,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n roundRemainder(value, step) {\n const countDecimals = Math.floor(step) === step ? 0 : step.toString().split('.')[1].length || 0;\n return countDecimals === 0\n ? Number.parseFloat(value)\n : Number.parseFloat(value).toPrecision(countDecimals);\n }\n\n handleValidation = (e) => {\n const { value, min, max, step } = this.asProps;\n if (Number.isNaN(e.currentTarget.valueAsNumber)) {\n e.currentTarget.value = '';\n this.handlers.value('', e);\n } else {\n let numberValue = parseValueWithMinMax(Number.parseFloat(value), min, max);\n const r = this.roundRemainder(numberValue % step, step);\n if (r !== 0) {\n if (r >= step / 2) {\n numberValue += step - r;\n } else if (Math.abs(r) < step) {\n numberValue -= r;\n }\n }\n this.handlers.value(String(numberValue), e);\n }\n };\n\n render() {\n const SValue = Root;\n const { styles, $inputHandlers } = this.asProps;\n\n // 🐒 не делайте так\n $inputHandlers.current = this.handlers;\n\n return sstyled(styles)(\n <SValue\n render={Input.Value}\n type=\"number\"\n autoComplete=\"off\"\n onBlur={this.handleValidation}\n onInvalid={this.handleValidation}\n />,\n );\n }\n}\n\nfunction Controls(props) {\n const { Children, inc, dec, size, styles } = props;\n const SControls = Root;\n const SUp = 'button';\n const SDown = 'button';\n\n return sstyled(styles)(\n <SControls render={Input.Addon}>\n <SUp onClick={inc} tabIndex={-1} type=\"button\" size={size} aria-label=\"Increment number\">\n <IconUp />\n </SUp>\n <SDown onClick={dec} tabIndex={-1} type=\"button\" size={size} aria-label=\"Decrement number\">\n <IconDown />\n </SDown>\n <Children />\n </SControls>,\n );\n}\n\nexport default createComponent(InputNumber, {\n Value,\n Controls,\n Addon: Input.Addon,\n});\n"],"file":"InputNumber.js"}
|
package/lib/cjs/buttons.js
CHANGED
|
@@ -24,16 +24,8 @@ var svg = function svg(orientation, width, height) {
|
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
var _default = {
|
|
27
|
-
up:
|
|
28
|
-
|
|
29
|
-
l: svg('up', 10, 5),
|
|
30
|
-
m: svg('up', 8, 4)
|
|
31
|
-
},
|
|
32
|
-
down: {
|
|
33
|
-
xl: svg('down', 10, 5),
|
|
34
|
-
l: svg('down', 10, 5),
|
|
35
|
-
m: svg('down', 8, 4)
|
|
36
|
-
}
|
|
27
|
+
up: svg('up', 10, 5),
|
|
28
|
+
down: svg('down', 10, 5)
|
|
37
29
|
};
|
|
38
30
|
exports["default"] = _default;
|
|
39
31
|
//# sourceMappingURL=buttons.js.map
|
package/lib/cjs/buttons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/buttons.jsx"],"names":["svg","orientation","width","height","up","
|
|
1
|
+
{"version":3,"sources":["../../src/buttons.jsx"],"names":["svg","orientation","width","height","up","down"],"mappings":";;;;;;;;;AAAA;;AAEA,IAAMA,GAAG,GAAG,SAANA,GAAM,CAACC,WAAD,EAAcC,KAAd,EAAqBC,MAArB;AAAA,sBACV;AACE,IAAA,KAAK,EAAC,4BADR;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,KAAK,EAAED,KAHT;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,OAAO,gBAASD,KAAT,cAAkBC,MAAlB;AALT,KAOGF,WAAW,KAAK,IAAhB,gBACC;AAAM,IAAA,CAAC,eAAQE,MAAR,cAAkBA,MAAlB,eAA6BA,MAA7B,cAAuCA,MAAvC,cAAiDA,MAAjD;AAAP,IADD,gBAGC;AAAM,IAAA,CAAC,iBAAUD,KAAV,iBAAsBC,MAAtB,cAAgCA,MAAhC;AAAP,IAVJ,CADU;AAAA,CAAZ;;eAgBe;AACbC,EAAAA,EAAE,EAAEJ,GAAG,CAAC,IAAD,EAAO,EAAP,EAAW,CAAX,CADM;AAEbK,EAAAA,IAAI,EAAEL,GAAG,CAAC,MAAD,EAAS,EAAT,EAAa,CAAb;AAFI,C","sourcesContent":["import React from 'react';\n\nconst svg = (orientation, width, height) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width={width}\n height={height}\n viewBox={`0 0 ${width} ${height}`}\n >\n {orientation === 'up' ? (\n <path d={`M0,${height}l${height},-${height}l${height},${height}Z`} />\n ) : (\n <path d={`M0,0l${width},0l-${height},${height}Z`} />\n )}\n </svg>\n);\n\nexport default {\n up: svg('up', 10, 5),\n down: svg('down', 10, 5),\n};\n"],"file":"buttons.js"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { IInputAddonProps, IInputProps, IInputValueProps } from '@semcore/input';
|
|
4
|
+
|
|
5
|
+
export type InputNumberValue = string;
|
|
6
|
+
export type InputNumberSize = 'm' | 'l';
|
|
7
|
+
|
|
8
|
+
export interface IInputNumberProps extends IInputProps {
|
|
9
|
+
/** Input size
|
|
10
|
+
* @default m
|
|
11
|
+
* */
|
|
12
|
+
size?: InputNumberSize;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface IInputNumberValueProps extends IInputValueProps {
|
|
16
|
+
/** Minimum value
|
|
17
|
+
* @default Number.MIN_SAFE_INTEGER
|
|
18
|
+
*/
|
|
19
|
+
min?: number;
|
|
20
|
+
/** Maximum value
|
|
21
|
+
* @default Number.MAX_SAFE_INTEGER
|
|
22
|
+
*/
|
|
23
|
+
max?: number;
|
|
24
|
+
/** Value change step
|
|
25
|
+
* @default 1
|
|
26
|
+
*/
|
|
27
|
+
step?: number;
|
|
28
|
+
/** Numeric value */
|
|
29
|
+
value?: InputNumberValue;
|
|
30
|
+
/** Called when the input value changes, it returns its current value in numeric format */
|
|
31
|
+
onChange?: (value: InputNumberValue, event?: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export interface IInputNumberControlsProps extends IInputAddonProps {
|
|
35
|
+
/** Always displays controls (steppers)
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
showControls?: boolean;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export interface IInputNumberCtx {
|
|
42
|
+
getValueProps: PropGetterFn;
|
|
43
|
+
getControlsProps: PropGetterFn;
|
|
44
|
+
getAddonProps: PropGetterFn;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
declare const InputNumber: (<T>(
|
|
48
|
+
props: CProps<IInputNumberProps & T, IInputNumberCtx>,
|
|
49
|
+
) => ReturnEl) & {
|
|
50
|
+
Value: <T>(props: IInputNumberValueProps & T) => ReturnEl;
|
|
51
|
+
Controls: <T>(props: IInputNumberControlsProps & T) => ReturnEl;
|
|
52
|
+
Addon: <T>(props: IInputAddonProps & T) => ReturnEl;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export default InputNumber;
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
var _exportNames = {};
|
|
9
8
|
Object.defineProperty(exports, "default", {
|
|
10
9
|
enumerable: true,
|
|
11
10
|
get: function get() {
|
|
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
|
|
|
13
12
|
}
|
|
14
13
|
});
|
|
15
14
|
|
|
16
|
-
var _InputNumber =
|
|
17
|
-
|
|
18
|
-
Object.keys(_InputNumber).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
-
if (key in exports && exports[key] === _InputNumber[key]) return;
|
|
22
|
-
Object.defineProperty(exports, key, {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function get() {
|
|
25
|
-
return _InputNumber[key];
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
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); }
|
|
31
|
-
|
|
32
|
-
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; }
|
|
15
|
+
var _InputNumber = _interopRequireDefault(require("./InputNumber"));
|
|
33
16
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './InputNumber';\n"],"file":"index.js"}
|
|
@@ -19,38 +19,37 @@ SControls {
|
|
|
19
19
|
box-sizing: border-box;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
SControls[size='s'] {
|
|
23
|
-
width: 20px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
SControls[size='m'] {
|
|
27
|
-
width: 20px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
SControls[size='l'] {
|
|
31
|
-
width: 25px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
SControls[size='xl'] {
|
|
35
|
-
width: 32px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
22
|
SControls[showControls] {
|
|
39
23
|
visibility: visible;
|
|
40
24
|
}
|
|
41
25
|
|
|
42
26
|
SUp,
|
|
43
27
|
SDown {
|
|
44
|
-
|
|
28
|
+
padding: 0;
|
|
29
|
+
width: 16px;
|
|
30
|
+
color: var(--gray-300);
|
|
45
31
|
box-sizing: border-box;
|
|
46
32
|
display: inline-flex;
|
|
47
33
|
justify-content: center;
|
|
48
34
|
border: none;
|
|
49
35
|
background: none;
|
|
36
|
+
cursor: pointer;
|
|
50
37
|
|
|
51
38
|
&:focus {
|
|
52
39
|
outline: none;
|
|
53
40
|
}
|
|
41
|
+
|
|
42
|
+
&:hover {
|
|
43
|
+
color: var(--gray-600);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
SUp {
|
|
48
|
+
padding-bottom: 1px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
SDown {
|
|
52
|
+
padding-top: 1px;
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
SValue {
|
|
@@ -67,40 +66,6 @@ SValue {
|
|
|
67
66
|
|
|
68
67
|
SValue[disabled] ~ SControls {
|
|
69
68
|
opacity: var(--disabled-opacity);
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
SValue:not([disabled]) {
|
|
73
|
-
& ~ SControls SUp:hover {
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
color: var(--gray40);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
SValue:not([disabled]) ~ SControls SDown:hover {
|
|
80
|
-
cursor: pointer;
|
|
81
|
-
color: var(--gray40);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
SUp[size='m'] {
|
|
85
|
-
padding: 6px 6px 2px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
SDown[size='m'] {
|
|
89
|
-
padding: 2px 6px 6px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
SUp[size='l'] {
|
|
93
|
-
padding: 7px 8px 3px;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
SDown[size='l'] {
|
|
97
|
-
padding: 3px 8px 7px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
SUp[size='xl'] {
|
|
101
|
-
padding: 11px 11px 4px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
SDown[size='xl'] {
|
|
105
|
-
padding: 4px 11px 11px;
|
|
69
|
+
cursor: default;
|
|
70
|
+
pointer-events: none;
|
|
106
71
|
}
|
package/lib/es6/InputNumber.js
CHANGED
|
@@ -28,23 +28,19 @@ var style = (
|
|
|
28
28
|
/*__reshadow_css_start__*/
|
|
29
29
|
_sstyled.insert(
|
|
30
30
|
/*__inner_css_start__*/
|
|
31
|
-
".
|
|
31
|
+
".___SInputNumber_11apo_gg_:hover .___SValue_11apo_gg_:not(.__disabled_11apo_gg_)~.___SControls_11apo_gg_{visibility:visible}.___SValue_11apo_gg_:focus~.___SControls_11apo_gg_{visibility:visible}.___SControls_11apo_gg_{display:flex;flex-flow:column;justify-content:center;height:100%;visibility:hidden;box-sizing:border-box}.___SControls_11apo_gg_.__showControls_11apo_gg_{visibility:visible}.___SDown_11apo_gg_,.___SUp_11apo_gg_{padding:0;width:16px;color:#a9abb6;box-sizing:border-box;display:inline-flex;justify-content:center;border:none;background:none;cursor:pointer}.___SDown_11apo_gg_:focus,.___SUp_11apo_gg_:focus{outline:none}.___SDown_11apo_gg_:hover,.___SUp_11apo_gg_:hover{color:#484a54}.___SUp_11apo_gg_{padding-bottom:1px}.___SDown_11apo_gg_{padding-top:1px}.___SValue_11apo_gg_::-webkit-inner-spin-button,.___SValue_11apo_gg_::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.___SValue_11apo_gg_._type_number_11apo_gg_{-moz-appearance:textfield}.___SValue_11apo_gg_.__disabled_11apo_gg_~.___SControls_11apo_gg_{opacity:0.3;cursor:default;pointer-events:none}"
|
|
32
32
|
/*__inner_css_end__*/
|
|
33
|
-
, "
|
|
33
|
+
, "24cc6q_gg_")
|
|
34
34
|
/*__reshadow_css_end__*/
|
|
35
35
|
, {
|
|
36
|
-
"__SInputNumber": "
|
|
37
|
-
"__SValue": "
|
|
38
|
-
"_disabled": "
|
|
39
|
-
"__SControls": "
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"_showControls": "__showControls_14xqd_gg_",
|
|
45
|
-
"__SDown": "___SDown_14xqd_gg_",
|
|
46
|
-
"__SUp": "___SUp_14xqd_gg_",
|
|
47
|
-
"_type_number": "_type_number_14xqd_gg_"
|
|
36
|
+
"__SInputNumber": "___SInputNumber_11apo_gg_",
|
|
37
|
+
"__SValue": "___SValue_11apo_gg_",
|
|
38
|
+
"_disabled": "__disabled_11apo_gg_",
|
|
39
|
+
"__SControls": "___SControls_11apo_gg_",
|
|
40
|
+
"_showControls": "__showControls_11apo_gg_",
|
|
41
|
+
"__SDown": "___SDown_11apo_gg_",
|
|
42
|
+
"__SUp": "___SUp_11apo_gg_",
|
|
43
|
+
"_type_number": "_type_number_11apo_gg_"
|
|
48
44
|
});
|
|
49
45
|
|
|
50
46
|
function parseValueWithMinMax(value) {
|
|
@@ -53,14 +49,12 @@ function parseValueWithMinMax(value) {
|
|
|
53
49
|
return Math.max(min, Math.min(max, value));
|
|
54
50
|
}
|
|
55
51
|
|
|
56
|
-
var IconUp = function IconUp(
|
|
57
|
-
|
|
58
|
-
return BUTTONS.up[size] || BUTTONS.up['m'];
|
|
52
|
+
var IconUp = function IconUp() {
|
|
53
|
+
return BUTTONS.up;
|
|
59
54
|
};
|
|
60
55
|
|
|
61
|
-
var IconDown = function IconDown(
|
|
62
|
-
|
|
63
|
-
return BUTTONS.down[size] || BUTTONS.down['m'];
|
|
56
|
+
var IconDown = function IconDown() {
|
|
57
|
+
return BUTTONS.down;
|
|
64
58
|
};
|
|
65
59
|
|
|
66
60
|
var InputNumber = /*#__PURE__*/function (_Component) {
|
|
@@ -79,24 +73,20 @@ var InputNumber = /*#__PURE__*/function (_Component) {
|
|
|
79
73
|
|
|
80
74
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
81
75
|
|
|
82
|
-
_defineProperty(_assertThisInitialized(_this), "inputRef",
|
|
76
|
+
_defineProperty(_assertThisInitialized(_this), "inputRef", React.createRef());
|
|
83
77
|
|
|
84
|
-
_defineProperty(_assertThisInitialized(_this), "inputHandlersRef",
|
|
78
|
+
_defineProperty(_assertThisInitialized(_this), "inputHandlersRef", React.createRef());
|
|
85
79
|
|
|
86
80
|
_defineProperty(_assertThisInitialized(_this), "handlerInc", function (e) {
|
|
87
|
-
var _this$inputRef$curren, _this$inputRef$curren2, _this$inputHandlersRe;
|
|
88
|
-
|
|
89
81
|
// TODO: IE11 dont work
|
|
90
|
-
|
|
91
|
-
|
|
82
|
+
_this.inputRef.current?.stepUp && _this.inputRef.current?.stepUp();
|
|
83
|
+
_this.inputHandlersRef.current?.value(_this.inputRef.current.value, e);
|
|
92
84
|
});
|
|
93
85
|
|
|
94
86
|
_defineProperty(_assertThisInitialized(_this), "handlerDec", function (e) {
|
|
95
|
-
var _this$inputRef$curren3, _this$inputRef$curren4, _this$inputHandlersRe2;
|
|
96
|
-
|
|
97
87
|
// TODO: IE11 dont work
|
|
98
|
-
|
|
99
|
-
|
|
88
|
+
_this.inputRef.current?.stepDown && _this.inputRef.current?.stepDown();
|
|
89
|
+
_this.inputHandlersRef.current?.value(_this.inputRef.current.value, e);
|
|
100
90
|
});
|
|
101
91
|
|
|
102
92
|
return _this;
|
|
@@ -123,7 +113,7 @@ var InputNumber = /*#__PURE__*/function (_Component) {
|
|
|
123
113
|
}, {
|
|
124
114
|
key: "render",
|
|
125
115
|
value: function render() {
|
|
126
|
-
var _ref = this
|
|
116
|
+
var _ref = this.asProps,
|
|
127
117
|
_ref4;
|
|
128
118
|
|
|
129
119
|
var SInputNumber = Input;
|
|
@@ -205,7 +195,7 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
205
195
|
}, {
|
|
206
196
|
key: "render",
|
|
207
197
|
value: function render() {
|
|
208
|
-
var _ref2 = this
|
|
198
|
+
var _ref2 = this.asProps,
|
|
209
199
|
_ref5;
|
|
210
200
|
|
|
211
201
|
var SValue = Input.Value;
|
|
@@ -232,7 +222,7 @@ _defineProperty(Value, "defaultProps", {
|
|
|
232
222
|
});
|
|
233
223
|
|
|
234
224
|
function Controls(props) {
|
|
235
|
-
var _ref3 =
|
|
225
|
+
var _ref3 = arguments[0],
|
|
236
226
|
_ref6;
|
|
237
227
|
|
|
238
228
|
var Children = props.Children,
|
|
@@ -249,17 +239,13 @@ function Controls(props) {
|
|
|
249
239
|
"type": "button",
|
|
250
240
|
"size": size,
|
|
251
241
|
"aria-label": "Increment number"
|
|
252
|
-
}), /*#__PURE__*/React.createElement(IconUp, _ref6.cn("IconUp", {
|
|
253
|
-
"size": size
|
|
254
|
-
}))), /*#__PURE__*/React.createElement(SDown, _ref6.cn("SDown", {
|
|
242
|
+
}), /*#__PURE__*/React.createElement(IconUp, _ref6.cn("IconUp", {}))), /*#__PURE__*/React.createElement(SDown, _ref6.cn("SDown", {
|
|
255
243
|
"onClick": dec,
|
|
256
244
|
"tabIndex": -1,
|
|
257
245
|
"type": "button",
|
|
258
246
|
"size": size,
|
|
259
247
|
"aria-label": "Decrement number"
|
|
260
|
-
}), /*#__PURE__*/React.createElement(IconDown, _ref6.cn("IconDown", {
|
|
261
|
-
"size": size
|
|
262
|
-
}))), /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})));
|
|
248
|
+
}), /*#__PURE__*/React.createElement(IconDown, _ref6.cn("IconDown", {}))), /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})));
|
|
263
249
|
}
|
|
264
250
|
|
|
265
251
|
export default createComponent(InputNumber, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputNumber.jsx"],"names":["React","createComponent","Component","sstyled","Root","Input","BUTTONS","parseValueWithMinMax","value","min","Number","MIN_SAFE_INTEGER","max","MAX_SAFE_INTEGER","Math","IconUp","
|
|
1
|
+
{"version":3,"sources":["../../src/InputNumber.jsx"],"names":["React","createComponent","Component","sstyled","Root","Input","BUTTONS","parseValueWithMinMax","value","min","Number","MIN_SAFE_INTEGER","max","MAX_SAFE_INTEGER","Math","IconUp","up","IconDown","down","InputNumber","createRef","e","inputRef","current","stepUp","inputHandlersRef","stepDown","ref","$inputHandlers","size","asProps","inc","handlerInc","dec","handlerDec","SInputNumber","style","Value","step","isNaN","currentTarget","valueAsNumber","handlers","numberValue","parseFloat","r","roundRemainder","abs","String","countDecimals","floor","toString","split","length","toPrecision","SValue","styles","handleValidation","defaultValue","Controls","props","Children","SControls","Addon","SUp","SDown"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport BUTTONS from './buttons';\n\nimport style from './style/input-number.shadow.css';\n\nfunction parseValueWithMinMax(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {\n return Math.max(min, Math.min(max, value));\n}\n\nconst IconUp = () => BUTTONS.up;\nconst IconDown = () => BUTTONS.down;\n\nclass InputNumber extends Component {\n static displayName = 'InputNumber';\n static style = style;\n static defaultProps = {\n size: 'm',\n };\n\n inputRef = React.createRef();\n inputHandlersRef = React.createRef();\n\n handlerInc = (e) => {\n // TODO: IE11 dont work\n this.inputRef.current?.stepUp && this.inputRef.current?.stepUp();\n this.inputHandlersRef.current?.value(this.inputRef.current.value, e);\n };\n\n handlerDec = (e) => {\n // TODO: IE11 dont work\n this.inputRef.current?.stepDown && this.inputRef.current?.stepDown();\n this.inputHandlersRef.current?.value(this.inputRef.current.value, e);\n };\n\n getValueProps() {\n return {\n ref: this.inputRef,\n $inputHandlers: this.inputHandlersRef,\n };\n }\n\n getControlsProps() {\n const { size } = this.asProps;\n return {\n size,\n inc: this.handlerInc,\n dec: this.handlerDec,\n };\n }\n\n render() {\n const SInputNumber = Root;\n return sstyled(this.asProps.style)(<SInputNumber render={Input} />);\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n step: 1,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n roundRemainder(value, step) {\n const countDecimals = Math.floor(step) === step ? 0 : step.toString().split('.')[1].length || 0;\n return countDecimals === 0\n ? Number.parseFloat(value)\n : Number.parseFloat(value).toPrecision(countDecimals);\n }\n\n handleValidation = (e) => {\n const { value, min, max, step } = this.asProps;\n if (Number.isNaN(e.currentTarget.valueAsNumber)) {\n e.currentTarget.value = '';\n this.handlers.value('', e);\n } else {\n let numberValue = parseValueWithMinMax(Number.parseFloat(value), min, max);\n const r = this.roundRemainder(numberValue % step, step);\n if (r !== 0) {\n if (r >= step / 2) {\n numberValue += step - r;\n } else if (Math.abs(r) < step) {\n numberValue -= r;\n }\n }\n this.handlers.value(String(numberValue), e);\n }\n };\n\n render() {\n const SValue = Root;\n const { styles, $inputHandlers } = this.asProps;\n\n // 🐒 не делайте так\n $inputHandlers.current = this.handlers;\n\n return sstyled(styles)(\n <SValue\n render={Input.Value}\n type=\"number\"\n autoComplete=\"off\"\n onBlur={this.handleValidation}\n onInvalid={this.handleValidation}\n />,\n );\n }\n}\n\nfunction Controls(props) {\n const { Children, inc, dec, size, styles } = props;\n const SControls = Root;\n const SUp = 'button';\n const SDown = 'button';\n\n return sstyled(styles)(\n <SControls render={Input.Addon}>\n <SUp onClick={inc} tabIndex={-1} type=\"button\" size={size} aria-label=\"Increment number\">\n <IconUp />\n </SUp>\n <SDown onClick={dec} tabIndex={-1} type=\"button\" size={size} aria-label=\"Decrement number\">\n <IconDown />\n </SDown>\n <Children />\n </SControls>,\n );\n}\n\nexport default createComponent(InputNumber, {\n Value,\n Controls,\n Addon: Input.Addon,\n});\n"],"file":"InputNumber.js"}
|
package/lib/es6/buttons.js
CHANGED
|
@@ -15,15 +15,7 @@ var svg = function svg(orientation, width, height) {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
export default {
|
|
18
|
-
up:
|
|
19
|
-
|
|
20
|
-
l: svg('up', 10, 5),
|
|
21
|
-
m: svg('up', 8, 4)
|
|
22
|
-
},
|
|
23
|
-
down: {
|
|
24
|
-
xl: svg('down', 10, 5),
|
|
25
|
-
l: svg('down', 10, 5),
|
|
26
|
-
m: svg('down', 8, 4)
|
|
27
|
-
}
|
|
18
|
+
up: svg('up', 10, 5),
|
|
19
|
+
down: svg('down', 10, 5)
|
|
28
20
|
};
|
|
29
21
|
//# sourceMappingURL=buttons.js.map
|
package/lib/es6/buttons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/buttons.jsx"],"names":["React","svg","orientation","width","height","up","
|
|
1
|
+
{"version":3,"sources":["../../src/buttons.jsx"],"names":["React","svg","orientation","width","height","up","down"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,IAAMC,GAAG,GAAG,SAANA,GAAM,CAACC,WAAD,EAAcC,KAAd,EAAqBC,MAArB;AAAA,sBACV;AACE,IAAA,KAAK,EAAC,4BADR;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,KAAK,EAAED,KAHT;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,OAAO,gBAASD,KAAT,cAAkBC,MAAlB;AALT,KAOGF,WAAW,KAAK,IAAhB,gBACC;AAAM,IAAA,CAAC,eAAQE,MAAR,cAAkBA,MAAlB,eAA6BA,MAA7B,cAAuCA,MAAvC,cAAiDA,MAAjD;AAAP,IADD,gBAGC;AAAM,IAAA,CAAC,iBAAUD,KAAV,iBAAsBC,MAAtB,cAAgCA,MAAhC;AAAP,IAVJ,CADU;AAAA,CAAZ;;AAgBA,eAAe;AACbC,EAAAA,EAAE,EAAEJ,GAAG,CAAC,IAAD,EAAO,EAAP,EAAW,CAAX,CADM;AAEbK,EAAAA,IAAI,EAAEL,GAAG,CAAC,MAAD,EAAS,EAAT,EAAa,CAAb;AAFI,CAAf","sourcesContent":["import React from 'react';\n\nconst svg = (orientation, width, height) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width={width}\n height={height}\n viewBox={`0 0 ${width} ${height}`}\n >\n {orientation === 'up' ? (\n <path d={`M0,${height}l${height},-${height}l${height},${height}Z`} />\n ) : (\n <path d={`M0,0l${width},0l-${height},${height}Z`} />\n )}\n </svg>\n);\n\nexport default {\n up: svg('up', 10, 5),\n down: svg('down', 10, 5),\n};\n"],"file":"buttons.js"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { IInputAddonProps, IInputProps, IInputValueProps } from '@semcore/input';
|
|
4
|
+
|
|
5
|
+
export type InputNumberValue = string;
|
|
6
|
+
export type InputNumberSize = 'm' | 'l';
|
|
7
|
+
|
|
8
|
+
export interface IInputNumberProps extends IInputProps {
|
|
9
|
+
/** Input size
|
|
10
|
+
* @default m
|
|
11
|
+
* */
|
|
12
|
+
size?: InputNumberSize;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface IInputNumberValueProps extends IInputValueProps {
|
|
16
|
+
/** Minimum value
|
|
17
|
+
* @default Number.MIN_SAFE_INTEGER
|
|
18
|
+
*/
|
|
19
|
+
min?: number;
|
|
20
|
+
/** Maximum value
|
|
21
|
+
* @default Number.MAX_SAFE_INTEGER
|
|
22
|
+
*/
|
|
23
|
+
max?: number;
|
|
24
|
+
/** Value change step
|
|
25
|
+
* @default 1
|
|
26
|
+
*/
|
|
27
|
+
step?: number;
|
|
28
|
+
/** Numeric value */
|
|
29
|
+
value?: InputNumberValue;
|
|
30
|
+
/** Called when the input value changes, it returns its current value in numeric format */
|
|
31
|
+
onChange?: (value: InputNumberValue, event?: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export interface IInputNumberControlsProps extends IInputAddonProps {
|
|
35
|
+
/** Always displays controls (steppers)
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
showControls?: boolean;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export interface IInputNumberCtx {
|
|
42
|
+
getValueProps: PropGetterFn;
|
|
43
|
+
getControlsProps: PropGetterFn;
|
|
44
|
+
getAddonProps: PropGetterFn;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
declare const InputNumber: (<T>(
|
|
48
|
+
props: CProps<IInputNumberProps & T, IInputNumberCtx>,
|
|
49
|
+
) => ReturnEl) & {
|
|
50
|
+
Value: <T>(props: IInputNumberValueProps & T) => ReturnEl;
|
|
51
|
+
Controls: <T>(props: IInputNumberControlsProps & T) => ReturnEl;
|
|
52
|
+
Addon: <T>(props: IInputAddonProps & T) => ReturnEl;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export default InputNumber;
|
package/lib/es6/index.js
CHANGED
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB","sourcesContent":["export { default } from './InputNumber';\n"],"file":"index.js"}
|
|
@@ -19,38 +19,37 @@ SControls {
|
|
|
19
19
|
box-sizing: border-box;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
SControls[size='s'] {
|
|
23
|
-
width: 20px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
SControls[size='m'] {
|
|
27
|
-
width: 20px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
SControls[size='l'] {
|
|
31
|
-
width: 25px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
SControls[size='xl'] {
|
|
35
|
-
width: 32px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
22
|
SControls[showControls] {
|
|
39
23
|
visibility: visible;
|
|
40
24
|
}
|
|
41
25
|
|
|
42
26
|
SUp,
|
|
43
27
|
SDown {
|
|
44
|
-
|
|
28
|
+
padding: 0;
|
|
29
|
+
width: 16px;
|
|
30
|
+
color: var(--gray-300);
|
|
45
31
|
box-sizing: border-box;
|
|
46
32
|
display: inline-flex;
|
|
47
33
|
justify-content: center;
|
|
48
34
|
border: none;
|
|
49
35
|
background: none;
|
|
36
|
+
cursor: pointer;
|
|
50
37
|
|
|
51
38
|
&:focus {
|
|
52
39
|
outline: none;
|
|
53
40
|
}
|
|
41
|
+
|
|
42
|
+
&:hover {
|
|
43
|
+
color: var(--gray-600);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
SUp {
|
|
48
|
+
padding-bottom: 1px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
SDown {
|
|
52
|
+
padding-top: 1px;
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
SValue {
|
|
@@ -67,40 +66,6 @@ SValue {
|
|
|
67
66
|
|
|
68
67
|
SValue[disabled] ~ SControls {
|
|
69
68
|
opacity: var(--disabled-opacity);
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
SValue:not([disabled]) {
|
|
73
|
-
& ~ SControls SUp:hover {
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
color: var(--gray40);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
SValue:not([disabled]) ~ SControls SDown:hover {
|
|
80
|
-
cursor: pointer;
|
|
81
|
-
color: var(--gray40);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
SUp[size='m'] {
|
|
85
|
-
padding: 6px 6px 2px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
SDown[size='m'] {
|
|
89
|
-
padding: 2px 6px 6px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
SUp[size='l'] {
|
|
93
|
-
padding: 7px 8px 3px;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
SDown[size='l'] {
|
|
97
|
-
padding: 3px 8px 7px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
SUp[size='xl'] {
|
|
101
|
-
padding: 11px 11px 4px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
SDown[size='xl'] {
|
|
105
|
-
padding: 4px 11px 11px;
|
|
69
|
+
cursor: default;
|
|
70
|
+
pointer-events: none;
|
|
106
71
|
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
|
3
3
|
import { IInputAddonProps, IInputProps, IInputValueProps } from '@semcore/input';
|
|
4
4
|
|
|
5
5
|
export type InputNumberValue = string;
|
|
6
|
-
export type InputNumberSize = 'm' | 'l'
|
|
6
|
+
export type InputNumberSize = 'm' | 'l';
|
|
7
7
|
|
|
8
8
|
export interface IInputNumberProps extends IInputProps {
|
|
9
9
|
/** Input size
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/input-number",
|
|
3
3
|
"description": "SEMRush InputNumber Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "4.0.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@semcore/utils": "^3.15",
|
|
17
|
-
"@semcore/input": "^
|
|
17
|
+
"@semcore/input": "^3.0.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"@semcore/core": "^1.11",
|
|
@@ -27,5 +27,8 @@
|
|
|
27
27
|
"type": "git",
|
|
28
28
|
"url": "https://github.com/semrush/intergalactic.git",
|
|
29
29
|
"directory": "semcore/input-number"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@semcore/jest-preset-ui": "1.0.0"
|
|
30
33
|
}
|
|
31
34
|
}
|
package/src/InputNumber.jsx
CHANGED
|
@@ -9,8 +9,8 @@ function parseValueWithMinMax(value, min = Number.MIN_SAFE_INTEGER, max = Number
|
|
|
9
9
|
return Math.max(min, Math.min(max, value));
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
const IconUp = (
|
|
13
|
-
const IconDown = (
|
|
12
|
+
const IconUp = () => BUTTONS.up;
|
|
13
|
+
const IconDown = () => BUTTONS.down;
|
|
14
14
|
|
|
15
15
|
class InputNumber extends Component {
|
|
16
16
|
static displayName = 'InputNumber';
|
|
@@ -122,10 +122,10 @@ function Controls(props) {
|
|
|
122
122
|
return sstyled(styles)(
|
|
123
123
|
<SControls render={Input.Addon}>
|
|
124
124
|
<SUp onClick={inc} tabIndex={-1} type="button" size={size} aria-label="Increment number">
|
|
125
|
-
<IconUp
|
|
125
|
+
<IconUp />
|
|
126
126
|
</SUp>
|
|
127
127
|
<SDown onClick={dec} tabIndex={-1} type="button" size={size} aria-label="Decrement number">
|
|
128
|
-
<IconDown
|
|
128
|
+
<IconDown />
|
|
129
129
|
</SDown>
|
|
130
130
|
<Children />
|
|
131
131
|
</SControls>,
|
package/src/buttons.jsx
CHANGED
|
@@ -17,14 +17,6 @@ const svg = (orientation, width, height) => (
|
|
|
17
17
|
);
|
|
18
18
|
|
|
19
19
|
export default {
|
|
20
|
-
up:
|
|
21
|
-
|
|
22
|
-
l: svg('up', 10, 5),
|
|
23
|
-
m: svg('up', 8, 4),
|
|
24
|
-
},
|
|
25
|
-
down: {
|
|
26
|
-
xl: svg('down', 10, 5),
|
|
27
|
-
l: svg('down', 10, 5),
|
|
28
|
-
m: svg('down', 8, 4),
|
|
29
|
-
},
|
|
20
|
+
up: svg('up', 10, 5),
|
|
21
|
+
down: svg('down', 10, 5),
|
|
30
22
|
};
|
package/src/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
|
3
3
|
import { IInputAddonProps, IInputProps, IInputValueProps } from '@semcore/input';
|
|
4
4
|
|
|
5
5
|
export type InputNumberValue = string;
|
|
6
|
-
export type InputNumberSize = 'm' | 'l'
|
|
6
|
+
export type InputNumberSize = 'm' | 'l';
|
|
7
7
|
|
|
8
8
|
export interface IInputNumberProps extends IInputProps {
|
|
9
9
|
/** Input size
|
package/src/index.js
CHANGED
|
@@ -19,38 +19,37 @@ SControls {
|
|
|
19
19
|
box-sizing: border-box;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
SControls[size='s'] {
|
|
23
|
-
width: 20px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
SControls[size='m'] {
|
|
27
|
-
width: 20px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
SControls[size='l'] {
|
|
31
|
-
width: 25px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
SControls[size='xl'] {
|
|
35
|
-
width: 32px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
22
|
SControls[showControls] {
|
|
39
23
|
visibility: visible;
|
|
40
24
|
}
|
|
41
25
|
|
|
42
26
|
SUp,
|
|
43
27
|
SDown {
|
|
44
|
-
|
|
28
|
+
padding: 0;
|
|
29
|
+
width: 16px;
|
|
30
|
+
color: var(--gray-300);
|
|
45
31
|
box-sizing: border-box;
|
|
46
32
|
display: inline-flex;
|
|
47
33
|
justify-content: center;
|
|
48
34
|
border: none;
|
|
49
35
|
background: none;
|
|
36
|
+
cursor: pointer;
|
|
50
37
|
|
|
51
38
|
&:focus {
|
|
52
39
|
outline: none;
|
|
53
40
|
}
|
|
41
|
+
|
|
42
|
+
&:hover {
|
|
43
|
+
color: var(--gray-600);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
SUp {
|
|
48
|
+
padding-bottom: 1px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
SDown {
|
|
52
|
+
padding-top: 1px;
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
SValue {
|
|
@@ -67,40 +66,6 @@ SValue {
|
|
|
67
66
|
|
|
68
67
|
SValue[disabled] ~ SControls {
|
|
69
68
|
opacity: var(--disabled-opacity);
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
SValue:not([disabled]) {
|
|
73
|
-
& ~ SControls SUp:hover {
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
color: var(--gray40);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
SValue:not([disabled]) ~ SControls SDown:hover {
|
|
80
|
-
cursor: pointer;
|
|
81
|
-
color: var(--gray40);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
SUp[size='m'] {
|
|
85
|
-
padding: 6px 6px 2px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
SDown[size='m'] {
|
|
89
|
-
padding: 2px 6px 6px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
SUp[size='l'] {
|
|
93
|
-
padding: 7px 8px 3px;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
SDown[size='l'] {
|
|
97
|
-
padding: 3px 8px 7px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
SUp[size='xl'] {
|
|
101
|
-
padding: 11px 11px 4px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
SDown[size='xl'] {
|
|
105
|
-
padding: 4px 11px 11px;
|
|
69
|
+
cursor: default;
|
|
70
|
+
pointer-events: none;
|
|
106
71
|
}
|