12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- /*
- * Copyright 2018-2022 Elyra Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
- import React, { useState, useEffect } from "react";
- import { PipelineEditor, ThemeProvider } from "../packages/pipeline-editor";
- import { createNode } from "./node-utils";
- import imagePath from "./node.svg";
- import theme from "./theme";
- const node = createNode({
- op: "execute-node",
- description: "A simple node",
- label: "PySpark",
- nadeLabel: "Node",
- image: imagePath,
- properties: [
- {
- id: "dataTable",
- type: "string",
- enum: ["数据源1", "数据源2"],
- label: "输入源:",
- default: ["数据源1"],
- },
- {
- id: "paramText",
- type: "string",
- label: "参数文本:",
- placeholder: "Input will be transfered into context_string",
- format: "multiline",
- default: "",
- required: false,
- },
- {
- id: "scriptEdit",
- type: "string",
- enum: ["one", "two"],
- label: "脚本编辑:",
- description: "Choose one or the other.",
- default: "one",
- },
- {
- id: "yes-or-no",
- type: "boolean",
- label: "Yes or no?",
- description: "Something should happen when this node is run.",
- default: false,
- },
- {
- id: "array",
- type: "string[]",
- label: "Things",
- description: "Add some things okay.",
- default: [],
- },
- ],
- });
- export default {
- title: "Example/PipelineEditor",
- component: PipelineEditor,
- };
- const Template = (args) => {
- const [pipeline, setPipeline] = useState();
- useEffect(() => {
- console.log("pipeline:", pipeline);
- }, [pipeline]);
- return (
- <ThemeProvider theme={theme}>
- <PipelineEditor
- pipeline={pipeline}
- palette={{
- version: "3.0",
- categories: [{ node_types: [node] }],
- }}
- onChange={setPipeline}
- />
- </ThemeProvider>
- );
- };
- export const Demo1 = Template.bind({});
- Demo1.args = {};
|