feat(DatePicker): support 0.x ranges

rosky · Apr 28, 2019 · 59d0483 · 59d0483
1 parent 34603cc
commit 59d0483
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 4 deletions.
diff --git a/docs/date-picker/demo/basic.md b/docs/date-picker/demo/basic.md
@@ -21,10 +21,21 @@ import { DatePicker } from '@alifd/next';
 const { RangePicker, MonthPicker, YearPicker } = DatePicker;
 const onChange = val => console.log(val);
 
+const now = new Date();
+const start = (new Date()).setDate(1);
+const end = (new Date()).setDate(7);
+
+
+const quickRanges = {
+    Today: [ now, now ],
+    'First Week': [ start, end ],
+};
+
+
 ReactDOM.render(<div>
     <DatePicker onChange={onChange} /> <br /><br />
     <MonthPicker onChange={onChange} /> <br /><br />
     <YearPicker onChange={onChange} /> <br /><br />
-    <RangePicker onChange={onChange} />
+    <RangePicker ranges={quickRanges} onChange={onChange} />
 </div>, mountNode);
 ````
diff --git a/src/date-picker/index.jsx b/src/date-picker/index.jsx
@@ -49,6 +49,10 @@ const transform = (props, deprecated) => {
         deprecated('format', 'format: PropTypes.string,', 'DatePicker');
     }
 
+    if ('ranges' in props) {
+        deprecated('ranges', 'footerRender: PropTypes.func', 'RangePicker');
+    }
+
     return newProps;
 };
 

diff --git a/src/date-picker/main.scss b/src/date-picker/main.scss
@@ -36,9 +36,14 @@
             border-top: $popup-local-border-width $popup-local-border-style $popup-local-border-color;
         }
 
-        &-footer > #{$date-picker-btn-prefix}:not(:last-child) {
+        &-footer > #{$date-picker-btn-prefix}:not(:last-child),
+        &-tools > #{$date-picker-btn-prefix}:not(:last-child) {
             margin-right: $s-4;
         }
+
+        &-tools {
+            float: left;
+        }
     }
 
     .#{$css-prefix}calendar-panel-header {

diff --git a/src/date-picker/module/panel-footer.jsx b/src/date-picker/module/panel-footer.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import Button from '../../button';
 import { func } from '../../util';
 import { PANEL } from '../util';
@@ -17,12 +18,40 @@ class PanelFooter extends React.PureComponent {
         this.props.onPanelChange(targetPanel);
     };
 
+    createRanges = ranges => {
+        if (!ranges || ranges.length === 0) return null;
+        const { onOk, prefix } = this.props;
+
+        return (
+            <div className={`${prefix}date-picker-panel-tools`}>
+                {ranges.map(({ label, value = [], onChange }) => {
+                    const handleClick = () => {
+                        onChange(value.map(v => moment(v)));
+                        onOk();
+                    };
+                    return (
+                        <Button
+                            key={label}
+                            text
+                            size="small"
+                            type="primary"
+                            onClick={handleClick}
+                        >
+                            {label}
+                        </Button>
+                    );
+                })}
+            </div>
+        );
+    };
+
     render() {
         const {
             prefix,
             locale,
             panel,
             value,
+            ranges, // 兼容0.x range 属性
             disabledOk,
             onPanelChange,
             onOk,
@@ -40,6 +69,7 @@ class PanelFooter extends React.PureComponent {
 
         return (
             <div className={`${prefix}date-picker-panel-footer`}>
+                {this.createRanges(ranges)}
                 {onPanelChange ? (
                     <Button {...sharedBtnProps} text onClick={this.changePanel}>
                         {panelBtnLabel}

diff --git a/src/date-picker/range-picker.jsx b/src/date-picker/range-picker.jsx
@@ -194,6 +194,7 @@ export default class RangePicker extends Component {
          * 结束时间输入框的 aria-label 属性
          */
         endTimeInputAriaLabel: PropTypes.string,
+        ranges: PropTypes.object,
         locale: PropTypes.object,
         className: PropTypes.string,
     };
@@ -270,7 +271,7 @@ export default class RangePicker extends Component {
         }
     }
 
-    onValueChange(values, handler = 'onChange') {
+    onValueChange = (values, handler = 'onChange') => {
         let ret;
         if (!values.length || !this.inputAsString) {
             ret = values;
@@ -281,7 +282,7 @@ export default class RangePicker extends Component {
             ];
         }
         this.props[handler](ret);
-    }
+    };
 
     onSelectCalendarPanel = value => {
         const { showTime, resetTime } = this.props;
@@ -675,6 +676,7 @@ export default class RangePicker extends Component {
             disabledDate,
             footerRender,
             label,
+            ranges = {}, // 兼容0.x ranges 属性
             state: inputState,
             size,
             disabled,
@@ -899,6 +901,17 @@ export default class RangePicker extends Component {
             <PanelFooter
                 prefix={prefix}
                 value={state.startValue && state.endValue}
+                ranges={Object.keys(ranges).map(key => ({
+                    label: key,
+                    value: ranges[key],
+                    onChange: values => {
+                        this.setState({
+                            startValue: values[0],
+                            endValue: values[1],
+                        });
+                        this.onValueChange(values);
+                    },
+                }))}
                 disabledOk={
                     !state.startValue ||
                     !state.endValue ||