@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,440 @@
+import React from "react";
+import styles from "./Calendar.module.scss";
+import cn from "classnames/bind";
+import dayjs from "dayjs";
+import {
+  CalendarContext,
+  CalendarProvider,
+  CalendarProviderProps,
+} from "./Calendar.context";
+import {
+  getCalendarColumns,
+  getDayText,
+  getWeekdayColumns,
+} from "./dayjs.util";
+import { Icon } from "../Icon/Icon";
+
+const cx = cn.bind(styles);
+
+type AsBodyProps = {
+  columns: dayjs.Dayjs[];
+  className?: string;
+  columnRender: () => React.ReactNode;
+};
+
+type ColumnAsProps = {
+  date: string;
+  visible: boolean;
+  className?: string;
+  selected: boolean;
+  onClick?: (date: string) => void;
+  disabled: boolean;
+  between: boolean;
+  both: boolean;
+  start: boolean;
+  end: boolean;
+  columns: dayjs.Dayjs[];
+};
+
+type CalendarBodyProps = {
+  as?: (props: AsBodyProps) => React.ReactNode;
+  className?: string;
+  /** 이전, 다음달 채울지 여부 */
+  isFill?: boolean;
+  /** column className */
+  columnClassName?: string;
+  columnAs?: (props: ColumnAsProps) => React.ReactNode;
+};
+
+const Body = (props: CalendarBodyProps) => {
+  const { as, className, isFill, columnClassName, columnAs } = props;
+  const { handleDatePress, excludeDates, minDate, maxDate } =
+    React.useContext(CalendarContext);
+
+  const {
+    currentWeekFirst,
+    currentMonthFirst,
+    calendarType,
+    isWeekend,
+    isWeekDay,
+    isMondayStart,
+    selectedDate,
+  } = React.useContext(CalendarContext);
+
+  const value = React.useMemo(() => {
+    if (Array.isArray(selectedDate)) {
+      return {
+        start: selectedDate[0] || "",
+        end: selectedDate[1] || "",
+      };
+    } else {
+      return {
+        start: selectedDate || "",
+        end: "",
+      };
+    }
+  }, [selectedDate]);
+
+  const weekList = getWeekdayColumns({
+    date: currentWeekFirst ?? "",
+    isWeekDay,
+    isWeekend,
+    isMondayStart,
+  });
+
+  const monthList = getCalendarColumns({
+    date: currentMonthFirst ?? "",
+    isWeekDay,
+    isWeekend,
+    isMondayStart,
+  });
+
+  const list = calendarType === "month" ? monthList : weekList;
+
+  const columns = isWeekend && isWeekDay ? 7 : isWeekend ? 2 : 5;
+
+  const checkDisabled = (date: string) => {
+    if (excludeDates?.includes(date)) {
+      return true;
+    }
+
+    if (minDate && dayjs(date).isBefore(minDate, "day")) {
+      return true;
+    }
+
+    if (maxDate && dayjs(date).isAfter(maxDate, "day")) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const onChange = (date: string) => {
+    if (Array.isArray(selectedDate)) {
+      if (value.start && !value.end) {
+        const isStartBeforeEnd = dayjs(value.start).isBefore(date);
+
+        handleDatePress?.([
+          isStartBeforeEnd ? value.start : date,
+          isStartBeforeEnd ? date : value.end,
+        ]);
+        return;
+      } else {
+        handleDatePress?.([date, ""]);
+        return;
+      }
+    } else {
+      handleDatePress?.(date);
+    }
+  };
+
+  const columnRender = () => {
+    return list.map((item) => {
+      const isStart = dayjs(value.start).isSame(item, "D");
+      const isEnd = dayjs(value.end).isSame(item, "D");
+
+      if (columnAs) {
+        const props = {
+          date: item.format("YYYY-MM-DD"),
+          visible: isFill ? true : item.isSame(currentMonthFirst, "month"),
+          className: columnClassName,
+          selected: isStart || isEnd,
+          onClick: handleDatePress,
+          disabled: checkDisabled(item.format("YYYY-MM-DD")),
+          between:
+            !!value.start &&
+            !!value.end &&
+            dayjs(value.start).isBefore(item) &&
+            dayjs(value.end).isAfter(item),
+          both: isStart && isEnd,
+          start: !!value.start && !!value.end && isStart,
+          end: !!value.start && !!value.end && isEnd,
+          columns: list,
+        };
+
+        return React.createElement(columnAs, {
+          key: item.toString(),
+          ...props,
+        });
+      }
+      return (
+        <button
+          key={item.toString()}
+          className={cx("CalendarBodyColumn", columnClassName, {
+            today: item.isSame(dayjs(), "day"),
+            between:
+              value.start &&
+              value.end &&
+              dayjs(value.start).isBefore(item) &&
+              dayjs(value.end).isAfter(item),
+            both: isStart && isEnd,
+            start: value.start && value.end && isStart,
+            end: value.start && value.end && isEnd,
+          })}
+          disabled={checkDisabled(item.format("YYYY-MM-DD"))}
+          style={{
+            visibility: isFill
+              ? "visible"
+              : item.isSame(currentMonthFirst, "month")
+              ? "visible"
+              : "hidden",
+          }}
+          onClick={onChange?.bind(null, item.format("YYYY-MM-DD"))}
+        >
+          <span
+            className={cx("CalendarBodyColumnText", {
+              selected: isStart || isEnd,
+            })}
+          >
+            {item.format(item.isSame(currentMonthFirst, "month") ? "D" : "M.D")}
+          </span>
+        </button>
+      );
+    });
+  };
+
+  return as ? (
+    as({ columns: list, className, columnRender })
+  ) : (
+    <div
+      className={cx("CalendarBody", className)}
+      style={{
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateRows: `repeat(${Math.ceil(list.length / columns)}, 1fr)`,
+      }}
+    >
+      {columnRender()}
+    </div>
+  );
+};
+
+type AsDirectionProps = {
+  disabled?: boolean;
+};
+
+type DirectionButtonProps = {
+  as?: (props: AsDirectionProps) => React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  moveValue?: number;
+};
+
+const Next = (props: DirectionButtonProps) => {
+  const { as, className, disabled, moveValue } = props;
+  const { calendarType, addMonth, addWeek, maxDate, currentMonthFirst } =
+    React.useContext(CalendarContext);
+
+  const handleClick = React.useCallback(() => {
+    if (calendarType === "month") {
+      addMonth(moveValue);
+    } else {
+      addWeek(moveValue);
+    }
+  }, [addMonth, addWeek, calendarType, moveValue]);
+
+  const isDisabled = disabled
+    ? disabled
+    : maxDate
+    ? dayjs(currentMonthFirst).isSame(maxDate, "month")
+      ? true
+      : false
+    : false;
+
+  return (
+    <button
+      className={cx("CalendarDirectionButton", "next", className)}
+      onClick={handleClick}
+      disabled={isDisabled}
+    >
+      {as ? (
+        as({ disabled: isDisabled })
+      ) : (
+        <Icon
+          name={"GoNext"}
+          size={24}
+          color={isDisabled ? "rgba(0, 0, 0, 0.2)" : undefined}
+        />
+      )}
+    </button>
+  );
+};
+
+const Prev = (props: DirectionButtonProps) => {
+  const { as, className, disabled, moveValue } = props;
+  const {
+    calendarType,
+    subtractWeek,
+    subtractMonth,
+    minDate,
+    currentMonthFirst,
+  } = React.useContext(CalendarContext);
+
+  const handleClick = React.useCallback(() => {
+    if (calendarType === "month") {
+      subtractMonth(moveValue);
+    } else {
+      subtractWeek(moveValue);
+    }
+  }, [calendarType, subtractMonth, moveValue, subtractWeek]);
+
+  const isDisabled = disabled
+    ? disabled
+    : minDate
+    ? dayjs(currentMonthFirst).isSame(minDate, "month")
+    : false;
+
+  return (
+    <button
+      className={cx("CalendarDirectionButton", "prev", className)}
+      onClick={handleClick}
+      disabled={isDisabled}
+    >
+      {as ? (
+        as({ disabled: isDisabled })
+      ) : (
+        <Icon
+          name={"GoBefore"}
+          size={24}
+          color={isDisabled ? "rgba(0, 0, 0, 0.2)" : undefined}
+        />
+      )}
+    </button>
+  );
+};
+
+type AsDayTextProps = {
+  columns: (string | undefined)[];
+};
+
+type DayTextListProps = React.PropsWithChildren<{
+  as?: (props: AsDayTextProps) => React.ReactNode;
+  /** dayColumn */
+  column?: React.ReactElement;
+  className?: string;
+}>;
+
+const DayTextList = (props: DayTextListProps) => {
+  const { as, column = <DayTextColumn />, className } = props;
+  const { isWeekDay, isWeekend, isMondayStart, lang } =
+    React.useContext(CalendarContext);
+
+  const dayList = React.useMemo(() => {
+    const columns = [];
+
+    if (!isWeekDay && !isWeekend) {
+      return [];
+    }
+
+    const weekDayArray = isWeekDay
+      ? new Array(5).fill(0).map((_, index) => {
+          return index + 1;
+        })
+      : [];
+
+    const weekEndArray = isWeekend
+      ? new Array(2).fill(0).map((_, index) => {
+          return (index + 6) % 7;
+        })
+      : [];
+
+    if (!isWeekDay && isWeekend) {
+      return weekEndArray;
+    }
+
+    if (isMondayStart) {
+      columns.push(...weekDayArray, ...weekEndArray);
+    } else {
+      columns.push(weekEndArray[1], ...weekDayArray, weekEndArray[0]);
+    }
+
+    return columns.filter((column) => column !== undefined);
+  }, [isMondayStart, isWeekDay, isWeekend]);
+
+  return as ? (
+    as({ columns: dayList.map((day) => getDayText(day, lang)) })
+  ) : (
+    <div
+      className={cx("CalendarDayTextList", className)}
+      style={{
+        gridTemplateColumns: `repeat(${dayList.length}, 1fr)`,
+      }}
+    >
+      {dayList.map((day) => {
+        return React.cloneElement(column as React.ReactElement<any>, {
+          key: day,
+          children: getDayText(day, lang),
+          day,
+        });
+      })}
+    </div>
+  );
+};
+
+type DayTextProps = React.PropsWithChildren<{
+  day?: number;
+  children?: React.ReactNode;
+  className?: string;
+}>;
+
+const DayTextColumn = (props: DayTextProps) => {
+  const { children, day, className } = props;
+
+  return (
+    <p
+      className={cx("CalednarDayTextColumn", className, {
+        saturday: day === 6,
+        sunday: day === 0,
+      })}
+    >
+      {children}
+    </p>
+  );
+};
+
+type HeaderDateProps = {
+  className?: string;
+  format?: string;
+};
+
+const HeaderDate = (props: HeaderDateProps) => {
+  const { className, format = "YYYY-MM" } = props;
+  const { currentDate } = React.useContext(CalendarContext);
+  return (
+    <p className={cx("CalendarHeaderDate", className)}>
+      {dayjs(currentDate).format(format)}
+    </p>
+  );
+};
+
+type RootProps = CalendarProviderProps & {
+  currentDate?: string;
+  className?: string;
+};
+
+const Root = (props: RootProps) => {
+  const { children, className, ...rest } = props;
+
+  return (
+    <CalendarProvider {...rest}>
+      <div className={cx("CaledarRoot", className)}>{children}</div>
+    </CalendarProvider>
+  );
+};
+
+interface ICalendar {
+  Root: typeof Root;
+  HeaderDate: typeof HeaderDate;
+  DayTextList: typeof DayTextList;
+  Prev: typeof Prev;
+  Next: typeof Next;
+  Body: typeof Body;
+}
+
+export default {
+  Root,
+  HeaderDate,
+  DayTextList,
+  Prev,
+  Next,
+  Body,
+} as ICalendar;