@atlaskit/calendar
Version:
An interactive calendar for date selection experiences.
112 lines (111 loc) • 5.21 kB
JavaScript
/* date.tsx generated by @compiled/babel-plugin v0.36.1 */
import "./date.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
import noop from '@atlaskit/ds-lib/noop';
import { Grid } from '@atlaskit/primitives/compiled';
import { B200, B400, B50, N0, N200, N30, N40, N500, N600, N900 } from '@atlaskit/theme/colors';
var dateCellSiblingStyle = null;
var dateCellTodayStyle = null;
var dateCellPrevSelectedStyle = null;
var dateCellSelectedStyle = null;
var dateCellDisabledStyle = null;
var dateCellStyles = null;
var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref2, _ref) {
var day = _ref2.children,
_ref2$isDisabled = _ref2.isDisabled,
isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
_ref2$isFocused = _ref2.isFocused,
isFocused = _ref2$isFocused === void 0 ? false : _ref2$isFocused,
_ref2$isToday = _ref2.isToday,
isToday = _ref2$isToday === void 0 ? false : _ref2$isToday,
dayLong = _ref2.dayLong,
month = _ref2.month,
monthLong = _ref2.monthLong,
_ref2$onClick = _ref2.onClick,
onClick = _ref2$onClick === void 0 ? noop : _ref2$onClick,
_ref2$isPreviouslySel = _ref2.isPreviouslySelected,
isPreviouslySelected = _ref2$isPreviouslySel === void 0 ? false : _ref2$isPreviouslySel,
_ref2$isSelected = _ref2.isSelected,
isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
_ref2$isSibling = _ref2.isSibling,
isSibling = _ref2$isSibling === void 0 ? false : _ref2$isSibling,
year = _ref2.year,
shouldSetFocus = _ref2.shouldSetFocus,
tabIndex = _ref2.tabIndex,
testId = _ref2.testId;
var dateRef = useRef({
day: day,
month: month,
year: year,
isDisabled: isDisabled
});
useEffect(function () {
dateRef.current = {
day: day,
month: month,
year: year,
isDisabled: isDisabled
};
}, [day, month, year, isDisabled]);
var focusRef = useRef(null);
useEffect(function () {
if (isFocused && shouldSetFocus && focusRef.current) {
focusRef.current.focus();
}
}, [isFocused, shouldSetFocus]);
var handleClick = useCallback(function () {
var _dateRef$current = dateRef.current,
dayValue = _dateRef$current.day,
monthValue = _dateRef$current.month,
yearValue = _dateRef$current.year,
isDisabledValue = _dateRef$current.isDisabled;
if (!isDisabledValue) {
onClick({
day: dayValue,
month: monthValue,
year: yearValue
});
}
}, [onClick]);
return /*#__PURE__*/React.createElement(Grid, {
role: "gridcell",
alignItems: "center"
}, /*#__PURE__*/React.createElement("button", {
"aria-current": isToday ? 'date' : undefined,
"aria-disabled": isDisabled || undefined,
"aria-label": "".concat(day, ", ").concat(dayLong, " ").concat(monthLong, " ").concat(year),
"aria-pressed": isSelected ? 'true' : 'false',
tabIndex: isFocused ? tabIndex : -1,
type: "button",
onClick: handleClick,
ref: focusRef,
"data-disabled": isDisabled || undefined,
"data-focused": isFocused || undefined,
"data-prev-selected": isPreviouslySelected || undefined,
"data-selected": isSelected || undefined,
"data-sibling": isSibling || undefined,
"data-today": isToday || undefined,
"data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day")),
className: ax(["_kkk2n7od _2rko1l7b _11c82smr _1h6d1j28 _1dqonqa1 _189eyh40 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk1j28 _syazovqm _80omtlke _85i51b66 _1q511b66 _y4tirdoj _bozgrdoj _y3gn1h6o _pojj3zdg _10knnqa1 _1wysyh40 _irr32tgk _30l3ovqm _1di618xb _9h8hovqm", isSibling && "_syazpsu8 _30l3psu8", isToday && "_syazln51 _k48p1igg _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk1kxl _syaz1a5u _30l31a5u", isSelected && "_bfhky9dz _syaz11g7 _irr3j4m7 _30l3dgff", isDisabled && "_syazf50w _80om13gf _irr31j28 _30l3f50w"]),
style: {
"--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
"--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")")),
"--_1y60f1n": ix("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")),
"--_18th9fi": ix("var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")")),
"--_vrm7dk": ix("var(--ds-text-subtlest, ".concat(N200, ")")),
"--_1hfkvbo": ix("var(--ds-text-selected, ".concat(B400, ")")),
"--_rryx0a": ix("var(--ds-background-selected, ".concat(B50, ")")),
"--_1oh641w": ix("var(--ds-text-subtle, ".concat(N600, ")")),
"--_7nwbia": ix("var(--ds-background-selected, ".concat(N500, ")")),
"--_y28k9g": ix("var(--ds-text-selected, ".concat(N0, ")")),
"--_1wu4xsl": ix("var(--ds-background-selected-hovered, ".concat(B50, ")")),
"--_f9evi3": ix("var(--ds-text-selected, ".concat(N600, ")")),
"--_118fb4h": ix("var(--ds-text-disabled, ".concat(N40, ")"))
}
}, day));
}));
Date.displayName = 'Date';
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default Date;