@semcore/input-number 4.0.8 → 4.0.11
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/InputNumber.js +20 -16
- package/lib/cjs/InputNumber.js.map +1 -1
- package/lib/cjs/buttons.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/InputNumber.js +20 -16
- package/lib/es6/InputNumber.js.map +1 -1
- package/lib/es6/buttons.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/InputNumber.jsx +0 -141
- package/src/buttons.jsx +0 -22
- package/src/index.d.ts +0 -55
- package/src/index.js +0 -1
- package/src/style/input-number.shadow.css +0 -71
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
|
+
## [4.0.11] - 2022-07-25
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/input` [3.0.9 ~> 3.0.10]).
|
|
10
|
+
|
|
11
|
+
## [4.0.10] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/input` [3.0.8 ~> 3.0.9], `@semcore/utils` [3.34.0 ~> 3.35.0]).
|
|
16
|
+
|
|
17
|
+
## [4.0.9] - 2022-07-14
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/input` [3.0.7 ~> 3.0.8]).
|
|
22
|
+
|
|
5
23
|
## [4.0.8] - 2022-07-14
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/lib/cjs/InputNumber.js
CHANGED
|
@@ -48,19 +48,19 @@ var style = (
|
|
|
48
48
|
/*__reshadow_css_start__*/
|
|
49
49
|
_core.sstyled.insert(
|
|
50
50
|
/*__inner_css_start__*/
|
|
51
|
-
".
|
|
51
|
+
".___SInputNumber_1wb56_gg_:hover .___SValue_1wb56_gg_:not(.__disabled_1wb56_gg_)~.___SControls_1wb56_gg_{visibility:visible}.___SValue_1wb56_gg_:focus~.___SControls_1wb56_gg_{visibility:visible}.___SControls_1wb56_gg_{display:flex;flex-flow:column;justify-content:center;height:100%;visibility:hidden;box-sizing:border-box}.___SControls_1wb56_gg_.__showControls_1wb56_gg_{visibility:visible}.___SDown_1wb56_gg_,.___SUp_1wb56_gg_{padding:0;width:16px;color:#a9abb6;box-sizing:border-box;display:inline-flex;justify-content:center;border:none;background:none;cursor:pointer}.___SDown_1wb56_gg_:focus,.___SUp_1wb56_gg_:focus{outline:none}.___SDown_1wb56_gg_:hover,.___SUp_1wb56_gg_:hover{color:#484a54}.___SUp_1wb56_gg_{padding-bottom:1px}.___SDown_1wb56_gg_{padding-top:1px}.___SValue_1wb56_gg_::-webkit-inner-spin-button,.___SValue_1wb56_gg_::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.___SValue_1wb56_gg_._type_number_1wb56_gg_{-moz-appearance:textfield}.___SValue_1wb56_gg_.__disabled_1wb56_gg_~.___SControls_1wb56_gg_{opacity:0.3;cursor:default;pointer-events:none}"
|
|
52
52
|
/*__inner_css_end__*/
|
|
53
|
-
, "
|
|
53
|
+
, "1wb56_gg_")
|
|
54
54
|
/*__reshadow_css_end__*/
|
|
55
55
|
, {
|
|
56
|
-
"__SInputNumber": "
|
|
57
|
-
"__SValue": "
|
|
58
|
-
"_disabled": "
|
|
59
|
-
"__SControls": "
|
|
60
|
-
"_showControls": "
|
|
61
|
-
"__SDown": "
|
|
62
|
-
"__SUp": "
|
|
63
|
-
"_type_number": "
|
|
56
|
+
"__SInputNumber": "___SInputNumber_1wb56_gg_",
|
|
57
|
+
"__SValue": "___SValue_1wb56_gg_",
|
|
58
|
+
"_disabled": "__disabled_1wb56_gg_",
|
|
59
|
+
"__SControls": "___SControls_1wb56_gg_",
|
|
60
|
+
"_showControls": "__showControls_1wb56_gg_",
|
|
61
|
+
"__SDown": "___SDown_1wb56_gg_",
|
|
62
|
+
"__SUp": "___SUp_1wb56_gg_",
|
|
63
|
+
"_type_number": "_type_number_1wb56_gg_"
|
|
64
64
|
});
|
|
65
65
|
|
|
66
66
|
function parseValueWithMinMax(value) {
|
|
@@ -92,17 +92,21 @@ var InputNumber = /*#__PURE__*/function (_Component) {
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
95
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", _react["default"].createRef());
|
|
96
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputHandlersRef", _react["default"].createRef());
|
|
95
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", /*#__PURE__*/_react["default"].createRef());
|
|
96
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputHandlersRef", /*#__PURE__*/_react["default"].createRef());
|
|
97
97
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerInc", function (e) {
|
|
98
|
+
var _this$inputRef$curren, _this$inputRef$curren2, _this$inputHandlersRe;
|
|
99
|
+
|
|
98
100
|
// TODO: IE11 dont work
|
|
99
|
-
_this.inputRef.current
|
|
100
|
-
_this.inputHandlersRef.current
|
|
101
|
+
((_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.stepUp) && ((_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.stepUp());
|
|
102
|
+
(_this$inputHandlersRe = _this.inputHandlersRef.current) === null || _this$inputHandlersRe === void 0 ? void 0 : _this$inputHandlersRe.value(_this.inputRef.current.value, e);
|
|
101
103
|
});
|
|
102
104
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerDec", function (e) {
|
|
105
|
+
var _this$inputRef$curren3, _this$inputRef$curren4, _this$inputHandlersRe2;
|
|
106
|
+
|
|
103
107
|
// TODO: IE11 dont work
|
|
104
|
-
_this.inputRef.current
|
|
105
|
-
_this.inputHandlersRef.current
|
|
108
|
+
((_this$inputRef$curren3 = _this.inputRef.current) === null || _this$inputRef$curren3 === void 0 ? void 0 : _this$inputRef$curren3.stepDown) && ((_this$inputRef$curren4 = _this.inputRef.current) === null || _this$inputRef$curren4 === void 0 ? void 0 : _this$inputRef$curren4.stepDown());
|
|
109
|
+
(_this$inputHandlersRe2 = _this.inputHandlersRef.current) === null || _this$inputHandlersRe2 === void 0 ? void 0 : _this$inputHandlersRe2.value(_this.inputRef.current.value, e);
|
|
106
110
|
});
|
|
107
111
|
return _this;
|
|
108
112
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"InputNumber.js","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","sstyled","style","Component","Value","step","roundCoefficient","toString","split","length","isNaN","currentTarget","valueAsNumber","handlers","numberValue","parseFloat","r","roundRemainder","abs","numberValueRounded","toFixed","String","countDecimals","floor","toPrecision","SValue","styles","handleValidation","defaultValue","Controls","props","Children","SControls","Addon","SUp","SDown","createComponent"],"sources":["../../src/InputNumber.jsx"],"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 const roundCoefficient = step < 1 ? step.toString().split('.')[1].length : 1;\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 const numberValueRounded = Number(numberValue.toFixed(roundCoefficient));\n this.handlers.value(String(numberValueRounded), 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,oBAAT,CAA8BC,KAA9B,EAAmG;EAAA,IAA9DC,GAA8D,uEAAxDC,MAAM,CAACC,gBAAiD;EAAA,IAA/BC,GAA+B,uEAAzBF,MAAM,CAACG,gBAAkB;EACjG,OAAOC,IAAI,CAACF,GAAL,CAASH,GAAT,EAAcK,IAAI,CAACL,GAAL,CAASG,GAAT,EAAcJ,KAAd,CAAd,CAAP;AACD;;AAED,IAAMO,MAAM,GAAG,SAATA,MAAS;EAAA,OAAMC,mBAAA,CAAQC,EAAd;AAAA,CAAf;;AACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW;EAAA,OAAMF,mBAAA,CAAQG,IAAd;AAAA,CAAjB;;IAEMC,W;;;;;;;;;;;;;;;8GAOOC,iBAAA,CAAMC,SAAN,E;sHACQD,iBAAA,CAAMC,SAAN,E;mGAEN,UAACC,CAAD,EAAO;MAAA;;MAClB;MACA,gCAAKC,QAAL,CAAcC,OAAd,gFAAuBC,MAAvB,gCAAiC,MAAKF,QAAL,CAAcC,OAA/C,2DAAiC,uBAAuBC,MAAvB,EAAjC;MACA,+BAAKC,gBAAL,CAAsBF,OAAtB,gFAA+BjB,KAA/B,CAAqC,MAAKgB,QAAL,CAAcC,OAAd,CAAsBjB,KAA3D,EAAkEe,CAAlE;IACD,C;mGAEY,UAACA,CAAD,EAAO;MAAA;;MAClB;MACA,iCAAKC,QAAL,CAAcC,OAAd,kFAAuBG,QAAvB,gCAAmC,MAAKJ,QAAL,CAAcC,OAAjD,2DAAmC,uBAAuBG,QAAvB,EAAnC;MACA,gCAAKD,gBAAL,CAAsBF,OAAtB,kFAA+BjB,KAA/B,CAAqC,MAAKgB,QAAL,CAAcC,OAAd,CAAsBjB,KAA3D,EAAkEe,CAAlE;IACD,C;;;;;;WAED,yBAAgB;MACd,OAAO;QACLM,GAAG,EAAE,KAAKL,QADL;QAELM,cAAc,EAAE,KAAKH;MAFhB,CAAP;IAID;;;WAED,4BAAmB;MACjB,IAAQI,IAAR,GAAiB,KAAKC,OAAtB,CAAQD,IAAR;MACA,OAAO;QACLA,IAAI,EAAJA,IADK;QAELE,GAAG,EAAE,KAAKC,UAFL;QAGLC,GAAG,EAAE,KAAKC;MAHL,CAAP;IAKD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMC,YAAY,GACuCC,iBADzD;MACA,eAAO,IAAAC,aAAA,EAAQ,KAAKP,OAAL,CAAaQ,KAArB,CAAP,eAAmC,gCAAC,YAAD,gFAAnC;IACD;;;EAzCuBC,e;;iCAApBrB,W,iBACiB,a;iCADjBA,W,WAEWoB,K;iCAFXpB,W,kBAGkB;EACpBW,IAAI,EAAE;AADc,C;;IAyClBW,K;;;;;;;;;;;;;;;0GAmBe,UAACnB,CAAD,EAAO;MACxB,qBAAkC,OAAKS,OAAvC;MAAA,IAAQxB,KAAR,kBAAQA,KAAR;MAAA,IAAeC,GAAf,kBAAeA,GAAf;MAAA,IAAoBG,GAApB,kBAAoBA,GAApB;MAAA,IAAyB+B,IAAzB,kBAAyBA,IAAzB;MACA,IAAMC,gBAAgB,GAAGD,IAAI,GAAG,CAAP,GAAWA,IAAI,CAACE,QAAL,GAAgBC,KAAhB,CAAsB,GAAtB,EAA2B,CAA3B,EAA8BC,MAAzC,GAAkD,CAA3E;;MACA,IAAIrC,MAAM,CAACsC,KAAP,CAAazB,CAAC,CAAC0B,aAAF,CAAgBC,aAA7B,CAAJ,EAAiD;QAC/C3B,CAAC,CAAC0B,aAAF,CAAgBzC,KAAhB,GAAwB,EAAxB;;QACA,OAAK2C,QAAL,CAAc3C,KAAd,CAAoB,EAApB,EAAwBe,CAAxB;MACD,CAHD,MAGO;QACL,IAAI6B,WAAW,GAAG7C,oBAAoB,CAACG,MAAM,CAAC2C,UAAP,CAAkB7C,KAAlB,CAAD,EAA2BC,GAA3B,EAAgCG,GAAhC,CAAtC;;QACA,IAAM0C,CAAC,GAAG,OAAKC,cAAL,CAAoBH,WAAW,GAAGT,IAAlC,EAAwCA,IAAxC,CAAV;;QACA,IAAIW,CAAC,KAAK,CAAV,EAAa;UACX,IAAIA,CAAC,IAAIX,IAAI,GAAG,CAAhB,EAAmB;YACjBS,WAAW,IAAIT,IAAI,GAAGW,CAAtB;UACD,CAFD,MAEO,IAAIxC,IAAI,CAAC0C,GAAL,CAASF,CAAT,IAAcX,IAAlB,EAAwB;YAC7BS,WAAW,IAAIE,CAAf;UACD;QACF;;QACD,IAAMG,kBAAkB,GAAG/C,MAAM,CAAC0C,WAAW,CAACM,OAAZ,CAAoBd,gBAApB,CAAD,CAAjC;;QACA,OAAKO,QAAL,CAAc3C,KAAd,CAAoBmD,MAAM,CAACF,kBAAD,CAA1B,EAAgDlC,CAAhD;MACD;IACF,C;;;;;;WAhCD,6BAAoB;MAClB,OAAO;QACLf,KAAK,EAAE;MADF,CAAP;IAGD;;;WAED,wBAAeA,KAAf,EAAsBmC,IAAtB,EAA4B;MAC1B,IAAMiB,aAAa,GAAG9C,IAAI,CAAC+C,KAAL,CAAWlB,IAAX,MAAqBA,IAArB,GAA4B,CAA5B,GAAgCA,IAAI,CAACE,QAAL,GAAgBC,KAAhB,CAAsB,GAAtB,EAA2B,CAA3B,EAA8BC,MAA9B,IAAwC,CAA9F;MACA,OAAOa,aAAa,KAAK,CAAlB,GACHlD,MAAM,CAAC2C,UAAP,CAAkB7C,KAAlB,CADG,GAEHE,MAAM,CAAC2C,UAAP,CAAkB7C,KAAlB,EAAyBsD,WAAzB,CAAqCF,aAArC,CAFJ;IAGD;;;WAuBD,kBAAS;MAAA;MAAA;;MACP,IAAMG,MAAM,GAQAzB,iBAAA,CAAMI,KARlB;MACA,oBAAmC,KAAKV,OAAxC;MAAA,IAAQgC,MAAR,iBAAQA,MAAR;MAAA,IAAgBlC,cAAhB,iBAAgBA,cAAhB,CAFO,CAIP;;MACAA,cAAc,CAACL,OAAf,GAAyB,KAAK0B,QAA9B;MAEA,eAAO,IAAAZ,aAAA,EAAQyB,MAAR,CAAP,eACE,gCAAC,MAAD;QAAA,QAEO,QAFP;QAAA,gBAGe,KAHf;QAAA,UAIU,KAAKC,gBAJf;QAAA,aAKa,KAAKA;MALlB,YADF;IASD;;;EAxDiBxB,e;;iCAAdC,K,kBACkB;EACpBwB,YAAY,EAAE,EADM;EAEpBvB,IAAI,EAAE;AAFc,C;;AA0DxB,SAASwB,QAAT,CAAkBC,KAAlB,EAAyB;EAAA;EAAA;;EACvB,IAAQC,QAAR,GAA6CD,KAA7C,CAAQC,QAAR;EAAA,IAAkBpC,GAAlB,GAA6CmC,KAA7C,CAAkBnC,GAAlB;EAAA,IAAuBE,GAAvB,GAA6CiC,KAA7C,CAAuBjC,GAAvB;EAAA,IAA4BJ,IAA5B,GAA6CqC,KAA7C,CAA4BrC,IAA5B;EAAA,IAAkCiC,MAAlC,GAA6CI,KAA7C,CAAkCJ,MAAlC;EACA,IAAMM,SAAS,GAKMhC,iBAAA,CAAMiC,KAL3B;EACA,IAAMC,GAAG,GAAG,QAAZ;EACA,IAAMC,KAAK,GAAG,QAAd;EAEA,eAAO,IAAAlC,aAAA,EAAQyB,MAAR,CAAP,eACE,gCAAC,SAAD,4FACE,gCAAC,GAAD;IAAA,WAAc/B,GAAd;IAAA,YAA6B,CAAC,CAA9B;IAAA,QAAsC,QAAtC;IAAA,QAAqDF,IAArD;IAAA,cAAsE;EAAtE,iBACE,gCAAC,MAAD,yBADF,CADF,eAIE,gCAAC,KAAD;IAAA,WAAgBI,GAAhB;IAAA,YAA+B,CAAC,CAAhC;IAAA,QAAwC,QAAxC;IAAA,QAAuDJ,IAAvD;IAAA,cAAwE;EAAxE,iBACE,gCAAC,QAAD,2BADF,CAJF,eAOE,gCAAC,QAAD,2BAPF,CADF;AAWD;;eAEc,IAAA2C,gBAAA,EAAgBtD,WAAhB,EAA6B;EAC1CsB,KAAK,EAALA,KAD0C;EAE1CyB,QAAQ,EAARA,QAF0C;EAG1CI,KAAK,EAAEjC,iBAAA,CAAMiC;AAH6B,CAA7B,C"}
|
package/lib/cjs/buttons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"buttons.js","names":["svg","orientation","width","height","up","down"],"sources":["../../src/buttons.jsx"],"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"],"mappings":";;;;;;;;;AAAA;;AAEA,IAAMA,GAAG,GAAG,SAANA,GAAM,CAACC,WAAD,EAAcC,KAAd,EAAqBC,MAArB;EAAA,oBACV;IACE,KAAK,EAAC,4BADR;IAEE,IAAI,EAAC,cAFP;IAGE,KAAK,EAAED,KAHT;IAIE,MAAM,EAAEC,MAJV;IAKE,OAAO,gBAASD,KAAT,cAAkBC,MAAlB;EALT,GAOGF,WAAW,KAAK,IAAhB,gBACC;IAAM,CAAC,eAAQE,MAAR,cAAkBA,MAAlB,eAA6BA,MAA7B,cAAuCA,MAAvC,cAAiDA,MAAjD;EAAP,EADD,gBAGC;IAAM,CAAC,iBAAUD,KAAV,iBAAsBC,MAAtB,cAAgCA,MAAhC;EAAP,EAVJ,CADU;AAAA,CAAZ;;eAgBe;EACbC,EAAE,EAAEJ,GAAG,CAAC,IAAD,EAAO,EAAP,EAAW,CAAX,CADM;EAEbK,IAAI,EAAEL,GAAG,CAAC,MAAD,EAAS,EAAT,EAAa,CAAb;AAFI,C"}
|
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 './InputNumber';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/InputNumber.js
CHANGED
|
@@ -28,19 +28,19 @@ var style = (
|
|
|
28
28
|
/*__reshadow_css_start__*/
|
|
29
29
|
_sstyled.insert(
|
|
30
30
|
/*__inner_css_start__*/
|
|
31
|
-
".
|
|
31
|
+
".___SInputNumber_1wb56_gg_:hover .___SValue_1wb56_gg_:not(.__disabled_1wb56_gg_)~.___SControls_1wb56_gg_{visibility:visible}.___SValue_1wb56_gg_:focus~.___SControls_1wb56_gg_{visibility:visible}.___SControls_1wb56_gg_{display:flex;flex-flow:column;justify-content:center;height:100%;visibility:hidden;box-sizing:border-box}.___SControls_1wb56_gg_.__showControls_1wb56_gg_{visibility:visible}.___SDown_1wb56_gg_,.___SUp_1wb56_gg_{padding:0;width:16px;color:#a9abb6;box-sizing:border-box;display:inline-flex;justify-content:center;border:none;background:none;cursor:pointer}.___SDown_1wb56_gg_:focus,.___SUp_1wb56_gg_:focus{outline:none}.___SDown_1wb56_gg_:hover,.___SUp_1wb56_gg_:hover{color:#484a54}.___SUp_1wb56_gg_{padding-bottom:1px}.___SDown_1wb56_gg_{padding-top:1px}.___SValue_1wb56_gg_::-webkit-inner-spin-button,.___SValue_1wb56_gg_::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.___SValue_1wb56_gg_._type_number_1wb56_gg_{-moz-appearance:textfield}.___SValue_1wb56_gg_.__disabled_1wb56_gg_~.___SControls_1wb56_gg_{opacity:0.3;cursor:default;pointer-events:none}"
|
|
32
32
|
/*__inner_css_end__*/
|
|
33
|
-
, "
|
|
33
|
+
, "1wb56_gg_")
|
|
34
34
|
/*__reshadow_css_end__*/
|
|
35
35
|
, {
|
|
36
|
-
"__SInputNumber": "
|
|
37
|
-
"__SValue": "
|
|
38
|
-
"_disabled": "
|
|
39
|
-
"__SControls": "
|
|
40
|
-
"_showControls": "
|
|
41
|
-
"__SDown": "
|
|
42
|
-
"__SUp": "
|
|
43
|
-
"_type_number": "
|
|
36
|
+
"__SInputNumber": "___SInputNumber_1wb56_gg_",
|
|
37
|
+
"__SValue": "___SValue_1wb56_gg_",
|
|
38
|
+
"_disabled": "__disabled_1wb56_gg_",
|
|
39
|
+
"__SControls": "___SControls_1wb56_gg_",
|
|
40
|
+
"_showControls": "__showControls_1wb56_gg_",
|
|
41
|
+
"__SDown": "___SDown_1wb56_gg_",
|
|
42
|
+
"__SUp": "___SUp_1wb56_gg_",
|
|
43
|
+
"_type_number": "_type_number_1wb56_gg_"
|
|
44
44
|
});
|
|
45
45
|
|
|
46
46
|
function parseValueWithMinMax(value) {
|
|
@@ -73,20 +73,24 @@ var InputNumber = /*#__PURE__*/function (_Component) {
|
|
|
73
73
|
|
|
74
74
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
75
75
|
|
|
76
|
-
_defineProperty(_assertThisInitialized(_this), "inputRef", React.createRef());
|
|
76
|
+
_defineProperty(_assertThisInitialized(_this), "inputRef", /*#__PURE__*/React.createRef());
|
|
77
77
|
|
|
78
|
-
_defineProperty(_assertThisInitialized(_this), "inputHandlersRef", React.createRef());
|
|
78
|
+
_defineProperty(_assertThisInitialized(_this), "inputHandlersRef", /*#__PURE__*/React.createRef());
|
|
79
79
|
|
|
80
80
|
_defineProperty(_assertThisInitialized(_this), "handlerInc", function (e) {
|
|
81
|
+
var _this$inputRef$curren, _this$inputRef$curren2, _this$inputHandlersRe;
|
|
82
|
+
|
|
81
83
|
// TODO: IE11 dont work
|
|
82
|
-
_this.inputRef.current
|
|
83
|
-
_this.inputHandlersRef.current
|
|
84
|
+
((_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.stepUp) && ((_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.stepUp());
|
|
85
|
+
(_this$inputHandlersRe = _this.inputHandlersRef.current) === null || _this$inputHandlersRe === void 0 ? void 0 : _this$inputHandlersRe.value(_this.inputRef.current.value, e);
|
|
84
86
|
});
|
|
85
87
|
|
|
86
88
|
_defineProperty(_assertThisInitialized(_this), "handlerDec", function (e) {
|
|
89
|
+
var _this$inputRef$curren3, _this$inputRef$curren4, _this$inputHandlersRe2;
|
|
90
|
+
|
|
87
91
|
// TODO: IE11 dont work
|
|
88
|
-
_this.inputRef.current
|
|
89
|
-
_this.inputHandlersRef.current
|
|
92
|
+
((_this$inputRef$curren3 = _this.inputRef.current) === null || _this$inputRef$curren3 === void 0 ? void 0 : _this$inputRef$curren3.stepDown) && ((_this$inputRef$curren4 = _this.inputRef.current) === null || _this$inputRef$curren4 === void 0 ? void 0 : _this$inputRef$curren4.stepDown());
|
|
93
|
+
(_this$inputHandlersRe2 = _this.inputHandlersRef.current) === null || _this$inputHandlersRe2 === void 0 ? void 0 : _this$inputHandlersRe2.value(_this.inputRef.current.value, e);
|
|
90
94
|
});
|
|
91
95
|
|
|
92
96
|
return _this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"InputNumber.js","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","roundCoefficient","toString","split","length","isNaN","currentTarget","valueAsNumber","handlers","numberValue","parseFloat","r","roundRemainder","abs","numberValueRounded","toFixed","String","countDecimals","floor","toPrecision","SValue","styles","handleValidation","defaultValue","Controls","props","Children","SControls","Addon","SUp","SDown"],"sources":["../../src/InputNumber.jsx"],"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 const roundCoefficient = step < 1 ? step.toString().split('.')[1].length : 1;\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 const numberValueRounded = Number(numberValue.toFixed(roundCoefficient));\n this.handlers.value(String(numberValueRounded), 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"],"mappings":"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"}
|
package/lib/es6/buttons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"buttons.js","names":["React","svg","orientation","width","height","up","down"],"sources":["../../src/buttons.jsx"],"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"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,IAAMC,GAAG,GAAG,SAANA,GAAM,CAACC,WAAD,EAAcC,KAAd,EAAqBC,MAArB;EAAA,oBACV;IACE,KAAK,EAAC,4BADR;IAEE,IAAI,EAAC,cAFP;IAGE,KAAK,EAAED,KAHT;IAIE,MAAM,EAAEC,MAJV;IAKE,OAAO,gBAASD,KAAT,cAAkBC,MAAlB;EALT,GAOGF,WAAW,KAAK,IAAhB,gBACC;IAAM,CAAC,eAAQE,MAAR,cAAkBA,MAAlB,eAA6BA,MAA7B,cAAuCA,MAAvC,cAAiDA,MAAjD;EAAP,EADD,gBAGC;IAAM,CAAC,iBAAUD,KAAV,iBAAsBC,MAAtB,cAAgCA,MAAhC;EAAP,EAVJ,CADU;AAAA,CAAZ;;AAgBA,eAAe;EACbC,EAAE,EAAEJ,GAAG,CAAC,IAAD,EAAO,EAAP,EAAW,CAAX,CADM;EAEbK,IAAI,EAAEL,GAAG,CAAC,MAAD,EAAS,EAAT,EAAa,CAAb;AAFI,CAAf"}
|
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 './InputNumber';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB"}
|
package/package.json
CHANGED
package/src/InputNumber.jsx
DELETED
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import Input from '@semcore/input';
|
|
4
|
-
import BUTTONS from './buttons';
|
|
5
|
-
|
|
6
|
-
import style from './style/input-number.shadow.css';
|
|
7
|
-
|
|
8
|
-
function parseValueWithMinMax(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
|
|
9
|
-
return Math.max(min, Math.min(max, value));
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const IconUp = () => BUTTONS.up;
|
|
13
|
-
const IconDown = () => BUTTONS.down;
|
|
14
|
-
|
|
15
|
-
class InputNumber extends Component {
|
|
16
|
-
static displayName = 'InputNumber';
|
|
17
|
-
static style = style;
|
|
18
|
-
static defaultProps = {
|
|
19
|
-
size: 'm',
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
inputRef = React.createRef();
|
|
23
|
-
inputHandlersRef = React.createRef();
|
|
24
|
-
|
|
25
|
-
handlerInc = (e) => {
|
|
26
|
-
// TODO: IE11 dont work
|
|
27
|
-
this.inputRef.current?.stepUp && this.inputRef.current?.stepUp();
|
|
28
|
-
this.inputHandlersRef.current?.value(this.inputRef.current.value, e);
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
handlerDec = (e) => {
|
|
32
|
-
// TODO: IE11 dont work
|
|
33
|
-
this.inputRef.current?.stepDown && this.inputRef.current?.stepDown();
|
|
34
|
-
this.inputHandlersRef.current?.value(this.inputRef.current.value, e);
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
getValueProps() {
|
|
38
|
-
return {
|
|
39
|
-
ref: this.inputRef,
|
|
40
|
-
$inputHandlers: this.inputHandlersRef,
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
getControlsProps() {
|
|
45
|
-
const { size } = this.asProps;
|
|
46
|
-
return {
|
|
47
|
-
size,
|
|
48
|
-
inc: this.handlerInc,
|
|
49
|
-
dec: this.handlerDec,
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
render() {
|
|
54
|
-
const SInputNumber = Root;
|
|
55
|
-
return sstyled(this.asProps.style)(<SInputNumber render={Input} />);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
class Value extends Component {
|
|
60
|
-
static defaultProps = {
|
|
61
|
-
defaultValue: '',
|
|
62
|
-
step: 1,
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
uncontrolledProps() {
|
|
66
|
-
return {
|
|
67
|
-
value: null,
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
roundRemainder(value, step) {
|
|
72
|
-
const countDecimals = Math.floor(step) === step ? 0 : step.toString().split('.')[1].length || 0;
|
|
73
|
-
return countDecimals === 0
|
|
74
|
-
? Number.parseFloat(value)
|
|
75
|
-
: Number.parseFloat(value).toPrecision(countDecimals);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
handleValidation = (e) => {
|
|
79
|
-
const { value, min, max, step } = this.asProps;
|
|
80
|
-
const roundCoefficient = step < 1 ? step.toString().split('.')[1].length : 1;
|
|
81
|
-
if (Number.isNaN(e.currentTarget.valueAsNumber)) {
|
|
82
|
-
e.currentTarget.value = '';
|
|
83
|
-
this.handlers.value('', e);
|
|
84
|
-
} else {
|
|
85
|
-
let numberValue = parseValueWithMinMax(Number.parseFloat(value), min, max);
|
|
86
|
-
const r = this.roundRemainder(numberValue % step, step);
|
|
87
|
-
if (r !== 0) {
|
|
88
|
-
if (r >= step / 2) {
|
|
89
|
-
numberValue += step - r;
|
|
90
|
-
} else if (Math.abs(r) < step) {
|
|
91
|
-
numberValue -= r;
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
const numberValueRounded = Number(numberValue.toFixed(roundCoefficient));
|
|
95
|
-
this.handlers.value(String(numberValueRounded), e);
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
render() {
|
|
100
|
-
const SValue = Root;
|
|
101
|
-
const { styles, $inputHandlers } = this.asProps;
|
|
102
|
-
|
|
103
|
-
// 🐒 не делайте так
|
|
104
|
-
$inputHandlers.current = this.handlers;
|
|
105
|
-
|
|
106
|
-
return sstyled(styles)(
|
|
107
|
-
<SValue
|
|
108
|
-
render={Input.Value}
|
|
109
|
-
type="number"
|
|
110
|
-
autoComplete="off"
|
|
111
|
-
onBlur={this.handleValidation}
|
|
112
|
-
onInvalid={this.handleValidation}
|
|
113
|
-
/>,
|
|
114
|
-
);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
function Controls(props) {
|
|
119
|
-
const { Children, inc, dec, size, styles } = props;
|
|
120
|
-
const SControls = Root;
|
|
121
|
-
const SUp = 'button';
|
|
122
|
-
const SDown = 'button';
|
|
123
|
-
|
|
124
|
-
return sstyled(styles)(
|
|
125
|
-
<SControls render={Input.Addon}>
|
|
126
|
-
<SUp onClick={inc} tabIndex={-1} type="button" size={size} aria-label="Increment number">
|
|
127
|
-
<IconUp />
|
|
128
|
-
</SUp>
|
|
129
|
-
<SDown onClick={dec} tabIndex={-1} type="button" size={size} aria-label="Decrement number">
|
|
130
|
-
<IconDown />
|
|
131
|
-
</SDown>
|
|
132
|
-
<Children />
|
|
133
|
-
</SControls>,
|
|
134
|
-
);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
export default createComponent(InputNumber, {
|
|
138
|
-
Value,
|
|
139
|
-
Controls,
|
|
140
|
-
Addon: Input.Addon,
|
|
141
|
-
});
|
package/src/buttons.jsx
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const svg = (orientation, width, height) => (
|
|
4
|
-
<svg
|
|
5
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
-
fill="currentColor"
|
|
7
|
-
width={width}
|
|
8
|
-
height={height}
|
|
9
|
-
viewBox={`0 0 ${width} ${height}`}
|
|
10
|
-
>
|
|
11
|
-
{orientation === 'up' ? (
|
|
12
|
-
<path d={`M0,${height}l${height},-${height}l${height},${height}Z`} />
|
|
13
|
-
) : (
|
|
14
|
-
<path d={`M0,0l${width},0l-${height},${height}Z`} />
|
|
15
|
-
)}
|
|
16
|
-
</svg>
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
export default {
|
|
20
|
-
up: svg('up', 10, 5),
|
|
21
|
-
down: svg('down', 10, 5),
|
|
22
|
-
};
|
package/src/index.d.ts
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
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/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './InputNumber';
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SInputNumber:hover {
|
|
4
|
-
& SValue:not([disabled]) ~ SControls {
|
|
5
|
-
visibility: visible;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
SValue:focus ~ SControls {
|
|
10
|
-
visibility: visible;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
SControls {
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-flow: column;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
height: 100%;
|
|
18
|
-
visibility: hidden;
|
|
19
|
-
box-sizing: border-box;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
SControls[showControls] {
|
|
23
|
-
visibility: visible;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
SUp,
|
|
27
|
-
SDown {
|
|
28
|
-
padding: 0;
|
|
29
|
-
width: 16px;
|
|
30
|
-
color: var(--gray-300);
|
|
31
|
-
box-sizing: border-box;
|
|
32
|
-
display: inline-flex;
|
|
33
|
-
justify-content: center;
|
|
34
|
-
border: none;
|
|
35
|
-
background: none;
|
|
36
|
-
cursor: pointer;
|
|
37
|
-
|
|
38
|
-
&:focus {
|
|
39
|
-
outline: none;
|
|
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;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
SValue {
|
|
56
|
-
&::-webkit-outer-spin-button,
|
|
57
|
-
&::-webkit-inner-spin-button {
|
|
58
|
-
-webkit-appearance: none;
|
|
59
|
-
margin: 0;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&[type='number'] {
|
|
63
|
-
-moz-appearance: textfield;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
SValue[disabled] ~ SControls {
|
|
68
|
-
opacity: var(--disabled-opacity);
|
|
69
|
-
cursor: default;
|
|
70
|
-
pointer-events: none;
|
|
71
|
-
}
|