version:0.0.3

Author: xsahxl

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",