Skip to content

Commit 07f199c

Browse files
RichardLindhoutRichardLindhout
committed
refactor: rename multi to multiple and add readme examples
1 parent dd2ac23 commit 07f199c

File tree

10 files changed

+12904
-12300
lines changed

10 files changed

+12904
-12300
lines changed

‎README.md‎

Lines changed: 119 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -55,90 +55,152 @@ npm install react-native-paper-dates --save
5555

5656
## Usage
5757

58-
### Date Picker
58+
### Single date Picker
5959

6060
```tsx
61-
import * as React from 'react'
62-
import { Button } from 'react-native-paper'
63-
import { DatePickerModal } from 'react-native-paper-dates'
64-
65-
function SingleDatePage() {
66-
const [visible, setVisible] = React.useState(false)
67-
const onDismiss = React.useCallback(() => {
68-
setVisible(false)
69-
}, [setVisible])
70-
71-
const onChange = React.useCallback(({ date }) => {
72-
setVisible(false)
73-
console.log({ date })
74-
}, [])
75-
76-
const date = new Date()
61+
import * as React from 'react';
62+
import { Button } from 'react-native-paper';
63+
import { DatePickerModal } from 'react-native-paper-dates';
64+
65+
export default function ReadMeExampleSingle() {
66+
const [date, setDate] = React.useState<Date | undefined>(undefined);
67+
const [open, setOpen] = React.useState(false);
68+
69+
const onDismissSingle = React.useCallback(() => {
70+
setOpen(false);
71+
}, [setOpen]);
72+
73+
const onConfirmSingle = React.useCallback(
74+
(params) => {
75+
setOpen(false);
76+
setDate(params.date);
77+
},
78+
[setOpen, setDate]
79+
);
7780

7881
return (
7982
<>
83+
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
84+
Pick single date
85+
</Button>
8086
<DatePickerModal
87+
// locale={'en'} optional, default: automatic
8188
mode="single"
82-
visible={visible}
83-
onDismiss={onDismiss}
89+
visible={open}
90+
onDismiss={onDismissSingle}
8491
date={date}
85-
onConfirm={onChange}
86-
saveLabel="Save" // optional
87-
label="Select date" // optional
88-
animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
89-
locale={'en'} // optional, default is automically detected by your system
92+
onConfirm={onConfirmSingle}
93+
// onChange={} // same props as onConfirm but triggered without confirmed by user
94+
// saveLabel="Save" // optional
95+
// label="Select date" // optional
96+
// animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
9097
/>
91-
<Button onPress={()=> setVisible(true)}>
92-
Pick date
93-
</Button>
9498
</>
95-
)
99+
);
96100
}
97101
```
98102

99103
### Range picker
100104
```tsx
101-
import * as React from 'react'
102-
import { Button } from 'react-native-paper'
103-
import { DatePickerModal } from 'react-native-paper-dates'
105+
import * as React from 'react';
106+
import { Button } from 'react-native-paper';
104107

105-
export default function RangeDatePage() {
106-
const [visible, setVisible] = React.useState(false)
107-
const onDismiss = React.useCallback(() => {
108-
setVisible(false)
109-
}, [setVisible])
108+
import { DatePickerModal } from 'react-native-paper-dates';
110109

111-
const onChange = React.useCallback(({ startDate, endDate }) => {
112-
setVisible(false)
113-
console.log({ startDate, endDate })
114-
}, [])
110+
export default function ReadMeExampleRange() {
111+
const [range, setRange] = React.useState<{
112+
startDate: Date | undefined;
113+
endDate: Date | undefined;
114+
}>({ startDate: undefined, endDate: undefined });
115+
116+
const [open, setOpen] = React.useState(false);
117+
118+
const onDismiss = React.useCallback(() => {
119+
setOpen(false);
120+
}, [setOpen]);
115121

122+
const onConfirm = React.useCallback(
123+
({ startDate, endDate }) => {
124+
setOpen(false);
125+
setRange({ startDate, endDate });
126+
},
127+
[setOpen, setRange]
128+
);
116129

117130
return (
118131
<>
132+
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
133+
Pick range
134+
</Button>
119135
<DatePickerModal
136+
// locale={'en'} optional, default: automatic
120137
mode="range"
121-
visible={visible}
138+
visible={open}
122139
onDismiss={onDismiss}
123-
startDate={undefined}
124-
endDate={undefined}
125-
onConfirm={onChange}
126-
saveLabel="Save" // optional
127-
label="Select period" // optional
128-
startLabel="From" // optional
129-
endLabel="To" // optional
130-
animationType="slide" // optional, default is slide on ios/android and none on web
131-
locale={'en'} // optional, default is automically detected by your system
140+
startDate={range.startDate}
141+
endDate={range.endDate}
142+
onConfirm={onConfirm}
143+
// onChange={} // same props as onConfirm but triggered without confirmed by user
144+
// locale={'nl'} // optional
145+
// saveLabel="Save" // optional
146+
// label="Select period" // optional
147+
// startLabel="From" // optional
148+
// endLabel="To" // optional
149+
// animationType="slide" // optional, default is slide on ios/android and none on web
132150
/>
133-
<Button onPress={()=> setVisible(true)}>
134-
Pick range
135-
</Button>
136151
</>
137-
)
152+
);
138153
}
154+
139155
```
140156

