Merge pull request #6 from serverless-cd/shl/dev

pipeline init suport enable

Author: heimanba

dist/esm/PipelineInitNode/index.d.ts

@@ -1,13 +1,15 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
+import { Node } from 'react-flow-renderer';
 import './index.less';
 export interface IPipelineInitNode {
-  label: string | Element;
+  label: React.ReactNode;
+  enable: boolean;
   selected?: boolean;
   selectable?: boolean;
   [key: string]: any;
 }
 export interface IPipelineInitNodeProps {
   nodes: IPipelineInitNode[];
-  onClick?: (node: IPipelineInitNode) => void;
+  onClick?: (node: Node<any>) => void;
 }
 export declare const PipelineInitNode: FC<IPipelineInitNodeProps>;

dist/esm/PipelineInitNode/index.js

@@ -152,6 +152,7 @@ var getData = function getData(nodes) {
         },
         draggable: false,
         connectable: false,
+        className: ''.concat(_node.className, ' ').concat(_node.enable ? 'enable' : ''),
       },
       _node,
     );
@@ -182,8 +183,6 @@ var getData = function getData(nodes) {
     lastNode = nodeObj;
   }
 
-  console.log('newNodes', newNodes);
-  console.log('newEdges', newEdges);
   return {
     newNodes: newNodes,
     newEdges: newEdges,
@@ -206,8 +205,6 @@ export var PipelineInitNode = function PipelineInitNode(props) {
 
   useEffect(
     function () {
-      console.log('originNodes', originNodes);
-
       var _getData = getData(originNodes),
         newNodes = _getData.newNodes,
         newEdges = _getData.newEdges;

dist/esm/PipelineInitNode/index.less

@@ -1,21 +1,35 @@
 .serverless-cd-pipeline-init-container {
   min-height: 200px;
-  .react-flow__node.circle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 60px;
-    height: 60px;
-    color: white;
-    font-weight: 700;
-    background: #2b6cb0;
-    border-radius: 50%;
-    cursor: unset;
-  }
-  .react-flow__node-default.selectable.selected {
-    color: #0070cc;
-    border-color: #0070cc;
-    box-shadow: 0 0 0 0.5px #0070cc !important;
+  .react-flow__node {
+    &.circle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 60px;
+      color: white;
+      font-weight: 700;
+      background: #2b6cb0;
+      border: 1px solid #1a192b;
+      border-radius: 50%;
+      cursor: unset;
+      &.selected {
+        color: white;
+        background: #2b6cb0;
+        border: 1px solid #1a192b;
+        box-shadow: unset !important;
+      }
+    }
+    border: 1px solid #ccc;
+    &.enable {
+      border: 1px solid #0070cc;
+    }
+    &.selected {
+      font-weight: bold;
+      background: #ebf4fb;
+      border: 1px solid #0070cc;
+      box-shadow: 0 0 0 0.5px #0070cc !important;
+    }
   }
   .react-flow__attribution {
     display: none;

dist/esm/PipelineProcessNode/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { Node } from 'react-flow-renderer';
 export declare enum IPipelineProcessNodeStatus {
   PENDING = 'pending',
@@ -14,7 +15,7 @@ export declare enum IPipelineProcessNodeStatusColor {
   warn = 'rgb(255, 164, 61)',
 }
 export interface IPipelineProcessNode {
-  label: string | Element;
+  label: ReactNode;
   status?: `${IPipelineProcessNodeStatus}`;
   selected?: boolean;
   selectable?: boolean;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serverless-cd/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

src/PipelineInitNode/index.less

@@ -1,21 +1,35 @@
 .serverless-cd-pipeline-init-container {
   min-height: 200px;
-  .react-flow__node.circle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 60px;
-    height: 60px;
-    color: white;
-    font-weight: 700;
-    background: #2b6cb0;
-    border-radius: 50%;
-    cursor: unset;
-  }
-  .react-flow__node-default.selectable.selected {
-    color: #0070cc;
-    border-color: #0070cc;
-    box-shadow: 0 0 0 0.5px #0070cc !important;
+  .react-flow__node {
+    &.circle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 60px;
+      color: white;
+      font-weight: 700;
+      background: #2b6cb0;
+      border: 1px solid #1a192b;
+      border-radius: 50%;
+      cursor: unset;
+      &.selected {
+        color: white;
+        background: #2b6cb0;
+        border: 1px solid #1a192b;
+        box-shadow: unset !important;
+      }
+    }
+    border: 1px solid #ccc;
+    &.enable {
+      border: 1px solid #0070cc;
+    }
+    &.selected {
+      font-weight: bold;
+      background: #ebf4fb;
+      border: 1px solid #0070cc;
+      box-shadow: 0 0 0 0.5px #0070cc !important;
+    }
   }
   .react-flow__attribution {
     display: none;

src/PipelineInitNode/index.md

@@ -13,6 +13,7 @@ const defaultNodes = [
   },
   {
     label: <div>代码源</div>,
+    enable: true,
   },
   {
     label: <div>前置检查</div>,
@@ -22,6 +23,7 @@ const defaultNodes = [
     style: {
       width: 160,
     },
+    enable: true,
   },
   {
     label: <div>灰度</div>,

src/PipelineInitNode/index.tsx

@@ -6,18 +6,20 @@ import ReactFlow, {
   Edge,
   useNodesState,
   useEdgesState,
+  Node,
 } from 'react-flow-renderer';
 import './index.less';
 
 export interface IPipelineInitNode {
-  label: string | Element;
+  label: React.ReactNode;
+  enable: boolean;
   selected?: boolean;
   selectable?: boolean;
   [key: string]: any;
 }
 export interface IPipelineInitNodeProps {
   nodes: IPipelineInitNode[];
-  onClick?: (node: IPipelineInitNode) => void;
+  onClick?: (node: Node<any>) => void;
 }
 
 const getData = (nodes: IPipelineInitNode[]) => {
@@ -44,6 +46,7 @@ const getData = (nodes: IPipelineInitNode[]) => {
       position: { x: gap, y: node.className === 'circle' ? -10 : 0 },
       draggable: false,
       connectable: false,
+      className: `${node.className} ${node.enable ? 'enable' : ''}`,
       ...node,
     };
     if (index === '0') {
@@ -70,8 +73,6 @@ const getData = (nodes: IPipelineInitNode[]) => {
     newEdges.push(edgeObj);
     lastNode = nodeObj;
   }
-  console.log('newNodes', newNodes);
-  console.log('newEdges', newEdges);
   return { newNodes, newEdges };
 };
 
@@ -80,7 +81,6 @@ export const PipelineInitNode: FC<IPipelineInitNodeProps> = (props) => {
   const [nodes, setNodes] = useNodesState([]);
   const [edges, setEdges] = useEdgesState([]);
   useEffect(() => {
-    console.log('originNodes', originNodes);
     const { newNodes, newEdges } = getData(originNodes);
     setNodes(newNodes);
     setEdges(newEdges);

src/PipelineProcessNode/types.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { Node } from 'react-flow-renderer';
 
 export enum IPipelineProcessNodeStatus {
@@ -16,7 +17,7 @@ export enum IPipelineProcessNodeStatusColor {
   warn = 'rgb(255, 164, 61)',
 }
 export interface IPipelineProcessNode {
-  label: string | Element;
+  label: ReactNode;
   status?: `${IPipelineProcessNodeStatus}`;
   selected?: boolean;
   selectable?: boolean;