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

package/src/components/Cascader/Cascader.tsx

@@ -1,281 +0,0 @@
-"use client";
-/* eslint-disable react-refresh/only-export-components */
-
-import React from "react";
-import cn from "classnames/bind";
-import styles from "./Cascader.module.scss";
-import {
-  CascaderContext,
-  CascaderProvider,
-  CascaderProviderProps,
-  type CascaderOption,
-  type OnSelectProps,
-} from "./Cascader.context";
-import { Icon } from "../Icon/Icon";
-import useElementRect from "@/hooks/useElementRect";
-import { useCascader } from "./Cascader.hook";
-
-const cx = cn.bind(styles);
-
-type ItemAsProps = {
-  ref: React.RefObject<HTMLDivElement | null>;
-  option: CascaderOption;
-  level: number;
-  disabled?: boolean;
-  role?: CascaderOption["role"];
-  isSelected?: boolean;
-  showChildrenCount?: boolean;
-  defaultClassName: string;
-  onClick: () => void;
-};
-
-type ItemProps = React.PropsWithChildren<
-  {
-    option: CascaderOption;
-    level: number;
-    as?: (props: ItemAsProps) => React.ReactNode;
-  } & React.ComponentProps<"div">
->;
-
-const Item = (props: ItemProps) => {
-  const { option, level, as, ...rest } = props;
-
-  const {
-    activeOptions,
-    selectedOptions,
-    showChildrenCount = false,
-    onSelect,
-    setSelectedOptionTop,
-  } = React.useContext(CascaderContext);
-
-  const itemRef = React.useRef<HTMLDivElement>(null);
-
-  const isSelected =
-    activeOptions?.[level]?.id === option.id ||
-    selectedOptions?.[level]?.find((opt) => opt.id === option.id);
-
-  const disabled = option.disabled;
-  const role = option.role;
-
-  const rect = useElementRect(itemRef);
-
-  const clickHandler = React.useCallback(() => {
-    if (disabled || role === "title") return;
-
-    onSelect?.({ option, level });
-
-    setSelectedOptionTop?.((curr) => {
-      const newArr = [...curr];
-      newArr[level] = rect.relative.top;
-
-      return newArr;
-    });
-  }, [option, level, disabled, role, rect, onSelect, setSelectedOptionTop]);
-
-  return as ? (
-    as({
-      option,
-      level,
-      disabled,
-      role,
-      showChildrenCount,
-      ref: itemRef,
-      isSelected: !!isSelected,
-      defaultClassName: cx("Item", rest.className, role, {
-        isSelected,
-        disabled,
-      }),
-      onClick: clickHandler,
-    })
-  ) : (
-    <div
-      {...rest}
-      onClick={clickHandler}
-      ref={itemRef}
-      className={cx("Item", rest.className, role, { isSelected, disabled })}
-    >
-      <span className={cx("ItemText")}>
-        {`${option.label}${
-          showChildrenCount ? ` (${option.children?.length ?? 0})` : ""
-        }`}
-      </span>
-      {role !== "title" && (option.children?.length ?? 0) > 0 && (
-        <Icon name="GoNext" className={cx("GoNext")} />
-      )}
-    </div>
-  );
-};
-
-type ColumnAsProps = {
-  defaultClassName: string;
-  maxColumnView?: number;
-  columnPositionFromParent?: boolean;
-  selectedOptionTop?: number[];
-  index?: number;
-  topOffset?: number;
-};
-
-type ColumnProps = React.PropsWithChildren<
-  {
-    index: number;
-    as?: (props: ColumnAsProps) => React.ReactNode;
-  } & React.ComponentProps<"div">
->;
-
-const Column = (props: React.PropsWithoutRef<ColumnProps>) => {
-  const { index, children, as, ...rest } = props;
-
-  const {
-    columnPositionFromParent,
-    columnOpenAnimation,
-    maxColumnView,
-    selectedOptionTop,
-  } = React.useContext(CascaderContext);
-
-  const topOffset =
-    columnPositionFromParent && (selectedOptionTop?.length ?? 0) > 0
-      ? index === 0
-        ? 0
-        : selectedOptionTop
-            ?.slice(0, index)
-            .reduce((acc, curr) => acc + curr, 0) ?? 0
-      : 0;
-
-  return as ? (
-    as({
-      defaultClassName: cx("Column", rest.className, { columnOpenAnimation }),
-      maxColumnView,
-      columnPositionFromParent,
-      selectedOptionTop,
-      index,
-      topOffset,
-    })
-  ) : (
-    <div
-      {...rest}
-      className={cx("Column", rest.className, { columnOpenAnimation })}
-      style={{
-        ...rest.style,
-        "--max-column-view": maxColumnView,
-        "--selected-option-top": columnPositionFromParent
-          ? `${
-              (selectedOptionTop?.length ?? 0) > 0
-                ? index === 0
-                  ? 0
-                  : Math.max(0, topOffset)
-                : 0
-            }px`
-          : "0px",
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-type MenuAsProps = {
-  defaultClassName: string;
-};
-
-type MenuProps = React.PropsWithChildren<
-  {
-    as?: (props: MenuAsProps) => React.ReactNode;
-  } & React.ComponentProps<"div">
->;
-
-const Menu = (props: React.PropsWithoutRef<MenuProps>) => {
-  const { children, as, ...rest } = props;
-
-  return as ? (
-    as({
-      defaultClassName: cx("Menu", rest.className),
-    })
-  ) : (
-    <div {...rest} className={cx("Menu", rest.className)}>
-      {children}
-    </div>
-  );
-};
-
-type RootProps = Omit<
-  CascaderProviderProps,
-  "selectedOptionTop" | "setSelectedOptionTop"
-> &
-  Omit<React.ComponentProps<"div">, "onSelect">;
-
-const Root = (props: React.PropsWithoutRef<RootProps>) => {
-  const {
-    children,
-    options,
-    selectedOptions,
-    activeOptions,
-    showChildrenCount,
-    columnPositionFromParent,
-    columnOpenAnimation,
-    maxColumnView,
-    onSelect,
-    ...rest
-  } = props;
-
-  const [selectedOptionTop, setSelectedOptionTop] = React.useState<number[]>(
-    []
-  );
-
-  const contextValue = React.useMemo(() => {
-    return {
-      options,
-      selectedOptions,
-      activeOptions,
-      showChildrenCount,
-      columnPositionFromParent,
-      columnOpenAnimation,
-      maxColumnView,
-      onSelect,
-
-      // private
-      selectedOptionTop,
-      setSelectedOptionTop,
-    };
-  }, [
-    options,
-    selectedOptions,
-    activeOptions,
-    showChildrenCount,
-    columnPositionFromParent,
-    columnOpenAnimation,
-    maxColumnView,
-    onSelect,
-
-    // private
-    selectedOptionTop,
-    setSelectedOptionTop,
-  ]);
-
-  return (
-    <CascaderProvider {...contextValue}>
-      <div {...rest} className={cx("Root", rest.className)}>
-        {children}
-      </div>
-    </CascaderProvider>
-  );
-};
-
-interface ICascader {
-  Root: typeof Root;
-  Menu: typeof Menu;
-  Column: typeof Column;
-  Item: typeof Item;
-  useCascader: typeof useCascader;
-  OnSelectProps: OnSelectProps;
-  CascaderOption: CascaderOption;
-}
-
-export type { OnSelectProps, CascaderOption };
-
-export default {
-  Root,
-  Menu,
-  Column,
-  Item,
-  useCascader,
-} as ICascader;