carbon-react 119.6.0 → 119.6.2
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/esm/__internal__/focus-trap/focus-trap.component.js +5 -5
- package/esm/__internal__/input/input-presentation.component.d.ts +3 -1
- package/esm/__internal__/input/input-presentation.component.js +3 -0
- package/esm/__internal__/input/input-presentation.style.d.ts +1 -1
- package/esm/__internal__/input/input-presentation.style.js +4 -2
- package/esm/__internal__/popover/popover.component.d.ts +4 -1
- package/esm/components/date/__internal__/date-formats/index.d.ts +3 -6
- package/esm/components/date/__internal__/date-formats/index.js +3 -3
- package/esm/components/date/__internal__/date-picker/date-picker.component.d.ts +38 -0
- package/esm/components/date/__internal__/date-picker/date-picker.component.js +243 -34
- package/esm/components/date/__internal__/date-picker/day-picker.style.d.ts +2 -0
- package/esm/components/date/__internal__/date-picker/index.d.ts +2 -0
- package/esm/components/date/__internal__/navbar/button.style.d.ts +4 -0
- package/esm/components/date/__internal__/navbar/index.d.ts +2 -0
- package/esm/components/date/__internal__/navbar/navbar.component.d.ts +8 -0
- package/esm/components/date/__internal__/navbar/navbar.component.js +7 -9
- package/esm/components/date/__internal__/navbar/navbar.style.d.ts +2 -0
- package/esm/components/date/__internal__/utils.d.ts +14 -0
- package/esm/components/date/__internal__/utils.js +22 -18
- package/esm/components/date/__internal__/weekday/abbr.style.d.ts +2 -0
- package/esm/components/date/__internal__/weekday/index.d.ts +2 -0
- package/esm/components/date/__internal__/weekday/weekday.component.d.ts +8 -0
- package/esm/components/date/__internal__/weekday/weekday.component.js +1 -6
- package/esm/components/date/__internal__/weekday/weekday.style.d.ts +2 -0
- package/esm/components/date/date.component.d.ts +43 -0
- package/esm/components/date/date.component.js +781 -60
- package/esm/components/date/date.style.d.ts +6 -0
- package/esm/components/date/date.style.js +3 -8
- package/esm/components/date/index.d.ts +2 -2
- package/esm/components/date-range/date-range.component.d.ts +88 -0
- package/esm/components/date-range/date-range.component.js +22 -102
- package/esm/components/date-range/date-range.context.d.ts +22 -0
- package/esm/components/date-range/date-range.style.d.ts +6 -0
- package/esm/components/date-range/date-range.style.js +1 -1
- package/esm/components/date-range/index.d.ts +3 -3
- package/esm/components/textbox/textbox.component.js +1 -0
- package/esm/hooks/__internal__/useFloating/useFloating.d.ts +4 -1
- package/lib/__internal__/focus-trap/focus-trap.component.js +5 -5
- package/lib/__internal__/input/input-presentation.component.d.ts +3 -1
- package/lib/__internal__/input/input-presentation.component.js +3 -0
- package/lib/__internal__/input/input-presentation.style.d.ts +1 -1
- package/lib/__internal__/input/input-presentation.style.js +4 -2
- package/lib/__internal__/popover/popover.component.d.ts +4 -1
- package/lib/components/date/__internal__/date-formats/index.d.ts +3 -6
- package/lib/components/date/__internal__/date-formats/index.js +3 -3
- package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts +38 -0
- package/lib/components/date/__internal__/date-picker/date-picker.component.js +243 -35
- package/lib/components/date/__internal__/date-picker/day-picker.style.d.ts +2 -0
- package/lib/components/date/__internal__/date-picker/index.d.ts +2 -0
- package/lib/components/date/__internal__/navbar/button.style.d.ts +4 -0
- package/lib/components/date/__internal__/navbar/index.d.ts +2 -0
- package/lib/components/date/__internal__/navbar/navbar.component.d.ts +8 -0
- package/lib/components/date/__internal__/navbar/navbar.component.js +8 -9
- package/lib/components/date/__internal__/navbar/navbar.style.d.ts +2 -0
- package/lib/components/date/__internal__/utils.d.ts +14 -0
- package/lib/components/date/__internal__/utils.js +22 -18
- package/lib/components/date/__internal__/weekday/abbr.style.d.ts +2 -0
- package/lib/components/date/__internal__/weekday/index.d.ts +2 -0
- package/lib/components/date/__internal__/weekday/weekday.component.d.ts +8 -0
- package/lib/components/date/__internal__/weekday/weekday.component.js +2 -6
- package/lib/components/date/__internal__/weekday/weekday.style.d.ts +2 -0
- package/lib/components/date/date.component.d.ts +43 -0
- package/lib/components/date/date.component.js +781 -60
- package/lib/components/date/date.style.d.ts +6 -0
- package/lib/components/date/date.style.js +3 -8
- package/lib/components/date/index.d.ts +2 -2
- package/lib/components/date-range/date-range.component.d.ts +88 -0
- package/lib/components/date-range/date-range.component.js +23 -102
- package/lib/components/date-range/date-range.context.d.ts +22 -0
- package/lib/components/date-range/date-range.style.d.ts +6 -0
- package/lib/components/date-range/date-range.style.js +1 -1
- package/lib/components/date-range/index.d.ts +3 -3
- package/lib/components/textbox/textbox.component.js +1 -0
- package/lib/hooks/__internal__/useFloating/useFloating.d.ts +4 -1
- package/package.json +1 -1
- package/esm/components/date/__internal__/date-picker/date-picker.d.ts +0 -27
- package/esm/components/date/__internal__/navbar/navbar.d.ts +0 -8
- package/esm/components/date/__internal__/weekday/weekday.d.ts +0 -13
- package/esm/components/date/date.d.ts +0 -52
- package/esm/components/date-range/date-range-context.d.ts +0 -17
- package/esm/components/date-range/date-range.d.ts +0 -92
- package/lib/components/date/__internal__/date-picker/date-picker.d.ts +0 -27
- package/lib/components/date/__internal__/navbar/navbar.d.ts +0 -8
- package/lib/components/date/__internal__/weekday/weekday.d.ts +0 -13
- package/lib/components/date/date.d.ts +0 -52
- package/lib/components/date-range/date-range-context.d.ts +0 -17
- package/lib/components/date-range/date-range.d.ts +0 -92
|
@@ -97,8 +97,8 @@ const FocusTrap = _ref => {
|
|
|
97
97
|
}, [trapWrappers]);
|
|
98
98
|
useEffect(() => {
|
|
99
99
|
const trapFn = ev => {
|
|
100
|
-
// block focus trap from working if it's not the topmost trap
|
|
101
|
-
if (!isTopModal) {
|
|
100
|
+
// block focus trap from working if it's not the topmost trap, or is currently closed
|
|
101
|
+
if (!isTopModal || !isOpen) {
|
|
102
102
|
return;
|
|
103
103
|
}
|
|
104
104
|
const focusableElements = getFocusableElements(defaultFocusableSelectors);
|
|
@@ -108,7 +108,7 @@ const FocusTrap = _ref => {
|
|
|
108
108
|
return function cleanup() {
|
|
109
109
|
document.removeEventListener("keydown", trapFn, true);
|
|
110
110
|
};
|
|
111
|
-
}, [bespokeTrap, wrapperRef, focusableSelectors, getFocusableElements, isTopModal]);
|
|
111
|
+
}, [bespokeTrap, wrapperRef, focusableSelectors, getFocusableElements, isTopModal, isOpen]);
|
|
112
112
|
const updateCurrentFocusedElement = useCallback(() => {
|
|
113
113
|
const focusableElements = getFocusableElements(focusableSelectors || defaultFocusableSelectors);
|
|
114
114
|
const element = focusableElements?.find(el => el === document.activeElement);
|
|
@@ -163,13 +163,13 @@ const FocusTrap = _ref => {
|
|
|
163
163
|
});
|
|
164
164
|
return /*#__PURE__*/React.createElement("div", {
|
|
165
165
|
ref: trapRef
|
|
166
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
166
|
+
}, isOpen && /*#__PURE__*/React.createElement("div", {
|
|
167
167
|
"data-element": TAB_GUARD_TOP
|
|
168
168
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
169
169
|
,
|
|
170
170
|
tabIndex: 0,
|
|
171
171
|
onFocus: onTabGuardTopFocus(wrapperRef)
|
|
172
|
-
}), clonedChildren, /*#__PURE__*/React.createElement("div", {
|
|
172
|
+
}), clonedChildren, isOpen && /*#__PURE__*/React.createElement("div", {
|
|
173
173
|
"data-element": TAB_GUARD_BOTTOM
|
|
174
174
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
175
175
|
,
|
|
@@ -7,6 +7,8 @@ export interface CommonInputPresentationProps extends ValidationProps {
|
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
/** The default value alignment on the input */
|
|
9
9
|
align?: string;
|
|
10
|
+
/** Emphasized part of the displayed text */
|
|
11
|
+
prefix?: string;
|
|
10
12
|
/** The width of the input as a percentage */
|
|
11
13
|
inputWidth?: number;
|
|
12
14
|
/**
|
|
@@ -25,5 +27,5 @@ export interface InputPresentationProps extends CommonInputPresentationProps {
|
|
|
25
27
|
/** Content to be rendered before the input */
|
|
26
28
|
positionedChildren?: React.ReactNode;
|
|
27
29
|
}
|
|
28
|
-
declare const InputPresentation: ({ children, positionedChildren, inputWidth, maxWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
|
|
30
|
+
declare const InputPresentation: ({ children, positionedChildren, prefix, inputWidth, maxWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
|
|
29
31
|
export default InputPresentation;
|
|
@@ -7,6 +7,7 @@ const InputPresentation = _ref => {
|
|
|
7
7
|
let {
|
|
8
8
|
children,
|
|
9
9
|
positionedChildren,
|
|
10
|
+
prefix,
|
|
10
11
|
inputWidth,
|
|
11
12
|
maxWidth,
|
|
12
13
|
align,
|
|
@@ -49,6 +50,7 @@ const InputPresentation = _ref => {
|
|
|
49
50
|
onMouseEnter: handleMouseEnter,
|
|
50
51
|
onMouseLeave: handleMouseLeave,
|
|
51
52
|
align: align,
|
|
53
|
+
prefix: prefix,
|
|
52
54
|
disabled: disabled,
|
|
53
55
|
readOnly: readOnly,
|
|
54
56
|
size: size,
|
|
@@ -69,6 +71,7 @@ InputPresentation.propTypes = {
|
|
|
69
71
|
"inputWidth": PropTypes.number,
|
|
70
72
|
"maxWidth": PropTypes.string,
|
|
71
73
|
"positionedChildren": PropTypes.node,
|
|
74
|
+
"prefix": PropTypes.string,
|
|
72
75
|
"readOnly": PropTypes.bool,
|
|
73
76
|
"size": PropTypes.oneOf(["large", "medium", "small"]),
|
|
74
77
|
"warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
|
|
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
|
|
|
2
2
|
import { InputContextProps } from "../input-behaviour";
|
|
3
3
|
import { CarbonProviderProps } from "../../components/carbon-provider";
|
|
4
4
|
export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth" | "maxWidth">, never>;
|
|
5
|
-
declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
|
|
5
|
+
declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
|
|
6
6
|
export default InputPresentationStyle;
|
|
@@ -109,9 +109,11 @@ const InputPresentationStyle = styled.div`
|
|
|
109
109
|
|
|
110
110
|
${_ref8 => {
|
|
111
111
|
let {
|
|
112
|
-
align
|
|
112
|
+
align,
|
|
113
|
+
prefix
|
|
113
114
|
} = _ref8;
|
|
114
|
-
return align === "right" &&
|
|
115
|
+
return align === "right" && `flex-direction: ${prefix ? "row" : "row-reverse"};
|
|
116
|
+
`;
|
|
115
117
|
}}
|
|
116
118
|
|
|
117
119
|
input::-ms-clear {
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Placement, Middleware } from "@floating-ui/dom";
|
|
3
|
+
declare type CustomRefObject<T> = {
|
|
4
|
+
current?: T | null;
|
|
5
|
+
};
|
|
3
6
|
export interface PopoverProps {
|
|
4
7
|
children: React.ReactElement;
|
|
5
8
|
placement?: Placement;
|
|
6
9
|
disableBackgroundUI?: boolean;
|
|
7
10
|
middleware?: Middleware[];
|
|
8
11
|
disablePortal?: boolean;
|
|
9
|
-
reference:
|
|
12
|
+
reference: CustomRefObject<HTMLElement>;
|
|
10
13
|
isOpen?: boolean;
|
|
11
14
|
animationFrame?: boolean;
|
|
12
15
|
}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { Locale as DateFnsLocale } from "date-fns";
|
|
2
|
-
|
|
3
2
|
interface LocaleFormats {
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
formats: string[];
|
|
4
|
+
format: string;
|
|
6
5
|
}
|
|
7
|
-
|
|
8
|
-
declare function getFormatData(locale: DateFnsLocale): LocaleFormats;
|
|
9
|
-
|
|
6
|
+
declare const getFormatData: ({ code }: DateFnsLocale) => LocaleFormats;
|
|
10
7
|
export default getFormatData;
|
|
@@ -30,13 +30,13 @@ const getOutputFormatForLocale = localeCode => {
|
|
|
30
30
|
year: "yyyy"
|
|
31
31
|
};
|
|
32
32
|
const formatter = new Intl.DateTimeFormat(localeCode);
|
|
33
|
-
let separator;
|
|
33
|
+
let separator = "";
|
|
34
34
|
const format = formatter.formatToParts(new Date()).map(_ref => {
|
|
35
35
|
let {
|
|
36
36
|
type,
|
|
37
37
|
value
|
|
38
38
|
} = _ref;
|
|
39
|
-
if (
|
|
39
|
+
if (["day", "month", "year"].includes(type)) {
|
|
40
40
|
return formatMap[type];
|
|
41
41
|
}
|
|
42
42
|
if (!separator) {
|
|
@@ -73,7 +73,7 @@ const getTrailingChar = format => {
|
|
|
73
73
|
};
|
|
74
74
|
const getFormatData = _ref2 => {
|
|
75
75
|
let {
|
|
76
|
-
code
|
|
76
|
+
code = "en-GB"
|
|
77
77
|
} = _ref2;
|
|
78
78
|
if (["en-CA", "en-US"].includes(code)) {
|
|
79
79
|
const format = "MM/dd/yyyy";
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { DayPickerProps, Modifier } from "react-day-picker";
|
|
3
|
+
declare type CustomRefObject<T> = {
|
|
4
|
+
current?: T | null;
|
|
5
|
+
};
|
|
6
|
+
/** there is an issue with typescript-to-proptypes package that means we need to override these types */
|
|
7
|
+
interface Modifiers {
|
|
8
|
+
today: NonNullable<Modifier> | NonNullable<Modifier>[];
|
|
9
|
+
outside: NonNullable<Modifier> | NonNullable<Modifier>[];
|
|
10
|
+
[other: string]: NonNullable<Modifier> | NonNullable<Modifier>[];
|
|
11
|
+
}
|
|
12
|
+
export interface PickerProps extends Omit<DayPickerProps, "disabledDays" | "modifiers" | "selectedDays"> {
|
|
13
|
+
disabledDays?: NonNullable<Modifier> | NonNullable<Modifier>[] | undefined[];
|
|
14
|
+
modifiers?: Partial<Modifiers>;
|
|
15
|
+
selectedDays?: NonNullable<Modifier> | NonNullable<Modifier>[] | undefined[];
|
|
16
|
+
}
|
|
17
|
+
export interface DatePickerProps {
|
|
18
|
+
/** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
|
|
19
|
+
disablePortal?: boolean;
|
|
20
|
+
/** Minimum possible date YYYY-MM-DD */
|
|
21
|
+
minDate?: string;
|
|
22
|
+
/** Maximum possible date YYYY-MM-DD */
|
|
23
|
+
maxDate?: string;
|
|
24
|
+
/** Pass any props that match the DayPickerProps interface to override default behaviors */
|
|
25
|
+
pickerProps?: PickerProps;
|
|
26
|
+
/** Element that the DatePicker will be displayed under */
|
|
27
|
+
inputElement: CustomRefObject<HTMLElement>;
|
|
28
|
+
/** Currently selected date */
|
|
29
|
+
selectedDays?: Date;
|
|
30
|
+
/** Callback to handle mousedown event on picker container */
|
|
31
|
+
pickerMouseDown?: () => void;
|
|
32
|
+
/** Sets whether the picker should be displayed */
|
|
33
|
+
open?: boolean;
|
|
34
|
+
/** Callback triggered when a Day is clicked */
|
|
35
|
+
onDayClick?: (date: Date, ev: React.MouseEvent<HTMLDivElement>) => void;
|
|
36
|
+
}
|
|
37
|
+
export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
38
|
+
export default DatePicker;
|
|
@@ -9,6 +9,9 @@ import useLocale from "../../../../hooks/__internal__/useLocale";
|
|
|
9
9
|
import Navbar from "../navbar";
|
|
10
10
|
import Weekday from "../weekday";
|
|
11
11
|
import StyledDayPicker from "./day-picker.style";
|
|
12
|
+
|
|
13
|
+
/** there is an issue with typescript-to-proptypes package that means we need to override these types */
|
|
14
|
+
|
|
12
15
|
const popoverMiddleware = [offset(3), flip({
|
|
13
16
|
fallbackStrategy: "initialPlacement"
|
|
14
17
|
})];
|
|
@@ -31,36 +34,33 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
31
34
|
} = l.date.dateFnsLocale();
|
|
32
35
|
const {
|
|
33
36
|
weekStartsOn
|
|
34
|
-
} = options;
|
|
37
|
+
} = options || /* istanbul ignore next */{};
|
|
35
38
|
const monthsLong = useMemo(() => Array.from({
|
|
36
39
|
length: 12
|
|
37
40
|
}).map((_, i) => {
|
|
38
|
-
const month = localize
|
|
41
|
+
const month = localize?.month(i);
|
|
39
42
|
return month[0].toUpperCase() + month.slice(1);
|
|
40
43
|
}), [localize]);
|
|
41
44
|
const monthsShort = useMemo(() => Array.from({
|
|
42
45
|
length: 12
|
|
43
|
-
}).map((_, i) => localize
|
|
46
|
+
}).map((_, i) => localize?.month(i, {
|
|
44
47
|
width: "abbreviated"
|
|
45
48
|
}).substring(0, 3)), [localize]);
|
|
46
49
|
const weekdaysLong = useMemo(() => Array.from({
|
|
47
50
|
length: 7
|
|
48
|
-
}).map((_, i) => localize
|
|
51
|
+
}).map((_, i) => localize?.day(i)), [localize]);
|
|
49
52
|
const weekdaysShort = useMemo(() => {
|
|
50
53
|
const isGivenLocale = str => l.locale().includes(str);
|
|
51
54
|
return Array.from({
|
|
52
55
|
length: 7
|
|
53
|
-
}).map((_, i) => localize
|
|
56
|
+
}).map((_, i) => localize?.day(i, ["de", "pl"].some(isGivenLocale) ? {
|
|
54
57
|
width: "wide"
|
|
55
58
|
} : {
|
|
56
59
|
width: "abbreviated"
|
|
57
60
|
}).substring(0, isGivenLocale("de") ? 2 : 3));
|
|
58
61
|
}, [l, localize]);
|
|
59
|
-
const handleDayClick = (date,
|
|
60
|
-
|
|
61
|
-
disabled
|
|
62
|
-
} = _ref2;
|
|
63
|
-
if (!disabled) {
|
|
62
|
+
const handleDayClick = (date, modifiers, ev) => {
|
|
63
|
+
if (!modifiers.disabled) {
|
|
64
64
|
const {
|
|
65
65
|
id,
|
|
66
66
|
name
|
|
@@ -70,13 +70,16 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
70
70
|
id,
|
|
71
71
|
name
|
|
72
72
|
};
|
|
73
|
-
onDayClick(date, ev);
|
|
73
|
+
onDayClick?.(date, ev);
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
76
|
const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
|
|
77
77
|
if (!open) {
|
|
78
78
|
return null;
|
|
79
79
|
}
|
|
80
|
+
const localeUtils = {
|
|
81
|
+
formatDay
|
|
82
|
+
};
|
|
80
83
|
return /*#__PURE__*/React.createElement(Popover, {
|
|
81
84
|
placement: "bottom-start",
|
|
82
85
|
reference: inputElement,
|
|
@@ -91,7 +94,6 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
91
94
|
firstDayOfWeek: weekStartsOn,
|
|
92
95
|
onDayClick: handleDayClick,
|
|
93
96
|
selectedDays: selectedDays,
|
|
94
|
-
date: selectedDays,
|
|
95
97
|
weekdayElement: weekdayElementProps => {
|
|
96
98
|
const {
|
|
97
99
|
className,
|
|
@@ -106,31 +108,238 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
106
108
|
fixedWeeks: true,
|
|
107
109
|
initialMonth: selectedDays || undefined,
|
|
108
110
|
disabledDays: getDisabledDays(minDate, maxDate),
|
|
109
|
-
inline: true,
|
|
110
111
|
locale: l.locale(),
|
|
111
|
-
localeUtils:
|
|
112
|
-
formatDay
|
|
113
|
-
}
|
|
112
|
+
localeUtils: localeUtils
|
|
114
113
|
}, pickerProps))));
|
|
115
114
|
});
|
|
116
115
|
DatePicker.propTypes = {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
116
|
+
"disablePortal": PropTypes.bool,
|
|
117
|
+
"inputElement": PropTypes.shape({
|
|
118
|
+
"current": function (props, propName) {
|
|
119
|
+
if (props[propName] == null) {
|
|
120
|
+
return null;
|
|
121
|
+
} else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
|
|
122
|
+
return new Error("Expected prop '" + propName + "' to be of type Element");
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}).isRequired,
|
|
126
|
+
"maxDate": PropTypes.string,
|
|
127
|
+
"minDate": PropTypes.string,
|
|
128
|
+
"onDayClick": PropTypes.func,
|
|
129
|
+
"open": PropTypes.bool,
|
|
130
|
+
"pickerMouseDown": PropTypes.func,
|
|
131
|
+
"pickerProps": PropTypes.shape({
|
|
132
|
+
"canChangeMonth": PropTypes.bool,
|
|
133
|
+
"captionElement": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.shape({
|
|
134
|
+
"childContextTypes": PropTypes.object,
|
|
135
|
+
"contextType": PropTypes.shape({
|
|
136
|
+
"Consumer": PropTypes.func.isRequired,
|
|
137
|
+
"displayName": PropTypes.string,
|
|
138
|
+
"Provider": PropTypes.func.isRequired
|
|
139
|
+
}),
|
|
140
|
+
"contextTypes": PropTypes.object,
|
|
141
|
+
"defaultProps": PropTypes.shape({
|
|
142
|
+
"classNames": PropTypes.object,
|
|
143
|
+
"date": PropTypes.instanceOf(Date),
|
|
144
|
+
"locale": PropTypes.string,
|
|
145
|
+
"localeUtils": PropTypes.object,
|
|
146
|
+
"months": PropTypes.arrayOf(PropTypes.string),
|
|
147
|
+
"onClick": PropTypes.func
|
|
148
|
+
}),
|
|
149
|
+
"displayName": PropTypes.string,
|
|
150
|
+
"getDerivedStateFromError": PropTypes.func,
|
|
151
|
+
"getDerivedStateFromProps": PropTypes.func,
|
|
152
|
+
"propTypes": PropTypes.shape({
|
|
153
|
+
"classNames": PropTypes.func,
|
|
154
|
+
"date": PropTypes.func,
|
|
155
|
+
"locale": PropTypes.func,
|
|
156
|
+
"localeUtils": PropTypes.func,
|
|
157
|
+
"months": PropTypes.func,
|
|
158
|
+
"onClick": PropTypes.func
|
|
159
|
+
})
|
|
160
|
+
})]),
|
|
161
|
+
"className": PropTypes.string,
|
|
162
|
+
"classNames": PropTypes.shape({
|
|
163
|
+
"body": PropTypes.string.isRequired,
|
|
164
|
+
"caption": PropTypes.string.isRequired,
|
|
165
|
+
"container": PropTypes.string.isRequired,
|
|
166
|
+
"day": PropTypes.string.isRequired,
|
|
167
|
+
"disabled": PropTypes.string.isRequired,
|
|
168
|
+
"footer": PropTypes.string.isRequired,
|
|
169
|
+
"interactionDisabled": PropTypes.string.isRequired,
|
|
170
|
+
"month": PropTypes.string.isRequired,
|
|
171
|
+
"months": PropTypes.string.isRequired,
|
|
172
|
+
"navBar": PropTypes.string.isRequired,
|
|
173
|
+
"navButtonInteractionDisabled": PropTypes.string.isRequired,
|
|
174
|
+
"navButtonNext": PropTypes.string.isRequired,
|
|
175
|
+
"navButtonPrev": PropTypes.string.isRequired,
|
|
176
|
+
"outside": PropTypes.string.isRequired,
|
|
177
|
+
"selected": PropTypes.string.isRequired,
|
|
178
|
+
"today": PropTypes.string.isRequired,
|
|
179
|
+
"todayButton": PropTypes.string.isRequired,
|
|
180
|
+
"week": PropTypes.string.isRequired,
|
|
181
|
+
"weekday": PropTypes.string.isRequired,
|
|
182
|
+
"weekdays": PropTypes.string.isRequired,
|
|
183
|
+
"weekdaysRow": PropTypes.string.isRequired,
|
|
184
|
+
"weekNumber": PropTypes.string.isRequired,
|
|
185
|
+
"wrapper": PropTypes.string.isRequired
|
|
186
|
+
}),
|
|
187
|
+
"containerProps": PropTypes.object,
|
|
188
|
+
"dir": PropTypes.string,
|
|
189
|
+
"disabledDays": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
|
|
190
|
+
"from": PropTypes.instanceOf(Date),
|
|
191
|
+
"to": PropTypes.instanceOf(Date)
|
|
192
|
+
})])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
|
|
193
|
+
"from": PropTypes.instanceOf(Date),
|
|
194
|
+
"to": PropTypes.instanceOf(Date)
|
|
195
|
+
})]),
|
|
196
|
+
"enableOutsideDaysClick": PropTypes.bool,
|
|
197
|
+
"firstDayOfWeek": PropTypes.number,
|
|
198
|
+
"fixedWeeks": PropTypes.bool,
|
|
199
|
+
"fromMonth": PropTypes.instanceOf(Date),
|
|
200
|
+
"initialMonth": PropTypes.instanceOf(Date),
|
|
201
|
+
"labels": PropTypes.shape({
|
|
202
|
+
"nextMonth": PropTypes.string.isRequired,
|
|
203
|
+
"previousMonth": PropTypes.string.isRequired
|
|
204
|
+
}),
|
|
205
|
+
"locale": PropTypes.string,
|
|
206
|
+
"localeUtils": PropTypes.shape({
|
|
207
|
+
"formatDate": PropTypes.func.isRequired,
|
|
208
|
+
"formatDay": PropTypes.func.isRequired,
|
|
209
|
+
"formatMonthTitle": PropTypes.func.isRequired,
|
|
210
|
+
"formatWeekdayLong": PropTypes.func.isRequired,
|
|
211
|
+
"formatWeekdayShort": PropTypes.func.isRequired,
|
|
212
|
+
"getFirstDayOfWeek": PropTypes.func.isRequired,
|
|
213
|
+
"getMonths": PropTypes.func.isRequired,
|
|
214
|
+
"parseDate": PropTypes.func.isRequired
|
|
215
|
+
}),
|
|
216
|
+
"modifiers": PropTypes.shape({
|
|
217
|
+
"outside": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
|
|
218
|
+
"from": PropTypes.instanceOf(Date),
|
|
219
|
+
"to": PropTypes.instanceOf(Date)
|
|
220
|
+
})])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
|
|
221
|
+
"from": PropTypes.instanceOf(Date),
|
|
222
|
+
"to": PropTypes.instanceOf(Date)
|
|
223
|
+
})]),
|
|
224
|
+
"today": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
|
|
225
|
+
"from": PropTypes.instanceOf(Date),
|
|
226
|
+
"to": PropTypes.instanceOf(Date)
|
|
227
|
+
})])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
|
|
228
|
+
"from": PropTypes.instanceOf(Date),
|
|
229
|
+
"to": PropTypes.instanceOf(Date)
|
|
230
|
+
})])
|
|
231
|
+
}),
|
|
232
|
+
"modifiersStyles": PropTypes.object,
|
|
233
|
+
"month": PropTypes.instanceOf(Date),
|
|
234
|
+
"months": PropTypes.arrayOf(PropTypes.string),
|
|
235
|
+
"navbarElement": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.shape({
|
|
236
|
+
"childContextTypes": PropTypes.object,
|
|
237
|
+
"contextType": PropTypes.shape({
|
|
238
|
+
"Consumer": PropTypes.func.isRequired,
|
|
239
|
+
"displayName": PropTypes.string,
|
|
240
|
+
"Provider": PropTypes.func.isRequired
|
|
241
|
+
}),
|
|
242
|
+
"contextTypes": PropTypes.object,
|
|
243
|
+
"defaultProps": PropTypes.shape({
|
|
244
|
+
"className": PropTypes.string,
|
|
245
|
+
"classNames": PropTypes.object,
|
|
246
|
+
"dir": PropTypes.string,
|
|
247
|
+
"labels": PropTypes.object,
|
|
248
|
+
"locale": PropTypes.string,
|
|
249
|
+
"localeUtils": PropTypes.object,
|
|
250
|
+
"month": PropTypes.instanceOf(Date),
|
|
251
|
+
"nextMonth": PropTypes.instanceOf(Date),
|
|
252
|
+
"onNextClick": PropTypes.func,
|
|
253
|
+
"onPreviousClick": PropTypes.func,
|
|
254
|
+
"previousMonth": PropTypes.instanceOf(Date),
|
|
255
|
+
"showNextButton": PropTypes.bool,
|
|
256
|
+
"showPreviousButton": PropTypes.bool
|
|
257
|
+
}),
|
|
258
|
+
"displayName": PropTypes.string,
|
|
259
|
+
"getDerivedStateFromError": PropTypes.func,
|
|
260
|
+
"getDerivedStateFromProps": PropTypes.func,
|
|
261
|
+
"propTypes": PropTypes.shape({
|
|
262
|
+
"className": PropTypes.func,
|
|
263
|
+
"classNames": PropTypes.func,
|
|
264
|
+
"dir": PropTypes.func,
|
|
265
|
+
"labels": PropTypes.func,
|
|
266
|
+
"locale": PropTypes.func,
|
|
267
|
+
"localeUtils": PropTypes.func,
|
|
268
|
+
"month": PropTypes.func,
|
|
269
|
+
"nextMonth": PropTypes.func,
|
|
270
|
+
"onNextClick": PropTypes.func,
|
|
271
|
+
"onPreviousClick": PropTypes.func,
|
|
272
|
+
"previousMonth": PropTypes.func,
|
|
273
|
+
"showNextButton": PropTypes.func,
|
|
274
|
+
"showPreviousButton": PropTypes.func
|
|
275
|
+
})
|
|
276
|
+
})]),
|
|
277
|
+
"numberOfMonths": PropTypes.number,
|
|
278
|
+
"onBlur": PropTypes.func,
|
|
279
|
+
"onCaptionClick": PropTypes.func,
|
|
280
|
+
"onDayClick": PropTypes.func,
|
|
281
|
+
"onDayKeyDown": PropTypes.func,
|
|
282
|
+
"onDayMouseDown": PropTypes.func,
|
|
283
|
+
"onDayMouseEnter": PropTypes.func,
|
|
284
|
+
"onDayMouseLeave": PropTypes.func,
|
|
285
|
+
"onDayMouseUp": PropTypes.func,
|
|
286
|
+
"onDayTouchEnd": PropTypes.func,
|
|
287
|
+
"onDayTouchStart": PropTypes.func,
|
|
288
|
+
"onFocus": PropTypes.func,
|
|
289
|
+
"onKeyDown": PropTypes.func,
|
|
290
|
+
"onMonthChange": PropTypes.func,
|
|
291
|
+
"onTodayButtonClick": PropTypes.func,
|
|
292
|
+
"onWeekClick": PropTypes.func,
|
|
293
|
+
"pagedNavigation": PropTypes.bool,
|
|
294
|
+
"renderDay": PropTypes.func,
|
|
295
|
+
"renderWeek": PropTypes.func,
|
|
296
|
+
"reverseMonths": PropTypes.bool,
|
|
297
|
+
"selectedDays": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
|
|
298
|
+
"from": PropTypes.instanceOf(Date),
|
|
299
|
+
"to": PropTypes.instanceOf(Date)
|
|
300
|
+
})])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
|
|
301
|
+
"from": PropTypes.instanceOf(Date),
|
|
302
|
+
"to": PropTypes.instanceOf(Date)
|
|
303
|
+
})]),
|
|
304
|
+
"showOutsideDays": PropTypes.bool,
|
|
305
|
+
"showWeekDays": PropTypes.bool,
|
|
306
|
+
"showWeekNumbers": PropTypes.bool,
|
|
307
|
+
"tabIndex": PropTypes.number,
|
|
308
|
+
"todayButton": PropTypes.string,
|
|
309
|
+
"toMonth": PropTypes.instanceOf(Date),
|
|
310
|
+
"weekdayElement": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.shape({
|
|
311
|
+
"childContextTypes": PropTypes.object,
|
|
312
|
+
"contextType": PropTypes.shape({
|
|
313
|
+
"Consumer": PropTypes.func.isRequired,
|
|
314
|
+
"displayName": PropTypes.string,
|
|
315
|
+
"Provider": PropTypes.func.isRequired
|
|
316
|
+
}),
|
|
317
|
+
"contextTypes": PropTypes.object,
|
|
318
|
+
"defaultProps": PropTypes.shape({
|
|
319
|
+
"className": PropTypes.string,
|
|
320
|
+
"locale": PropTypes.string,
|
|
321
|
+
"localeUtils": PropTypes.object,
|
|
322
|
+
"weekday": PropTypes.number,
|
|
323
|
+
"weekdaysLong": PropTypes.arrayOf(PropTypes.string),
|
|
324
|
+
"weekdaysShort": PropTypes.arrayOf(PropTypes.string)
|
|
325
|
+
}),
|
|
326
|
+
"displayName": PropTypes.string,
|
|
327
|
+
"getDerivedStateFromError": PropTypes.func,
|
|
328
|
+
"getDerivedStateFromProps": PropTypes.func,
|
|
329
|
+
"propTypes": PropTypes.shape({
|
|
330
|
+
"className": PropTypes.func,
|
|
331
|
+
"locale": PropTypes.func,
|
|
332
|
+
"localeUtils": PropTypes.func,
|
|
333
|
+
"weekday": PropTypes.func,
|
|
334
|
+
"weekdaysLong": PropTypes.func,
|
|
335
|
+
"weekdaysShort": PropTypes.func
|
|
336
|
+
})
|
|
337
|
+
})]),
|
|
338
|
+
"weekdaysLong": PropTypes.arrayOf(PropTypes.string),
|
|
339
|
+
"weekdaysShort": PropTypes.arrayOf(PropTypes.string)
|
|
340
|
+
}),
|
|
341
|
+
"selectedDays": PropTypes.instanceOf(Date)
|
|
135
342
|
};
|
|
343
|
+
export { DatePicker };
|
|
344
|
+
DatePicker.displayName = "DatePicker";
|
|
136
345
|
export default DatePicker;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface NavbarProps {
|
|
3
|
+
onPreviousClick?: () => void;
|
|
4
|
+
onNextClick?: () => void;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const Navbar: ({ onPreviousClick, onNextClick, className, }: NavbarProps) => React.JSX.Element;
|
|
8
|
+
export default Navbar;
|
|
@@ -3,24 +3,22 @@ import PropTypes from "prop-types";
|
|
|
3
3
|
import StyledButton from "./button.style";
|
|
4
4
|
import StyledNavbar from "./navbar.style";
|
|
5
5
|
import Icon from "../../../icon";
|
|
6
|
-
const Navbar = _ref => {
|
|
6
|
+
export const Navbar = _ref => {
|
|
7
7
|
let {
|
|
8
8
|
onPreviousClick,
|
|
9
9
|
onNextClick,
|
|
10
|
-
|
|
10
|
+
className
|
|
11
11
|
} = _ref;
|
|
12
|
-
return /*#__PURE__*/React.createElement(StyledNavbar,
|
|
13
|
-
|
|
12
|
+
return /*#__PURE__*/React.createElement(StyledNavbar, {
|
|
13
|
+
className: className
|
|
14
|
+
}, /*#__PURE__*/React.createElement(StyledButton, {
|
|
15
|
+
onClick: () => onPreviousClick?.()
|
|
14
16
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
15
17
|
type: "chevron_left"
|
|
16
18
|
})), /*#__PURE__*/React.createElement(StyledButton, {
|
|
17
|
-
onClick: () => onNextClick()
|
|
19
|
+
onClick: () => onNextClick?.()
|
|
18
20
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
19
21
|
type: "chevron_right"
|
|
20
22
|
})));
|
|
21
23
|
};
|
|
22
|
-
Navbar.propTypes = {
|
|
23
|
-
onPreviousClick: PropTypes.func,
|
|
24
|
-
onNextClick: PropTypes.func
|
|
25
|
-
};
|
|
26
24
|
export default Navbar;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Modifier } from "react-day-picker";
|
|
2
|
+
export declare function parseDate(formatString?: string, valueString?: string): Date | undefined;
|
|
3
|
+
export declare function isDateValid(date?: Date): boolean | undefined;
|
|
4
|
+
export declare function formatToISO(formatString?: string, valueString?: string): string | null;
|
|
5
|
+
export declare function formattedValue(formatString: string, value?: Date): string;
|
|
6
|
+
export declare function additionalYears(formatString: string, value: string): string[];
|
|
7
|
+
export declare const getSeparator: (value: string) => string;
|
|
8
|
+
export declare function findMatchedFormatAndValue(valueString: string, formats: string[]): string[];
|
|
9
|
+
export declare function parseISODate(value: string): Date;
|
|
10
|
+
export declare function checkISOFormatAndLength(value: string): boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Returns the disabled array of days specified by props maxDate and minDate
|
|
13
|
+
*/
|
|
14
|
+
export declare function getDisabledDays(minDate?: string, maxDate?: string): Modifier | Modifier[];
|