@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Cascader/Cascader.tsx

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