bc518174
 王天杨
提交两个项目文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
import { createContext, ReactNode, useContext } from 'react';
import { Locale } from 'date-fns';
import { DayPickerProps } from 'DayPicker';
import { CaptionLayout } from 'components/Caption';
import { DayPickerBase, DaySelectionMode } from 'types/DayPickerBase';
import {
DayPickerMultipleProps,
isDayPickerMultiple
} from 'types/DayPickerMultiple';
import { DayPickerRangeProps, isDayPickerRange } from 'types/DayPickerRange';
import { DayPickerSingleProps, isDayPickerSingle } from 'types/DayPickerSingle';
import { Formatters } from 'types/Formatters';
import { Labels } from 'types/Labels';
import { Matcher } from 'types/Matchers';
import { DayModifiers, ModifiersClassNames } from 'types/Modifiers';
import { ClassNames, Styles } from 'types/Styles';
import { getDefaultContextValues } from './defaultContextValues';
import { parseFromToProps } from './utils';
/**
* The value of the {@link DayPickerContext} extends the props from DayPicker
* with default and cleaned up values.
*/
export interface DayPickerContextValue extends DayPickerBase {
mode: DaySelectionMode;
onSelect?:
| DayPickerSingleProps['onSelect']
| DayPickerMultipleProps['onSelect']
| DayPickerRangeProps['onSelect'];
required?: boolean;
min?: number;
max?: number;
selected?: Matcher | Matcher[];
captionLayout: CaptionLayout;
classNames: Required<ClassNames>;
formatters: Formatters;
labels: Labels;
locale: Locale;
modifiersClassNames: ModifiersClassNames;
modifiers: DayModifiers;
numberOfMonths: number;
styles: Styles;
today: Date;
}
/**
* The DayPicker context shares the props passed to DayPicker within internal
* and custom components. It is used to set the default values and perform
* one-time calculations required to render the days.
*
* Access to this context from the {@link useDayPicker} hook.
*/
export const DayPickerContext = createContext<
DayPickerContextValue | undefined
>(undefined);
/** The props for the {@link DayPickerProvider}. */
export interface DayPickerProviderProps {
/** The initial props from the DayPicker component. */
initialProps: DayPickerProps;
children?: ReactNode;
}
/**
* The provider for the {@link DayPickerContext}, assigning the defaults from the
* initial DayPicker props.
*/
export function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {
const { initialProps } = props;
const defaultContextValues = getDefaultContextValues();
const { fromDate, toDate } = parseFromToProps(initialProps);
let captionLayout =
initialProps.captionLayout ?? defaultContextValues.captionLayout;
if (captionLayout !== 'buttons' && (!fromDate || !toDate)) {
// When no from/to dates are set, the caption is always buttons
captionLayout = 'buttons';
}
let onSelect;
if (
isDayPickerSingle(initialProps) ||
isDayPickerMultiple(initialProps) ||
isDayPickerRange(initialProps)
) {
onSelect = initialProps.onSelect;
}
const value: DayPickerContextValue = {
...defaultContextValues,
...initialProps,
captionLayout,
classNames: {
...defaultContextValues.classNames,
...initialProps.classNames
},
components: {
...initialProps.components
},
formatters: {
...defaultContextValues.formatters,
...initialProps.formatters
},
fromDate,
labels: {
...defaultContextValues.labels,
...initialProps.labels
},
mode: initialProps.mode || defaultContextValues.mode,
modifiers: {
...defaultContextValues.modifiers,
...initialProps.modifiers
},
modifiersClassNames: {
...defaultContextValues.modifiersClassNames,
...initialProps.modifiersClassNames
},
onSelect,
styles: {
...defaultContextValues.styles,
...initialProps.styles
},
toDate
};
return (
<DayPickerContext.Provider value={value}>
{props.children}
</DayPickerContext.Provider>
);
}
/**
* Hook to access the {@link DayPickerContextValue}.
*
* Use the DayPicker context to access to the props passed to DayPicker inside
* internal or custom components.
*/
export function useDayPicker(): DayPickerContextValue {
const context = useContext(DayPickerContext);
if (!context) {
throw new Error(`useDayPicker must be used within a DayPickerProvider.`);
}
return context;
}
|
