test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-01 11:28:30 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
limengzhao 2019-12-15 20:25:46 +08:00
parent e04e4fee09
commit bc83b2e766
2 changed files with 106 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/DatePicker.tsx
View File

@ -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;
}
@ -978,6 +994,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 ('date' in item) {
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 +1105,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
overlay
onClick={this.handlePopOverClick}
>
{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}
{this.renderShortCuts(shortcuts)}
<BaseDatePicker
value={date}

75
src/components/DateRangePicker.tsx
View File

@ -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;
@ -354,10 +355,7 @@ export class DateRangePicker extends React.Component<
});
}
selectRannge(range: {
startDate: (now: moment.Moment) => moment.Moment;
endDate: (now: moment.Moment) => moment.Moment;
}) {
selectRannge(range: PlainObject) {
const now = moment();
this.setState({
startDate: range.startDate(now.clone()),
@ -365,6 +363,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 ('endDate' in item && 'startDate' in item) {
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 +545,7 @@ export class DateRangePicker extends React.Component<
overlay
>
<div className={`${ns}DateRangePicker-wrap`}>
{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}
{this.renderRanges(ranges)}
<BaseDatePicker
classPrefix={ns}