@os-design/core 1.0.279 → 1.0.281

package/src/DateCalendar/Calendar.tsx

@@ -0,0 +1,400 @@
+import styled from '@emotion/styled';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+} from 'react';
+import Button from '../Button/index.js';
+import { clr, type Color } from '@os-design/theming';
+import { resetFocusStyles, transitionStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { css } from '@emotion/react';
+import shift from './utils/shift.js';
+import calendarDays, { type Day, type Month } from './utils/calendarDays.js';
+import { nextMonth, prevMonth } from './utils/month.js';
+import { Left, Loading, Right } from '@os-design/icons';
+import dayOfWeek from './utils/dayOfWeek.js';
+import type { DateCalendarLocale } from './locale.js';
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5em;
+`;
+
+const MonthContainer = styled.div`
+  flex-grow: 1;
+  overflow: hidden;
+`;
+
+const MonthButton = styled(Button)`
+  color: ${(p) => clr(p.theme.colorText)};
+  padding: 0 0.75em;
+
+  & > span {
+    font-size: 1.2em;
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus-visible {
+      color: ${(p) => clr(p.theme.colorPrimary)};
+    }
+  }
+`;
+
+const SwitchMonthButton = styled(Button)`
+  flex-shrink: 0;
+  padding: 0 0.75em;
+`;
+
+const DayGridContainer = styled.div`
+  position: relative;
+`;
+
+const dayGridLoadingStyles = (p) =>
+  p.loading &&
+  css`
+    filter: blur(0.15em);
+  `;
+
+interface DayGridProps {
+  loading: boolean;
+}
+const DayGrid = styled('div', omitEmotionProps('loading'))<DayGridProps>`
+  display: grid;
+  grid-template-columns: repeat(7, ${(p) => p.theme.dateCalendarCellSize}em);
+  grid-auto-rows: ${(p) => p.theme.dateCalendarCellSize}em;
+  justify-content: space-between;
+
+  overflow-x: auto;
+
+  ${dayGridLoadingStyles};
+`;
+
+const dayOfWeekWeekendStyles = (p) =>
+  p.weekend &&
+  css`
+    color: ${clr(p.theme.dateCalendarDayOfWeekWeekendColorText)};
+  `;
+
+interface DayOfWeekProps {
+  weekend: boolean;
+}
+const DayOfWeek = styled('div', omitEmotionProps('weekend'))<DayOfWeekProps>`
+  justify-self: center;
+  align-self: center;
+  color: ${(p) => clr(p.theme.dateCalendarDayOfWeekColorText)};
+  font-size: ${(p) => p.theme.sizes.small}em;
+  ${dayOfWeekWeekendStyles};
+`;
+
+const dayWeekendStyles = (p) =>
+  p.weekend &&
+  css`
+    color: ${clr(p.theme.dateCalendarDayWeekendColorText)};
+  `;
+
+const dayHoverStyles = (p) =>
+  !p.disabled &&
+  css`
+    cursor: pointer;
+
+    @media (hover: hover) {
+      &:hover,
+      &:focus-visible {
+        background-color: ${clr(p.theme.dateCalendarDayColorBgHover)};
+        color: ${clr(p.theme.dateCalendarDayColorTextHover)};
+      }
+    }
+  `;
+
+const disabledStyles = (p) =>
+  p.disabled &&
+  css`
+    cursor: not-allowed;
+    color: ${p.weekend
+      ? clr(p.theme.dateCalendarDisabledDayWeekendColorText)
+      : clr(p.theme.dateCalendarDisabledDayColorText)};
+  `;
+
+interface DayProps {
+  weekend: boolean;
+  disabled: boolean;
+}
+const Day = styled('div', omitEmotionProps('weekend', 'disabled'))<DayProps>`
+  ${resetFocusStyles};
+  justify-self: center;
+  align-self: center;
+  user-select: none;
+  -webkit-user-select: none;
+
+  width: ${(p) => p.theme.dateCalendarDaySize}em;
+  height: ${(p) => p.theme.dateCalendarDaySize}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: ${(p) => p.theme.borderRadius}em;
+
+  ${dayHoverStyles};
+  ${dayWeekendStyles};
+  ${disabledStyles};
+  ${transitionStyles('background-color', 'color')};
+`;
+
+const dayAnotherMonthWeekendStyles = (p) =>
+  p.weekend &&
+  css`
+    color: ${clr(p.theme.dateCalendarDayAnotherMonthWeekendColorText)};
+  `;
+
+const DayAnotherMonth = styled(Day)`
+  ${(p) =>
+    !p.disabled &&
+    css`
+      color: ${clr(p.theme.dateCalendarDayAnotherMonthColorText)};
+      ${dayAnotherMonthWeekendStyles(p)};
+    `};
+`;
+
+const Today = styled(Day)`
+  border: 2px dashed ${(p) => clr(p.theme.dateCalendarTodayColorBorder)};
+  box-sizing: border-box;
+`;
+
+const selectedDayHoverStyles = (p) =>
+  !p.disabled &&
+  css`
+    @media (hover: hover) {
+      &:hover,
+      &:focus-visible {
+        background-color: ${clr(p.theme.dateCalendarSelectedDayColorBgHover)};
+        color: ${clr(p.theme.dateCalendarSelectedDayColorTextHover)};
+      }
+    }
+  `;
+
+const SelectedDay = styled(Day)`
+  background-color: ${(p) => clr(p.theme.dateCalendarSelectedDayColorBg)};
+  color: ${(p) => clr(p.theme.dateCalendarSelectedDayColorText)};
+  ${selectedDayHoverStyles};
+`;
+
+const LoadingContainer = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${(p) =>
+    clr([...p.theme.colorBg.slice(0, 3), 0.6] as Color)};
+`;
+
+const StyledLoading = styled(Loading)`
+  color: ${(p) => clr(p.theme.colorPrimary)};
+  font-size: 1.8em;
+`;
+
+const daysOfWeek = [0, 1, 2, 3, 4, 5, 6];
+
+interface CalendarProps {
+  firstDayOfWeek: number;
+  disabledDays?: (month: Month) => number[] | Promise<number[]>;
+  locale: DateCalendarLocale;
+  value?: Day | null;
+  onChange: (value: Day | null) => void;
+  month: Month;
+  onChangeMonth: (month: Month) => void;
+  onSelectMonth: () => void;
+  today: Date;
+}
+
+type DayPropsGetter = (
+  day: Day,
+  disabled: boolean
+) => HTMLAttributes<HTMLDivElement>;
+
+const Calendar: React.FC<CalendarProps> = ({
+  firstDayOfWeek,
+  disabledDays: disabledDaysFn,
+  locale,
+  value,
+  onChange,
+  month,
+  onChangeMonth,
+  onSelectMonth,
+  today,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [disabledDays, setDisabledDays] = useState<number[]>([]);
+
+  useEffect(() => {
+    if (!disabledDaysFn) return;
+    let mounted = true;
+    const fn = async () => {
+      setLoading(true);
+      const disabledDays = await disabledDaysFn(month);
+      if (mounted) {
+        setDisabledDays(disabledDays);
+        setLoading(false);
+      }
+    };
+    fn();
+    return () => {
+      mounted = false;
+    };
+  }, [disabledDaysFn, month]);
+
+  const shiftedDaysOfWeek = useMemo(
+    () => shift(daysOfWeek, firstDayOfWeek),
+    [firstDayOfWeek]
+  );
+
+  const days = useMemo(
+    () => calendarDays(month, firstDayOfWeek),
+    [month, firstDayOfWeek]
+  );
+
+  const getDayProps = useCallback<DayPropsGetter>(
+    (day, disabled) => {
+      if (disabled) {
+        return {};
+      }
+      return {
+        tabIndex: 0,
+        role: 'button',
+        onClick: () => onChange(day),
+        onKeyDown: (e) => {
+          if (e.key === 'Enter') {
+            onChange(day);
+          }
+        },
+      };
+    },
+    [onChange]
+  );
+  return (
+    <>
+      <Header>
+        <MonthContainer>
+          <MonthButton
+            type='ghost'
+            wide='never'
+            size='small'
+            onClick={onSelectMonth}
+          >
+            {locale.months[month.month]} {month.year}
+          </MonthButton>
+        </MonthContainer>
+
+        <SwitchMonthButton
+          type='ghost'
+          wide='never'
+          size='small'
+          onClick={() => onChangeMonth(prevMonth(month))}
+        >
+          <Left />
+        </SwitchMonthButton>
+        <SwitchMonthButton
+          type='ghost'
+          wide='never'
+          size='small'
+          onClick={() => onChangeMonth(nextMonth(month))}
+        >
+          <Right />
+        </SwitchMonthButton>
+      </Header>
+
+      <DayGridContainer>
+        <DayGrid loading={loading}>
+          {shiftedDaysOfWeek.map((i) => {
+            return (
+              <DayOfWeek key={i} weekend={i === 6 || i === 0}>
+                {locale.shortDaysOfWeek[i]}
+              </DayOfWeek>
+            );
+          })}
+
+          {days.map((day) => {
+            const key = `${day.year}/${day.month}/${day.day}`;
+            const dow = dayOfWeek(day);
+            const weekend = dow === 6 || dow === 0;
+            if (day.month !== month.month) {
+              return (
+                <DayAnotherMonth
+                  key={key}
+                  weekend={weekend}
+                  disabled={!!disabledDaysFn}
+                  {...getDayProps(day, !!disabledDaysFn)}
+                >
+                  {day.day}
+                </DayAnotherMonth>
+              );
+            }
+            const disabled = disabledDays.includes(day.day);
+            if (
+              value &&
+              value.year === day.year &&
+              value.month === day.month &&
+              value.day === day.day
+            ) {
+              return (
+                <SelectedDay
+                  key={key}
+                  weekend={weekend}
+                  disabled={disabled}
+                  {...getDayProps(day, disabled)}
+                >
+                  {day.day}
+                </SelectedDay>
+              );
+            }
+            if (
+              today.getFullYear() === day.year &&
+              today.getMonth() === day.month &&
+              today.getDate() === day.day
+            ) {
+              return (
+                <Today
+                  key={key}
+                  weekend={weekend}
+                  disabled={disabled}
+                  {...getDayProps(day, disabled)}
+                >
+                  {day.day}
+                </Today>
+              );
+            }
+            return (
+              <Day
+                key={key}
+                weekend={weekend}
+                disabled={disabled}
+                {...getDayProps(day, disabled)}
+              >
+                {day.day}
+              </Day>
+            );
+          })}
+        </DayGrid>
+
+        {loading && (
+          <LoadingContainer>
+            <StyledLoading />
+          </LoadingContainer>
+        )}
+      </DayGridContainer>
+    </>
+  );
+};
+
+export default Calendar;

package/src/DateCalendar/MonthPicker.tsx

@@ -0,0 +1,212 @@
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { Month } from './utils/calendarDays.js';
+import type { DateCalendarLocale } from './locale.js';
+import styled from '@emotion/styled';
+import Button from '../Button/index.js';
+import { clr } from '@os-design/theming';
+import { css } from '@emotion/react';
+import { omitEmotionProps } from '@os-design/utils';
+import { enableScrollingStyles } from '@os-design/styles';
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5em;
+`;
+
+const BackButtonContainer = styled.div`
+  flex-grow: 1;
+`;
+
+const DateButton = styled(Button)`
+  padding: 0 0.75em;
+  & > span {
+    font-size: ${(p) => p.theme.sizes.large}em;
+  }
+`;
+
+const Container = styled.div`
+  position: relative;
+  height: ${(p) => p.theme.dateCalendarCellSize * 7}em;
+
+  display: flex;
+  justify-content: center;
+  column-gap: 0.5em;
+`;
+
+const List = styled.div`
+  ${enableScrollingStyles('y', false)};
+`;
+
+const selectedStyles = (p) =>
+  p.selected &&
+  css`
+    & > span {
+      color: ${clr(p.theme.buttonGhostColorText)};
+    }
+  `;
+
+interface ListItemButtonProps {
+  selected: boolean;
+}
+const ListItemButton = styled(
+  Button,
+  omitEmotionProps('selected')
+)<ListItemButtonProps>`
+  & > span {
+    color: ${(p) => clr(p.theme.colorText)};
+  }
+  ${selectedStyles};
+`;
+
+interface MonthPickerProps {
+  locale: DateCalendarLocale;
+  month: Month;
+  onChangeMonth: (month: Month) => void;
+  today: Date;
+}
+
+const MonthPicker: React.FC<MonthPickerProps> = ({
+  locale,
+  month,
+  onChangeMonth,
+  today,
+}) => {
+  const [selectedMonth, setSelectedMonth] = useState(month);
+  const [selectedParts, setSelectedParts] = useState({
+    year: false,
+    month: false,
+  });
+
+  const yearListRef = useRef<HTMLDivElement>(null);
+  const monthListRef = useRef<HTMLDivElement>(null);
+  const selectedYearButtonRef = useRef<HTMLButtonElement>(null);
+  const selectedMonthButtonRef = useRef<HTMLButtonElement>(null);
+
+  // Scroll the lists to the selected year and month
+  useLayoutEffect(() => {
+    if (monthListRef.current && selectedMonthButtonRef.current) {
+      monthListRef.current.scrollTo({
+        top: selectedMonthButtonRef.current.offsetTop,
+      });
+    }
+    if (yearListRef.current && selectedYearButtonRef.current) {
+      yearListRef.current.scrollTo({
+        top: selectedYearButtonRef.current.offsetTop,
+      });
+    }
+  }, []);
+
+  // Call the onChangeMonth callback when all the parts are selected
+  useEffect(() => {
+    if (selectedParts.year && selectedParts.month) {
+      onChangeMonth(selectedMonth);
+    }
+  }, [onChangeMonth, selectedMonth, selectedParts.month, selectedParts.year]);
+
+  const years = useMemo(() => {
+    const res: number[] = [];
+    for (let i = -100; i <= 10; i++) {
+      res.push(today.getFullYear() + i);
+    }
+    return res;
+  }, [today]);
+
+  return (
+    <>
+      <Header>
+        <BackButtonContainer>
+          <DateButton
+            type='ghost'
+            wide='never'
+            size='small'
+            onClick={() => {
+              onChangeMonth(selectedMonth);
+            }}
+          >
+            {locale.months[selectedMonth.month]} {selectedMonth.year}
+          </DateButton>
+        </BackButtonContainer>
+
+        {(selectedMonth.year !== today.getFullYear() ||
+          selectedMonth.month !== today.getMonth()) && (
+          <DateButton
+            type='ghost'
+            wide='never'
+            size='small'
+            onClick={() => {
+              onChangeMonth({
+                year: today.getFullYear(),
+                month: today.getMonth(),
+              });
+            }}
+          >
+            {locale.months[today.getMonth()]} {today.getFullYear()}
+          </DateButton>
+        )}
+      </Header>
+
+      <Container>
+        <List ref={monthListRef}>
+          {locale.months.map((item, index) => {
+            const selected = index === selectedMonth.month;
+            return (
+              <ListItemButton
+                ref={selected ? selectedMonthButtonRef : undefined}
+                key={item}
+                type='ghost'
+                selected={selected}
+                onClick={() => {
+                  setSelectedMonth((prev) => ({
+                    year: prev.year,
+                    month: index,
+                  }));
+                  setSelectedParts((prev) => ({
+                    year: selected || prev.year,
+                    month: true,
+                  }));
+                }}
+              >
+                {item}
+              </ListItemButton>
+            );
+          })}
+        </List>
+
+        <List ref={yearListRef}>
+          {years.map((item) => {
+            const selected = item === selectedMonth.year;
+            return (
+              <ListItemButton
+                ref={selected ? selectedYearButtonRef : undefined}
+                selected={selected}
+                key={item}
+                type='ghost'
+                onClick={() => {
+                  setSelectedMonth((prev) => ({
+                    year: item,
+                    month: prev.month,
+                  }));
+                  setSelectedParts((prev) => ({
+                    year: true,
+                    month: selected || prev.month,
+                  }));
+                }}
+              >
+                {item}
+              </ListItemButton>
+            );
+          })}
+        </List>
+      </Container>
+    </>
+  );
+};
+
+export default MonthPicker;