Merge pull request #377 from Kate605690919/master

Date和DateRange的快捷键支持自定义方式

scss/components/form/_date.scss

@@ -83,10 +83,13 @@
 }
 
 .#{$ns}DatePicker-shortcuts {
-  margin: $gap-sm $gap-md (-$gap-sm) $gap-md;
+  margin: $gap-sm $gap-md $gap-sm $gap-md;
   padding: 0;
   list-style: none;
   max-width: 206px;
+  & + .rdt .rdtPicker {
+    padding-top: 0;
+  }
 }
 
 .#{$ns}DatePicker-shortcut {

src/components/DatePicker.tsx

@@ -20,6 +20,7 @@ import {classPrefix, classnames} from '../themes/default';
 import {ClassNamesFn, themeable} from '../theme';
 import {findDOMNode} from 'react-dom';
 import find from 'lodash/find';
+import {PlainObject} from '../types';
 
 class HackedCalendarContainer extends CalendarContainer {
   render() {
@@ -767,6 +768,21 @@ const advancedShortcuts = [
   }
 ];
 
+export type ShortCuts =
+  | {
+      label: string;
+      value: string;
+    }
+  | {
+      label: string;
+      date: moment.Moment;
+    }
+  | {
+      label: string;
+      startDate?: moment.Moment;
+      endDate?: moment.Moment;
+    };
+
 export interface DateProps {
   viewMode: 'years' | 'months' | 'days' | 'time';
   className?: string;
@@ -788,7 +804,7 @@ export interface DateProps {
   utc?: boolean;
   onChange: (value: any) => void;
   value: any;
-  shortcuts: string;
+  shortcuts: string | Array<ShortCuts>;
   [propName: string]: any;
 }
 
@@ -829,6 +845,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     this.getParent = this.getParent.bind(this);
     this.getTarget = this.getTarget.bind(this);
     this.handlePopOverClick = this.handlePopOverClick.bind(this);
+    this.renderShortCuts = this.renderShortCuts.bind(this);
   }
 
   dom: HTMLDivElement;
@@ -978,6 +995,47 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     return null;
   }
 
