Skip to content

Commit 541da59

Browse files
author
张鹏博
committed
feat: 增加预设时间（范围）的支持
1 parent 680afea commit 541da59

18 files changed

Lines changed: 221 additions & 36 deletions

File tree

‎package.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,11 @@
4747
"rc-drawer": "^6.0.1",
4848
"rc-dropdown": "~4.0.1",
4949
"rc-menu": "^9.0.12",
50-
"rc-picker": "^2.5.19",
50+
"rc-picker": "^3.11.0",
5151
"rc-table": "7.28.1",
5252
"rc-tooltip": "~5.2.0",
5353
"rc-trigger": "^5.2.10",
5454
"rc-util": "5.25.2",
55-
"rc-tooltip": "~5.2.0",
5655
"react": "16.12.0",
5756
"react-dom": "16.12.0",
5857
"react-drag-listview": "^0.2.0",
@@ -82,6 +81,7 @@
8281
"@rollup/plugin-url": "^6.1.0",
8382
"@types/react-is": "^17.0.3",
8483
"@umijs/test": "^3.0.5",
84+
"auto-changelog": "*",
8585
"babel-eslint": "^10.1.0",
8686
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
8787
"cross-env": "^7.0.3",
@@ -114,12 +114,11 @@
114114
"rimraf": "^3.0.2",
115115
"rollup-plugin-postcss": "^4.0.1",
116116
"umi-lint": "^2.0.2",
117-
"yargs": "^17.1.1",
118-
"auto-changelog": "*"
117+
"yargs": "^17.1.1"
119118
},
120119
"husky": {
121120
"hooks": {
122121
"pre-commit": "npm run test"
123122
}
124123
}
125-
}
124+
}

‎src/components/c-picker/demos/date-picker.md‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,29 @@ import {
1919
Toggle
2020
} from 'cloud-react';
2121

22-
2322
const { TimePicker } = DatePicker;
2423

24+
const presets = [
25+
{
26+
label: '三天前',
27+
value: () => moment().clone().subtract(2, 'days')
28+
},
29+
{
30+
label: '一周前',
31+
value: () => moment().clone().subtract(6, 'days')
32+
},
33+
{
34+
label: '一月前',
35+
value: () => moment().clone().subtract(1, 'months').toDate()
36+
},
37+
{
38+
label: '一年前',
39+
value: () => moment().clone().subtract(1, 'years').format('yyyy/MM/DD HH:mm:ss')
40+
},
41+
];
42+
43+
const timePresets = [{ label: '中午', value: () => moment().clone().startOf('day').add(12, 'hours') }];
44+
2545
export default class DatePickerDemo extends React.Component {
2646
field = new Field(this)
2747
state = {
@@ -48,7 +68,7 @@ export default class DatePickerDemo extends React.Component {
4868
<Toggle checked={!disabled} onChange={b => this.setState({ disabled: !b })} />
4969
</Form.Item>
5070
<Form.Item label="日期选择器">
51-
<DatePicker value={value} onChange={this.onChange} disabled={disabled} />
71+
<DatePicker value={value} onChange={this.onChange} disabled={disabled} presets={presets} />
5272
</Form.Item>
5373
<Form.Item label="日期选择器（可清除）">
5474
<DatePicker
@@ -57,20 +77,24 @@ export default class DatePickerDemo extends React.Component {
5777
required: true, message: '请输入时间',
5878
}]
5979
})}
60-
showToday disabled={disabled} autoFocus allowClear
80+
showToday
81+
disabled={disabled}
82+
autoFocus
83+
allowClear
84+
presets={presets}
6185
/>
6286
</Form.Item>
6387
<Form.Item label="日期选择器（不可输入修改）">
6488
<DatePicker value={value} onChange={this.onChange} canEdit={false} disabled={disabled} />
6589
</Form.Item>
6690
<Form.Item label="日期选择器（带时间）">
67-
<DatePicker value={value} onChange={this.onChange} showToday showTimePicker disabled={disabled} />
91+
<DatePicker value={value} onChange={this.onChange} showToday showTimePicker disabled={disabled} presets={presets} />
6892
</Form.Item>
6993
<Form.Item label="时间选择器">
70-
<TimePicker value={time} onChange={this.onTimeChange} disabled={disabled} />
94+
<TimePicker value={time} onChange={this.onTimeChange} disabled={disabled} presets={timePresets} />
7195
</Form.Item>
7296
<Form.Item label="时间选择器（不显示秒）">
73-
<TimePicker value={time} onChange={this.onTimeChange} format="HH:mm" showSecond={false} disabled={disabled} />
97+
<TimePicker value={time} onChange={this.onTimeChange} format="HH:mm" showSecond={false} disabled={disabled} presets={timePresets} />
7498
</Form.Item>
7599
</Form>
76100
);

