@os-design/core 1.0.199 → 1.0.200

package/src/DatePicker/DatePickerCalendar.tsx

@@ -0,0 +1,220 @@
+import styled from '@emotion/styled';
+import {
+  DatePickerLocale,
+  getAccessibilityDateLabel,
+  useDatePickerCalendar,
+} from '@os-design/date-picker-utils';
+import { Left, Right } from '@os-design/icons';
+import {
+  ellipsisStyles,
+  resetFocusStyles,
+  transitionStyles,
+} from '@os-design/styles';
+import { Color, clr } from '@os-design/theming';
+
+import React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';
+import Button from '../Button';
+
+interface DatePickerCalendarProps {
+  firstDayOfWeek: 'sunday' | 'monday';
+  locale: DatePickerLocale;
+  value?: Date | [Date, Date] | null;
+  onSelect?: (value: Date) => void;
+}
+
+const MonthContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5em;
+`;
+
+const Month = styled.div`
+  flex-grow: 1;
+  font-weight: 500;
+  text-align: center;
+  padding: 0 0.4em;
+  ${ellipsisStyles};
+`;
+
+const Calendar = styled.div`
+  display: grid;
+  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);
+  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;
+  justify-content: space-between;
+  overflow-x: auto;
+`;
+
+const DayOfWeek = styled.div`
+  justify-self: center;
+  align-self: center;
+  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};
+  font-size: ${(p) => p.theme.sizes.small}em;
+`;
+
+const Day = styled.div`
+  ${resetFocusStyles};
+  justify-self: center;
+  align-self: center;
+
+  width: ${(p) => p.theme.datePickerDaySize}em;
+  height: ${(p) => p.theme.datePickerDaySize}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};
+      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};
+    }
+  }
+
+  ${transitionStyles('background-color', 'color')};
+`;
+
+const DayAnotherMonth = styled(Day)`
+  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};
+`;
+
+const Today = styled(Day)`
+  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};
+  color: ${(p) => clr(p.theme.datePickerTodayColorText)};
+  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};
+  box-sizing: border-box;
+`;
+
+const SelectedDay = styled(Day)`
+  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};
+  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};
+`;
+
+const DayInRange = styled(Day)`
+  background-color: ${(p) =>
+    clr([
+      ...p.theme.colorText.slice(0, 3),
+      (p.theme.colorText[3] || 1) * 0.05,
+    ] as Color)};
+`;
+
+const DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({
+  firstDayOfWeek,
+  locale,
+  value,
+  onSelect = () => {},
+}) => {
+  const valueRef = useRef(value);
+  useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+
+  const onSelectRef = useRef(onSelect);
+  useEffect(() => {
+    onSelectRef.current = onSelect;
+  }, [onSelect]);
+
+  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({
+    value,
+    firstDayOfWeek,
+  });
+
+  const getDayProps = useCallback<
+    (date: Date) => HTMLAttributes<HTMLDivElement>
+  >(
+    (date: Date) => ({
+      tabIndex: 0,
+      role: 'button',
+      'aria-label': getAccessibilityDateLabel(date, locale),
+      onClick: () => {
+        onSelectRef.current(date);
+      },
+      onKeyDown: (e) => {
+        if (['Enter', ' '].includes(e.key)) {
+          onSelectRef.current(date);
+          e.preventDefault();
+        }
+      },
+      onMouseDown: (e) => e.preventDefault(),
+    }),
+    [locale]
+  );
+
+  return (
+    <>
+      <MonthContainer>
+        <Button
+          type='ghost'
+          wide='never'
+          size='small'
+          onClick={() => updateMonth(-1)}
+          aria-label={locale.prevMonthLabel}
+        >
+          <Left />
+        </Button>
+        <Month>
+          {locale.months[selectedMonth.month]} {selectedMonth.year}
+        </Month>
+        <Button
+          type='ghost'
+          wide='never'
+          size='small'
+          onClick={() => updateMonth(1)}
+          aria-label={locale.nextMonthLabel}
+        >
+          <Right />
+        </Button>
+      </MonthContainer>
+
+      <Calendar>
+        {(firstDayOfWeek === 'sunday'
+          ? locale.shortDaysOfWeek
+          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]
+        ).map((item) => (
+          <DayOfWeek key={item}>{item}</DayOfWeek>
+        ))}
+
+        {days.map(({ type, date }) => {
+          if (type === 'dayAnotherMonth') {
+            return (
+              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>
+                {date.getDate()}
+              </DayAnotherMonth>
+            );
+          }
+          if (type === 'selectedDay') {
+            return (
+              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>
+                {date.getDate()}
+              </SelectedDay>
+            );
+          }
+          if (type === 'dayInRange') {
+            return (
+              <DayInRange key={date.toISOString()} {...getDayProps(date)}>
+                {date.getDate()}
+              </DayInRange>
+            );
+          }
+          if (type === 'today') {
+            return (
+              <Today key={date.toISOString()} {...getDayProps(date)}>
+                {date.getDate()}
+              </Today>
+            );
+          }
+          return (
+            <Day key={date.toISOString()} {...getDayProps(date)}>
+              {date.getDate()}
+            </Day>
+          );
+        })}
+      </Calendar>
+    </>
+  );
+};
+
+export default DatePickerCalendar;