📝 feat: remove all less file. add min and max zoom params. (#50)

* 📝 fix: rm params

* 📝 fix: rm baseIntro less

* 📝 fix: rm quickUse less

* 📝 fix: rm flowEditor less

* 📝 fix: rm flowView less

* 📝 fix: rm custom edge and node less

* 📝 fix: rm much node demo

* ✨ feat: min and max zoom

---------

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>

docs/guide/demos/autoLayout/demo1.tsx

@@ -4,11 +4,13 @@
  */
 import { FlowView } from '@ant-design/pro-flow';
 import { edges, nodes } from './data/demo1data';
-import './index.less';
+import useStyles from './index.style';
 
 function App() {
+  const { styles } = useStyles();
+
   return (
-    <div className="container">
+    <div className={styles.container}>
       <FlowView nodes={nodes} edges={edges} miniMap={false} />
     </div>
   );

docs/guide/demos/autoLayout/demo2.tsx

@@ -4,11 +4,13 @@
  */
 import { FlowView } from '@ant-design/pro-flow';
 import { edges, nodes } from './data/demo2data';
-import './index.less';
+import useStyles from './index.style';
 
 function App() {
+  const { styles } = useStyles();
+
   return (
-    <div className="container">
+    <div className={styles.container}>
       <FlowView nodes={nodes} edges={edges} miniMap={false} />
     </div>
   );

docs/guide/demos/autoLayout/index.style.ts

@@ -4,7 +4,7 @@ const useStyles = createStyles(() => {
   return {
     container: {
       width: '100%',
-      height: '600px',
+      height: '400px',
     },
   };
 });

docs/guide/demos/baseIntro/coreEdge.tsx

@@ -5,16 +5,17 @@
 import { FlowPanel, FlowView } from '@ant-design/pro-flow';
 import { Button } from 'antd';
 import { useState } from 'react';
-import './css/index.less';
+import useStyles from './css/index.style';
 import { getEdges, nodes } from './data/coreEdgeData';
 
 const edgeTypes = ['straight', 'step', 'bezier', 'smoothstep', 'radius'];
 
 function App() {
   const [edgeType, setEdgeType] = useState('straight');
+  const { styles } = useStyles();
 
   return (
-    <div className="container">
+    <div className={styles.container}>
       <FlowView nodes={nodes} edges={getEdges(edgeType)}>
         <FlowPanel>
           {edgeTypes.map((type) => (

docs/guide/demos/baseIntro/coreHandle.tsx

@@ -3,7 +3,7 @@
  */
 import { FlowView, Handle, Position } from '@ant-design/pro-flow';
 import { FC } from 'react';
-import './css/index.less';
+import useStyles from './css/index.style';
 
 const CustomNode: FC<{
   data: {
@@ -48,8 +48,10 @@ const nodes = [
 const nodeTypes = { customNode: CustomNode };
 
 function App() {
+  const { styles } = useStyles();
+
   return (
-    <div className="container">
+    <div className={styles.container}>
       <FlowView nodes={nodes} edges={[]} nodeTypes={nodeTypes} miniMap={false} autoLayout={false} />
     </div>
   );

docs/guide/demos/baseIntro/coreNode.tsx

@@ -2,7 +2,7 @@
  * compact: true
  */
 import { FlowView } from '@ant-design/pro-flow';
-import styled from 'styled-components';
+import useStyles from './css/index.style';
 
 const nodes = [
   {
@@ -16,16 +16,13 @@ const nodes = [
 ];
 
 function App() {
+  const { styles } = useStyles();
+
   return (
-    <Container>
+    <div className={styles.container}>
       <FlowView nodes={nodes} edges={[]} miniMap={false} />
-    </Container>
+    </div>
   );
 }
 
 export default App;
-
-const Container = styled.div`
-  width: 100%;
-  height: 300px;
-`;

docs/guide/demos/baseIntro/customerNode.tsx

@@ -3,8 +3,7 @@
  */
 import { FlowView, Handle, Position } from '@ant-design/pro-flow';
 import { FC } from 'react';
-import './css/customerNode.less';
-
+import useStyles from './css/customerNode.style';
 interface PipeNodeChild {
   title: string;
   des: string;
@@ -24,9 +23,10 @@ const CustomNode: FC<{
   data: PipeNode;
 }> = ({ data }) => {
   const { stepTitle, title, des, logo, needSwitch = false, children = [] } = data;
+  const { styles } = useStyles();
 
   return (
-    <div className={'customerWrap'}>
+    <div className={styles.customerWrap}>
       <Handle
         type="target"
         position={Position.Left}
@@ -36,34 +36,34 @@ const CustomNode: FC<{
           left: 3,
         }}
       />
-      <div className="stepTitle">{stepTitle}</div>
-      <div className="pipeNode">
-        <div className="mainBox">
-          <div className="logo">
+      <div className={styles.stepTitle}>{stepTitle}</div>
+      <div className={styles.pipeNode}>
+        <div className={styles.mainBox}>
+          <div className={styles.logo}>
             <img src={logo} alt="" />
           </div>
-          <div className="wrap">
-            <div className="title">{title}</div>
-            <div className="des">{des}</div>
+          <div className={styles.wrap}>
+            <div className={styles.title}>{title}</div>
+            <div className={styles.des}>{des}</div>
           </div>
           {needSwitch && (
-            <div className="pipeNodeRight">
-              <div className="switch">
-                <div className="switchIcon"></div>
+            <div className={styles.pipeNodeRight}>
+              <div className={styles.switch}>
+                <div className={styles.switchIcon}></div>
               </div>
             </div>
           )}
         </div>
         {children.length > 0 && (
-          <div className="children">
+          <div className={styles.children}>
             {children.map((item, index) => (
-              <div className="childrenBox" key={index}>
-                <div className="logo">
+              <div className={styles.childrenBox} key={index}>
+                <div className={styles.logo}>
                   <img src={item.logo} alt="" />
                 </div>
-                <div className="wrap">
-                  <div className="title">{item.title}</div>
-                  <div className="des">{item.des}</div>
+                <div className={styles.wrap}>
+                  <div className={styles.title}>{item.title}</div>
+                  <div className={styles.des}>{item.des}</div>
                 </div>
               </div>
             ))}
@@ -125,8 +125,10 @@ const nodes = [
 const nodeTypes = { customNode: CustomNode };
 
 function App() {
+  const { styles } = useStyles();
+
   return (
-    <div className="container">
+    <div className={styles.container}>
       <FlowView nodes={nodes} edges={[]} nodeTypes={nodeTypes} miniMap={false} />
     </div>
   );

docs/guide/demos/customEdge/ButtonEdge.tsx

@@ -1,6 +1,5 @@
 import { BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath } from '@ant-design/pro-flow';
-
-import './btn.less';
+import useStyles from './btn.style';
 
 const onEdgeClick = (evt, id) => {
   evt.stopPropagation();
@@ -26,7 +25,7 @@ export default function CustomEdge({
     targetY,
     targetPosition,
   });
-
+  const { styles } = useStyles();
   return (
     <>
       <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
@@ -42,7 +41,7 @@ export default function CustomEdge({
           }}
           className="nodrag nopan"
         >
-          <button className="edgebutton" onClick={(event) => onEdgeClick(event, id)}>
+          <button className={styles.edgebutton} onClick={(event) => onEdgeClick(event, id)}>
             click
           </button>
         </div>