@weing-dev/ui-kit-primitive 0.0.1 → 0.0.3

package/src/components/Calendar/Calendar.tsx

@@ -1,440 +0,0 @@
-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;