@zidian-primitive/cascader 0.1.3 → 0.2.0

package/esm/components/node/CascaderNode.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useContext, useRef, useEffect } from 'react';
+import { useContext, useRef, useCallback, useEffect } from 'react';
 import { CascaderContext, CascaderPanelContext } from '../../context/index.js';
 
 const CascaderNode = (props) => {
@@ -15,6 +15,12 @@ const CascaderNode = (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);
@@ -25,17 +31,19 @@ const CascaderNode = (props) => {
   };
   useEffect(() => {
     if (isActive && nodeRef.current) {
-      nodeRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "start"
+      const timer = requestAnimationFrame(() => {
+        if (nodeRef.current) {
+          nodeRef.current.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start"
+          });
+        }
       });
+      return () => cancelAnimationFrame(timer);
     }
   }, [isActive]);
-  return /* @__PURE__ */ jsx("div", { ref: (el) => {
-    if (showIndicator) registerNode(node.indices, el);
-    nodeRef.current = el;
-  }, onClick: handleClick, ...elementProps, children: render ? render({ node, onSelectChange }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  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,4 +1,4 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useCallback, useState, useEffect } from 'react';
 import { buildCascaderEngine, getShowPath, getCascadeColumns, changeShowPath } from '../utils/data.js';
 import { setMultipleNodeStatus, setNodeCheckStatus } from '../utils/logic.js';
 
@@ -16,21 +16,24 @@ function useCascader(options) {
   const sourceNodeData = useMemo(() => {
     return buildCascaderEngine(sortedData, handleDataConfig);
   }, [sortedData, handleDataConfig]);
-  const logicNodeData = useMemo(() => {
-    const statusArray = new Uint8Array(sourceNodeData.length);
+  const getInitialStatus = useCallback((sourceNodeData2) => {
+    const statusArray = new Uint8Array(sourceNodeData2.length);
     if (selectOption?.defaultSelected) {
-      const defaultIndices = sourceNodeData.filter(
+      const defaultIndices = sourceNodeData2.filter(
         (node) => selectOption.defaultSelected.find(
           (selected) => node.raw?.value === selected
         )
       ).map((node) => node.index);
-      return setMultipleNodeStatus(sourceNodeData, statusArray, defaultIndices, 1);
+      return setMultipleNodeStatus(sourceNodeData2, statusArray, defaultIndices, 1);
     }
     return statusArray;
-  }, [sourceNodeData, selectOption?.defaultSelected]);
-  const [checkStatusArray, setCheckStatusArray] = useState(logicNodeData);
-  const [path, setPath] = useState(getShowPath(sourceNodeData, sourceNodeData.find((node) => curShow === node.value || curShow === node.label)));
-  const columns = useMemo(() => getCascadeColumns(sourceNodeData, path), [sourceNodeData, path]);
+  }, [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,
@@ -42,6 +45,12 @@ function useCascader(options) {
     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)));
     }

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]);

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 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.3",
+  "version": "0.2.0",
   "main": "./src/index.ts",
   "license": "MIT",
   "type": "module",