PipelineEditor.stories.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. /*
  2. * Copyright 2018-2022 Elyra Authors
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License");
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. * http://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. */
  16. import React, { useState, useEffect } from "react";
  17. import { PipelineEditor, ThemeProvider } from "../packages/pipeline-editor";
  18. import { createNode } from "./node-utils";
  19. import imagePath from "./node.svg";
  20. import theme from "./theme";
  21. const node = createNode({
  22. op: "execute-node",
  23. description: "A simple node",
  24. label: "PySpark",
  25. nadeLabel: "Node",
  26. image: imagePath,
  27. properties: [
  28. {
  29. id: "dataTable",
  30. type: "string",
  31. enum: ["数据源1", "数据源2"],
  32. label: "输入源:",
  33. default: ["数据源1"],
  34. },
  35. {
  36. id: "paramText",
  37. type: "string",
  38. label: "参数文本:",
  39. placeholder: "Input will be transfered into context_string",
  40. format: "multiline",
  41. default: "",
  42. required: false,
  43. },
  44. {
  45. id: "scriptEdit",
  46. type: "string",
  47. enum: ["one", "two"],
  48. label: "脚本编辑:",
  49. description: "Choose one or the other.",
  50. default: "one",
  51. },
  52. {
  53. id: "yes-or-no",
  54. type: "boolean",
  55. label: "Yes or no?",
  56. description: "Something should happen when this node is run.",
  57. default: false,
  58. },
  59. {
  60. id: "array",
  61. type: "string[]",
  62. label: "Things",
  63. description: "Add some things okay.",
  64. default: [],
  65. },
  66. ],
  67. });
  68. export default {
  69. title: "Example/PipelineEditor",
  70. component: PipelineEditor,
  71. };
  72. const Template = (args) => {
  73. const [pipeline, setPipeline] = useState();
  74. useEffect(() => {
  75. console.log("pipeline:", pipeline);
  76. }, [pipeline]);
  77. return (
  78. <ThemeProvider theme={theme}>
  79. <PipelineEditor
  80. pipeline={pipeline}
  81. palette={{
  82. version: "3.0",
  83. categories: [{ node_types: [node] }],
  84. }}
  85. onChange={setPipeline}
  86. />
  87. </ThemeProvider>
  88. );
  89. };
  90. export const Demo1 = Template.bind({});
  91. Demo1.args = {};