@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,467 @@
+"use client";
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+import cn from "classnames/bind";
+import styles from "./Slider.module.scss";
+import {
+  SliderContext,
+  SliderProvider,
+  SliderProviderProps,
+} from "./Slider.context";
+
+const cx = cn.bind(styles);
+
+type MarkAsProps = {
+  label: string | number | React.ReactNode;
+  active: boolean;
+};
+type MarksProps = React.PropsWithChildren<{
+  className?: string;
+  as?: (props: MarkAsProps) => React.ReactNode;
+}>;
+const Marks = (props: MarksProps) => {
+  const { className, as } = props;
+
+  const {
+    progressRef,
+    marks,
+    markActiveEffect,
+    defaultValue,
+    max,
+    min,
+    invert,
+  } = React.useContext(SliderContext);
+
+  const markActiveCompare = React.useCallback(
+    (value: number) => {
+      if (!markActiveEffect) return false;
+      if (
+        progressRef?.current &&
+        defaultValue &&
+        max !== undefined &&
+        min !== undefined
+      ) {
+        const range = max - min;
+
+        // 실제값을 비율값으로 변환
+        const defaultValuePer = defaultValue.map((v) => {
+          return ((v - min) / range) * 100;
+        });
+
+        if (defaultValuePer.length > 1) {
+          // defaultValue 배열에 actualValue가 포함되는지 확인
+          return invert
+            ? value <= Math.min(...defaultValuePer) ||
+                value >= Math.max(...defaultValuePer)
+            : value >= Math.min(...defaultValuePer) &&
+                value <= Math.max(...defaultValuePer);
+        }
+        return invert
+          ? value >= Math.max(...defaultValuePer)
+          : value <= Math.max(...defaultValuePer);
+      }
+      return false; // progressRef가 없거나 defaultValue가 없을 경우 false 반환
+    },
+    [markActiveEffect, progressRef, defaultValue, min, max, invert]
+  );
+
+  return marks?.map(({ value, label }, idx) => (
+    <div
+      key={idx}
+      className={cx("Mark", className)}
+      style={{
+        left: `${value}%`,
+      }}
+    >
+      {as ? (
+        as({ label, active: markActiveCompare(value) })
+      ) : (
+        <div className={cx("Point")}>
+          <div
+            className={cx("Label", {
+              active: markActiveCompare(value),
+            })}
+          >
+            {label}
+          </div>
+        </div>
+      )}
+    </div>
+  ));
+};
+type ThumbAsProps = {
+  hidden: boolean;
+  isDragging: boolean;
+  children: React.ReactNode;
+  labelAlwaysOn?: boolean;
+  value?: string | number;
+};
+type ThumbProps = React.PropsWithChildren<{
+  index?: number;
+  className?: string;
+  as?: (props: ThumbAsProps) => React.ReactNode;
+}>;
+const Thumb = (props: ThumbProps) => {
+  const { index = 0, children, className, as } = props;
+
+  const {
+    progressRef,
+    min,
+    max,
+    step,
+    defaultValue,
+    labelAlwaysOn,
+    draggingIndex,
+    label,
+    scale,
+    onChange,
+    setDefaultValue,
+  } = React.useContext(SliderContext);
+
+  const thumbPosition = React.useMemo(() => {
+    if (
+      progressRef?.current &&
+      defaultValue !== undefined &&
+      max !== undefined &&
+      min !== undefined
+    ) {
+      const rect = progressRef.current.getBoundingClientRect();
+      const sliderWidth = rect.width;
+      const value = defaultValue[index];
+      const range = max - min;
+      const position = ((value - min) / range) * sliderWidth;
+
+      return position;
+    }
+  }, [progressRef, index, defaultValue, min, max]);
+
+  const valueView = React.useMemo(() => {
+    if (label === null) return;
+    return (
+      label?.(scale?.(defaultValue?.[index] ?? 0) ?? 0) ??
+      scale?.(defaultValue?.[index] ?? 0)
+    );
+  }, [index, defaultValue, scale, label]);
+
+  React.useEffect(() => {
+    if (!onChange && setDefaultValue) {
+      setDefaultValue((curr) => {
+        const newCurr = [...curr];
+        if (index !== 0 && max !== undefined) {
+          newCurr[index] =
+            newCurr[index - 1] + (step ?? 10) > max
+              ? max
+              : newCurr[index - 1] + (step ?? 10);
+        }
+        return newCurr;
+      });
+    }
+  }, [index, max, step, onChange, setDefaultValue]);
+
+  return (
+    <div
+      className={cx("Thumb", className)}
+      style={{
+        transform: `translate(calc(-50% + ${thumbPosition}px), calc(-50% + var(--progress-progress-height) / 2))`,
+      }}
+    >
+      {as ? (
+        as({
+          labelAlwaysOn,
+          hidden: label === null,
+          isDragging: draggingIndex === index,
+          value: valueView,
+          children,
+        })
+      ) : (
+        <div
+          className={cx("Point", {
+            labelAlwaysOn,
+            hidden: label === null,
+            isDragging: draggingIndex === index,
+          })}
+          data-value={valueView}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+type ProgressProps = {
+  children: React.ReactNode;
+  color?: React.CSSProperties["color"];
+  className?: string;
+  valueClassName?: string;
+};
+const Progress = (props: ProgressProps) => {
+  const { children, color = "#688DEE", className, valueClassName } = props;
+
+  const {
+    max,
+    min,
+    step,
+    progressRef,
+    readOnly,
+    disabled,
+    invert,
+    defaultValue,
+    draggingIndex,
+    onChange,
+    setDefaultValue,
+    setDraggingIndex,
+  } = React.useContext(SliderContext);
+
+  const rangeStyle = React.useMemo(() => {
+    if (
+      progressRef?.current &&
+      defaultValue &&
+      max !== undefined &&
+      min !== undefined
+    ) {
+      if (defaultValue?.length < 2) {
+        const value = defaultValue[0];
+        const range = max - min;
+        const position = ((value - min) / range) * 100;
+        return {
+          width: `${position}%`,
+        };
+      }
+      const minValue = Math.min(...defaultValue);
+      const maxValue = Math.max(...defaultValue);
+      const range = max - min;
+      const position = ((maxValue - min) / range) * 100; // 최대값에 대한 위치
+      const minPosition = ((minValue - min) / range) * 100; // 최소값에 대한 위치
+      const rect = progressRef.current.getBoundingClientRect();
+      const sliderWidth = rect.width;
+      const minPositionOffset = (minPosition / 100) * sliderWidth;
+      return {
+        width: `${position - minPosition}%`, // 최소값과 최대값 사이의 너비
+        transform: `translateX(${minPositionOffset}px)`, // 최소값에 대한 위치
+      };
+    }
+  }, [progressRef, defaultValue, max, min]);
+
+  // 마우스 위치에 따라 값을 계산하는 함수
+  const calculateValueFromPosition = React.useCallback(
+    (clientX: number) => {
+      if (
+        progressRef?.current &&
+        max !== undefined &&
+        min !== undefined &&
+        step !== undefined
+      ) {
+        const rect = progressRef.current.getBoundingClientRect();
+        const sliderWidth = rect.width;
+        const offsetX = clientX - rect.left;
+
+        // 비율 계산
+        const ratio = offsetX / sliderWidth;
+        let newValue = min + ratio * (max - min);
+
+        // step에 맞게 반올림
+        newValue = Math.round(newValue / step) * step;
+
+        // min, max 범위 내로 제한
+        return Math.max(min, Math.min(newValue, max));
+      }
+      return 0; // 기본값으로 반환
+    },
+    [progressRef, max, min, step]
+  );
+
+  const setValueHandler = React.useCallback(
+    (idx: number, value: number) => {
+      if (step === undefined || min === undefined || max === undefined) return;
+
+      const defaultSetChangeHandler = (curr: number[]) => {
+        const newCurr = [...curr];
+
+        if (idx !== 0 && value <= newCurr[0] && newCurr[0] === min) {
+          return newCurr;
+        } else if (
+          idx !== newCurr.length - 1 &&
+          value >= newCurr[newCurr.length - 1] &&
+          newCurr[newCurr.length - 1] === max
+        ) {
+          return newCurr;
+        } else {
+          newCurr[idx] = value;
+        }
+
+        // 좌에서 우
+        if (value >= newCurr[idx + 1]) {
+          for (let i = idx + 1; i < newCurr.length; i++) {
+            if (newCurr[i] + step > max) {
+              newCurr[i] = max;
+              break;
+            }
+
+            newCurr[i] += step;
+          }
+        }
+        // 우에서 좌
+        if (value <= newCurr[idx - 1]) {
+          for (let i = idx - 1; i >= 0; i--) {
+            if (newCurr[i] - step < min) {
+              newCurr[i] = min;
+              break;
+            }
+            newCurr[i] -= step;
+          }
+        }
+
+        return newCurr;
+      };
+
+      if (onChange) {
+        onChange({ idx, value, step, min, max, defaultSetChangeHandler });
+      } else {
+        setDefaultValue?.(defaultSetChangeHandler);
+      }
+    },
+    [onChange, setDefaultValue, step, min, max]
+  );
+
+  // 마우스를 클릭했을 때 처리하는 함수
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      if (readOnly || disabled) return;
+      const newValue = calculateValueFromPosition(e.clientX);
+
+      let closestIndex = 0;
+      let minDiff = Infinity;
+      defaultValue?.forEach((val, index) => {
+        const diff = Math.abs(newValue - val);
+        if (diff < minDiff) {
+          minDiff = diff;
+          closestIndex = index;
+        }
+      });
+      setDraggingIndex?.(closestIndex);
+      setValueHandler(closestIndex, newValue);
+    },
+    [
+      readOnly,
+      disabled,
+      defaultValue,
+      calculateValueFromPosition,
+      setDraggingIndex,
+      setValueHandler,
+    ]
+  );
+
+  // 마우스를 움직일 때 처리하는 함수
+  const handleMouseMove = React.useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      if (readOnly || disabled) return;
+      if (draggingIndex !== undefined) {
+        const newValue = calculateValueFromPosition(e.clientX);
+        setValueHandler(draggingIndex, newValue);
+      }
+    },
+    [
+      readOnly,
+      disabled,
+      draggingIndex,
+      calculateValueFromPosition,
+      setValueHandler,
+    ]
+  );
+
+  const handleMouseUp = React.useCallback(() => {
+    if (readOnly || disabled) return;
+    setDraggingIndex?.(undefined);
+  }, [readOnly, disabled, setDraggingIndex]);
+
+  React.useEffect(() => {
+    if (draggingIndex !== undefined) {
+      // 전역적으로 mousemove와 mouseup 이벤트 리스너를 등록
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      // 드래그가 끝나면 이벤트 리스너 제거
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+
+    return () => {
+      // 컴포넌트 언마운트 시 이벤트 리스너 제거
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [draggingIndex, handleMouseMove, handleMouseUp]);
+
+  return (
+    <div
+      ref={progressRef}
+      className={cx("Progress", className, { readOnly, disabled, invert })}
+      onMouseDown={handleMouseDown}
+      style={{
+        "--progress-value-color": color,
+      }}
+    >
+      <div className={cx("Value", valueClassName)} style={rangeStyle} />
+
+      {React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child) && child.type === Thumb) {
+          return React.cloneElement(child, { index } as React.ComponentProps<
+            typeof Thumb
+          >);
+        }
+        return child;
+      })}
+    </div>
+  );
+};
+
+type OmitContext =
+  | "progressRef"
+  | "draggingIndex"
+  | "setDefaultValue"
+  | "setDraggingIndex";
+const Root = (props: Omit<SliderProviderProps, OmitContext>) => {
+  const { children } = props;
+
+  if (props.step !== undefined && props.step <= 0)
+    throw new Error("step은 양수여야 합니다!");
+
+  const progressRef = React.useRef<HTMLDivElement>(null);
+
+  const [defaultValue, setDefaultValue] = React.useState([props.min ?? 0]);
+  const [draggingIndex, setDraggingIndex] = React.useState<number>();
+
+  const contextValue = React.useMemo(() => {
+    return {
+      ...props,
+      progressRef,
+      defaultValue,
+      draggingIndex,
+      setDefaultValue,
+      setDraggingIndex,
+    };
+  }, [props, defaultValue, draggingIndex, setDefaultValue, setDraggingIndex]);
+
+  React.useEffect(() => {
+    if (props.defaultValue) setDefaultValue(props.defaultValue);
+  }, [props.defaultValue]);
+
+  return <SliderProvider {...contextValue}>{children}</SliderProvider>;
+};
+
+interface ISlider {
+  Root: typeof Root;
+  Progress: typeof Progress;
+  Thumb: typeof Thumb;
+  Marks: typeof Marks;
+}
+
+export default {
+  Root,
+  Progress,
+  Thumb,
+  Marks,
+} as ISlider;