Skip to content

Commit 9a38ef0

Browse files
kiner-tangkiner-tang
authored
feat: Unify API about picker's custom render (#610)
* feat: cellRender * feat: cellRender * feat: update test case * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code
1 parent d5f22ea commit 9a38ef0

File tree

26 files changed

+11229
-100
lines changed

26 files changed

+11229
-100
lines changed

‎docs/demo/cellRender.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: cellRender
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/cellRender.tsx"></code>

‎docs/examples/cellRender.tsx‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import type { Moment } from 'moment';
2+
import moment from 'moment';
3+
import React from 'react';
4+
import '../../assets/index.less';
5+
import momentGenerateConfig from '../../src/generate/moment';
6+
import zhCN from '../../src/locale/zh_CN';
7+
import Picker from '../../src/Picker';
8+
import RangePicker from '../../src/RangePicker';
9+
10+
const defaultValue = moment('2019-11-28 01:02:03');
11+
12+
const defaultStartValue = moment('2019-09-03 05:02:03');
13+
const defaultEndValue = moment('2019-11-28 01:02:03');
14+
15+
function formatDate(date: Moment | null) {
16+
return date ? date.format('YYYY-MM-DD HH:mm:ss') : 'null';
17+
}
18+
19+
export default () => {
20+
const [value, setValue] = React.useState<Moment | null>(defaultValue);
21+
const [rangeValue, setRangeValue] = React.useState<[Moment | null, Moment | null] | null>([
22+
defaultStartValue,
23+
defaultEndValue,
24+
]);
25+
26+
27+
const onSelect = (newValue: Moment) => {
28+
console.log('Select:', newValue);
29+
};
30+
31+
const onChange = (newValue: Moment | null, formatString?: string) => {
32+
console.log('Change:', newValue, formatString);
33+
setValue(newValue);
34+
};
35+
36+
const sharedProps = {
37+
generateConfig: momentGenerateConfig,
38+
value,
39+
onSelect,
40+
onChange,
41+
presets: [
42+
{
43+
label: 'Hello World!',
44+
value: moment(),
45+
},
46+
],
47+
};
48+
49+
const onRangeChange = (newValue: [Moment | null, Moment | null] | null, formatStrings?: string[]) => {
50+
console.log('Change:', newValue, formatStrings);
51+
setRangeValue(newValue);
52+
};
53+
54+
const rangeSharedProps = {
55+
generateConfig: momentGenerateConfig,
56+
value: rangeValue,
57+
onChange: onRangeChange,
58+
};
59+
60+
return (
61+
<div>
62+
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
63+
<div style={{ margin: '0 8px' }}>
64+
<h3>Basic</h3>
65+
<h4>Value: {value ? value.format('YYYY-MM-DD HH:mm:ss') : 'null'}</h4>
66+
<Picker<Moment>
67+
{...sharedProps}
68+
locale={zhCN}
69+
cellRender={(current, info) =>
70+
React.cloneElement(
71+
info.originNode,
72+
{
73+
...info.originNode.props,
74+
},
75+
<div style={{ background: 'orange' }}>{current.get('date')}</div>,
76+
)
77+
}
78+
/>
79+
<Picker<Moment>
80+
{...sharedProps}
81+
locale={zhCN}
82+
cellRender={(current, info) =>
83+
React.cloneElement(
84+
info.originNode,
85+
{
86+
className: `${info.originNode.props.className} testWrapper`,
87+
},
88+
<div style={{ background: 'orange' }}>{current.get('date')}</div>,
89+
)
90+
}
91+
/>
92+
<Picker<Moment>
93+
{...sharedProps}
94+
locale={zhCN}
95+
picker="week"
96+
cellRender={(current, info) =>
97+
React.cloneElement(
98+
info.originNode,
99+
{
100+
...info.originNode.props,
101+
},
102+
<div style={{ background: 'orange' }}>{current.get('week')}</div>,
103+
)
104+
}
105+
/>
106+
<Picker<Moment>
107+
{...sharedProps}
108+
locale={zhCN}
109+
picker="year"
110+
cellRender={(current, info) =>
111+
React.cloneElement(
112+
info.originNode,
113+
{
114+
...info.originNode.props,
115+
},
116+
<div style={{ background: 'orange' }}>{current.get('year')}</div>,
117+
)
118+
}
119+
/>
120+
<Picker<Moment>
121+
{...sharedProps}
122+
locale={zhCN}
123+
picker="month"
124+
cellRender={(current, info) =>
125+
React.cloneElement(
126+
info.originNode,
127+
{
128+
...info.originNode.props,
129+
},
130+
<div style={{ background: 'orange' }}>{current.get('month') + 1}</div>,
131+
)
132+
}
133+
/>
134+
<Picker<Moment>
135+
{...sharedProps}
136+
locale={zhCN}
137+
picker="quarter"
138+
cellRender={(current, info) =>
139+
React.cloneElement(
140+
info.originNode,
141+
{
142+
...info.originNode.props,
143+
},
144+
<div style={{ background: 'orange' }}>Q{current.get('quarter')}</div>,
145+
)
146+
}
147+
/>
148+
<Picker<Moment>
149+
{...sharedProps}
150+
locale={zhCN}
151+
picker="time"
152+
cellRender={(current, info) =>
153+
React.cloneElement(
154+
info.originNode,
155+
{
156+
...info.originNode.props,
157+
},
158+
<div style={{ background: 'orange' }}>{current}</div>,
159+
)
160+
}
161+
/>
162+
</div>
163+
<div style={{ margin: '0 8px' }}>
164+
<h3>Range</h3>
165+
<h4>RangeValue: {rangeValue ? `${formatDate(rangeValue[0])} ~ ${formatDate(rangeValue[1])}` : 'null'}</h4>
166+
<RangePicker<Moment>
167+
{...rangeSharedProps}
168+
locale={zhCN}
169+
allowClear
170+
showTime
171+
style={{ width: 580 }}
172+
cellRender={(current, info) => {
173+
return (
174+
<div title={info.type} style={{ background: info.type === 'time' ? 'green' : 'yellow' }}>
175+
{info.type === "time" ? current : current.get('date')}
176+
</div>
177+
);
178+
}}
179+
ranges={{
180+
ranges: [moment(), moment().add(10, 'day')],
181+
}}
182+
onOk={(dates) => {
183+
console.log('OK!!!', dates);
184+
}}
185+
/>
186+
</div>
187+
</div>
188+
</div>
189+
);
190+
};

