✨ feat(useFlowEditor): add updateNodeData function (#48)

* 🐛 feat: rm pro-flow package * 💄 feat: src less => style.ts * 💄 feat: case and api docs less * ✨ feat: updateNodeData function * 📝 feat: rm demo code --------- Co-authored-by: jiangchu <[email protected]>
ant-design · Dec 7, 2023 · 3483b2b · 3483b2b
1 parent 8ea6d42
commit 3483b2b
Show file tree

Hide file tree

Showing 39 changed files with 750 additions and 378 deletions.
diff --git a/docs/apiDocs/demos/css/viewer.less b/docs/apiDocs/demos/css/viewer.less
diff --git a/docs/apiDocs/demos/css/viewer.style.ts b/docs/apiDocs/demos/css/viewer.style.ts
@@ -0,0 +1,11 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(() => {
+  return {
+    container: {
+      width: '100%',
+      height: '500px',
+    },
+  };
+});
+export default useStyles;
diff --git a/docs/apiDocs/demos/useFlowView.tsx b/docs/apiDocs/demos/useFlowView.tsx
@@ -6,14 +6,15 @@ import {
   useFlowViewer,
 } from '@ant-design/pro-flow';
 import { Button } from 'antd';
-import './css/viewer.less';
+import useStyles from './css/viewer.style';
 import { edges, nodes } from './data/viewer';
 
 function App() {
   const { selectNode, selectEdges, selectNodes, zoomToNode } = useFlowViewer();
+  const { styles } = useStyles();
 
   return (
-    <div className="container">
+    <div className={styles.container}>
       <FlowView
         onNodeClick={(e, node) => {
           selectNodes(['a1', 'a2', 'a3'], SelectType.SUB_SELECT);

diff --git a/docs/caseShow/demos/index.less b/docs/caseShow/demos/index.less
diff --git a/docs/caseShow/demos/index.style.ts b/docs/caseShow/demos/index.style.ts
@@ -0,0 +1,83 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(() => {
+  return {
+    pipeNodeWrap: {
+      width: '260px',
+      minHeight: '100px',
+      backgroundColor: '#f6f8fa',
+      padding: '16px',
+      boxSizing: 'border-box',
+      borderRadius: '8px',
+    },
+    handle: {
+      top: '0',
+    },
+    stepTitle: {
+      overflow: 'hidden',
+      color: '#8c8c8c',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+    },
+    pipeNode: {
+      marginTop: '10px',
+      width: '232px',
+      boxSizing: 'border-box',
+      border: '1px solid rgba(0, 0, 0, 0.08)',
+      borderRadius: '8px',
+    },
+    mainBox: {
+      width: '100%',
+      padding: '12px',
+      height: '70px',
+      backgroundColor: 'white',
+      display: 'flex',
+      borderBottom: 'none',
+      borderRadius: '8px',
+      boxSizing: 'border-box',
+      position: 'relative',
+    },
+    logo: {
+      img: { width: '16px', height: '16px', marginTop: '4px' },
+    },
+    wrap: {
+      marginLeft: '8px',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    title: {
+      color: '#000',
+      fontWeight: '500',
+      fontSize: '14px',
+      lineHeight: '22px',
+      whiteSpace: 'nowrap',
+    },
+    des: {
+      marginTop: '8px',
+      color: '#00000073',
+      fontSize: '10px',
+    },
+    children: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      paddingBottom: '10px',
+    },
+    childrenBox: {
+      width: '200px',
+      padding: '12px',
+      height: '70px',
+      backgroundColor: 'white',
+      display: 'flex',
+      border: '1px solid rgba(0, 0, 0, 0.08)',
+      borderRadius: '8px',
+      boxSizing: 'border-box',
+      marginTop: '10px',
+    },
+    container: {
+      width: '100%',
+      height: '600px',
+    },
+  };
+});
+export default useStyles;