@zidian-primitive/cascader 0.1.2 → 0.2.0

package/esm/components/node/CascaderNode.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useContext } from 'react';
+import { useContext, useRef, useCallback, useEffect } from 'react';
 import { CascaderContext, CascaderPanelContext } from '../../context/index.js';
 
 const CascaderNode = (props) => {
   const {
     node,
     isLeaf,
+    isActive,
     onClick,
     onTrigger,
     render,
@@ -13,14 +14,36 @@ const CascaderNode = (props) => {
   } = props;
   const { onSelectChange } = useContext(CascaderContext);
   const { showIndicator, registerNode } = useContext(CascaderPanelContext);
+  const nodeRef = useRef(null);
+  const handleRef = useCallback((el) => {
+    nodeRef.current = el;
+    if (el && showIndicator) {
+      registerNode(node.indices, el);
+    }
+  }, [showIndicator, registerNode, node.indices]);
   const handleClick = (event) => {
     if (isLeaf) {
       if (onClick) onClick(node);
+      if (onTrigger) onTrigger(node.level, node.indices);
     } else {
       if (onTrigger) onTrigger(node.level, node.indices);
     }
   };
-  return /* @__PURE__ */ jsx("div", { ref: showIndicator ? (el) => registerNode(node.indices, el) : void 0, onClick: handleClick, ...elementProps, children: render ? render({ node, onSelectChange }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  useEffect(() => {
+    if (isActive && nodeRef.current) {
+      const timer = requestAnimationFrame(() => {
+        if (nodeRef.current) {
+          nodeRef.current.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start"
+          });
+        }
+      });
+      return () => cancelAnimationFrame(timer);
+    }
+  }, [isActive]);
+  return /* @__PURE__ */ jsx("div", { ref: handleRef, onClick: handleClick, "data-active": isActive, ...elementProps, children: render ? render({ node, onSelectChange }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: node.label }),
     !isLeaf && /* @__PURE__ */ jsx(
       "svg",

package/esm/components/panel/CascaderPanel.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useCallback, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
 import { CascaderPanelContext } from '../../context/index.js';
 
 const CascaderPanel = forwardRef((props, ref) => {
@@ -16,21 +16,27 @@ const CascaderPanel = forwardRef((props, ref) => {
     if (el) nodeRefs.current.set(index, el);
     else nodeRefs.current.delete(index);
   }, []);
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (activeIndices === void 0) return;
     const activeEl = nodeRefs.current.get(activeIndices);
     if (activeEl) {
       const measure = () => {
-        setIndicatorStyle({
-          ["--indicator-offset-top"]: `${activeEl.offsetTop}px`,
-          ["--indicator-height"]: `${activeEl.offsetHeight}px`,
-          transform: `translateY(var(--indicator-offset-top))`,
-          height: `${activeEl.offsetHeight}px`
+        requestAnimationFrame(() => {
+          if (!activeEl) return;
+          setIndicatorStyle({
+            ["--indicator-offset-top"]: `${activeEl.offsetTop}px`,
+            ["--indicator-height"]: `${activeEl.offsetHeight}px`,
+            transform: `translateY(var(--indicator-offset-top))`,
+            height: `${activeEl.offsetHeight}px`
+          });
         });
       };
       measure();
-      const resizeObserver = new ResizeObserver(measure);
+      const resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(measure);
+      });
       resizeObserver.observe(activeEl);
+      return () => resizeObserver.disconnect();
     }
   }, [activeIndices]);
   return /* @__PURE__ */ jsx(CascaderPanelContext.Provider, { value: { showIndicator, activeIndices, registerNode, indicatorStyle }, children: /* @__PURE__ */ jsx("div", { ref, "data-depth": depth, "data-active-indices": activeIndices, ...elementProps, children }) });

package/esm/components/panel/CascaderPanelIndicator.js

@@ -4,13 +4,14 @@ import { CascaderPanelContext } from '../../context/index.js';
 
 const CascaderPanelIndicator = (props) => {
   const {
+    style,
     render,
     ...elementProps
   } = props;
   const { indicatorStyle, activeIndices } = useContext(CascaderPanelContext);
   if (render) return render();
   if (activeIndices === void 0) return null;
-  return /* @__PURE__ */ jsx("div", { style: indicatorStyle, ...elementProps });
+  return /* @__PURE__ */ jsx("div", { style: Object.assign(style ?? {}, indicatorStyle ?? {}), ...elementProps });
 };
 CascaderPanelIndicator.displayName = "CascaderPanelIndicator";
 

package/esm/hooks/useCascader.js

@@ -1,9 +1,9 @@
-import { useMemo, useState } from 'react';
-import { buildCascaderEngine, getDefaultIndices, getCascadeColumns, getShowIndices } from '../utils/data.js';
+import { useMemo, useCallback, useState, useEffect } from 'react';
+import { buildCascaderEngine, getShowPath, getCascadeColumns, changeShowPath } from '../utils/data.js';
 import { setMultipleNodeStatus, setNodeCheckStatus } from '../utils/logic.js';
 
 function useCascader(options) {
-  const { data, handleDataConfig, selectOption } = options;
+  const { data, handleDataConfig, selectOption, curShow } = options;
   const sortedData = useMemo(() => {
     return [...data].sort((a, b) => {
       for (const field of handleDataConfig.levels) {
@@ -13,46 +13,54 @@ function useCascader(options) {
       return 0;
     });
   }, [data, handleDataConfig]);
-  const defaultNodes = useMemo(() => {
+  const sourceNodeData = useMemo(() => {
     return buildCascaderEngine(sortedData, handleDataConfig);
   }, [sortedData, handleDataConfig]);
-  const defaultStatusArray = useMemo(() => {
-    const statusArray = new Uint8Array(defaultNodes.length);
+  const getInitialStatus = useCallback((sourceNodeData2) => {
+    const statusArray = new Uint8Array(sourceNodeData2.length);
     if (selectOption?.defaultSelected) {
-      const defaultIndices = defaultNodes.filter(
+      const defaultIndices = sourceNodeData2.filter(
         (node) => selectOption.defaultSelected.find(
           (selected) => node.raw?.value === selected
         )
       ).map((node) => node.index);
-      return setMultipleNodeStatus(defaultNodes, statusArray, defaultIndices, 1);
+      return setMultipleNodeStatus(sourceNodeData2, statusArray, defaultIndices, 1);
     }
     return statusArray;
-  }, [defaultNodes, selectOption?.defaultSelected]);
-  const [checkStatusArray, setCheckStatusArray] = useState(defaultStatusArray);
-  const [showIndices, setShowIndices] = useState(getDefaultIndices(defaultNodes));
-  const columns = useMemo(() => getCascadeColumns(defaultNodes, showIndices), [defaultNodes, showIndices]);
-  const handleShowIndices = (depth, index) => {
-    setShowIndices(getShowIndices(
-      defaultNodes,
-      {
-        oldShowIndices: showIndices,
-        actionIndices: {
-          depth,
-          nodeIdx: index
-        }
-      }
+  }, [selectOption]);
+  const initPath = useMemo(() => getShowPath(sourceNodeData, sourceNodeData.find((node) => curShow === node.value || curShow === node.label)), [sourceNodeData, curShow]);
+  const [checkStatusArray, setCheckStatusArray] = useState(getInitialStatus(sourceNodeData));
+  const [path, setPath] = useState(initPath);
+  const columns = useMemo(() => {
+    return getCascadeColumns(sourceNodeData, path);
+  }, [sourceNodeData, initPath, path]);
+  const handleChangePath = (depth, index) => {
+    setPath(changeShowPath(
+      sourceNodeData,
+      { oldPath: path, action: { depth, nodeIdx: index } }
     ));
   };
   const handleChangeCheckStatus = (nodeIdx) => {
-    const newStatusArray = setNodeCheckStatus(defaultNodes, checkStatusArray, nodeIdx);
+    const newStatusArray = setNodeCheckStatus(sourceNodeData, checkStatusArray, nodeIdx);
     setCheckStatusArray(newStatusArray);
   };
+  useEffect(() => {
+    setCheckStatusArray(getInitialStatus(sourceNodeData));
+    const targetNode = sourceNodeData.find((n) => n.value === curShow);
+    setPath(getShowPath(sourceNodeData, targetNode));
+  }, [data]);
+  useEffect(() => {
+    console.log(111);
+    if (curShow || curShow === 0) {
+      setPath(getShowPath(sourceNodeData, sourceNodeData.find((node) => curShow === node.value || curShow === node.label)));
+    }
+  }, [curShow]);
   return {
-    nodes: defaultNodes,
+    nodes: sourceNodeData,
     columns,
-    showIndices,
+    path,
     checkStatusArray,
-    handleShowIndices,
+    handleChangePath,
     handleChangeCheckStatus
   };
 }

package/esm/index.js

@@ -5,5 +5,5 @@ export { CascaderPanel } from './components/panel/CascaderPanel.js';
 export { CascaderPanelHeader } from './components/panel/CascaderPanelHeader.js';
 export { CascaderPanelIndicator } from './components/panel/CascaderPanelIndicator.js';
 export { useCascader } from './hooks/useCascader.js';
-export { buildCascaderEngine, getCascadeColumns, getDefaultIndices, getShowIndices } from './utils/data.js';
+export { buildCascaderEngine, changeShowPath, getCascadeColumns, getShowPath } from './utils/data.js';
 export { setMultipleNodeStatus, setNodeCheckStatus } from './utils/logic.js';

package/esm/utils/data.js

@@ -65,11 +65,11 @@ function buildCascaderEngine(data, config) {
   }
   return nodes;
 }
-function getCascadeColumns(nodes, showIndices) {
+function getCascadeColumns(nodes, path) {
   const columns = [];
   const rootColumn = nodes.filter((node) => node.parentIndex === -1);
   columns.push(rootColumn);
-  showIndices.forEach((selectedIndex) => {
+  path.forEach((selectedIndex) => {
     const parentNode = nodes[selectedIndex];
     if (parentNode && parentNode.childrenIndices.length > 0) {
       const nextColumn = parentNode.childrenIndices.map((idx) => nodes[idx]);
@@ -78,25 +78,38 @@ function getCascadeColumns(nodes, showIndices) {
   });
   return columns;
 }
-function getShowIndices(nodes, option) {
-  const { oldShowIndices, actionIndices } = option;
+function changeShowPath(nodes, option) {
+  const { oldPath, action } = option;
   let targetPath = [];
-  const { depth, nodeIdx } = actionIndices;
+  const { depth, nodeIdx } = action;
   let currentNode = nodes[nodeIdx];
   while (currentNode.childrenIndices.length > 0) {
     targetPath.push(currentNode.index);
     currentNode = nodes[currentNode.childrenIndices[0]];
   }
-  return oldShowIndices.slice(0, depth).concat(targetPath);
+  return oldPath.slice(0, depth).concat(targetPath, currentNode.index);
 }
-function getDefaultIndices(nodes) {
-  let defaultIndices = [];
+function getShowPath(nodes, targetNode) {
   let currentNode = nodes[0];
-  while (currentNode.childrenIndices.length > 0) {
-    defaultIndices.push(currentNode.index);
-    currentNode = nodes[currentNode.childrenIndices[0]];
+  let showPath = [];
+  if (targetNode) {
+    let parentNode = targetNode;
+    showPath = new Array((targetNode?.depth ?? 0) + 1);
+    while (parentNode) {
+      showPath[parentNode.depth] = parentNode.index;
+      parentNode = parentNode.parentIndex !== -1 ? nodes[parentNode.parentIndex] : void 0;
+    }
+    return showPath;
+  }
+  while (currentNode) {
+    showPath.push(currentNode.index);
+    if (currentNode.childrenIndices.length > 0) {
+      currentNode = nodes[currentNode.childrenIndices[0]];
+    } else {
+      currentNode = null;
+    }
   }
-  return defaultIndices;
+  return showPath;
 }
 
-export { buildCascaderEngine, getCascadeColumns, getDefaultIndices, getShowIndices };
+export { buildCascaderEngine, changeShowPath, getCascadeColumns, getShowPath };

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

@@ -3,6 +3,7 @@ import { CascaderItem, NodeSlotType } from "../../types";
 export interface CascaderNodeProps extends Omit<ComponentProps<'div'>, "onClick"> {
     node: CascaderItem<any>;
     isLeaf: boolean;
+    isActive: boolean;
     onClick?: (node: CascaderItem<any>) => void;
     onTrigger?: (depth: number, nodeIdx: number) => void;
     render?: NodeSlotType;

package/lib/hooks/useCascader.d.ts

@@ -1,14 +1,15 @@
-import { CascaderNodeType, SelectOption, FlatDataConfig } from "../types";
+import { CascaderNodeType, CascaderSelectOption, FlatDataConfig } from "../types";
 export type CascaderHookOption<T> = {
     data: T[];
     handleDataConfig: FlatDataConfig;
-    selectOption?: SelectOption;
+    selectOption?: CascaderSelectOption;
+    curShow?: string | number;
 };
 export declare function useCascader<T extends Record<string, any>>(options: CascaderHookOption<T>): {
     nodes: CascaderNodeType<T>[];
     columns: CascaderNodeType<T>[][];
-    showIndices: number[];
+    path: number[];
     checkStatusArray: Uint8Array<ArrayBufferLike>;
-    handleShowIndices: (depth: number, index: number) => void;
+    handleChangePath: (depth: number, index: number) => void;
     handleChangeCheckStatus: (nodeIdx: number) => void;
 };

package/lib/types/index.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from "react";
 export type CheckStatus = 0 | 1 | 2;
-/**============================================
- **               Data
- *=============================================**/
+/**--------------------------------------------
+ *                  Data
+ *---------------------------------------------**/
 export interface CascaderNodeType<T = any> {
     depth: number;
     index: number;
@@ -23,15 +23,15 @@ export interface CascaderItem<T> {
     originData?: T;
     checkStatus?: CheckStatus;
 }
-/**============================================
- **               Utils
- *=============================================**/
+/**--------------------------------------------
+ *                  Util
+ *---------------------------------------------**/
 export type FlatDataConfig = {
     levels: (string | [string, string])[];
 };
 export type GetShowIndicesOption = {
-    oldShowIndices: number[];
-    actionIndices: {
+    oldPath: number[];
+    action: {
         depth: number;
         nodeIdx: number;
     };
@@ -39,16 +39,16 @@ export type GetShowIndicesOption = {
 export type GetCascaderColumnsOption = {
     checkStatusArray?: Uint8Array<ArrayBufferLike>;
 };
-/**============================================
- **               Others
- *=============================================**/
-export type SelectOption = {
+/**--------------------------------------------
+ *                  Other
+ *---------------------------------------------**/
+export type CascaderSelectOption = {
     defaultSelected: string[];
     selectType: "single" | "multiple";
 };
-/**============================================
- **               Slot
- *=============================================**/
+/**--------------------------------------------
+ *                  Slot
+ *---------------------------------------------**/
 export type PanelHeaderSlot = (props: {
     column: CascaderNodeType<any>[];
     showNode: CascaderItem<any> | null;

package/lib/utils/data.d.ts

@@ -1,5 +1,5 @@
 import { CascaderNodeType, FlatDataConfig, GetShowIndicesOption } from '../types/index.js';
 export declare function buildCascaderEngine<T extends Record<string, any>>(data: T[], config: FlatDataConfig): CascaderNodeType<T>[];
-export declare function getCascadeColumns<T>(nodes: CascaderNodeType<T>[], showIndices: number[]): CascaderNodeType<T>[][];
-export declare function getShowIndices<T>(nodes: CascaderNodeType<T>[], option: GetShowIndicesOption): number[];
-export declare function getDefaultIndices<T>(nodes: CascaderNodeType<T>[]): number[];
+export declare function getCascadeColumns<T>(nodes: CascaderNodeType<T>[], path: number[]): CascaderNodeType<T>[][];
+export declare function changeShowPath<T>(nodes: CascaderNodeType<T>[], option: GetShowIndicesOption): number[];
+export declare function getShowPath<T>(nodes: CascaderNodeType<T>[], targetNode?: CascaderNodeType): number[];

package/package.json

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