@atlaskit/calendar
Version:
An interactive calendar for date selection experiences.
92 lines (91 loc) • 3.26 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';
const dateCellSiblingStyle = null;
const dateCellTodayStyle = null;
const dateCellPrevSelectedStyle = null;
const dateCellSelectedStyle = null;
const dateCellDisabledStyle = null;
const dateCellStyles = null;
const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
children: day,
isDisabled = false,
isFocused = false,
isToday = false,
dayLong,
month,
monthLong,
onClick = noop,
isPreviouslySelected = false,
isSelected = false,
isSibling = false,
year,
shouldSetFocus,
tabIndex,
testId
}, _ref) {
const dateRef = useRef({
day,
month,
year,
isDisabled
});
useEffect(() => {
dateRef.current = {
day,
month,
year,
isDisabled
};
}, [day, month, year, isDisabled]);
const focusRef = useRef(null);
useEffect(() => {
if (isFocused && shouldSetFocus && focusRef.current) {
focusRef.current.focus();
}
}, [isFocused, shouldSetFocus]);
const handleClick = useCallback(() => {
const {
day: dayValue,
month: monthValue,
year: yearValue,
isDisabled: isDisabledValue
} = dateRef.current;
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": `${day}, ${dayLong} ${monthLong} ${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 ? `${testId}--selected-day` : `${testId}--day`),
className: ax(["_kkk2n7od _2rko1l7b _11c82smr _1h6d1j28 _1dqonqa1 _189eyh40 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk1j28 _syazj3m3 _80omtlke _85i51b66 _1q511b66 _y4tirdoj _bozgrdoj _y3gn1h6o _pojj194a _10knnqa1 _1wysyh40 _irr314ae _30l3j3m3 _1di61l7b _9h8hj3m3", isSibling && "_syaz1wmz _30l31wmz", isToday && "_syaz1ldt _k48p1igg _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk29zg _syazc8hx _30l3c8hx", isSelected && "_bfhk1p4p _syazqueg _irr3quvt _30l31uqy", isDisabled && "_syaz7dlb _80om13gf _irr31j28 _30l37dlb"])
}, day));
}));
Date.displayName = 'Date';
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default Date;