@zidian-primitive/cascader 0.3.1 → 0.3.2

package/esm/components/node/CascaderNode.js

@@ -8,9 +8,10 @@ const CascaderNode = memo((props) => {
     node,
     isLeaf,
     isActive,
+    scrollMethod = "smooth",
+    render,
     onClick,
     onTrigger,
-    render,
     ...elementProps
   } = props;
   const { setNodeCheckStatus } = useContext(CascaderContext);
@@ -40,15 +41,15 @@ const CascaderNode = memo((props) => {
     if (nodeTop < viewTop) {
       parent.scrollTo({
         top: nodeTop,
-        behavior: "smooth"
+        behavior: scrollMethod
       });
     } else if (nodeBottom > viewBottom) {
       parent.scrollTo({
         top: nodeBottom - parent.clientHeight,
-        behavior: "smooth"
+        behavior: scrollMethod
       });
     }
-  }, [isActive]);
+  }, [isActive, scrollMethod]);
   return /* @__PURE__ */ jsx("div", { ref: handleRef, onClick: handleClick, "data-active": isActive ? isActive : void 0, ...elementProps, children: render ? render({
     node,
     handleToggleSelect: (node?.checkStatus || node.checkStatus === 0) && setNodeCheckStatus ? (nodeIdx) => setNodeCheckStatus(nodeIdx, getNextStatus(node.checkStatus)) : void 0

package/esm/hooks/useCascader.js

@@ -17,7 +17,7 @@ function useCascader(options) {
     return buildCascaderEngine(sortedData, handleDataConfig);
   }, [sortedData, handleDataConfig]);
   const showConfig = useMemo(() => {
-    return pathOption?.showConfig ? pathOption.showConfig : { depth: handleDataConfig.levels.length - 1, showType: "label" };
+    return pathOption?.showConfig ? pathOption.showConfig : { depth: handleDataConfig.levels.length - 1, showType: "label", pathType: "value" };
   }, [pathOption?.showConfig]);
   const selectValueType = useMemo(() => selectOption?.valueType ?? "label", [selectOption?.valueType]);
   const getStatusByOption = useCallback((sourceNodeData2, selected) => {
@@ -35,18 +35,24 @@ function useCascader(options) {
     return statusArray;
   }, [selectValueType, handleDataConfig]);
   const getPathByOption = useCallback((sourceNodeData2, value) => {
+    let targetNode;
+    if (showConfig.pathType === "value") {
+      targetNode = sourceNodeData2.find((node) => showConfig.depth === node.depth && node[showConfig.showType] === value);
+    } else {
+      targetNode = sourceNodeData2.find((node) => node.nodeId === value);
+    }
     return getShowPath(
       sourceNodeData2,
-      sourceNodeData2.find((node) => showConfig.depth === node.depth && node[showConfig.showType] === value)
+      targetNode
     );
   }, [showConfig]);
-  const isControlled = useMemo(() => pathOption?.showValue || pathOption?.showValue === 0 || pathOption?.showValue === "", [pathOption?.showValue]);
+  const isControlled = useMemo(() => pathOption?.showPath || pathOption?.showPath === 0 || pathOption?.showPath === "", [pathOption?.showPath]);
   const initialPath = useMemo(() => {
     return getPathByOption(
       sourceNodeData,
-      pathOption?.showValue ?? pathOption?.defaultShowValue
+      pathOption?.showPath ?? pathOption?.defaultShowPath
     );
-  }, [sourceNodeData, pathOption?.defaultShowValue, pathOption?.showValue]);
+  }, [sourceNodeData, pathOption?.defaultShowPath, pathOption?.showPath]);
   const initialSelected = useMemo(() => new Set(
     selectOption?.selected ?? selectOption?.defaultSelected
   ), [selectOption?.selected, selectOption?.defaultSelected]);
@@ -60,8 +66,12 @@ function useCascader(options) {
   const path = useMemo(() => isControlled ? initialPath : internalPath, [internalPath, isControlled]);
   const columns = useMemo(() => getCascadeColumns(sourceNodeData, path), [sourceNodeData, path]);
   const handleChangePath = useCallback((depth, index) => {
-    if (pathOption?.onShowValueChange && depth === showConfig.depth) {
-      pathOption.onShowValueChange(sourceNodeData[index][showConfig.showType], depth);
+    if (pathOption?.onShowValueChange) {
+      if (showConfig.pathType === "value" && depth === showConfig.depth) {
+        pathOption.onShowValueChange(sourceNodeData[index][showConfig.showType], depth);
+      } else {
+        pathOption.onShowValueChange(sourceNodeData[index]["nodeId"], depth);
+      }
     }
     if (!isControlled) {
       setInternalPath(changeShowPath(
@@ -69,7 +79,7 @@ function useCascader(options) {
         { oldPath: path, action: { depth, nodeIdx: index } }
       ));
     }
-  }, [pathOption, sourceNodeData, isControlled]);
+  }, [pathOption, sourceNodeData, isControlled, showConfig]);
   const handleChangeCheckStatus = useCallback((nodeIdx, checkStatus) => {
     if (selectOption) {
       if (selectOption?.selected) {
@@ -108,10 +118,10 @@ function useCascader(options) {
     }
   }, [selectOption?.selected]);
   useEffect(() => {
-    if (pathOption?.defaultShowValue) {
+    if (pathOption?.defaultShowPath) {
       setInternalPath(initialPath);
     }
-  }, [pathOption?.defaultShowValue]);
+  }, [pathOption?.defaultShowPath]);
   useEffect(() => {
     if (selectOption?.defaultSelected) {
       setInternalSelected(initialSelected);

package/lib/components/node/CascaderNode.d.ts

@@ -4,8 +4,9 @@ export interface CascaderNodeProps extends Omit<ComponentProps<'div'>, "onClick"
     node: CascaderItem<any>;
     isLeaf: boolean;
     isActive: boolean;
+    scrollMethod?: "instant" | "smooth";
+    render?: NodeSlotType;
     onClick?: (node: CascaderItem<any>) => void;
     onTrigger?: (depth: number, nodeIdx: number) => void;
-    render?: NodeSlotType;
 }
 export declare const CascaderNode: React.FC<CascaderNodeProps>;

package/lib/types/index.d.ts

@@ -43,12 +43,13 @@ export type GetCascaderColumnsOption = {
  *                  Other
  *---------------------------------------------**/
 export type CascaderPathOption = {
+    showPath?: string | number;
     showConfig?: {
         depth: number;
         showType: "label" | "value";
+        pathType: "value" | "nodeId";
     };
-    showValue?: string | number;
-    defaultShowValue?: string | number;
+    defaultShowPath?: string | number;
     onShowValueChange?: (value: string | number, depth: number) => void;
 };
 export type CascaderSelectOption = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zidian-primitive/cascader",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "main": "./src/index.ts",
   "license": "MIT",
   "type": "module",

package/esm/components/node/CascaderNodeCheck.js

@@ -1,7 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-
-const CascaderNodeCheck = () => {
-  return /* @__PURE__ */ jsx("div", {});
-};
-
-export { CascaderNodeCheck };

package/esm/components/panel/CascaderPanelHeader.js

@@ -1,20 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useContext } from 'react';
-import { CascaderContext } from '../../context/index.js';
-
-const CascaderPanelHeader = (props) => {
-  const {
-    column,
-    showNode,
-    render,
-    ...elementProps
-  } = props;
-  const { selectType } = useContext(CascaderContext);
-  if (render) render({ column, showNode });
-  else return /* @__PURE__ */ jsxs("div", { ...elementProps, children: [
-    /* @__PURE__ */ jsx("span", { children: showNode?.level }),
-    /* @__PURE__ */ jsx("span", { children: column.length })
-  ] });
-};
-
-export { CascaderPanelHeader };

package/lib/components/node/CascaderNodeCheck.d.ts

@@ -1 +0,0 @@
-export declare const CascaderNodeCheck: () => import("react/jsx-runtime").JSX.Element;

package/lib/components/panel/CascaderPanelHeader.d.ts

@@ -1,8 +0,0 @@
-import { ComponentProps, FC } from "react";
-import { CascaderItem, CascaderNodeType, PanelHeaderSlot } from "../../types";
-export interface CascaderPanelHeaderProps extends ComponentProps<'div'> {
-    column: CascaderNodeType<any>[];
-    showNode: CascaderItem<any> | null;
-    render?: PanelHeaderSlot;
-}
-export declare const CascaderPanelHeader: FC<CascaderPanelHeaderProps>;

package/lib/utils/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./data";
-export * from "./logic";