fix(NumberPicker): support innerAfter. Close #860

alibaba-fusion · Jul 9, 2019 · 4c0e018 · 4c0e018
1 parent b49a35e
commit 4c0e018
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 31 deletions.
diff --git a/docs/number-picker/demo/format.md b/docs/number-picker/demo/format.md
@@ -17,7 +17,11 @@ const intlize = val => Intl.NumberFormat('en-US').format(val);
 
 ReactDOM.render(
     <div>
-        <NumberPicker format={intlize} />
+        <NumberPicker format={intlize} defaultValue={5000} />
+        <br/><br/>
+        <NumberPicker label="p:" format={val => `${val}%`} defaultValue={85} />
+        <br/><br/>
+        <NumberPicker innerAfter="%" />
     </div>,
     mountNode
 );

diff --git a/docs/number-picker/index.md b/docs/number-picker/index.md
@@ -49,6 +49,7 @@
 | format       | 格式化当前值<br><br>**签名**:<br>Function(value: Number) => String/Number<br>**参数**:<br>_value_: {Number} null<br>**返回值**:<br>{String/Number} null<br> | Function      | -         |
 | upBtnProps   | 增加按钮的props                                                                                                                                     | Object        | -         |
 | downBtnProps | 减少按钮的props                                                                                                                                     | Object        | -         |
+| label        | label                                                                                                                                          | ReactNode     | -         |
 
 ## ARIA and KeyBoard
 

diff --git a/src/number-picker/main.scss b/src/number-picker/main.scss
@@ -24,6 +24,10 @@
             input {
                 padding-right: 2px;
             }
+
+            .#{$css-prefix}input-control {
+                padding-right: 0;
+            }
         }
 
         .#{$css-prefix}btn {
@@ -57,6 +61,7 @@
             opacity: 0;
             transition: opacity .24s linear .1s;
             height: 100%;
+            display: block;
         }
 
         &:hover #{$number-picker-prefix}-handler {
@@ -167,6 +172,7 @@
     }
 }
 #{$number-picker-prefix}-inline[dir="rtl"] {
+
     .#{$css-prefix}btn {
         border-radius: 0;
     }
@@ -180,3 +186,9 @@
         border-bottom-left-radius: $form-element-medium-corner !important;
     }
 }
+#{$number-picker-prefix}-normal[dir="rtl"] {
+    .#{$css-prefix}input .#{$css-prefix}input-control {
+        padding-left: 0;
+    }
+}
+
diff --git a/src/number-picker/number-picker.jsx b/src/number-picker/number-picker.jsx
@@ -106,6 +106,14 @@ class NumberPicker extends React.Component {
          * 减少按钮的props
          */
         downBtnProps: PropTypes.object,
+        /**
+         * 内联 label
+         */
+        label: PropTypes.node,
+        /**
+         * inner after
+         */
+        innerAfter: PropTypes.node,
         rtl: PropTypes.bool,
     };
 
@@ -422,8 +430,10 @@ class NumberPicker extends React.Component {
             autoFocus,
             editable,
             state,
+            label,
             upBtnProps = {},
             downBtnProps = {},
+            innerAfter,
         } = this.props;
 
         const prefixCls = `${prefix}number-picker`;
@@ -448,38 +458,37 @@ class NumberPicker extends React.Component {
             }
         }
 
-        let innerAfter = null,
+        let extra = null,
             innerAfterClassName = null,
             addonBefore = null,
             addonAfter = null;
         if (type === 'normal') {
-            innerAfter = [
-                <Button
-                    {...upBtnProps}
-                    onMouseDown={this.handleMouseDown}
-                    disabled={disabled}
-                    className={`${upBtnProps.className || ''} ${
-                        upDisabled ? 'disabled' : ''
-                    }`}
-                    onClick={this.up.bind(this, upDisabled)}
-                    key="0"
-                >
-                    <Icon size="xxs" type="arrow-up" />
-                </Button>,
-                <Button
-                    {...downBtnProps}
-                    onMouseDown={this.handleMouseDown}
-                    disabled={disabled}
-                    className={`${downBtnProps.className || ''} ${
-                        downDisabled ? 'disabled' : ''
-                    }`}
-                    onClick={this.down.bind(this, downDisabled)}
-                    key="1"
-                >
-                    <Icon size="xxs" type="arrow-down" />
-                </Button>,
-            ];
-            innerAfterClassName = `${prefixCls}-handler`;
+            extra = (
+                <span className={`${prefixCls}-handler`}>
+                    <Button
+                        {...upBtnProps}
+                        onMouseDown={this.handleMouseDown}
+                        disabled={disabled}
+                        className={`${upBtnProps.className || ''} ${
+                            upDisabled ? 'disabled' : ''
+                        }`}
+                        onClick={this.up.bind(this, upDisabled)}
+                    >
+                        <Icon size="xxs" type="arrow-up" />
+                    </Button>
+                    <Button
+                        {...downBtnProps}
+                        onMouseDown={this.handleMouseDown}
+                        disabled={disabled}
+                        className={`${downBtnProps.className || ''} ${
+                            downDisabled ? 'disabled' : ''
+                        }`}
+                        onClick={this.down.bind(this, downDisabled)}
+                    >
+                        <Icon size="xxs" type="arrow-down" />
+                    </Button>
+                </span>
+            );
         } else {
             addonBefore = (
                 <Button
@@ -534,8 +543,9 @@ class NumberPicker extends React.Component {
                     size={size}
                     onChange={this.onChange.bind(this)}
                     ref={this.saveInputRef.bind(this)}
+                    label={label}
                     innerAfter={innerAfter}
-                    innerAfterClassName={innerAfterClassName}
+                    extra={extra}
                     addonBefore={addonBefore}
                     addonAfter={addonAfter}
                 />
@@ -544,4 +554,4 @@ class NumberPicker extends React.Component {
     }
 }
 
-export default ConfigProvider.config(NumberPicker);
+export default NumberPicker;