‎docs/examples/panelRender.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import moment, { Moment } from 'moment';
2+
import type { Moment } from 'moment';
3+
import moment from 'moment';
34
import Picker from '../../src/Picker';
45
import RangePicker from '../../src/RangePicker';
56
import momentGenerateConfig from '../../src/generate/moment';

‎docs/examples/range.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default () => {
5353
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
5454
<div style={{ margin: '0 8px' }}>
5555
<h3>Basic</h3>
56-
{/* <RangePicker<Moment>
56+
<RangePicker<Moment>
5757
{...sharedProps}
5858
value={undefined}
5959
locale={zhCN}
@@ -62,22 +62,23 @@ export default () => {
6262
defaultValue={[moment('1990-09-03'), moment('1989-11-28')]}
6363
clearIcon={<span>X</span>}
6464
suffixIcon={<span>O</span>}
65-
/> */}
65+
/>
6666
<RangePicker<Moment>
6767
{...sharedProps}
6868
locale={zhCN}
6969
allowClear
7070
ref={rangePickerRef}
7171
showTime
7272
style={{ width: 580 }}
73+
cellRender={(current, info) => <div title={info.type} style={{background: 'green'}}>{typeof current === "number" ? current : current.get("date")}</div>}
7374
ranges={{
7475
ranges: [moment(), moment().add(10, 'day')],
7576
}}
7677
onOk={(dates) => {
7778
console.log('OK!!!', dates);
7879
}}
7980
/>
80-
{/* <RangePicker<Moment>
81+
<RangePicker<Moment>
8182
{...sharedProps}
8283
value={undefined}
8384
locale={zhCN}
@@ -94,10 +95,10 @@ export default () => {
9495
allowClear
9596
picker="time"
9697
style={{ width: 280 }}
97-
/> */}
98+
/>
9899
</div>
99100

100-
{/* <div style={{ margin: '0 8px' }}>
101+
<div style={{ margin: '0 8px' }}>
101102
<h3>Focus</h3>
102103
<RangePicker<Moment>
103104
{...sharedProps}
@@ -185,7 +186,7 @@ export default () => {
185186
placeholder={['start...', 'end...']}
186187
disabledDate={disabledDate}
187188
/>
188-
</div> */}
189+
</div>
189190
</div>
190191
</div>
191192
);

0 commit comments

Comments
 (0)