141157

158+
### Multiple dates picker
159+
```tsx
160+
import * as React from 'react';
161+
import { Button } from 'react-native-paper';
162+
163+
import { DatePickerModal } from 'react-native-paper-dates';
164+
165+
export default function ReadMeExampleMultiple() {
166+
const [dates, setDates] = React.useState<Date[] | undefined>();
167+
const [open, setOpen] = React.useState(false);
168+
169+
const onDismiss = React.useCallback(() => {
170+
setOpen(false);
171+
}, [setOpen]);
172+
173+
const onConfirm = React.useCallback((params) => {
174+
setOpen(false);
175+
setDates(params.dates);
176+
console.log('[on-change-multi]', params);
177+
}, []);
178+
179+
return (
180+
<>
181+
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
182+
Pick multiple dates
183+
</Button>
184+
185+
<DatePickerModal
186+
// locale={'en'} optional, default: automatic
187+
mode="multiple"
188+
visible={open}
189+
onDismiss={onDismiss}
190+
dates={dates}
191+
onConfirm={onConfirm}
192+
// locale={'nl'} // optional
193+
// saveLabel="Save" // optional
194+
// label="Select period" // optional
195+
// startLabel="From" // optional
196+
// endLabel="To" // optional
197+
// animationType="slide" // optional, default is slide on ios/android and none on web
198+
/>
199+
</>
200+
);
201+
}
202+
```
203+
142204
### Time picker
143205
```tsx
144206
import * as React from 'react'
@@ -242,13 +304,13 @@ if (isHermesEnabled || isAndroid) {
242304

243305
require('@formatjs/intl-displaynames/polyfill');
244306
require('@formatjs/intl-displaynames/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
245-
307+
246308
require('@formatjs/intl-listformat/polyfill');
247309
require('@formatjs/intl-listformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
248-
310+
249311
require('@formatjs/intl-numberformat/polyfill');
250312
require('@formatjs/intl-numberformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
251-
313+
252314
require('@formatjs/intl-relativetimeformat/polyfill');
253315
require('@formatjs/intl-relativetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
254316

‎example/src/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -372,11 +372,12 @@ function App({
372372

373373
<DatePickerModal
374374
// locale={'en'} optional, default: automatic
375-
mode="multi"
375+
mode="multiple"
376376
visible={multiOpen}
377377
onDismiss={onDismissMulti}
378378
dates={dates}
379379
onConfirm={onChangeMulti}
380+
// moreLabel="more" // optional, if multiple are selected this will show if we can't show all dates
380381
// onChange={onChangeMulti}
381382
// saveLabel="Save" // optional
382383
// label="Select date" // optional

‎example/src/ReadMeExampleMultiple.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import * as React from 'react';
2+
import { Button } from 'react-native-paper';
3+
4+
import { DatePickerModal } from '../../src/index';
5+
6+
export default function ReadMeExampleMultiple() {
7+
const [dates, setDates] = React.useState<Date[] | undefined>();
8+
const [open, setOpen] = React.useState(false);
9+
10+
const onDismiss = React.useCallback(() => {
11+
setOpen(false);
12+
}, [setOpen]);
13+
14+
const onConfirm = React.useCallback((params) => {
15+
setOpen(false);
16+
setDates(params.dates);
17+
console.log('[on-change-multi]', params);
18+
}, []);
19+
20+
return (
21+
<>
22+
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
23+
Pick multiple dates
24+
</Button>
25+
26+
<DatePickerModal
27+
// locale={'en'} optional, default: automatic
28+
mode="multiple"
29+
visible={open}
30+
onDismiss={onDismiss}
31+
dates={dates}
32+
onConfirm={onConfirm}
33+
// locale={'nl'} // optional
34+
// saveLabel="Save" // optional
35+
// label="Select period" // optional
36+
// startLabel="From" // optional
37+
// endLabel="To" // optional
38+
// animationType="slide" // optional, default is slide on ios/android and none on web
39+
/>
40+
</>
41+
);
42+
}

‎example/src/ReadMeExampleRange.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import * as React from 'react';
2+
import { Button } from 'react-native-paper';
3+
4+
import { DatePickerModal } from '../../src/index';
5+
6+
export default function ReadMeExampleRange() {
7+
const [range, setRange] = React.useState<{
8+
startDate: Date | undefined;
9+
endDate: Date | undefined;
10+
}>({ startDate: undefined, endDate: undefined });
11+
12+
const [open, setOpen] = React.useState(false);
13+
14+
const onDismiss = React.useCallback(() => {
15+
setOpen(false);
16+
}, [setOpen]);
17+
18+
const onConfirm = React.useCallback(
19+
({ startDate, endDate }) => {
20+
setOpen(false);
21+
setRange({ startDate, endDate });
22+
},
23+
[setOpen, setRange]
24+
);
25+
26+
return (
27+
<>
28+
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
29+
Pick range
30+
</Button>
31+
<DatePickerModal
32+
// locale={'en'} optional, default: automatic
33+
mode="range"
34+
visible={open}
35+
onDismiss={onDismiss}
36+
startDate={range.startDate}
37+
endDate={range.endDate}
38+
onConfirm={onConfirm}
39+
// onChange={} // same props as onConfirm but triggered without confirmed by user
40+
// locale={'nl'} // optional
41+
// saveLabel="Save" // optional
42+
// label="Select period" // optional
43+
// startLabel="From" // optional
44+
// endLabel="To" // optional
45+
// animationType="slide" // optional, default is slide on ios/android and none on web
46+
/>
47+
</>
48+
);
49+
}

‎example/src/ReadMeExampleSingle.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as React from 'react';
2+
import { Button } from 'react-native-paper';
3+
import { DatePickerModal } from '../../src/index';
4+
5+
export default function ReadMeExampleSingle() {
6+
const [date, setDate] = React.useState<Date | undefined>(undefined);
7+
const [open, setOpen] = React.useState(false);
8+
9+
const onDismissSingle = React.useCallback(() => {
10+
setOpen(false);
11+
}, [setOpen]);
12+
13+
const onConfirmSingle = React.useCallback(
14+
(params) => {
15+
setOpen(false);
16+
setDate(params.date);
17+
},
18+
[setOpen, setDate]
19+
);
20+
21+
return (
22+
<>
23+
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
24+
Pick single date
25+
</Button>
26+
<DatePickerModal
27+
// locale={'en'} optional, default: automatic
28+
mode="single"
29+
visible={open}
30+
onDismiss={onDismissSingle}
31+
date={date}
32+
onConfirm={onConfirmSingle}
33+
// onChange={} // same props as onConfirm but triggered without confirmed by user
34+
// saveLabel="Save" // optional
35+
// label="Select date" // optional
36+
// animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
37+
/>
38+
</>
39+
);
40+
}

0 commit comments

Comments
 (0)