@yamatomo/chakra-react-datepicker
Version:
Integration of chakra-ui and react-datepicker
446 lines (445 loc) • 19.4 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePicker = void 0;
var react_1 = require("@chakra-ui/react");
var react_2 = __importStar(require("react"));
var react_datepicker_1 = __importDefault(require("react-datepicker"));
var datePickerThemes = {
light: {
gray100: 'gray.100',
gray200: 'gray.200',
gray300: 'gray.300',
gray400: 'gray.400',
gray500: 'gray.500',
color300: 'blue.300',
color500: 'blue.500',
color600: 'blue.600',
header: 'white',
text: 'gray.800',
negativeText: 'whiteAlpha.900',
monthBackground: 'white',
outsideDay: '#9f9696',
},
dark: {
gray100: 'gray.700',
gray200: 'gray.600',
gray300: 'gray.500',
gray400: 'gray.400',
gray500: 'gray.300',
color300: 'blue.200',
color500: 'blue.300',
color600: 'blue.500',
header: 'gray.700',
text: 'whiteAlpha.900',
negativeText: 'whiteAlpha.900',
monthBackground: 'gray.700',
outsideDay: '#9f9696',
},
};
var ChakraInputWithRef = function (props, ref) { return (react_2.default.createElement(react_1.Input, __assign({}, props, { ref: ref }))); };
var CustomInput = (0, react_2.forwardRef)(ChakraInputWithRef);
var DatePicker = function (_a) {
var _b, _c, _d, _e, _f;
var rootProps = _a.rootProps, inputProps = _a.inputProps, _g = _a.datePickerSize, datePickerSizeProps = _g === void 0 ? 'md' : _g, datePickerColorSchema = _a.datePickerColorSchema, extendDatePickerTheme = _a.extendDatePickerTheme, datePickerProps = __rest(_a, ["rootProps", "inputProps", "datePickerSize", "datePickerColorSchema", "extendDatePickerTheme"]);
var colorMode = (0, react_1.useColorMode)().colorMode;
var isLight = colorMode === 'light';
var datepickerSize = useDetermineSize(datePickerSizeProps);
if (!datepickerSize) {
return null;
}
var datePickerTheme = customizeDatePickerTheme(datePickerThemes[isLight ? 'light' : 'dark'], datePickerColorSchema, extendDatePickerTheme
? function (theme) { return extendDatePickerTheme(colorMode, theme); }
: undefined);
var normalizedInputProps = __assign(__assign({}, inputProps), { isDisabled: datePickerProps.disabled });
var timeWidth = getTimeWidth(datepickerSize);
var container = {
borderColor: datePickerTheme.gray200,
};
var dayContainer = {
padding: 1.5,
bg: datePickerTheme.monthBackground,
margin: 0,
};
var day = __assign(__assign({}, getDayCellSize(datepickerSize)), { color: datePickerTheme.text, hoverBg: datePickerTheme.gray200, selecting: {
bg: datePickerTheme.color300,
}, selected: {
bg: datePickerTheme.color500,
fontWeight: 'normal',
color: datePickerTheme.negativeText,
hover: {
bg: datePickerTheme.color600,
},
}, disabled: {
bg: 'unset',
opacity: 0.2,
cursor: 'not-allowed',
} });
var header = {
topSpace: 3,
borderColor: datePickerTheme.gray300,
fontWeight: 600,
fontSize: '1rem',
color: datePickerTheme.text,
bg: datePickerTheme.header,
};
var navigationButton = {
size: datepickerSize === 'xs' ? 5 : 7,
leftRightSpace: '0.8rem',
color: datePickerTheme.gray400,
hover: {
color: datePickerTheme.gray500,
},
};
var sx = (_b = {
'.react-datepicker': {
minWidth: 'max-content',
fontFamily: 'unset',
fontSize: datepickerSize === 'xs' ? 'xs' : 'md',
borderColor: container.borderColor,
boxShadow: 'sm',
bg: dayContainer.bg,
margin: dayContainer.margin,
color: datePickerTheme.text,
},
'.react-datepicker__input-container': {
display: 'block',
'.react-datepicker__close-icon': {
// clear button
'&::after': {
backgroundColor: 'unset',
borderRadius: 'unset',
fontSize: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.size) === 'lg' ? '2xl' : (inputProps === null || inputProps === void 0 ? void 0 : inputProps.size) === 'xs' ? 'md' : 'xl',
color: datePickerTheme.gray300,
h: '20px',
w: '20px',
},
'&:hover::after': {
color: datePickerTheme.gray400,
},
},
},
'.react-datepicker__header': (_c = {
paddingBlockStart: header.topSpace,
borderColor: header.borderColor,
bg: header.bg,
'.react-datepicker__header__dropdown': (_d = {
// year/month picker
marginBlockStart: 2,
display: 'flex',
justifyContent: 'center',
_empty: {
display: 'none',
}
},
_d[multipleSelector('.react-datepicker__month-dropdown-container', '.react-datepicker__year-dropdown-container')] = {
cursor: 'pointer',
borderRadius: 'md',
paddingInlineStart: 1,
paddingInlineEnd: 1,
},
_d[multipleSelector('.react-datepicker__month-read-view', '.react-datepicker__year-read-view')] = {
display: 'flex',
flexDirection: 'row-reverse',
paddingInlineEnd: 4,
paddingInlineStart: 1,
_hover: (_e = {
bg: datePickerTheme.gray200
},
_e[multipleSelector('.react-datepicker__month-read-view--down-arrow', '.react-datepicker__year-read-view--down-arrow')] = {
borderColor: navigationButton.hover.color,
},
_e),
},
_d[multipleSelector('.react-datepicker__month-read-view--down-arrow', '.react-datepicker__year-read-view--down-arrow')] = {
position: 'relative',
top: 2,
right: '-0.5rem',
borderColor: navigationButton.color,
borderWidth: '2px 2px 0 0',
h: '7px',
w: '7px',
},
_d[multipleSelector('.react-datepicker__month-dropdown', '.react-datepicker__year-dropdown')] = {
bg: datePickerTheme.monthBackground,
borderColor: datePickerTheme.gray200,
boxShadow: 'md',
'& > div': {
paddingBlockStart: 1,
paddingBlockEnd: 1,
color: datePickerTheme.text,
'&:hover': {
bg: datePickerTheme.gray200,
},
},
},
_d)
},
_c[multipleSelector('.react-datepicker__current-month', '.react-datepicker-time__header', '.react-datepicker-year-header')] = {
fontWeight: header.fontWeight,
color: header.color,
fontSize: header.fontSize,
},
_c['.react-datepicker__day-names'] = {
padding: dayContainer.padding,
paddingBlockEnd: 0,
'.react-datepicker__day-name': {
w: day.width,
lineHeight: day.lineHeight,
color: day.color,
},
},
_c),
/* / .react-datepicker__header */
'.react-datepicker__navigation': {
w: navigationButton.size,
h: navigationButton.size,
top: header.topSpace,
marginTop: datepickerSize !== 'xs' ? -1 : undefined,
color: 'transparent',
_hover: {
'.react-datepicker__navigation-icon::before': {
borderColor: navigationButton.hover.color,
},
},
'.react-datepicker__navigation-icon': {
fontSize: 'unset',
w: '100%',
h: '100%',
top: 'unset',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
_before: {
left: 'unset',
top: 'unset',
right: 'unset',
bottom: 'unset',
borderColor: navigationButton.color,
},
},
'&.react-datepicker__navigation--previous': {
left: navigationButton.leftRightSpace,
},
'&.react-datepicker__navigation--next': {
right: navigationButton.leftRightSpace,
},
'&.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button)': {
right: "calc(".concat(timeWidth, "px - -0.8rem)"),
},
}
},
/* / .react-datepicker__navigation' */
_b[multipleSelector('.react-datepicker__month-read-view--selected-month', '.react-datepicker__year-read-view--selected-year')] = {
fontWeight: header.fontWeight,
color: header.color,
},
_b['.react-datepicker__month'] = __assign(__assign({}, dayContainer), { borderBottomRightRadius: 'md', borderBottomLeftRadius: 'md', '.react-datepicker__day': (_f = {
w: day.width,
lineHeight: day.lineHeight,
color: day.color,
_hover: {
bg: day.hoverBg,
},
'&.react-datepicker__day--disabled': __assign(__assign({}, day.disabled), { _hover: __assign({}, day.disabled) })
},
_f[multipleSelector('&.react-datepicker__day--in-selecting-range', '&.react-datepicker__month-text--in-selecting-range', '&.react-datepicker__day--keyboard-selected', '&.react-datepicker__month-text--keyboard-selected', '&.react-datepicker__quarter-text--keyboard-selected', '&.react-datepicker__year-text--keyboard-selected')] = {
bg: day.selecting.bg,
},
_f[multipleSelector('&.react-datepicker__day--selected:not(.react-datepicker__day--disabled)', '&.react-datepicker__day--in-range:not(.react-datepicker__day--disabled)', '&.react-datepicker__month-text--selected:not(.react-datepicker__day--disabled)', '&.react-datepicker__month-text--in-range:not(.react-datepicker__day--disabled)')] = {
bg: day.selected.bg,
fontWeight: day.selected.fontWeight,
color: day.selected.color,
_hover: {
bg: day.selected.hover.bg,
},
},
_f), '.react-datepicker__day--outside-month': {
// outside month day
color: datePickerTheme.outsideDay,
} }),
/* / .react-datepicker__month */
_b['.react-datepicker__time-container'] = {
borderColor: header.borderColor,
w: timeWidth,
'.react-datepicker__time': {
bg: dayContainer.bg,
margin: dayContainer.margin,
'.react-datepicker__time-box ': {
w: '100%',
'ul.react-datepicker__time-list': {
'li.react-datepicker__time-list-item': {
h: 'auto',
padding: 2,
color: day.color,
_hover: {
bg: day.hoverBg,
},
},
'li.react-datepicker__time-list-item--selected:not(.react-datepicker__day--disabled)': {
bg: day.selected.bg,
fontWeight: day.selected.fontWeight,
color: day.selected.color,
_hover: {
bg: day.selected.hover.bg,
},
},
},
},
},
},
/* / .react-datepicker__time-container */
_b['.react-datepicker__triangle'] = {
// https://github.com/Hacker0x01/react-datepicker/issues/3176
'@media screen and (min-width:420px)': {
left: "".concat(['top-end', 'bottom-end'].includes(datePickerProps.popperPlacement || '')
? '3rem'
: '-3rem', " !important"),
},
},
_b['.react-datepicker-popper[data-placement^=bottom]'] = {
'.react-datepicker__triangle': {
'&::before': {
// top triangle (border)
borderBottomColor: container.borderColor,
},
'&::after': {
// top triangle (fill color)
borderBottomColor: header.bg,
top: '1px',
},
},
},
_b['.react-datepicker-popper[data-placement^=top]'] = {
'.react-datepicker__triangle': {
'&::before': {
// bottom triangle (border)
borderTopColor: container.borderColor,
},
'&::after': {
// bottom triangle (fill color)
borderTopColor: dayContainer.bg,
},
},
},
_b['.react-datepicker__input-time-container'] = {
m: 0,
p: 3,
'.react-datepicker-time__caption': {
color: datePickerTheme.text,
},
},
_b['.react-datepicker__portal'] = {
bg: 'blackAlpha.600',
},
_b);
return (react_2.default.createElement(react_1.Box, __assign({ sx: sx, w: '100%', lineHeight: 'normal' }, rootProps),
react_2.default.createElement(react_datepicker_1.default, __assign({}, datePickerProps, { customInput: datePickerProps.customInput || react_2.default.createElement(CustomInput, __assign({}, normalizedInputProps)) }))));
};
exports.DatePicker = DatePicker;
var getTimeWidth = function (size) {
if (size === 'xl') {
return 120;
}
if (size === 'sm' || size === 'xs') {
return 75;
}
return 105;
};
var getDayCellSize = function (size) {
var baseSize = getBaseSize(size);
if (size === 'xl') {
return { width: baseSize, lineHeight: '3rem' };
}
return { width: baseSize, lineHeight: baseSize };
};
var getBaseSize = function (size) {
if (size === 'xl') {
return 12;
}
if (size === 'sm') {
return 8;
}
if (size === 'xs') {
return 6;
}
return 10;
};
var useDetermineSize = function (size) {
var _a;
var _b = (0, react_2.useState)(0), tick = _b[0], setTick = _b[1];
var breakPoints = size == null || typeof size === 'string' ? [size || 'md'] : size;
var result = (_a = (0, react_1.useBreakpointValue)(breakPoints)) !== null && _a !== void 0 ? _a : undefined;
(0, react_2.useEffect)(function () {
setTick(function (v) { return v + 1; });
}, []);
if (tick === 0) {
// for SSR
return undefined;
}
return result;
};
var multipleSelector = function () {
var selectors = [];
for (var _i = 0; _i < arguments.length; _i++) {
selectors[_i] = arguments[_i];
}
return selectors.join(',');
};
var customizeDatePickerTheme = function (theme, colorScheme, extendDatePickerTheme) {
var customizedTheme = theme;
if (colorScheme) {
customizedTheme = __assign(__assign({}, customizedTheme), { color300: "".concat(colorScheme, ".300"), color500: "".concat(colorScheme, ".500"), color600: "".concat(colorScheme, ".600") });
}
if (extendDatePickerTheme) {
customizedTheme = extendDatePickerTheme(customizedTheme);
}
return customizedTheme;
};