+  renderShortCuts(shortcuts: string | Array<ShortCuts>) {
+    if (!shortcuts) {
+      return null;
+    }
+    const {classPrefix: ns} = this.props;
+    let shortcutArr: Array<string | ShortCuts>;
+    if (typeof shortcuts === 'string') {
+      shortcutArr = shortcuts.split(',');
+    } else {
+      shortcutArr = shortcuts;
+    }
+    return (
+      <ul className={`${ns}DatePicker-shortcuts`}>
+        {shortcutArr.map(item => {
+          if (!item) {
+            return null;
+          }
+          let shortcut: PlainObject = {};
+          if (typeof item === 'string') {
+            shortcut = this.getAvailableShortcuts(item);
+            shortcut.key = item;
+          } else if (item.date) {
+            shortcut = {
+              ...item,
+              date: () => item.date
+            };
+          }
+          return (
+            <li
+              className={`${ns}DatePicker-shortcut`}
+              onClick={() => this.selectRannge(shortcut)}
+              key={shortcut.key || shortcut.label}
+            >
+              <a>{shortcut.label}</a>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
   render() {
     const {
       classPrefix: ns,
@@ -1048,32 +1106,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
               overlay
               onClick={this.handlePopOverClick}
             >
-              {shortcuts ? (
+              {this.renderShortCuts(shortcuts)}
-                <ul className={`${ns}DatePicker-shortcuts`}>
-                  {(typeof shortcuts === 'string'
-                    ? shortcuts.split(',')
-                    : Array.isArray(shortcuts)
-                    ? shortcuts
-                    : []
-                  ).map(key => {
-                    const shortcut = this.getAvailableShortcuts(key);
-
-                    if (!shortcut) {
-                      return null;
-                    }
-
-                    return (
-                      <li
-                        className={`${ns}DatePicker-shortcut`}
-                        onClick={() => this.selectRannge(shortcut)}
-                        key={key}
-                      >
-                        <a>{shortcut.label}</a>
-                      </li>
-                    );
-                  })}
-                </ul>
-              ) : null}
 
               <BaseDatePicker
                 value={date}

src/components/DateRangePicker.tsx

@@ -10,9 +10,10 @@ import {findDOMNode} from 'react-dom';
 import cx from 'classnames';
 import {Icon} from './icons';
 import Overlay from './Overlay';
-import {BaseDatePicker} from './DatePicker';
+import {BaseDatePicker, ShortCuts} from './DatePicker';
 import PopOver from './PopOver';
 import {ClassNamesFn, themeable} from '../theme';
+import {PlainObject} from '../types';
 
 export interface DateRangePickerProps {
   className?: string;
@@ -22,7 +23,7 @@ export interface DateRangePickerProps {
   theme?: any;
   format: string;
   inputFormat?: string;
-  ranges?: string;
+  ranges?: string | Array<ShortCuts>;
   clearable?: boolean;
   iconClassName?: string;
   minDate?: moment.Moment;
@@ -234,7 +235,6 @@ export class DateRangePicker extends React.Component<
     this.handleClick = this.handleClick.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handlePopOverClick = this.handlePopOverClick.bind(this);
-
     const {format, joinValues, delimiter, value} = this.props;
 
     this.state = {
@@ -354,10 +354,7 @@ export class DateRangePicker extends React.Component<
     });
   }
 
-  selectRannge(range: {
+  selectRannge(range: PlainObject) {
-    startDate: (now: moment.Moment) => moment.Moment;
-    endDate: (now: moment.Moment) => moment.Moment;
-  }) {
     const now = moment();
     this.setState({
       startDate: range.startDate(now.clone()),
@@ -365,6 +362,48 @@ export class DateRangePicker extends React.Component<
     });
   }
 
+  renderRanges(ranges: string | Array<ShortCuts> | undefined) {
+    if (!ranges) {
+      return null;
+    }
+    const {classPrefix: ns} = this.props;
+    let rangeArr: Array<string | ShortCuts>;
+    if (typeof ranges === 'string') {
+      rangeArr = ranges.split(',');
+    } else {
+      rangeArr = ranges;
+    }
+    return (
+      <ul className={`${ns}DateRangePicker-rangers`}>
+        {rangeArr.map(item => {
+          if (!item) {
+            return null;
+          }
+          let range: PlainObject = {};
+          if (typeof item === 'string') {
+            range = availableRanges[item];
+            range.key = item;
+          } else if (item.startDate && item.endDate) {
+            range = {
+              ...item,
+              startDate: () => item.startDate,
+              endDate: () => item.endDate
+            };
+          }
+          return (
+            <li
+              className={`${ns}DateRangePicker-ranger`}
+              onClick={() => this.selectRannge(range)}
+              key={range.key || range.label}
+            >
+              <a>{range.label}</a>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
   clearValue(e: React.MouseEvent<any>) {
     e.preventDefault();
     e.stopPropagation();
@@ -505,28 +544,7 @@ export class DateRangePicker extends React.Component<
               overlay
             >
               <div className={`${ns}DateRangePicker-wrap`}>
-                {ranges ? (
+                {this.renderRanges(ranges)}
-                  <ul className={`${ns}DateRangePicker-rangers`}>
-                    {(typeof ranges === 'string'
-                      ? ranges.split(',')
-                      : Array.isArray(ranges)
-                      ? ranges
-                      : []
-                    )
-                      .filter(key => !!availableRanges[key])
-                      .map(key => (
-                        <li
-                          className={`${ns}DateRangePicker-ranger`}
-                          onClick={() =>
-                            this.selectRannge(availableRanges[key])
-                          }
-                          key={key}
-                        >
-                          <a>{availableRanges[key].label}</a>
-                        </li>
-                      ))}
-                  </ul>
-                ) : null}
 
                 <BaseDatePicker
                   classPrefix={ns}