@basic-ui/dates 0.0.47 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/build/cjs/index.js +29 -52
- package/build/cjs/index.js.map +1 -1
- package/build/esm/DatePicker/DatePicker.d.ts +24 -24
- package/build/esm/DatePicker/DatePicker.js +52 -68
- package/build/esm/DatePicker/DatePicker.js.map +1 -1
- package/build/esm/DatePicker/DatePickerSelect.d.ts +8 -8
- package/build/esm/DatePicker/DatePickerSelect.js +87 -110
- package/build/esm/DatePicker/DatePickerSelect.js.map +1 -1
- package/build/esm/DatePicker/RangeDatePicker.d.ts +28 -28
- package/build/esm/DatePicker/RangeDatePicker.js +54 -71
- package/build/esm/DatePicker/RangeDatePicker.js.map +1 -1
- package/build/esm/DatePicker/adjustDates.d.ts +4 -4
- package/build/esm/DatePicker/adjustDates.js +2 -3
- package/build/esm/DatePicker/adjustDates.js.map +1 -1
- package/build/esm/DatePicker/contexts.d.ts +31 -31
- package/build/esm/DatePicker/contexts.js +16 -13
- package/build/esm/DatePicker/contexts.js.map +1 -1
- package/build/esm/DatePicker/dateTypes.d.ts +15 -15
- package/build/esm/DatePicker/dateTypes.js.map +1 -1
- package/build/esm/DatePicker/hooks.d.ts +36 -36
- package/build/esm/DatePicker/hooks.js +44 -40
- package/build/esm/DatePicker/hooks.js.map +1 -1
- package/build/esm/DatePicker/index.d.ts +5 -5
- package/build/esm/DatePicker/index.js.map +1 -1
- package/build/esm/index.d.ts +1 -1
- package/build/esm/index.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeDatePicker.js","names":["forwardRef","useRef","useState","assignMultipleRefs","adjustDates","RangeDatePickerProvider","RangeDatePicker","ref","as","Comp","minDate","propMinDate","Date","maxDate","propMaxDate","dayNames","monthNames","onChange","
|
|
1
|
+
{"version":3,"file":"RangeDatePicker.js","names":["forwardRef","useRef","useState","assignMultipleRefs","adjustDates","RangeDatePickerProvider","jsx","_jsx","RangeDatePicker","_ref","ref","as","Comp","minDate","propMinDate","Date","maxDate","propMaxDate","dayNames","monthNames","onChange","from","controlledFrom","to","controlledTo","defaultFrom","defaultTo","rest","isControlled","undefined","rangeDatePickerRef","stateFrom","stateTo","setDates","innerHasFocus","setInnerHasFocus","onChangeFrom","nextFrom","nextTo","onChangeTo","contextValue","value","children"],"sources":["../../../src/DatePicker/RangeDatePicker.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useRef, useState } from 'react';\nimport { assignMultipleRefs } from '@basic-ui/core';\n\nimport type { MonthNames, DayNames } from './dateTypes';\nimport { adjustDates } from './adjustDates';\nimport type { RangeDatePickerContextProps } from './contexts';\nimport { RangeDatePickerProvider } from './contexts';\n\nexport type RangeDatePickerProps = Omit<\n HTMLAttributes<HTMLDivElement>,\n 'onChange'\n> & {\n as?: ElementType<any>;\n minDate?: Date;\n maxDate?: Date;\n dayNames: DayNames;\n monthNames: MonthNames;\n children?: ReactNode[];\n onChange?: (from: Date | null, to: Date | null) => void;\n from?: Date | null;\n to?: Date | null;\n defaultFrom?: Date | null;\n defaultTo?: Date | null;\n};\n\nexport const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(\n function RangeDatePicker(\n {\n as: Comp = 'div',\n minDate: propMinDate = new Date(0),\n maxDate: propMaxDate = new Date(),\n dayNames,\n monthNames,\n onChange,\n from: controlledFrom,\n to: controlledTo,\n defaultFrom,\n defaultTo,\n ...rest\n },\n ref\n ) {\n const isControlled =\n controlledFrom !== undefined && controlledTo !== undefined;\n\n const minDate = propMinDate,\n maxDate = propMaxDate;\n\n const rangeDatePickerRef = useRef<HTMLDivElement | null>(null);\n const [{ from: stateFrom, to: stateTo }, setDates] = useState({\n from: (defaultFrom || null) as Date | null,\n to: (defaultTo || null) as Date | null,\n });\n const [innerHasFocus, setInnerHasFocus] = useState(false);\n\n const onChangeFrom = (from: Date | null) => {\n const to = stateTo;\n const { from: nextFrom, to: nextTo } = adjustDates(from, to, 'from');\n\n onChange && onChange(nextFrom, nextTo);\n setDates({ from: nextFrom, to: nextTo });\n };\n\n const onChangeTo = (to: Date | null) => {\n const from = stateFrom;\n const { from: nextFrom, to: nextTo } = adjustDates(from, to, 'to');\n\n onChange && onChange(nextFrom, nextTo);\n setDates({ from: nextFrom, to: nextTo });\n };\n\n const from = isControlled ? controlledFrom : stateFrom;\n const to = isControlled ? controlledTo : stateTo;\n\n const contextValue: RangeDatePickerContextProps = {\n rangeDatePickerRef,\n innerHasFocus,\n setInnerHasFocus,\n minDate,\n maxDate,\n from,\n to,\n dayNames,\n monthNames,\n onChangeFrom,\n onChangeTo,\n };\n\n return (\n <RangeDatePickerProvider value={contextValue}>\n <Comp\n ref={assignMultipleRefs(ref, rangeDatePickerRef)}\n data-has-focus={innerHasFocus ? '' : undefined}\n {...rest}\n />\n </RangeDatePickerProvider>\n );\n }\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare function adjustDates(from: Date | null, to: Date | null, frozenParam: 'from' | 'to'): {
|
|
2
|
-
from: Date | null;
|
|
3
|
-
to: Date | null;
|
|
4
|
-
};
|
|
1
|
+
export declare function adjustDates(from: Date | null, to: Date | null, frozenParam: 'from' | 'to'): {
|
|
2
|
+
from: Date | null;
|
|
3
|
+
to: Date | null;
|
|
4
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"adjustDates.js","names":["addDays","isValid","differenceInDays","adjustDates","from","to","frozenParam"],"sources":["../../../src/DatePicker/adjustDates.ts"],"sourcesContent":["import { addDays, isValid, differenceInDays } from 'date-fns';\
|
|
1
|
+
{"version":3,"file":"adjustDates.js","names":["addDays","isValid","differenceInDays","adjustDates","from","to","frozenParam"],"sources":["../../../src/DatePicker/adjustDates.ts"],"sourcesContent":["import { addDays, isValid, differenceInDays } from 'date-fns';\n\nexport function adjustDates(\n from: Date | null,\n to: Date | null,\n frozenParam: 'from' | 'to'\n) {\n if (to && isValid(to) && from && isValid(from)) {\n if (differenceInDays(to, from) < 1) {\n if (frozenParam === 'from') {\n to = addDays(from, 1); // add one day\n } else {\n from = addDays(from, -1); // remove one day\n }\n }\n }\n\n return { from, to };\n}\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,OAAO,EAAEC,gBAAgB,QAAQ,UAAU;AAE7D,OAAO,SAASC,WAAWA,CACzBC,IAAiB,EACjBC,EAAe,EACfC,WAA0B,EAC1B;EACA,IAAID,EAAE,IAAIJ,OAAO,CAACI,EAAE,CAAC,IAAID,IAAI,IAAIH,OAAO,CAACG,IAAI,CAAC,EAAE;IAC9C,IAAIF,gBAAgB,CAACG,EAAE,EAAED,IAAI,CAAC,GAAG,CAAC,EAAE;MAClC,IAAIE,WAAW,KAAK,MAAM,EAAE;QAC1BD,EAAE,GAAGL,OAAO,CAACI,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;MACzB,CAAC,MAAM;QACLA,IAAI,GAAGJ,OAAO,CAACI,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;MAC5B;IACF;EACF;EAEA,OAAO;IAAEA,IAAI;IAAEC;EAAG,CAAC;AACrB","ignoreList":[]}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import type { MutableRefObject } from 'react';
|
|
2
|
-
import type { MonthNames, DayNames } from './dateTypes';
|
|
3
|
-
import type { ReducerState, ReducerActions } from './hooks';
|
|
4
|
-
export interface RangeDatePickerContextProps {
|
|
5
|
-
rangeDatePickerRef: MutableRefObject<HTMLDivElement | null>;
|
|
6
|
-
innerHasFocus: boolean;
|
|
7
|
-
setInnerHasFocus: (hasFocus: boolean) => void;
|
|
8
|
-
minDate: Date;
|
|
9
|
-
maxDate: Date;
|
|
10
|
-
from?: Date | null;
|
|
11
|
-
to?: Date | null;
|
|
12
|
-
onChangeFrom: (d: Date | null) => void;
|
|
13
|
-
onChangeTo: (d: Date | null) => void;
|
|
14
|
-
dayNames: DayNames;
|
|
15
|
-
monthNames: MonthNames;
|
|
16
|
-
}
|
|
17
|
-
export declare const RangeDatePickerProvider: import("react").Provider<RangeDatePickerContextProps | null>;
|
|
18
|
-
export declare const useRangeDatePickerContext: () => RangeDatePickerContextProps | null;
|
|
19
|
-
export interface DatePickerContextProps {
|
|
20
|
-
minDate: Date;
|
|
21
|
-
maxDate: Date;
|
|
22
|
-
dayNames: DayNames;
|
|
23
|
-
monthNames: MonthNames;
|
|
24
|
-
datePickerRef: MutableRefObject<HTMLDivElement | null>;
|
|
25
|
-
state: ReducerState;
|
|
26
|
-
dispatch: (value: ReducerActions) => void;
|
|
27
|
-
controlledValueRef: MutableRefObject<Date | null | undefined>;
|
|
28
|
-
onChangeRef: MutableRefObject<((from: Date | null) => void) | undefined>;
|
|
29
|
-
}
|
|
30
|
-
export declare const useDatePickerContext: () => DatePickerContextProps;
|
|
31
|
-
export declare const DatePickerProvider: import("react").Provider<DatePickerContextProps>;
|
|
1
|
+
import type { MutableRefObject } from 'react';
|
|
2
|
+
import type { MonthNames, DayNames } from './dateTypes';
|
|
3
|
+
import type { ReducerState, ReducerActions } from './hooks';
|
|
4
|
+
export interface RangeDatePickerContextProps {
|
|
5
|
+
rangeDatePickerRef: MutableRefObject<HTMLDivElement | null>;
|
|
6
|
+
innerHasFocus: boolean;
|
|
7
|
+
setInnerHasFocus: (hasFocus: boolean) => void;
|
|
8
|
+
minDate: Date;
|
|
9
|
+
maxDate: Date;
|
|
10
|
+
from?: Date | null;
|
|
11
|
+
to?: Date | null;
|
|
12
|
+
onChangeFrom: (d: Date | null) => void;
|
|
13
|
+
onChangeTo: (d: Date | null) => void;
|
|
14
|
+
dayNames: DayNames;
|
|
15
|
+
monthNames: MonthNames;
|
|
16
|
+
}
|
|
17
|
+
export declare const RangeDatePickerProvider: import("react").Provider<RangeDatePickerContextProps | null>;
|
|
18
|
+
export declare const useRangeDatePickerContext: () => RangeDatePickerContextProps | null;
|
|
19
|
+
export interface DatePickerContextProps {
|
|
20
|
+
minDate: Date;
|
|
21
|
+
maxDate: Date;
|
|
22
|
+
dayNames: DayNames;
|
|
23
|
+
monthNames: MonthNames;
|
|
24
|
+
datePickerRef: MutableRefObject<HTMLDivElement | null>;
|
|
25
|
+
state: ReducerState;
|
|
26
|
+
dispatch: (value: ReducerActions) => void;
|
|
27
|
+
controlledValueRef: MutableRefObject<Date | null | undefined>;
|
|
28
|
+
onChangeRef: MutableRefObject<((from: Date | null) => void) | undefined>;
|
|
29
|
+
}
|
|
30
|
+
export declare const useDatePickerContext: () => DatePickerContextProps;
|
|
31
|
+
export declare const DatePickerProvider: import("react").Provider<DatePickerContextProps>;
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
export
|
|
2
|
+
|
|
3
|
+
// RangeDatePicker
|
|
4
|
+
|
|
5
|
+
const rangeContext = /*#__PURE__*/createContext(null);
|
|
6
|
+
export const {
|
|
7
|
+
Provider: RangeDatePickerProvider
|
|
8
|
+
} = rangeContext;
|
|
9
|
+
export const useRangeDatePickerContext = () => useContext(rangeContext);
|
|
10
|
+
|
|
11
|
+
// DatePicker
|
|
12
|
+
|
|
13
|
+
const datePickerContext = /*#__PURE__*/createContext(null);
|
|
14
|
+
export const useDatePickerContext = () => useContext(datePickerContext);
|
|
15
|
+
export const {
|
|
16
|
+
Provider: DatePickerProvider
|
|
17
|
+
} = datePickerContext;
|
|
15
18
|
//# sourceMappingURL=contexts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contexts.js","names":["createContext","useContext","rangeContext","
|
|
1
|
+
{"version":3,"file":"contexts.js","names":["createContext","useContext","rangeContext","Provider","RangeDatePickerProvider","useRangeDatePickerContext","datePickerContext","useDatePickerContext","DatePickerProvider"],"sources":["../../../src/DatePicker/contexts.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { createContext, useContext } from 'react';\n\nimport type { MonthNames, DayNames } from './dateTypes';\nimport type { ReducerState, ReducerActions } from './hooks';\n\n// RangeDatePicker\nexport interface RangeDatePickerContextProps {\n rangeDatePickerRef: MutableRefObject<HTMLDivElement | null>;\n innerHasFocus: boolean;\n setInnerHasFocus: (hasFocus: boolean) => void;\n minDate: Date;\n maxDate: Date;\n from?: Date | null;\n to?: Date | null;\n onChangeFrom: (d: Date | null) => void;\n onChangeTo: (d: Date | null) => void;\n dayNames: DayNames;\n monthNames: MonthNames;\n}\n\nconst rangeContext = createContext<RangeDatePickerContextProps | null>(null);\nexport const { Provider: RangeDatePickerProvider } = rangeContext;\nexport const useRangeDatePickerContext = () => useContext(rangeContext);\n\n// DatePicker\nexport interface DatePickerContextProps {\n minDate: Date;\n maxDate: Date;\n dayNames: DayNames;\n monthNames: MonthNames;\n datePickerRef: MutableRefObject<HTMLDivElement | null>;\n state: ReducerState;\n dispatch: (value: ReducerActions) => void;\n controlledValueRef: MutableRefObject<Date | null | undefined>;\n onChangeRef: MutableRefObject<((from: Date | null) => void) | undefined>;\n}\nconst datePickerContext = createContext<DatePickerContextProps>(null as any);\nexport const useDatePickerContext = () => useContext(datePickerContext);\nexport const { Provider: DatePickerProvider } = datePickerContext;\n"],"mappings":"AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAKjD;;AAeA,MAAMC,YAAY,gBAAGF,aAAa,CAAqC,IAAI,CAAC;AAC5E,OAAO,MAAM;EAAEG,QAAQ,EAAEC;AAAwB,CAAC,GAAGF,YAAY;AACjE,OAAO,MAAMG,yBAAyB,GAAGA,CAAA,KAAMJ,UAAU,CAACC,YAAY,CAAC;;AAEvE;;AAYA,MAAMI,iBAAiB,gBAAGN,aAAa,CAAyB,IAAW,CAAC;AAC5E,OAAO,MAAMO,oBAAoB,GAAGA,CAAA,KAAMN,UAAU,CAACK,iBAAiB,CAAC;AACvE,OAAO,MAAM;EAAEH,QAAQ,EAAEK;AAAmB,CAAC,GAAGF,iBAAiB","ignoreList":[]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
string,
|
|
4
|
-
string,
|
|
5
|
-
string,
|
|
6
|
-
string,
|
|
7
|
-
string,
|
|
8
|
-
string,
|
|
9
|
-
string,
|
|
10
|
-
string,
|
|
11
|
-
string,
|
|
12
|
-
string,
|
|
13
|
-
string,
|
|
14
|
-
string
|
|
15
|
-
];
|
|
1
|
+
export type DayNames = [string, string, string, string, string, string, string];
|
|
2
|
+
export type MonthNames = [
|
|
3
|
+
string,
|
|
4
|
+
string,
|
|
5
|
+
string,
|
|
6
|
+
string,
|
|
7
|
+
string,
|
|
8
|
+
string,
|
|
9
|
+
string,
|
|
10
|
+
string,
|
|
11
|
+
string,
|
|
12
|
+
string,
|
|
13
|
+
string,
|
|
14
|
+
string
|
|
15
|
+
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dateTypes.js","names":[],"sources":["../../../src/DatePicker/dateTypes.ts"],"sourcesContent":["export type DayNames = [string, string, string, string, string, string, string];\
|
|
1
|
+
{"version":3,"file":"dateTypes.js","names":[],"sources":["../../../src/DatePicker/dateTypes.ts"],"sourcesContent":["export type DayNames = [string, string, string, string, string, string, string];\n\nexport type MonthNames = [\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string\n];\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
export declare const FOCUS = "FOCUS";
|
|
2
|
-
export declare const BLUR = "BLUR";
|
|
3
|
-
export declare const NAVIGATE = "NAVIGATE";
|
|
4
|
-
export declare const SET_DATE = "SET_DATE";
|
|
5
|
-
export
|
|
6
|
-
export interface ReducerState {
|
|
7
|
-
isFocused: boolean;
|
|
8
|
-
navigationYear: number;
|
|
9
|
-
navigationMonth: number;
|
|
10
|
-
navigationDay: number;
|
|
11
|
-
selectedDate: Date | null;
|
|
12
|
-
}
|
|
13
|
-
interface FocusAction {
|
|
14
|
-
type: typeof FOCUS;
|
|
15
|
-
}
|
|
16
|
-
interface NavigateAction {
|
|
17
|
-
type: typeof NAVIGATE;
|
|
18
|
-
year: number;
|
|
19
|
-
month: number;
|
|
20
|
-
day: number;
|
|
21
|
-
}
|
|
22
|
-
interface SetDateAction {
|
|
23
|
-
type: typeof SET_DATE;
|
|
24
|
-
selectedDate: Date | null;
|
|
25
|
-
}
|
|
26
|
-
interface BlurAction {
|
|
27
|
-
type: typeof BLUR;
|
|
28
|
-
selectedDate: Date | null;
|
|
29
|
-
}
|
|
30
|
-
export
|
|
31
|
-
export declare function reducer(currentState: Readonly<ReducerState>, action: ReducerActions): ReducerState;
|
|
32
|
-
export declare function useInnerFocus(): {
|
|
33
|
-
handleFocus: () => void;
|
|
34
|
-
handleBlur: () => void;
|
|
35
|
-
};
|
|
36
|
-
export {};
|
|
1
|
+
export declare const FOCUS = "FOCUS";
|
|
2
|
+
export declare const BLUR = "BLUR";
|
|
3
|
+
export declare const NAVIGATE = "NAVIGATE";
|
|
4
|
+
export declare const SET_DATE = "SET_DATE";
|
|
5
|
+
export type ActionTypes = typeof FOCUS | typeof BLUR | typeof NAVIGATE | typeof SET_DATE;
|
|
6
|
+
export interface ReducerState {
|
|
7
|
+
isFocused: boolean;
|
|
8
|
+
navigationYear: number;
|
|
9
|
+
navigationMonth: number;
|
|
10
|
+
navigationDay: number;
|
|
11
|
+
selectedDate: Date | null;
|
|
12
|
+
}
|
|
13
|
+
interface FocusAction {
|
|
14
|
+
type: typeof FOCUS;
|
|
15
|
+
}
|
|
16
|
+
interface NavigateAction {
|
|
17
|
+
type: typeof NAVIGATE;
|
|
18
|
+
year: number;
|
|
19
|
+
month: number;
|
|
20
|
+
day: number;
|
|
21
|
+
}
|
|
22
|
+
interface SetDateAction {
|
|
23
|
+
type: typeof SET_DATE;
|
|
24
|
+
selectedDate: Date | null;
|
|
25
|
+
}
|
|
26
|
+
interface BlurAction {
|
|
27
|
+
type: typeof BLUR;
|
|
28
|
+
selectedDate: Date | null;
|
|
29
|
+
}
|
|
30
|
+
export type ReducerActions = FocusAction | BlurAction | NavigateAction | SetDateAction;
|
|
31
|
+
export declare function reducer(currentState: Readonly<ReducerState>, action: ReducerActions): ReducerState;
|
|
32
|
+
export declare function useInnerFocus(): {
|
|
33
|
+
handleFocus: () => void;
|
|
34
|
+
handleBlur: () => void;
|
|
35
|
+
};
|
|
36
|
+
export {};
|
|
@@ -1,72 +1,78 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { useRangeDatePickerContext, useDatePickerContext } from './contexts';
|
|
2
|
+
|
|
3
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
3
4
|
// Actions
|
|
4
5
|
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export
|
|
8
|
-
export
|
|
6
|
+
export const FOCUS = 'FOCUS';
|
|
7
|
+
export const BLUR = 'BLUR';
|
|
8
|
+
export const NAVIGATE = 'NAVIGATE';
|
|
9
|
+
export const SET_DATE = 'SET_DATE';
|
|
10
|
+
|
|
11
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
12
|
+
// Reducer
|
|
13
|
+
|
|
9
14
|
export function reducer(currentState, action) {
|
|
10
15
|
switch (action.type) {
|
|
11
16
|
case FOCUS:
|
|
12
|
-
return
|
|
17
|
+
return {
|
|
18
|
+
...currentState,
|
|
13
19
|
isFocused: true
|
|
14
|
-
}
|
|
15
|
-
|
|
20
|
+
};
|
|
16
21
|
case BLUR:
|
|
17
|
-
return
|
|
22
|
+
return {
|
|
23
|
+
...currentState,
|
|
18
24
|
navigationYear: -1,
|
|
19
25
|
navigationMonth: -1,
|
|
20
26
|
navigationDay: -1,
|
|
21
27
|
selectedDate: action.selectedDate,
|
|
22
28
|
isFocused: false
|
|
23
|
-
}
|
|
24
|
-
|
|
29
|
+
};
|
|
25
30
|
case NAVIGATE:
|
|
26
|
-
return
|
|
31
|
+
return {
|
|
32
|
+
...currentState,
|
|
27
33
|
navigationYear: action.year,
|
|
28
34
|
navigationMonth: action.month,
|
|
29
35
|
navigationDay: action.day
|
|
30
|
-
}
|
|
31
|
-
|
|
36
|
+
};
|
|
32
37
|
case SET_DATE:
|
|
33
38
|
{
|
|
34
|
-
return
|
|
39
|
+
return {
|
|
40
|
+
...currentState,
|
|
35
41
|
navigationYear: -1,
|
|
36
42
|
navigationMonth: -1,
|
|
37
43
|
navigationDay: -1,
|
|
38
44
|
selectedDate: action.selectedDate
|
|
39
|
-
}
|
|
45
|
+
};
|
|
40
46
|
}
|
|
41
47
|
}
|
|
42
|
-
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
43
51
|
// Hooks
|
|
44
52
|
|
|
45
53
|
export function useInnerFocus() {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
selectedDate
|
|
52
|
-
navigationMonth
|
|
53
|
-
navigationYear
|
|
54
|
-
navigationDay
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
const {
|
|
55
|
+
dispatch,
|
|
56
|
+
onChangeRef,
|
|
57
|
+
datePickerRef,
|
|
58
|
+
state: {
|
|
59
|
+
selectedDate,
|
|
60
|
+
navigationMonth,
|
|
61
|
+
navigationYear,
|
|
62
|
+
navigationDay
|
|
63
|
+
}
|
|
64
|
+
} = useDatePickerContext();
|
|
65
|
+
const rangeCtx = useRangeDatePickerContext();
|
|
66
|
+
const handleFocus = () => {
|
|
59
67
|
dispatch({
|
|
60
68
|
type: FOCUS
|
|
61
69
|
});
|
|
62
|
-
|
|
63
70
|
if (rangeCtx) {
|
|
64
71
|
rangeCtx.setInnerHasFocus(true);
|
|
65
72
|
}
|
|
66
73
|
};
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
requestAnimationFrame(function () {
|
|
74
|
+
const handleBlur = () => {
|
|
75
|
+
requestAnimationFrame(() => {
|
|
70
76
|
// we on want to close only if focus rests outside the datepicker
|
|
71
77
|
if (datePickerRef.current && !datePickerRef.current.contains(document.activeElement)) {
|
|
72
78
|
if (selectedDate && navigationYear >= 0 && navigationMonth >= 0 && navigationDay === -1) {
|
|
@@ -79,20 +85,18 @@ export function useInnerFocus() {
|
|
|
79
85
|
} else {
|
|
80
86
|
dispatch({
|
|
81
87
|
type: BLUR,
|
|
82
|
-
selectedDate
|
|
88
|
+
selectedDate
|
|
83
89
|
});
|
|
84
90
|
}
|
|
85
91
|
}
|
|
86
|
-
|
|
87
92
|
if (rangeCtx && rangeCtx.rangeDatePickerRef.current && !rangeCtx.rangeDatePickerRef.current.contains(document.activeElement)) {
|
|
88
93
|
rangeCtx.setInnerHasFocus(false);
|
|
89
94
|
}
|
|
90
95
|
});
|
|
91
96
|
};
|
|
92
|
-
|
|
93
97
|
return {
|
|
94
|
-
handleFocus
|
|
95
|
-
handleBlur
|
|
98
|
+
handleFocus,
|
|
99
|
+
handleBlur
|
|
96
100
|
};
|
|
97
101
|
}
|
|
98
102
|
//# sourceMappingURL=hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.js","names":["useRangeDatePickerContext","useDatePickerContext","FOCUS","BLUR","NAVIGATE","SET_DATE","reducer","currentState","action","type","isFocused","navigationYear","navigationMonth","navigationDay","selectedDate","year","month","day","useInnerFocus","dispatch","onChangeRef","datePickerRef","state","rangeCtx","handleFocus","setInnerHasFocus","handleBlur","requestAnimationFrame","current","contains","document","activeElement","rangeDatePickerRef"],"sources":["../../../src/DatePicker/hooks.tsx"],"sourcesContent":["import { useRangeDatePickerContext, useDatePickerContext } from './contexts';\
|
|
1
|
+
{"version":3,"file":"hooks.js","names":["useRangeDatePickerContext","useDatePickerContext","FOCUS","BLUR","NAVIGATE","SET_DATE","reducer","currentState","action","type","isFocused","navigationYear","navigationMonth","navigationDay","selectedDate","year","month","day","useInnerFocus","dispatch","onChangeRef","datePickerRef","state","rangeCtx","handleFocus","setInnerHasFocus","handleBlur","requestAnimationFrame","current","contains","document","activeElement","rangeDatePickerRef"],"sources":["../../../src/DatePicker/hooks.tsx"],"sourcesContent":["import { useRangeDatePickerContext, useDatePickerContext } from './contexts';\n\n////////////////////////////////////////////////////////////////////////////////\n// Actions\n\nexport const FOCUS = 'FOCUS';\n\nexport const BLUR = 'BLUR';\n\nexport const NAVIGATE = 'NAVIGATE';\n\nexport const SET_DATE = 'SET_DATE';\n\nexport type ActionTypes =\n | typeof FOCUS\n | typeof BLUR\n | typeof NAVIGATE\n | typeof SET_DATE;\n\n////////////////////////////////////////////////////////////////////////////////\n// Reducer\n\nexport interface ReducerState {\n isFocused: boolean;\n navigationYear: number;\n navigationMonth: number;\n navigationDay: number;\n selectedDate: Date | null;\n}\n\ninterface FocusAction {\n type: typeof FOCUS;\n}\n\ninterface NavigateAction {\n type: typeof NAVIGATE;\n year: number;\n month: number;\n day: number;\n}\ninterface SetDateAction {\n type: typeof SET_DATE;\n selectedDate: Date | null;\n}\n\ninterface BlurAction {\n type: typeof BLUR;\n selectedDate: Date | null;\n}\n\nexport type ReducerActions =\n | FocusAction\n | BlurAction\n | NavigateAction\n | SetDateAction;\n\nexport function reducer(\n currentState: Readonly<ReducerState>,\n action: ReducerActions\n): ReducerState {\n switch (action.type) {\n case FOCUS:\n return {\n ...currentState,\n isFocused: true,\n };\n case BLUR:\n return {\n ...currentState,\n navigationYear: -1,\n navigationMonth: -1,\n navigationDay: -1,\n selectedDate: action.selectedDate,\n isFocused: false,\n };\n case NAVIGATE:\n return {\n ...currentState,\n navigationYear: action.year,\n navigationMonth: action.month,\n navigationDay: action.day,\n };\n case SET_DATE: {\n return {\n ...currentState,\n navigationYear: -1,\n navigationMonth: -1,\n navigationDay: -1,\n selectedDate: action.selectedDate,\n };\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////\n// Hooks\n\nexport function useInnerFocus() {\n const {\n dispatch,\n onChangeRef,\n datePickerRef,\n state: { selectedDate, navigationMonth, navigationYear, navigationDay },\n } = useDatePickerContext();\n const rangeCtx = useRangeDatePickerContext();\n\n const handleFocus = () => {\n dispatch({ type: FOCUS });\n if (rangeCtx) {\n rangeCtx.setInnerHasFocus(true);\n }\n };\n\n const handleBlur = () => {\n requestAnimationFrame(() => {\n // we on want to close only if focus rests outside the datepicker\n if (\n datePickerRef.current &&\n !datePickerRef.current.contains(document.activeElement)\n ) {\n if (\n selectedDate &&\n navigationYear >= 0 &&\n navigationMonth >= 0 &&\n navigationDay === -1\n ) {\n // user started picking a new day, but haven't finished :(\n onChangeRef.current && onChangeRef.current(null);\n dispatch({ type: BLUR, selectedDate: null });\n } else {\n dispatch({ type: BLUR, selectedDate });\n }\n }\n\n if (\n rangeCtx &&\n rangeCtx.rangeDatePickerRef.current &&\n !rangeCtx.rangeDatePickerRef.current.contains(document.activeElement)\n ) {\n rangeCtx.setInnerHasFocus(false);\n }\n });\n };\n\n return { handleFocus, handleBlur };\n}\n"],"mappings":"AAAA,SAASA,yBAAyB,EAAEC,oBAAoB,QAAQ,YAAY;;AAE5E;AACA;;AAEA,OAAO,MAAMC,KAAK,GAAG,OAAO;AAE5B,OAAO,MAAMC,IAAI,GAAG,MAAM;AAE1B,OAAO,MAAMC,QAAQ,GAAG,UAAU;AAElC,OAAO,MAAMC,QAAQ,GAAG,UAAU;;AAQlC;AACA;;AAoCA,OAAO,SAASC,OAAOA,CACrBC,YAAoC,EACpCC,MAAsB,EACR;EACd,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAKP,KAAK;MACR,OAAO;QACL,GAAGK,YAAY;QACfG,SAAS,EAAE;MACb,CAAC;IACH,KAAKP,IAAI;MACP,OAAO;QACL,GAAGI,YAAY;QACfI,cAAc,EAAE,CAAC,CAAC;QAClBC,eAAe,EAAE,CAAC,CAAC;QACnBC,aAAa,EAAE,CAAC,CAAC;QACjBC,YAAY,EAAEN,MAAM,CAACM,YAAY;QACjCJ,SAAS,EAAE;MACb,CAAC;IACH,KAAKN,QAAQ;MACX,OAAO;QACL,GAAGG,YAAY;QACfI,cAAc,EAAEH,MAAM,CAACO,IAAI;QAC3BH,eAAe,EAAEJ,MAAM,CAACQ,KAAK;QAC7BH,aAAa,EAAEL,MAAM,CAACS;MACxB,CAAC;IACH,KAAKZ,QAAQ;MAAE;QACb,OAAO;UACL,GAAGE,YAAY;UACfI,cAAc,EAAE,CAAC,CAAC;UAClBC,eAAe,EAAE,CAAC,CAAC;UACnBC,aAAa,EAAE,CAAC,CAAC;UACjBC,YAAY,EAAEN,MAAM,CAACM;QACvB,CAAC;MACH;EACF;AACF;;AAEA;AACA;;AAEA,OAAO,SAASI,aAAaA,CAAA,EAAG;EAC9B,MAAM;IACJC,QAAQ;IACRC,WAAW;IACXC,aAAa;IACbC,KAAK,EAAE;MAAER,YAAY;MAAEF,eAAe;MAAED,cAAc;MAAEE;IAAc;EACxE,CAAC,GAAGZ,oBAAoB,CAAC,CAAC;EAC1B,MAAMsB,QAAQ,GAAGvB,yBAAyB,CAAC,CAAC;EAE5C,MAAMwB,WAAW,GAAGA,CAAA,KAAM;IACxBL,QAAQ,CAAC;MAAEV,IAAI,EAAEP;IAAM,CAAC,CAAC;IACzB,IAAIqB,QAAQ,EAAE;MACZA,QAAQ,CAACE,gBAAgB,CAAC,IAAI,CAAC;IACjC;EACF,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACvBC,qBAAqB,CAAC,MAAM;MAC1B;MACA,IACEN,aAAa,CAACO,OAAO,IACrB,CAACP,aAAa,CAACO,OAAO,CAACC,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC,EACvD;QACA,IACEjB,YAAY,IACZH,cAAc,IAAI,CAAC,IACnBC,eAAe,IAAI,CAAC,IACpBC,aAAa,KAAK,CAAC,CAAC,EACpB;UACA;UACAO,WAAW,CAACQ,OAAO,IAAIR,WAAW,CAACQ,OAAO,CAAC,IAAI,CAAC;UAChDT,QAAQ,CAAC;YAAEV,IAAI,EAAEN,IAAI;YAAEW,YAAY,EAAE;UAAK,CAAC,CAAC;QAC9C,CAAC,MAAM;UACLK,QAAQ,CAAC;YAAEV,IAAI,EAAEN,IAAI;YAAEW;UAAa,CAAC,CAAC;QACxC;MACF;MAEA,IACES,QAAQ,IACRA,QAAQ,CAACS,kBAAkB,CAACJ,OAAO,IACnC,CAACL,QAAQ,CAACS,kBAAkB,CAACJ,OAAO,CAACC,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC,EACrE;QACAR,QAAQ,CAACE,gBAAgB,CAAC,KAAK,CAAC;MAClC;IACF,CAAC,CAAC;EACJ,CAAC;EAED,OAAO;IAAED,WAAW;IAAEE;EAAW,CAAC;AACpC","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from './DatePicker';
|
|
2
|
-
export * from './RangeDatePicker';
|
|
3
|
-
export * from './DatePickerSelect';
|
|
4
|
-
export * from './dateTypes';
|
|
5
|
-
export * from './contexts';
|
|
1
|
+
export * from './DatePicker';
|
|
2
|
+
export * from './RangeDatePicker';
|
|
3
|
+
export * from './DatePickerSelect';
|
|
4
|
+
export * from './dateTypes';
|
|
5
|
+
export * from './contexts';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["export * from './DatePicker';\
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["export * from './DatePicker';\nexport * from './RangeDatePicker';\nexport * from './DatePickerSelect';\nexport * from './dateTypes';\nexport * from './contexts';\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,mBAAmB;AACjC,cAAc,oBAAoB;AAClC,cAAc,aAAa;AAC3B,cAAc,YAAY","ignoreList":[]}
|
package/build/esm/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './DatePicker';
|
|
1
|
+
export * from './DatePicker';
|
package/build/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from './DatePicker';\
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from './DatePicker';\n"],"mappings":"AAAA,cAAc,cAAc","ignoreList":[]}
|