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

package/src/components/Slider/Slider.tsx

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