‎src/components/c-picker/demos/more-picker.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export default class DatePickerDemo extends React.Component {
7373
format="yyyy"
7474
min={2020}
7575
max={2025}
76+
presets={[{ label: '去年', value: () => moment().clone().subtract(1, 'years').startOf('year') }]}
7677
/>
7778
</Form.Item>
7879
<Form.Item label="年月选择器">
@@ -86,6 +87,7 @@ export default class DatePickerDemo extends React.Component {
8687
maxYear={2025}
8788
minMonth={3}
8889
maxMonth={10}
90+
presets={[{ label: '上个月', value: () => moment().clone().subtract(1, 'months').startOf('month') }]}
8991
/>
9092
</Form.Item>
9193
<Form.Item label="周选择器">
@@ -97,6 +99,7 @@ export default class DatePickerDemo extends React.Component {
9799
format="yyyy/MM/DD 所在周"
98100
minYear={2020}
99101
maxYear={2025}
102+
presets={[{ label: '上周', value: () => moment().clone().subtract(1, 'weeks').startOf('week') }]}
100103
/>
101104
</Form.Item>
102105
<Form.Item label="实现【月-日】选择">

‎src/components/c-picker/demos/range-picker.md‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,35 @@ import {
1919
Toggle
2020
} from 'cloud-react';
2121

22-
2322
const { RangePicker, TimeRangePicker } = DatePicker;
2423

24+
const dateRangePresets = [
25+
{
26+
label: '近三天',
27+
value: () => [moment().clone().subtract(2, 'days'), moment().clone()]
28+
},
29+
{
30+
label: '近一周',
31+
value: () => [moment().clone().subtract(6, 'days'), moment().clone()]
32+
},
33+
{
34+
label: '近一月',
35+
value: () => [moment().clone().subtract(1, 'months').toDate(), moment().clone().toDate()]
36+
},
37+
{
38+
label: '近一年以来',
39+
value: () => [moment().clone().subtract(1, 'years'), moment().clone()]
40+
}
41+
];
42+
43+
const timeRangePresets = [{
44+
label: '上午',
45+
value: () => [
46+
moment().clone().startOf('day'),
47+
moment().clone().startOf('day').add(12, 'hours')
48+
]
49+
}];
50+
2551
export default class RangePickerDemo extends React.Component {
2652
field = new Field(this)
2753
state = {
@@ -53,7 +79,7 @@ export default class RangePickerDemo extends React.Component {
5379
</Form.Item>
5480

5581
<Form.Item label="日期范围选择器">
56-
<RangePicker value={values} onChange={this.onChange} disabled={disabled} minDate={new Date()} />
82+
<RangePicker value={values} onChange={this.onChange} disabled={disabled} minDate={new Date()} presets={dateRangePresets} />
5783
</Form.Item>
5884

5985
<Form.Item label="日期范围选择器（可清除）">
@@ -68,6 +94,7 @@ export default class RangePickerDemo extends React.Component {
6894
})}
6995
allowClear
7096
showToday
97+
presets={dateRangePresets}
7198
disabled={disabled}
7299
/>
73100
</Form.Item>
@@ -97,12 +124,13 @@ export default class RangePickerDemo extends React.Component {
97124
<Form.Item label="日期范围选择器（开始结束可为空）">
98125
<RangePicker
99126
allowEmpty={[true, true]}
127+
presets={dateRangePresets}
100128
disabled={disabled}
101129
/>
102130
</Form.Item>
103131

104132
<Form.Item label="时间范围选择器">
105-
<TimeRangePicker value={times} onChange={this.onTimeChange} showNow disabled={disabled} />
133+
<TimeRangePicker value={times} onChange={this.onTimeChange} showNow disabled={disabled} presets={timeRangePresets} />
106134
</Form.Item>
107135

108136
<Form.Item label="时间范围选择器（不显示秒）">
@@ -113,6 +141,7 @@ export default class RangePickerDemo extends React.Component {
113141
format="HH:mm"
114142
showSecond={false}
115143
disabled={disabled}
144+
presets={timeRangePresets}
116145
/>
117146
</Form.Item>
118147

@@ -124,8 +153,9 @@ export default class RangePickerDemo extends React.Component {
124153
showTimePicker
125154
format={'yyyy年MM月DD日 HH:mm'}
126155
onChange={this.onChange}
127-
minYear={2021}
128-
maxYear={2023}
156+
minYear={2020}
157+
maxYear={2030}
158+
presets={dateRangePresets}
129159
/>
130160

131161
</Form>

‎src/components/c-picker/generator/range.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,28 @@
11
import * as React from 'react';
2+
import moment from 'moment';
23
import classNames from 'classnames';
34
import { RangePicker as RCRangePicker } from 'rc-picker';
45
import defaultLocale from '../../../locale/zh_CN';
56
import { prefixCls as rootPrefixCls } from '../../../utils';
67
import Icon from '../../icon';
78
import components from './components';
8-
import { getTimeProps } from './utils';
9+
import { getTimeProps, transformValue2Moment } from './utils';
910

1011
export default function generateRangePicker(generateConfig) {
1112
function getRangePicker(picker, displayName) {
1213
class RangePicker extends React.Component {
1314
pickerRef = React.createRef();
1415

16+
constructor(props) {
17+
super(props);
18+
moment.locale('zh-cn', {
19+
week: {
20+
dow: 1,
21+
day: 7,
22+
},
23+
});
24+
}
25+
1526
focus = () => {
1627
if (this.pickerRef.current) {
1728
this.pickerRef.current.focus();
@@ -30,6 +41,7 @@ export default function generateRangePicker(generateConfig) {
3041
size,
3142
bordered = true,
3243
placeholder: _placeholder,
44+
presets = [],
3345
...restProps
3446
} = this.props;
3547
const { format, showTime } = this.props;
@@ -85,6 +97,16 @@ export default function generateRangePicker(generateConfig) {
8597
transitionName={`${prefixCls}-slide-up`}
8698
{...restProps}
8799
{...additionalOverrideProps}
100+
presets={presets?.map(({ label, value: vs = [] }) => ({
101+
label,
102+
value: () => {
103+
if (typeof vs === 'function') {
104+
return vs()?.map(v => transformValue2Moment(v, format));
105+
}
106+
return vs?.map(v => transformValue2Moment(v, format));
107+
}
108+
}))}
109+
ranges={null}
88110
locale={defaultLocale.lang}
89111
className={classNames(
90112
{

‎src/components/c-picker/generator/single.js‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,28 @@
11
import * as React from 'react';
2+
import moment from 'moment';
23
import classNames from 'classnames';
34
import RCPicker from 'rc-picker';
45
import defaultLocale from '../../../locale/zh_CN';
56
import { prefixCls as rootPrefixCls } from '../../../utils';
67
import Icon from '../../icon';
78
import components from './components';
8-
import { getTimeProps } from './utils';
9+
import { getTimeProps, transformValue2Moment } from './utils';
910

1011
export default function generateSinglePicker(generateConfig) {
1112
function getPicker(picker, displayName) {
1213
class Picker extends React.Component {
1314
pickerRef = React.createRef();
1415

16+
constructor(props) {
17+
super(props);
18+
moment.locale('zh-cn', {
19+
week: {
20+
dow: 1,
21+
day: 7,
22+
},
23+
});
24+
}
25+
1526
focus = () => {
1627
if (this.pickerRef.current) {
1728
this.pickerRef.current.focus();
@@ -30,6 +41,8 @@ export default function generateSinglePicker(generateConfig) {
3041
size,
3142
bordered = true,
3243
placeholder,
44+
locale = defaultLocale.lang,
45+
presets = [],
3346
...restProps
3447
} = this.props;
3548
const { format, showTime } = this.props;
@@ -79,7 +92,14 @@ export default function generateSinglePicker(generateConfig) {
7992
transitionName={`${prefixCls}-slide-up`}
8093
{...restProps}
8194
{...additionalOverrideProps}
82-
locale={defaultLocale.lang}
95+
locale={locale}
96+
presets={presets.map(({ label, value: v }) => {
97+
let preset = transformValue2Moment(v, format);
98+
if (typeof v === 'function') {
99+
preset = () => transformValue2Moment(v(), format);
100+
}
101+
return { label, value: preset };
102+
})}
83103
className={classNames(
84104
{
85105
[`${prefixCls}-${size}`]: size,

‎src/components/c-picker/generator/utils.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import moment from 'moment';
2+
13
function toArray(list) {
24
if (!list) {
35
return [];
@@ -48,3 +50,13 @@ export function getTimeProps(props) {
4850
showTime: showTimeObj,
4951
};
5052
}
53+
54+
export function transformValue2Moment(val, format) {
55+
if (typeof val === 'string') {
56+
return moment(val, format);
57+
}
58+
if (val instanceof Date) {
59+
return moment(val).clone();
60+
}
61+
return val;
62+
}

‎src/components/c-picker/index.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import moment from 'moment';
21
import DatePicker from './pickers/date';
32
import TimePicker from './pickers/time';
43
import YearPicker from './pickers/year';
@@ -8,8 +7,6 @@ import DateRangePicker from './pickers/date-range';
87
import TimeRangePicker from './pickers/time-range';
98
import './index.less';
109

11-
moment.locale('zh_CN');
12-
1310
const CPicker = DatePicker;
1411

1512
CPicker.TimePicker = TimePicker;

‎src/components/c-picker/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ group:
5353
| minYear | 最小年份 | number | |
5454
| maxYear | 最大年份 | number | - |
5555
| disabledDate | 筛选不可选择的日期（设置此项将覆盖以上 4 个属性的作用） | (date: string) => boolean | - |
56+
| presets | 预设的时间（区间） | { label: string; value: `DateType` \| () => `DateType` } `DateType`: string \| Date \| string[] \| Date[] | - |
5657
| showTimePicker | 指示是否展示时间选择器,只在 `DatePicker` 或 `RangePicker` 中生效 | boolean | `false` |
5758
| renderExtraFooter | 渲染可选的额外选择框底部元素 | (mode: string) => React.ReactNode | - |
5859
| onOpenChange | 弹层打开状态改变事件处理函数 | (open: boolean) => void | - |

‎src/components/c-picker/pickers/date-range.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const DateRangePicker = ({
5454
onKeyDown,
5555
onPanelChange,
5656
onOk,
57+
presets
5758
}) => {
5859
const { current: _this } = useRef({
5960
formatType: STR,
@@ -266,6 +267,7 @@ const DateRangePicker = ({
266267
onClick,
267268
onContextMenu,
268269
onKeyDown,
270+
presets,
269271
}}
270272
/>
271273
);

0 commit comments

Comments
 (0)