@autobest-ui/components 2.1.1 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/esm/input-number/ControlArrow.d.ts +7 -0
  2. package/esm/input-number/ControlArrow.js +34 -0
  3. package/esm/input-number/constants.d.ts +2 -0
  4. package/esm/input-number/constants.js +4 -0
  5. package/esm/input-number/index.d.ts +79 -96
  6. package/esm/input-number/index.js +221 -457
  7. package/esm/input-number/style/index.css +1 -1
  8. package/esm/input-number/style/index.scss +50 -67
  9. package/esm/style.css +1 -1
  10. package/lib/input-number/ControlArrow.d.ts +7 -0
  11. package/lib/input-number/ControlArrow.js +43 -0
  12. package/lib/input-number/constants.d.ts +2 -0
  13. package/lib/input-number/constants.js +12 -0
  14. package/lib/input-number/index.d.ts +79 -96
  15. package/lib/input-number/index.js +225 -458
  16. package/lib/input-number/style/index.css +1 -1
  17. package/lib/input-number/style/index.scss +50 -67
  18. package/lib/style.css +1 -1
  19. package/package.json +3 -3
package/esm/input-number/style/index.css CHANGED
@@ -1 +1 @@
1
- .ab-input-number{padding:.06rem .07rem;-webkit-appearance:none;outline:0;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;font-size:.12rem;transition:all .3s;position:relative;background-color:transparent;z-index:2}.ab-input-number:focus{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-input-number-wrap{position:relative;background-color:#fff;display:inline-block}.ab-input-number-button-wrap{position:absolute;user-select:none;top:50%;transform:translateY(-50%);right:.02rem}.ab-input-number-button{position:relative;width:.16rem;height:.1rem;overflow:hidden;background-color:#f1f1f1}.ab-input-number-button.ab-input-number-hover{background-color:#d0d0d0}.ab-input-number-button.ab-input-number-active{background-color:#787878}.ab-input-number-button.ab-input-number-active .ab-input-number-add{border-bottom-color:#fff}.ab-input-number-button.ab-input-number-active .ab-input-number-sub{border-top-color:#fff}.ab-input-number-button:first-child{margin-bottom:.02rem}.ab-input-number-add{position:absolute;top:-.01rem;left:.04rem;display:block;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#505050;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}.ab-input-number-sub{display:block;margin:.03rem 0 0 .04rem;border-top-color:#505050;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}
1
+ .ab-input-number{position:relative;border:1px solid #ccc;overflow:hidden}.ab-input-number-control{-webkit-appearance:none;display:block;outline:0;border:none;width:100%;height:100%;padding:.06rem .06rem;background-color:transparent;font-size:.12rem}.ab-input-number-arrow{font-size:.08rem;position:absolute;right:0;top:0;width:.22rem;height:100%;background-color:#fff;display:none;flex-direction:column;border-left:1px solid #f1f1f1}.ab-input-number-down,.ab-input-number-up{cursor:pointer;width:100%;height:50%;display:flex;align-items:center;justify-content:center}.ab-input-number-down:hover,.ab-input-number-up:hover{background-color:#e2e2e2}.ab-input-number-down:active,.ab-input-number-up:active{background-color:#929292;color:#fff}.ab-input-number-up{border-bottom:1px solid #f1f1f1}.ab-input-number.ab-input-number-enter,.ab-input-number.ab-input-number-focus{border-color:#348fee}.ab-input-number.ab-input-number-enter .ab-input-number-arrow,.ab-input-number.ab-input-number-focus .ab-input-number-arrow{display:flex}.ab-input-number.ab-input-number-focus{box-shadow:0 0 4px #348fee}.ab-input-number.ab-input-number-disabled .ab-input-number-control{cursor:not-allowed}
package/esm/input-number/style/index.scss CHANGED
@@ -1,87 +1,70 @@
1
1
  $namespace: ab-input-number;
2
2
 
3
3
  .#{$namespace} {
4
- padding: .06rem .07rem;
5
- -webkit-appearance: none;
6
- outline: none;
7
- width: 100%;
8
- border: 1px solid #ccc;
9
- border-radius: 2px;
10
- resize: none;
11
- font-size: .12rem;
12
- transition: all .3s;
13
4
  position: relative;
14
- background-color: transparent;
15
- z-index: 2;
5
+ border: 1px solid #ccc;
6
+ overflow: hidden;
16
7
 
17
- &:focus {
18
- box-shadow: 0 0 4px rgba(#348FEE, 0.8);
19
- border-color: rgba(#348FEE, 0.8);
8
+ &-control {
9
+ -webkit-appearance: none;
10
+ display: block;
11
+ outline: none;
12
+ border: none;
13
+ width: 100%;
14
+ height: 100%;
15
+ padding: .06rem .06rem;
16
+ background-color: transparent;
17
+ font-size: .12rem;
20
18
  }
21
19
 
22
- &-wrap {
23
- position: relative;
20
+ &-arrow {
21
+ font-size: 0.08rem;
22
+ position: absolute;
23
+ right: 0;
24
+ top: 0;
25
+ width: 0.22rem;
26
+ height: 100%;
24
27
  background-color: #fff;
25
- display: inline-block;
28
+ display: none;
29
+ flex-direction: column;
30
+ border-left: 1px solid #f1f1f1;
26
31
  }
27
32
 
28
- &-button-wrap {
29
- position: absolute;
30
- user-select: none;
31
- top: 50%;
32
- transform: translateY(-50%);
33
- right: .02rem;
34
- }
33
+ &-up, &-down {
34
+ cursor: pointer;
35
+ width: 100%;
36
+ height: 50%;
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
35
40
 
36
- &-button {
37
- position: relative;
38
- width: .16rem;
39
- height: .1rem;
40
- overflow: hidden;
41
- background-color: #f1f1f1;
42
- &.#{$namespace}-hover {
43
- background-color: #d0d0d0;
44
- }
45
- &.#{$namespace}-active {
46
- background-color: #787878;
47
- .#{$namespace}-add {
48
- border-bottom-color: #fff;
49
- }
50
- .#{$namespace}-sub {
51
- border-top-color: #fff;
52
- }
41
+ &:hover {
42
+ background-color: #e2e2e2;
53
43
  }
54
44
 
55
- &:first-child {
56
- margin-bottom: .02rem;
45
+ &:active {
46
+ background-color: #929292;
47
+ color: #fff;
57
48
  }
58
49
  }
59
50
 
60
- &-add {
61
- position: absolute;
62
- top: -.01rem;
63
- left: .04rem;
64
- display: block;
65
- border-top-color: transparent;
66
- border-right-color: transparent;
67
- border-bottom-color: #505050;
68
- border-left-color: transparent;
69
- border-width: .04rem;
70
- border-style: solid;
71
- width: 0;
72
- height: 0;
51
+ &-up {
52
+ border-bottom: 1px solid #f1f1f1;
73
53
  }
74
54
 
75
- &-sub {
76
- display: block;
77
- margin: .03rem 0 0 .04rem;
78
- border-top-color: #505050;
79
- border-right-color: transparent;
80
- border-bottom-color: transparent;
81
- border-left-color: transparent;
82
- border-width: .04rem;
83
- border-style: solid;
84
- width: 0;
85
- height: 0;
55
+ &.#{$namespace}-enter, &.#{$namespace}-focus {
56
+ .#{$namespace}-arrow {
57
+ display: flex;
58
+ }
59
+ border-color: #348FEE;
60
+ }
61
+
62
+ &.#{$namespace}-focus {
63
+ box-shadow: 0 0 4px #348FEE;
64
+ }
65
+ &.#{$namespace}-disabled {
66
+ .#{$namespace}-control {
67
+ cursor: not-allowed;
68
+ }
86
69
  }
87
70
  }
package/esm/style.css CHANGED
@@ -9,7 +9,7 @@ a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd
9
9
  .ab-drawer{position:fixed;z-index:101;background-color:#fff;overflow:auto;transition:transform .3s cubic-bezier(.7,.3,.1,1)}.ab-drawer-times{position:absolute;right:.17rem;font-size:.16rem;color:#b0b0b0;cursor:pointer;top:.11rem}.ab-drawer-times:hover{color:#333}.ab-drawer-tf-top{transform:translate(0,-100%)}.ab-drawer-tf-bottom{transform:translate(0,100%)}.ab-drawer-tf-left{transform:translate(-100%,0)}.ab-drawer-tf-right{transform:translate(100%,0)}.ab-drawer-hidden.ab-drawer,.ab-drawer-hidden.ab-mask{display:none}
10
10
  .ab-ellipsis{overflow:hidden;display:block;display:-webkit-box;-webkit-box-orient:vertical}.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:5}@media only screen and (max-width:767px){.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-m-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-m-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-m-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-m-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-m-line5{-webkit-line-clamp:5}}
11
11
  .ab-guide-mask.ab-mask{background-color:rgba(0,0,0,.7);z-index:4}.ab-guide-icon{position:absolute;z-index:5}.ab-guide-content{position:relative;z-index:6}
12
- .ab-input-number{padding:.06rem .07rem;-webkit-appearance:none;outline:0;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;font-size:.12rem;transition:all .3s;position:relative;background-color:transparent;z-index:2}.ab-input-number:focus{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-input-number-wrap{position:relative;background-color:#fff;display:inline-block}.ab-input-number-button-wrap{position:absolute;user-select:none;top:50%;transform:translateY(-50%);right:.02rem}.ab-input-number-button{position:relative;width:.16rem;height:.1rem;overflow:hidden;background-color:#f1f1f1}.ab-input-number-button.ab-input-number-hover{background-color:#d0d0d0}.ab-input-number-button.ab-input-number-active{background-color:#787878}.ab-input-number-button.ab-input-number-active .ab-input-number-add{border-bottom-color:#fff}.ab-input-number-button.ab-input-number-active .ab-input-number-sub{border-top-color:#fff}.ab-input-number-button:first-child{margin-bottom:.02rem}.ab-input-number-add{position:absolute;top:-.01rem;left:.04rem;display:block;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#505050;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}.ab-input-number-sub{display:block;margin:.03rem 0 0 .04rem;border-top-color:#505050;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}
12
+ .ab-input-number{position:relative;border:1px solid #ccc;overflow:hidden}.ab-input-number-control{-webkit-appearance:none;display:block;outline:0;border:none;width:100%;height:100%;padding:.06rem .06rem;background-color:transparent;font-size:.12rem}.ab-input-number-arrow{font-size:.08rem;position:absolute;right:0;top:0;width:.22rem;height:100%;background-color:#fff;display:none;flex-direction:column;border-left:1px solid #f1f1f1}.ab-input-number-down,.ab-input-number-up{cursor:pointer;width:100%;height:50%;display:flex;align-items:center;justify-content:center}.ab-input-number-down:hover,.ab-input-number-up:hover{background-color:#e2e2e2}.ab-input-number-down:active,.ab-input-number-up:active{background-color:#929292;color:#fff}.ab-input-number-up{border-bottom:1px solid #f1f1f1}.ab-input-number.ab-input-number-enter,.ab-input-number.ab-input-number-focus{border-color:#348fee}.ab-input-number.ab-input-number-enter .ab-input-number-arrow,.ab-input-number.ab-input-number-focus .ab-input-number-arrow{display:flex}.ab-input-number.ab-input-number-focus{box-shadow:0 0 4px #348fee}.ab-input-number.ab-input-number-disabled .ab-input-number-control{cursor:not-allowed}
13
13
  .ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
14
14
  .ab-link-list-title{font-size:.16rem;margin:0 0;padding:0 0 .12rem 0;display:flex;justify-content:space-between;align-items:center}.ab-link-list-icon{display:none}.ab-link-list-content{flex-wrap:wrap;width:auto;margin-right:-.15rem}.ab-link-list-content.ab-link-list-col2>a,.ab-link-list-content.ab-link-list-col2>span{min-width:calc(100% / 2 - .15rem);max-width:calc(100% / 2 - .15rem)}.ab-link-list-content.ab-link-list-col4>a,.ab-link-list-content.ab-link-list-col4>span{min-width:calc(100% / 4 - .15rem);max-width:calc(100% / 4 - .15rem)}.ab-link-list-content.ab-link-list-col5>a,.ab-link-list-content.ab-link-list-col5>span{min-width:calc(100% / 5 - .15rem);max-width:calc(100% / 5 - .15rem)}.ab-link-list-content.ab-link-list-col6>a,.ab-link-list-content.ab-link-list-col6>span{min-width:calc(100% / 6 - .15rem);max-width:calc(100% / 6 - .15rem)}.ab-link-list-content.ab-link-list-col8>a,.ab-link-list-content.ab-link-list-col8>span{min-width:calc(100% / 8 - .15rem);max-width:calc(100% / 8 - .15rem)}.ab-link-list-content>a,.ab-link-list-content>span{cursor:pointer;border:.5px solid #d0d0d0;margin-bottom:8px;display:inline-block;justify-content:space-between;align-items:center;width:100%;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.085rem .15rem .085rem .12rem;color:#333;margin-right:.15rem}.ab-link-list-content>a:after,.ab-link-list-content>span:after{content:">";position:absolute;right:.1rem;top:50%;transform:translateY(-50%);color:grey;font-size:.12rem}.ab-link-list-content>a:hover,.ab-link-list-content>span:hover{text-decoration:underline;color:#f97601}.ab-link-list-content>.ab-link-list-hidden{display:none}.ab-link-list-wrap-popover.ab-popover-wrap{max-width:3.5rem;min-width:3rem}.ab-link-list-sub-title{display:block;padding-bottom:.06rem;font-size:.12rem}.ab-link-list-sub-link{text-decoration:underline;color:#333;font-size:.12rem;padding:0 .05rem .05rem 0;display:inline-block}@media only screen and (max-width:767px){.ab-link-list-divider{border-bottom:1px solid #d0d0d0}.ab-link-list-body{height:0;width:0;overflow:hidden}.ab-link-list-body.ab-link-list-active{height:auto;width:auto}.ab-link-list-content>a,.ab-link-list-content>span{min-width:calc(50% - .15rem)!important;max-width:calc(50% - .15rem)!important}.ab-link-list-icon{font-weight:700;font-size:.22rem;cursor:pointer;width:.2rem;height:.2rem;display:flex;align-items:center;justify-content:center}}
15
15
  .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}
package/lib/input-number/ControlArrow.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ export interface ControlArrowProps {
3
+ cls: string;
4
+ onKeyup: (ev: React.MouseEvent) => void;
5
+ onKeydown: (ev: React.MouseEvent) => void;
6
+ }
7
+ export default function ControlArrow(props: ControlArrowProps): JSX.Element;
package/lib/input-number/ControlArrow.js ADDED
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = ControlArrow;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ function ArrowIcon(props) {
13
+ return /*#__PURE__*/_react.default.createElement("svg", {
14
+ xmlns: "http://www.w3.org/2000/svg",
15
+ viewBox: "0 0 8 16",
16
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
17
+ width: "1em",
18
+ height: "1em",
19
+ fill: "currentColor",
20
+ style: {
21
+ transform: "rotate(".concat(props.rotateDeg, "deg)")
22
+ }
23
+ }, /*#__PURE__*/_react.default.createElement("path", {
24
+ d: "M0 0l8 8-8 8V0z",
25
+ fillRule: "evenodd"
26
+ }));
27
+ }
28
+
29
+ function ControlArrow(props) {
30
+ return /*#__PURE__*/_react.default.createElement("div", {
31
+ className: "".concat(props.cls, "-arrow")
32
+ }, /*#__PURE__*/_react.default.createElement("span", {
33
+ className: "".concat(props.cls, "-up"),
34
+ onMouseDown: props.onKeyup
35
+ }, /*#__PURE__*/_react.default.createElement(ArrowIcon, {
36
+ rotateDeg: -90
37
+ })), /*#__PURE__*/_react.default.createElement("span", {
38
+ className: "".concat(props.cls, "-down"),
39
+ onMouseDown: props.onKeydown
40
+ }, /*#__PURE__*/_react.default.createElement(ArrowIcon, {
41
+ rotateDeg: 90
42
+ })));
43
+ }
package/lib/input-number/constants.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const NumberReg: RegExp;
2
+ export declare const FirstZeroReg: RegExp;
package/lib/input-number/constants.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.NumberReg = exports.FirstZeroReg = void 0;
7
+ // 只能输入数字格式
8
+ var NumberReg = /^(-?\d+)(\.\d*)?$/; // 0 开头后面直接是数字，没有点如：011, 01.11， 这是不合法的
9
+
10
+ exports.NumberReg = NumberReg;
11
+ var FirstZeroReg = /^0\d+(\.\d*)?$/;
12
+ exports.FirstZeroReg = FirstZeroReg;
package/lib/input-number/index.d.ts CHANGED
@@ -1,26 +1,22 @@
1
1
  import React from 'react';
2
- import { debounce, AddListenerEventHandler } from '@autobest-ui/utils';
3
- interface OnChangeHandler {
4
- (value: string, name?: string): void;
5
- }
6
- interface ChangeEvent {
7
- target: {
8
- value: string | number;
9
- };
10
- }
11
- export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, 'onChange'> {
2
+ import { AddListenerEventHandler } from '@autobest-ui/utils';
3
+ export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, 'onChange' | 'onBlur' | 'onFocus'> {
12
4
  /**
13
- * 值修改后的回调函数，用于修改value属性
5
+ * 输入框默认值，用于非受控组件，配合ref使用
14
6
  */
15
- onChange: OnChangeHandler;
7
+ defaultValue?: number | string;
8
+ /**
9
+ * 输入框中的值
10
+ */
11
+ value?: number | string;
16
12
  /**
17
13
  * input样式
18
14
  */
19
15
  className?: string;
20
16
  /**
21
- * 输入框中的值
17
+ * 输入框的别名
22
18
  */
23
- value?: string | number;
19
+ name?: string;
24
20
  /**
25
21
  * 最小值
26
22
  */
@@ -30,116 +26,103 @@ export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, '
30
26
  */
31
27
  max?: number;
32
28
  /**
33
- * 打包值，向上取整，不赋值或者赋值为0表示不做取整操作
34
- * 注：packMultiple不允许传小数
29
+ * 数值精度, 0 => 整数， null => 没有限制
35
30
  */
36
- packMultiple?: number;
31
+ precision?: number;
37
32
  /**
38
33
  * 输入框是否可以操作
39
34
  */
40
35
  disabled?: boolean;
41
36
  /**
42
- * 可输入的小数位数，0或没有值表示只能输入整数
37
+ * 是否使用上下控制按钮
43
38
  */
44
- digital?: number;
39
+ controls?: boolean;
45
40
  /**
46
- * 为true则自动补全小数位数
41
+ * 每次改变的大小，作用在上下控制按钮上
47
42
  */
48
- padDigital?: boolean;
43
+ step?: number;
49
44
  /**
50
- * 输入框默认字符大小
45
+ * 是否启用键盘上下快捷行为
51
46
  */
52
- size?: number;
47
+ keyboard?: boolean;
53
48
  /**
54
- * 输入框的别名
55
- */
56
- name?: string;
57
- /**
58
- * 防抖时间 单位： ms
49
+ * 值修改后的回调函数，用于修改value属性
59
50
  */
60
- delay?: number;
51
+ onChange?: (parserValue: number | undefined, name?: string) => void;
61
52
  /**
62
- * packMultiple 有值时，判断前的回调函数
53
+ * 值发生改变将会触发，onChange是不合法将不在触发，只在最后onBlur时再触发一次
54
+ * 该方法主要用在用户输入内容判断上，不要在此方法中执行修改value的操作
63
55
  */
64
- onChangePackMultipleBefore?: OnChangeHandler;
56
+ onContinualChange?: (originalValue: string | number | undefined, parserValue: number | undefined, name?: string) => void;
65
57
  /**
66
- * packMultiple 有值时，判断后的回调函数
58
+ * 获得焦点的回调函数
67
59
  */
68
- onChangePackMultipleAfter?: OnChangeHandler;
60
+ onFocus?: (parserValue: number | undefined, name?: string) => void;
69
61
  /**
70
- * 是否需要显示增加按钮
62
+ * 失去焦点的回调函数
71
63
  */
72
- visibleButton?: boolean;
64
+ onBlur?: (parserValue: number | undefined, name?: string) => void;
73
65
  }
74
66
  interface InputNumberStates {
75
- enter: boolean;
76
- focus: boolean;
67
+ originalValueStr: string | undefined;
68
+ parserValue: number | undefined;
69
+ isEnterInput: boolean;
70
+ isFocusInput: boolean;
77
71
  }
78
- interface LocationInfo {
79
- left: number;
80
- top: number;
81
- width: number;
82
- height: number;
72
+ interface InputNumberPropsWithRef extends InputNumberProps {
73
+ /**
74
+ * 此属性可以忽略， storybook问题
75
+ */
76
+ upperRef: React.Ref<HTMLInputElement>;
83
77
  }
84
- declare class InputNumber extends React.Component<InputNumberProps, InputNumberStates> {
78
+ export declare class InputNumberNotRef extends React.Component<InputNumberPropsWithRef, InputNumberStates> {
79
+ prefixCls: string;
80
+ inputRef: React.RefObject<HTMLInputElement>;
81
+ keyboardHandler: AddListenerEventHandler;
85
82
  static defaultProps: {
86
- value: string;
87
- name: string;
88
- size: number;
89
- disabled: boolean;
90
- digital: number;
91
- padDigital: boolean;
92
- delay: number;
93
- visibleButton: boolean;
83
+ defaultValue: string;
84
+ controls: boolean;
85
+ step: number;
86
+ keyboard: boolean;
94
87
  };
95
- constructor(props: InputNumberProps);
96
- currentRef: React.RefObject<HTMLLabelElement>;
97
- changePackMultipleValueDebounce: ReturnType<typeof debounce>;
98
- padDigitalDebounce: ReturnType<typeof debounce>;
99
- addLocationInfo: LocationInfo;
100
- subLocationInfo: LocationInfo;
101
- mouseUpHandler: AddListenerEventHandler;
102
- mouseMoveHandler: AddListenerEventHandler;
103
- componentDidMount(): void;
88
+ constructor(props: InputNumberPropsWithRef);
89
+ static getDerivedStateFromProps(nextProps: InputNumberPropsWithRef, prevStates: InputNumberStates): InputNumberStates;
104
90
  componentWillUnmount(): void;
105
- onFocus: (e: any) => void;
106
- onBlur: (e: any) => void;
91
+ /**
92
+ * 解析用户输入的内容，并返回解析后的结果
93
+ * @param originalValue
94
+ */
95
+ getParserOriginalValue: (originalValue: string) => string | undefined;
96
+ /**
97
+ * 键盘和点击上下按钮更新value值
98
+ * @param isUp
99
+ */
100
+ changeValueWithStep: (isUp: boolean) => void;
101
+ /**
102
+ * 设置input焦点
103
+ */
104
+ setInputFocus: () => void;
105
+ onKeyboard: (ev: KeyboardEvent) => void;
106
+ onFocus: (ev: {
107
+ target: HTMLInputElement;
108
+ }) => void;
109
+ onBlur: (ev: {
110
+ target: HTMLInputElement;
111
+ }) => void;
112
+ /**
113
+ * 修改value值的回调
114
+ * 注：value值当不在合法时，将不再触发onChange
115
+ * 在输入结束后（onBlur时），触发最后一次
116
+ * @param ev
117
+ */
118
+ onChangeValue: (ev: {
119
+ target: HTMLInputElement;
120
+ }) => void;
121
+ onKeyup: (ev: React.MouseEvent) => void;
122
+ onKeydown: (ev: React.MouseEvent) => void;
107
123
  onMouseEnter: () => void;
108
124
  onMouseLeave: () => void;
109
- onMouseMove: (ev: React.MouseEvent) => void;
110
- onMouseDown: (ev: React.MouseEvent) => void;
111
- onMouseUp: () => void;
112
- addMouseMoveListener: () => void;
113
- addMouseUpListener: () => void;
114
- getElement: () => {
115
- inputEl: HTMLInputElement;
116
- addBtnEl: HTMLDivElement;
117
- subBtnEl: HTMLDivElement;
118
- };
119
- getMouseElement: (ev: React.MouseEvent) => {
120
- isAdd: boolean;
121
- isSub: boolean;
122
- };
123
- isInside: (ev: React.MouseEvent, locationInfo: LocationInfo) => boolean;
124
- getLocationInfo: () => void;
125
- getCurrentValue: (value: string) => number;
126
- getPadDigitalValue: (value: string) => string;
127
- onChangePackMultipleValue: (value: string) => void;
128
- onPadDigital: (value: any) => void;
129
- getPadDigitalDebounce: () => {
130
- (...arg: any[]): void;
131
- cancel(): void;
132
- };
133
- getChangePackMultipleValueDebounce: () => {
134
- (...arg: any[]): void;
135
- cancel(): void;
136
- };
137
- callback: (value: string, ignoreDelay?: any) => void;
138
- onValueChange: (ev: ChangeEvent, ignoreDelay?: any) => void;
139
- getValueCalculate: (value: number, offset: number) => number;
140
- onAdd: () => void;
141
- onSub: () => void;
142
- renderButton: () => JSX.Element;
143
125
  render(): JSX.Element;
144
126
  }
127
+ declare const InputNumber: React.ComponentType<InputNumberProps>;
145
128
  export default InputNumber;