@primer/components 0.0.0-202192719508 → 0.0.0-2021927202224
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/CHANGELOG.md +23 -1
- package/dist/browser.esm.js +54 -53
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +51 -50
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Item.d.ts +6 -0
- package/lib/ActionList/Item.js +5 -1
- package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib/Autocomplete/Autocomplete.d.ts +2 -4
- package/lib/Autocomplete/AutocompleteInput.d.ts +2 -4
- package/lib/Breadcrumbs.d.ts +8 -7
- package/lib/Breadcrumbs.js +7 -12
- package/lib/SelectMenu/SelectMenu.d.ts +2 -4
- package/lib/TextInputWithTokens.d.ts +6 -4
- package/lib/TextInputWithTokens.js +102 -29
- package/lib/Token/Token.js +13 -2
- package/lib/Token/TokenBase.js +0 -4
- package/lib/Token/_RemoveTokenButton.js +15 -2
- package/lib/_TextInputWrapper.js +1 -1
- package/lib/theme-preval.js +2 -2
- package/lib/utils/testing.d.ts +1 -1
- package/lib-esm/ActionList/Item.d.ts +6 -0
- package/lib-esm/ActionList/Item.js +5 -1
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -4
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -4
- package/lib-esm/Breadcrumbs.d.ts +8 -7
- package/lib-esm/Breadcrumbs.js +8 -13
- package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -4
- package/lib-esm/TextInputWithTokens.d.ts +6 -4
- package/lib-esm/TextInputWithTokens.js +101 -30
- package/lib-esm/Token/Token.js +13 -2
- package/lib-esm/Token/TokenBase.js +0 -4
- package/lib-esm/Token/_RemoveTokenButton.js +11 -2
- package/lib-esm/_TextInputWrapper.js +1 -1
- package/lib-esm/theme-preval.js +2 -2
- package/lib-esm/utils/testing.d.ts +1 -1
- package/package.json +13 -14
- package/lib/DatePicker/DatePicker.d.ts +0 -48
- package/lib/DatePicker/DatePicker.js +0 -104
- package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib/DatePicker/DatePickerAnchor.js +0 -182
- package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib/DatePicker/DatePickerOverlay.js +0 -48
- package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib/DatePicker/DatePickerPanel.js +0 -126
- package/lib/DatePicker/Day.d.ts +0 -14
- package/lib/DatePicker/Day.js +0 -190
- package/lib/DatePicker/Month.d.ts +0 -9
- package/lib/DatePicker/Month.js +0 -120
- package/lib/DatePicker/index.d.ts +0 -2
- package/lib/DatePicker/index.js +0 -13
- package/lib/DatePicker/useDatePicker.d.ts +0 -88
- package/lib/DatePicker/useDatePicker.js +0 -421
- package/lib/hooks/useDebounce.d.ts +0 -2
- package/lib/hooks/useDebounce.js +0 -24
- package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
- package/lib-esm/DatePicker/DatePicker.js +0 -87
- package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib-esm/DatePicker/DatePickerAnchor.js +0 -155
- package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib-esm/DatePicker/DatePickerOverlay.js +0 -29
- package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib-esm/DatePicker/DatePickerPanel.js +0 -100
- package/lib-esm/DatePicker/Day.d.ts +0 -14
- package/lib-esm/DatePicker/Day.js +0 -167
- package/lib-esm/DatePicker/Month.d.ts +0 -9
- package/lib-esm/DatePicker/Month.js +0 -96
- package/lib-esm/DatePicker/index.d.ts +0 -2
- package/lib-esm/DatePicker/index.js +0 -1
- package/lib-esm/DatePicker/useDatePicker.d.ts +0 -88
- package/lib-esm/DatePicker/useDatePicker.js +0 -391
- package/lib-esm/hooks/useDebounce.d.ts +0 -2
- package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,155 +0,0 @@
|
|
1
|
-
import { CalendarIcon } from '@primer/octicons-react';
|
2
|
-
import styled from 'styled-components';
|
3
|
-
import React, { useCallback, useState } from 'react';
|
4
|
-
import Button, { ButtonInvisible } from '../Button';
|
5
|
-
import Text from '../Text';
|
6
|
-
import { get } from '../constants';
|
7
|
-
import StyledOcticon from '../StyledOcticon';
|
8
|
-
import useDatePicker from './useDatePicker';
|
9
|
-
import TextInput from '../TextInput';
|
10
|
-
import Box from '../Box';
|
11
|
-
import { isBefore } from 'date-fns';
|
12
|
-
const DatePickerAnchorButton = styled(Button).withConfig({
|
13
|
-
displayName: "DatePickerAnchor__DatePickerAnchorButton",
|
14
|
-
componentId: "sc-8gpb9d-0"
|
15
|
-
})(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", " ~ svg{margin-left:", ";}& svg ~ ", "{margin-left:", ";}"], Text, get('space.2'), Text, get('space.2'));
|
16
|
-
const INVALID_DATE = 'Invalid Date';
|
17
|
-
export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
|
18
|
-
onAction
|
19
|
-
}, ref) => {
|
20
|
-
const {
|
21
|
-
configuration: {
|
22
|
-
anchorVariant,
|
23
|
-
iconPlacement,
|
24
|
-
selection
|
25
|
-
},
|
26
|
-
disabled,
|
27
|
-
formattedDate,
|
28
|
-
onDateInput
|
29
|
-
} = useDatePicker();
|
30
|
-
const [inputValue, setInputValue] = useState(formattedDate);
|
31
|
-
const keyPressHandler = useCallback(event => {
|
32
|
-
if (disabled) {
|
33
|
-
return;
|
34
|
-
}
|
35
|
-
|
36
|
-
if ([' ', 'Enter'].includes(event.key)) {
|
37
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(event);
|
38
|
-
}
|
39
|
-
}, [disabled, onAction]);
|
40
|
-
const clickHandler = useCallback(event => {
|
41
|
-
if (disabled) {
|
42
|
-
return;
|
43
|
-
}
|
44
|
-
|
45
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(event);
|
46
|
-
}, [disabled, onAction]);
|
47
|
-
const onInputChangeHandler = useCallback(e => {
|
48
|
-
const value = e.currentTarget.value;
|
49
|
-
if (!value) return;
|
50
|
-
|
51
|
-
if (selection === 'range') {
|
52
|
-
var _values$, _values$2, _values$3, _values$4, _values$5, _values$6;
|
53
|
-
|
54
|
-
const values = value.split(' - ');
|
55
|
-
const dates = isBefore(new Date((_values$ = values[0]) === null || _values$ === void 0 ? void 0 : _values$.trim()), new Date((_values$2 = values[1]) === null || _values$2 === void 0 ? void 0 : _values$2.trim())) ? {
|
56
|
-
from: new Date((_values$3 = values[0]) === null || _values$3 === void 0 ? void 0 : _values$3.trim()),
|
57
|
-
to: new Date((_values$4 = values[1]) === null || _values$4 === void 0 ? void 0 : _values$4.trim())
|
58
|
-
} : {
|
59
|
-
from: new Date((_values$5 = values[1]) === null || _values$5 === void 0 ? void 0 : _values$5.trim()),
|
60
|
-
to: new Date((_values$6 = values[0]) === null || _values$6 === void 0 ? void 0 : _values$6.trim())
|
61
|
-
};
|
62
|
-
setInputValue(value);
|
63
|
-
|
64
|
-
if (dates.from.toString() !== INVALID_DATE && dates.to.toString() !== INVALID_DATE) {
|
65
|
-
onDateInput(dates);
|
66
|
-
}
|
67
|
-
} else if (selection === 'multi') {
|
68
|
-
const values = value.split(',');
|
69
|
-
const dates = [];
|
70
|
-
|
71
|
-
for (const date of values) {
|
72
|
-
dates.push(new Date(date.trim()));
|
73
|
-
}
|
74
|
-
|
75
|
-
setInputValue(value);
|
76
|
-
|
77
|
-
if (dates.every(d => d.toString() !== INVALID_DATE)) {
|
78
|
-
onDateInput(dates);
|
79
|
-
}
|
80
|
-
} else {
|
81
|
-
const date = new Date(value);
|
82
|
-
setInputValue(value);
|
83
|
-
if (date.toString() !== INVALID_DATE) onDateInput(date);
|
84
|
-
}
|
85
|
-
}, [onDateInput, selection]);
|
86
|
-
|
87
|
-
const onBlurHandler = () => {
|
88
|
-
setInputValue(formattedDate);
|
89
|
-
};
|
90
|
-
|
91
|
-
if (anchorVariant === 'input') {
|
92
|
-
const calendarButton = side => /*#__PURE__*/React.createElement(ButtonInvisible, {
|
93
|
-
onClick: clickHandler,
|
94
|
-
sx: {
|
95
|
-
width: '32px',
|
96
|
-
px: '6px',
|
97
|
-
position: 'absolute',
|
98
|
-
[side]: '1px',
|
99
|
-
top: '1px'
|
100
|
-
}
|
101
|
-
}, /*#__PURE__*/React.createElement(StyledOcticon, {
|
102
|
-
icon: CalendarIcon
|
103
|
-
}));
|
104
|
-
|
105
|
-
const inputSx = () => {
|
106
|
-
if (iconPlacement === 'start') {
|
107
|
-
return {
|
108
|
-
pl: 5,
|
109
|
-
pr: 2
|
110
|
-
};
|
111
|
-
} else if (iconPlacement === 'end') {
|
112
|
-
return {
|
113
|
-
pl: 2,
|
114
|
-
pr: 5
|
115
|
-
};
|
116
|
-
} else {
|
117
|
-
return {};
|
118
|
-
}
|
119
|
-
};
|
120
|
-
|
121
|
-
return /*#__PURE__*/React.createElement(Box, {
|
122
|
-
ref: ref,
|
123
|
-
sx: {
|
124
|
-
position: 'relative',
|
125
|
-
display: 'flex',
|
126
|
-
flex: 1
|
127
|
-
}
|
128
|
-
}, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/React.createElement(TextInput, {
|
129
|
-
value: inputValue,
|
130
|
-
onChange: onInputChangeHandler,
|
131
|
-
sx: inputSx(),
|
132
|
-
onBlur: onBlurHandler
|
133
|
-
}), iconPlacement === 'end' && calendarButton('right'));
|
134
|
-
}
|
135
|
-
|
136
|
-
const calendarIcon = () => /*#__PURE__*/React.createElement(StyledOcticon, {
|
137
|
-
icon: CalendarIcon,
|
138
|
-
color: "fg.muted",
|
139
|
-
sx: {
|
140
|
-
my: '2px'
|
141
|
-
}
|
142
|
-
});
|
143
|
-
|
144
|
-
return /*#__PURE__*/React.createElement(Box, {
|
145
|
-
ref: ref
|
146
|
-
}, /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
|
147
|
-
onClick: clickHandler,
|
148
|
-
onKeyPress: keyPressHandler
|
149
|
-
}, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/React.createElement(Text, {
|
150
|
-
sx: {
|
151
|
-
overflow: 'hidden',
|
152
|
-
textOverflow: 'ellipsis'
|
153
|
-
}
|
154
|
-
}, formattedDate), iconPlacement === 'end' && calendarIcon()));
|
155
|
-
});
|
@@ -1,29 +0,0 @@
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
|
-
|
3
|
-
import React, { useState } from 'react';
|
4
|
-
import useDatePicker from './useDatePicker';
|
5
|
-
import { AnchoredOverlay } from '../AnchoredOverlay';
|
6
|
-
import { DatePickerPanel } from './DatePickerPanel';
|
7
|
-
export const DatePickerOverlay = ({
|
8
|
-
onClose,
|
9
|
-
...rest
|
10
|
-
}) => {
|
11
|
-
const {
|
12
|
-
onClose: onDatePickerClose
|
13
|
-
} = useDatePicker();
|
14
|
-
const [suspendFocusTrap, setSuspendFocusTrap] = useState(false);
|
15
|
-
|
16
|
-
const onOverlayClose = async gesture => {
|
17
|
-
if (!suspendFocusTrap) {
|
18
|
-
setSuspendFocusTrap(true);
|
19
|
-
await onDatePickerClose();
|
20
|
-
setSuspendFocusTrap(false);
|
21
|
-
onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
|
22
|
-
}
|
23
|
-
};
|
24
|
-
|
25
|
-
return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({
|
26
|
-
onClose: onOverlayClose
|
27
|
-
}, rest), /*#__PURE__*/React.createElement(DatePickerPanel, null));
|
28
|
-
};
|
29
|
-
DatePickerOverlay.displayName = "DatePickerOverlay";
|
@@ -1,100 +0,0 @@
|
|
1
|
-
import { addMonths, subMonths } from 'date-fns';
|
2
|
-
import React, { useMemo } from 'react';
|
3
|
-
import Box from '../Box';
|
4
|
-
import { Month } from './Month';
|
5
|
-
import styled from 'styled-components';
|
6
|
-
import { get } from '../constants';
|
7
|
-
import useDatePicker from './useDatePicker';
|
8
|
-
import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react';
|
9
|
-
import StyledOcticon from '../StyledOcticon';
|
10
|
-
import Button, { ButtonPrimary } from '../Button';
|
11
|
-
const DatePickerPanelContainer = styled(Box).withConfig({
|
12
|
-
displayName: "DatePickerPanel__DatePickerPanelContainer",
|
13
|
-
componentId: "sc-19upxpo-0"
|
14
|
-
})(["align-items:stretch;display:flex;flex-direction:column;"]);
|
15
|
-
const DatePickerPanelMonths = styled(Box).withConfig({
|
16
|
-
displayName: "DatePickerPanel__DatePickerPanelMonths",
|
17
|
-
componentId: "sc-19upxpo-1"
|
18
|
-
})(["align-items:flex-start;display:flex;flex-direction:row;gap:", ";padding:", ";position:relative;"], get('space.6'), get('space.3'));
|
19
|
-
const DatePickerPanelFooter = styled(Box).withConfig({
|
20
|
-
displayName: "DatePickerPanel__DatePickerPanelFooter",
|
21
|
-
componentId: "sc-19upxpo-2"
|
22
|
-
})(["align-items:flex-start;border-top:1px solid;border-top-color:", ";display:flex;gap:", ";padding-top:12px;padding-bottom:12px;padding-left:", ";padding-right:", ";flex-direction:row;justify-content:space-between;position:relative;"], get('colors.border.default'), get('space.6'), get('space.3'), get('space.3'));
|
23
|
-
const ArrowButton = styled(Button).withConfig({
|
24
|
-
displayName: "DatePickerPanel__ArrowButton",
|
25
|
-
componentId: "sc-19upxpo-3"
|
26
|
-
})(["position:absolute;width:40px;height:28px;top:12px;", ";"], props => `${props.side}: ${get('space.3')(props)}`);
|
27
|
-
export const DatePickerPanel = () => {
|
28
|
-
const {
|
29
|
-
configuration,
|
30
|
-
saveValue,
|
31
|
-
revertValue,
|
32
|
-
currentViewingDate,
|
33
|
-
goToMonth,
|
34
|
-
nextMonth,
|
35
|
-
previousMonth
|
36
|
-
} = useDatePicker();
|
37
|
-
const previousDisabled = useMemo(() => {
|
38
|
-
const {
|
39
|
-
minDate
|
40
|
-
} = configuration;
|
41
|
-
if (!minDate) return false;
|
42
|
-
const previous = subMonths(currentViewingDate, 1);
|
43
|
-
|
44
|
-
if (minDate.getFullYear() >= previous.getFullYear() && minDate.getMonth() > previous.getMonth()) {
|
45
|
-
return true;
|
46
|
-
}
|
47
|
-
|
48
|
-
return false;
|
49
|
-
}, [configuration, currentViewingDate]);
|
50
|
-
const nextDisabled = useMemo(() => {
|
51
|
-
const {
|
52
|
-
maxDate,
|
53
|
-
view
|
54
|
-
} = configuration;
|
55
|
-
if (!maxDate) return false;
|
56
|
-
const next = addMonths(currentViewingDate, view === '2-month' ? 2 : 1);
|
57
|
-
|
58
|
-
if (maxDate.getFullYear() <= next.getFullYear() && maxDate.getMonth() < next.getMonth()) {
|
59
|
-
return true;
|
60
|
-
}
|
61
|
-
|
62
|
-
return false;
|
63
|
-
}, [configuration, currentViewingDate]);
|
64
|
-
return /*#__PURE__*/React.createElement(DatePickerPanelContainer, null, /*#__PURE__*/React.createElement(DatePickerPanelMonths, null, /*#__PURE__*/React.createElement(ArrowButton, {
|
65
|
-
variant: "small",
|
66
|
-
side: "left",
|
67
|
-
onClick: previousMonth,
|
68
|
-
disabled: previousDisabled
|
69
|
-
}, /*#__PURE__*/React.createElement(StyledOcticon, {
|
70
|
-
icon: ChevronLeftIcon,
|
71
|
-
color: "fg.muted"
|
72
|
-
})), /*#__PURE__*/React.createElement(Month, {
|
73
|
-
month: currentViewingDate.getMonth(),
|
74
|
-
year: currentViewingDate.getFullYear()
|
75
|
-
}), configuration.view === '2-month' && /*#__PURE__*/React.createElement(Month, {
|
76
|
-
month: addMonths(currentViewingDate, 1).getMonth(),
|
77
|
-
year: addMonths(currentViewingDate, 1).getFullYear()
|
78
|
-
}), /*#__PURE__*/React.createElement(ArrowButton, {
|
79
|
-
variant: "small",
|
80
|
-
side: "right",
|
81
|
-
onClick: nextMonth,
|
82
|
-
disabled: nextDisabled
|
83
|
-
}, /*#__PURE__*/React.createElement(StyledOcticon, {
|
84
|
-
icon: ChevronRightIcon,
|
85
|
-
color: "fg.muted"
|
86
|
-
}))), /*#__PURE__*/React.createElement(DatePickerPanelFooter, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
|
87
|
-
variant: "small",
|
88
|
-
sx: {
|
89
|
-
mr: 1
|
90
|
-
},
|
91
|
-
onClick: () => revertValue()
|
92
|
-
}, "Reset"), /*#__PURE__*/React.createElement(Button, {
|
93
|
-
variant: "small",
|
94
|
-
onClick: () => goToMonth(new Date())
|
95
|
-
}, "Today")), configuration.confirmation && /*#__PURE__*/React.createElement(ButtonPrimary, {
|
96
|
-
variant: "small",
|
97
|
-
onClick: () => saveValue()
|
98
|
-
}, "Apply")));
|
99
|
-
};
|
100
|
-
DatePickerPanel.displayName = "DatePickerPanel";
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { FontSizeProps } from 'styled-system';
|
3
|
-
import { SystemCommonProps, SystemLayoutProps } from '../constants';
|
4
|
-
import { SxProp } from '../sx';
|
5
|
-
import { DaySelection } from './useDatePicker';
|
6
|
-
export declare type DayProps = {
|
7
|
-
blocked?: boolean;
|
8
|
-
disabled?: boolean;
|
9
|
-
onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
|
10
|
-
selected?: DaySelection;
|
11
|
-
date: Date;
|
12
|
-
} & FontSizeProps & SystemCommonProps & SxProp & SystemLayoutProps;
|
13
|
-
export declare const Day: React.FC<DayProps>;
|
14
|
-
export declare const BlankDay: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
|
@@ -1,167 +0,0 @@
|
|
1
|
-
import React, { useCallback, useMemo } from 'react';
|
2
|
-
import styled from 'styled-components';
|
3
|
-
import Box from '../Box';
|
4
|
-
import Text from '../Text';
|
5
|
-
import { get } from '../constants';
|
6
|
-
import useDatePicker from './useDatePicker';
|
7
|
-
const DayBaseComponent = styled(Box).withConfig({
|
8
|
-
displayName: "Day__DayBaseComponent",
|
9
|
-
componentId: "sc-1japneh-0"
|
10
|
-
})(["align-content:center;display:flex;justify-content:center;min-width:38px;min-height:38px;padding:", ";"], get('space.1'));
|
11
|
-
const states = {
|
12
|
-
blocked: {
|
13
|
-
background: get('colors.neutral.subtle'),
|
14
|
-
borderRadius: get('radii.2'),
|
15
|
-
color: get('colors.fg.subtle')
|
16
|
-
},
|
17
|
-
disabled: {
|
18
|
-
background: get('colors.canvas.primary'),
|
19
|
-
borderRadius: get('radii.2'),
|
20
|
-
color: get('colors.fg.subtle')
|
21
|
-
},
|
22
|
-
selected: {
|
23
|
-
default: {
|
24
|
-
background: get('colors.accent.emphasis'),
|
25
|
-
borderRadius: get('radii.2'),
|
26
|
-
color: get('colors.fg.onEmphasis'),
|
27
|
-
todayColor: get('colors.fg.onEmphasis')
|
28
|
-
},
|
29
|
-
start: {
|
30
|
-
background: get('colors.accent.emphasis'),
|
31
|
-
borderRadius: '4px 0 0 4px',
|
32
|
-
color: get('colors.fg.onEmphasis'),
|
33
|
-
todayColor: get('colors.fg.onEmphasis')
|
34
|
-
},
|
35
|
-
middle: {
|
36
|
-
background: get('colors.accent.subtle'),
|
37
|
-
borderRadius: '0',
|
38
|
-
color: get('colors.fg.default'),
|
39
|
-
todayColor: get('colors.accent.fg')
|
40
|
-
},
|
41
|
-
end: {
|
42
|
-
background: get('colors.accent.emphasis'),
|
43
|
-
borderRadius: '0 4px 4px 0',
|
44
|
-
color: get('colors.fg.onEmphasis'),
|
45
|
-
todayColor: get('colors.fg.onEmphasis')
|
46
|
-
}
|
47
|
-
},
|
48
|
-
default: {
|
49
|
-
normal: {
|
50
|
-
background: get('colors.canvas.primary'),
|
51
|
-
borderRadius: get('radii.2'),
|
52
|
-
color: get('colors.fg.default'),
|
53
|
-
todayColor: get('colors.accent.fg')
|
54
|
-
},
|
55
|
-
hover: {
|
56
|
-
background: get('colors.neutral.muted'),
|
57
|
-
borderRadius: get('radii.2'),
|
58
|
-
color: get('colors.fg.default'),
|
59
|
-
todayColor: get('colors.accent.fg')
|
60
|
-
},
|
61
|
-
pressed: {
|
62
|
-
background: get('colors.neutral.emphasis'),
|
63
|
-
borderRadius: get('radii.2'),
|
64
|
-
color: get('colors.fg.onEmphasis'),
|
65
|
-
todayColor: get('colors.fg.onEmphasis')
|
66
|
-
}
|
67
|
-
}
|
68
|
-
};
|
69
|
-
|
70
|
-
const getStateStyles = (props, prop, state) => {
|
71
|
-
const {
|
72
|
-
blocked,
|
73
|
-
disabled,
|
74
|
-
selected,
|
75
|
-
today
|
76
|
-
} = props;
|
77
|
-
|
78
|
-
if (blocked) {
|
79
|
-
return states.blocked[prop];
|
80
|
-
} else if (disabled) {
|
81
|
-
return states.disabled[prop];
|
82
|
-
} else if (selected) {
|
83
|
-
switch (selected) {
|
84
|
-
case 'start':
|
85
|
-
return today && prop === 'color' ? states.selected.start['todayColor'] : states.selected.start[prop];
|
86
|
-
|
87
|
-
case 'middle':
|
88
|
-
return today && prop === 'color' ? states.selected.middle['todayColor'] : states.selected.middle[prop];
|
89
|
-
|
90
|
-
case 'end':
|
91
|
-
return today && prop === 'color' ? states.selected.end['todayColor'] : states.selected.end[prop];
|
92
|
-
|
93
|
-
default:
|
94
|
-
return today && prop === 'color' ? states.selected.default['todayColor'] : states.selected.default[prop];
|
95
|
-
}
|
96
|
-
} else {
|
97
|
-
return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
|
98
|
-
}
|
99
|
-
};
|
100
|
-
|
101
|
-
const DayComponent = styled(DayBaseComponent).attrs(props => ({
|
102
|
-
background: getStateStyles(props, 'background', 'normal'),
|
103
|
-
borderRadius: getStateStyles(props, 'borderRadius', 'normal'),
|
104
|
-
textColor: getStateStyles(props, 'color', 'normal'),
|
105
|
-
backgroundHover: getStateStyles(props, 'background', 'hover'),
|
106
|
-
textColorHover: getStateStyles(props, 'color', 'hover'),
|
107
|
-
backgroundPressed: getStateStyles(props, 'background', 'pressed'),
|
108
|
-
textColorPressed: getStateStyles(props, 'color', 'pressed')
|
109
|
-
})).withConfig({
|
110
|
-
displayName: "Day__DayComponent",
|
111
|
-
componentId: "sc-1japneh-1"
|
112
|
-
})(["background-color:", ";border-radius:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-self:center;user-select:none;transition:0.1s color ease;}&:hover{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
|
113
|
-
export const Day = ({
|
114
|
-
date,
|
115
|
-
onAction
|
116
|
-
}) => {
|
117
|
-
const {
|
118
|
-
onDayFocus,
|
119
|
-
onSelection,
|
120
|
-
disabled,
|
121
|
-
blocked,
|
122
|
-
selected,
|
123
|
-
today
|
124
|
-
} = useDatePicker(date);
|
125
|
-
const keyPressHandler = useCallback(event => {
|
126
|
-
if (disabled) {
|
127
|
-
return;
|
128
|
-
}
|
129
|
-
|
130
|
-
if ([' ', 'Enter'].includes(event.key)) {
|
131
|
-
onSelection(date);
|
132
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
|
133
|
-
}
|
134
|
-
}, [disabled, onSelection, onAction, date]);
|
135
|
-
const clickHandler = useCallback(event => {
|
136
|
-
if (disabled) {
|
137
|
-
return;
|
138
|
-
}
|
139
|
-
|
140
|
-
onSelection(date);
|
141
|
-
onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
|
142
|
-
}, [disabled, onSelection, date, onAction]);
|
143
|
-
const todayStyles = useMemo(() => today ? {
|
144
|
-
border: '2px solid',
|
145
|
-
padding: '4px 6px',
|
146
|
-
borderRadius: '16px',
|
147
|
-
fontWeight: 'bold'
|
148
|
-
} : {}, [today]);
|
149
|
-
return /*#__PURE__*/React.createElement(DayComponent, {
|
150
|
-
role: "button",
|
151
|
-
blocked: blocked,
|
152
|
-
disabled: disabled,
|
153
|
-
selected: selected,
|
154
|
-
today: today,
|
155
|
-
onClick: clickHandler,
|
156
|
-
onMouseEnter: () => onDayFocus(date),
|
157
|
-
onFocus: () => onDayFocus(date),
|
158
|
-
onKeyPress: keyPressHandler
|
159
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
160
|
-
sx: todayStyles
|
161
|
-
}, date.getDate()));
|
162
|
-
};
|
163
|
-
Day.displayName = "Day";
|
164
|
-
export const BlankDay = styled(DayBaseComponent).withConfig({
|
165
|
-
displayName: "Day__BlankDay",
|
166
|
-
componentId: "sc-1japneh-2"
|
167
|
-
})(["background-color:", ";"], get('colors.canvas.primary'));
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { FontSizeProps } from 'styled-system';
|
3
|
-
import { SystemCommonProps, SystemLayoutProps } from '../constants';
|
4
|
-
import { SxProp } from '../sx';
|
5
|
-
export interface MonthProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
|
6
|
-
month: number;
|
7
|
-
year: number;
|
8
|
-
}
|
9
|
-
export declare const Month: React.FC<MonthProps>;
|
@@ -1,96 +0,0 @@
|
|
1
|
-
import { format, isEqual, lastDayOfMonth, getDaysInMonth, eachDayOfInterval, startOfWeek, endOfWeek } from 'date-fns';
|
2
|
-
import React, { useMemo, useState } from 'react';
|
3
|
-
import styled from 'styled-components';
|
4
|
-
import Box from '../Box';
|
5
|
-
import Text from '../Text';
|
6
|
-
import { get } from '../constants';
|
7
|
-
import { BlankDay, Day } from './Day';
|
8
|
-
import useDatePicker from './useDatePicker';
|
9
|
-
const weekdayEnum = {
|
10
|
-
Sunday: 0,
|
11
|
-
Monday: 1,
|
12
|
-
Tuesday: 2,
|
13
|
-
Wednesday: 3,
|
14
|
-
Thursday: 4,
|
15
|
-
Friday: 5,
|
16
|
-
Saturday: 6
|
17
|
-
};
|
18
|
-
const MonthComponent = styled(Box).withConfig({
|
19
|
-
displayName: "Month__MonthComponent",
|
20
|
-
componentId: "l6j7o0-0"
|
21
|
-
})(["display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(1fr,7);grid-template-rows:1fr;gap:0px 0px;grid-template-areas:'month month month month month month month' 'sunday monday tuesday wednesday thursday friday saturday';justify-items:stretch;align-items:stretch;"]);
|
22
|
-
const MonthTitle = styled(Text).withConfig({
|
23
|
-
displayName: "Month__MonthTitle",
|
24
|
-
componentId: "l6j7o0-1"
|
25
|
-
})(["font-size:", ";font-weight:", ";grid-area:month;justify-self:center;"], get('fontSizes.1'), get('fontWeights.bold'));
|
26
|
-
const WeekdayHeader = styled(Text).withConfig({
|
27
|
-
displayName: "Month__WeekdayHeader",
|
28
|
-
componentId: "l6j7o0-2"
|
29
|
-
})(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], get('colors.fg.subtle'), get('fonts.mono'), get('fontSizes.0'), get('space.3'), get('space.2'));
|
30
|
-
export const Month = ({
|
31
|
-
month,
|
32
|
-
year
|
33
|
-
}) => {
|
34
|
-
const {
|
35
|
-
configuration
|
36
|
-
} = useDatePicker();
|
37
|
-
const [selectedDay, setSelectedDay] = useState(null);
|
38
|
-
const getTitle = useMemo(() => `${format(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
|
39
|
-
const weekdayHeaders = useMemo(() => {
|
40
|
-
var _configuration$weekSt;
|
41
|
-
|
42
|
-
const now = new Date(year, month);
|
43
|
-
const weekOptions = {
|
44
|
-
weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
|
45
|
-
};
|
46
|
-
return eachDayOfInterval({
|
47
|
-
start: startOfWeek(now, weekOptions),
|
48
|
-
end: endOfWeek(now, weekOptions)
|
49
|
-
}).map(d => /*#__PURE__*/React.createElement(WeekdayHeader, {
|
50
|
-
key: `weekday-${d}-header`
|
51
|
-
}, format(d, 'EEEEEE')));
|
52
|
-
}, [configuration.weekStartsOn, month, year]);
|
53
|
-
|
54
|
-
const dayAction = date => {
|
55
|
-
setSelectedDay(date);
|
56
|
-
};
|
57
|
-
|
58
|
-
const dayComponents = useMemo(() => {
|
59
|
-
var _configuration$weekSt2, _configuration$weekSt3;
|
60
|
-
|
61
|
-
const components = [];
|
62
|
-
const firstDay = new Date(year, month, 1);
|
63
|
-
const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
|
64
|
-
|
65
|
-
for (let i = 0; i < preBlanks; i++) {
|
66
|
-
components.push( /*#__PURE__*/React.createElement(BlankDay, {
|
67
|
-
key: `month-pre-blank-${i}`
|
68
|
-
}));
|
69
|
-
}
|
70
|
-
|
71
|
-
for (let i = 1; i <= getDaysInMonth(firstDay); i++) {
|
72
|
-
const date = new Date(year, month, i);
|
73
|
-
components.push( /*#__PURE__*/React.createElement(Day, {
|
74
|
-
key: `day-component-${date.toString()}`,
|
75
|
-
date: date,
|
76
|
-
selected: selectedDay ? isEqual(date, selectedDay) : false,
|
77
|
-
onAction: dayAction
|
78
|
-
}));
|
79
|
-
}
|
80
|
-
|
81
|
-
const lastDay = lastDayOfMonth(firstDay);
|
82
|
-
const postBlanks = (lastDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt3 = configuration.weekStartsOn) !== null && _configuration$weekSt3 !== void 0 ? _configuration$weekSt3 : 'Sunday'])) % 7;
|
83
|
-
|
84
|
-
for (let i = 6; i > postBlanks; i--) {
|
85
|
-
components.push( /*#__PURE__*/React.createElement(BlankDay, {
|
86
|
-
key: `month-post-blank-${i}`
|
87
|
-
}));
|
88
|
-
}
|
89
|
-
|
90
|
-
return components;
|
91
|
-
}, [configuration.weekStartsOn, month, selectedDay, year]);
|
92
|
-
return /*#__PURE__*/React.createElement(MonthComponent, {
|
93
|
-
role: "grid"
|
94
|
-
}, /*#__PURE__*/React.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
|
95
|
-
};
|
96
|
-
Month.displayName = "Month";
|
@@ -1 +0,0 @@
|
|
1
|
-
export { DatePicker } from './DatePicker';
|