feat(NumberPicker): force set type=inline while device=phone

alibaba-fusion · Aug 5, 2019 · 0666869 · 0666869
1 parent f07260f
commit 0666869
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 7 deletions.
diff --git a/docs/form/demo/mobile.md b/docs/form/demo/mobile.md
@@ -34,10 +34,6 @@ class Demo extends React.Component {
         device: 'desktop'
     }
 
-    handleSubmit = (values) => {
-        console.log('Get form value:', values);
-    };
-
     handleDeviceChange = (device) => {
         this.setState({
             device
@@ -70,7 +66,7 @@ class Demo extends React.Component {
                         <Checkbox name="baseAgreement" defaultChecked>Agree</Checkbox>
                     </FormItem>
                     <FormItem label=" ">
-                        <Form.Submit onClick={this.handleSubmit}>Confirm</Form.Submit>
+                        <Form.Submit >Confirm</Form.Submit>
                     </FormItem>
                 </Form>
             </div>

diff --git a/docs/number-picker/demo/mobile.md b/docs/number-picker/demo/mobile.md
@@ -0,0 +1,50 @@
+# 移动端
+
+- order: 9
+
+device=phone 下会强制设置 type=normal
+
+:::lang=en-us
+# Basic Usage
+
+- order: 9
+
+force set type=normal while device=phone
+
+:::
+---
+
+````jsx
+import { NumberPicker, Radio } from '@alifd/next';
+
+class Demo extends React.Component {
+    state = {
+        device: 'desktop'
+    }
+
+    handleDeviceChange = (device) => {
+        this.setState({
+            device
+        })
+    };
+
+    render() {
+        return (
+            <div>
+                <Radio.Group
+                    shape="button"
+                    value={this.state.device}
+                    onChange={this.handleDeviceChange}
+                >
+                    <Radio value="desktop">desktop</Radio>
+                    <Radio value="phone">phone</Radio>
+                </Radio.Group>
+                <hr/>
+                <NumberPicker device={this.state.device}/>
+            </div>
+        );
+    }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+````
diff --git a/src/number-picker/number-picker.jsx b/src/number-picker/number-picker.jsx
@@ -115,6 +115,10 @@ class NumberPicker extends React.Component {
          */
         innerAfter: PropTypes.node,
         rtl: PropTypes.bool,
+        /**
+         * 预设屏幕宽度
+         */
+        device: PropTypes.oneOf(['phone', 'tablet', 'desktop']),
     };
 
     static defaultProps = {
@@ -418,7 +422,7 @@ class NumberPicker extends React.Component {
 
     render() {
         const {
-            type,
+            device,
             prefix,
             rtl,
             disabled,
@@ -436,11 +440,13 @@ class NumberPicker extends React.Component {
             innerAfter,
         } = this.props;
 
+        let type = device === 'phone' ? 'inline' : this.props.type;
+
         const prefixCls = `${prefix}number-picker`;
 
         const cls = classNames({
             [prefixCls]: true,
-            [`${prefixCls}-${this.props.type}`]: this.props.type,
+            [`${prefixCls}-${type}`]: type,
             [`${prefix}${size}`]: true,
             [className]: className,
         });