bi-sdk-react 0.0.3 → 0.0.5

package/src/components/panel/DatasetPanel.tsx

@@ -0,0 +1,65 @@
+import { Space } from "antd";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import styled from "styled-components";
+import { PaneHeader } from "./PaneHeader";
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    overflow: auto;
+  }
+`;
+
+type DatasetPanelType = {
+  renderNode: React.ForwardRefExoticComponent<
+    any &
+      React.RefAttributes<{
+        reload: () => void;
+        handleAdd: () => void;
+      }>
+  >;
+};
+
+export const DatasetPanel = React.forwardRef<
+  { reload: () => void },
+  DatasetPanelType
+>(({ renderNode: DatasetPanelComponent }, forwardRef) => {
+  const ref = useRef<{ reload: () => void; handleAdd: () => void }>(null);
+
+  const handleAdd = () => {
+    ref.current?.handleAdd();
+  };
+
+  useImperativeHandle(forwardRef, () => ({
+    reload,
+  }));
+
+  const reload = () => {
+    ref.current?.reload();
+  };
+
+  return (
+    <Root className="dataset-panel">
+      <PaneHeader
+        title="数据集"
+        extra={
+          <Space>
+            <a className="toolbar" onClick={handleAdd}>
+              +
+            </a>
+          </Space>
+        }
+      />
+      <div className="body">
+        <DatasetPanelComponent ref={ref} />
+      </div>
+    </Root>
+  );
+});

package/src/components/panel/PaneHeader.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 export type PaneHeaderProps = {
   title?: string
   extra?: React.ReactNode
+  style?: React.CSSProperties
 }
 
 const Header = styled.div`
@@ -24,9 +25,9 @@ const Header = styled.div`
   }
 `
 
-export const PaneHeader: React.FC<PaneHeaderProps> = ({ title = '', extra }) => {
+export const PaneHeader: React.FC<PaneHeaderProps> = ({ title = '', extra, style = {} }) => {
   return (
-    <Header className="pane-header">
+    <Header className="pane-header" style={style}>
       <span className="title">{title}</span>
       <div className="extra">{extra}</div>
     </Header>

package/src/components/panel/PropertiesPanel.tsx

@@ -1,11 +1,28 @@
+import {
+  CloseOutlined,
+  DeleteOutlined,
+  InboxOutlined,
+  SelectOutlined,
+} from "@ant-design/icons";
+import Editor from "@monaco-editor/react";
+import {
+  Button,
+  Divider,
+  Drawer,
+  Form,
+  Input,
+  Popover,
+  Radio,
+  Select,
+  Space,
+  Upload,
+} from "antd";
 import React, { useContext, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
-import { PaneHeader } from "./PaneHeader";
-import { Radio, Divider, Form, Input, Upload, Button, Select } from "antd";
-import Editor from "@monaco-editor/react";
-import { InboxOutlined, DeleteOutlined } from "@ant-design/icons";
-import { IconFont } from "../icon/IconFont";
 import { DesignerContext } from "../context/DesignerContext";
+import { IconFont } from "../icon/IconFont";
+import { PaneHeader } from "./PaneHeader";
+import { DataSetOutput, SchemaItemType, FieldType } from "../typing";
 
 const Root = styled.div`
   display: flex;
@@ -19,12 +36,12 @@ const Root = styled.div`
     padding: 12px;
     overflow: auto;
 
+    .ant-form-item {
+      margin-bottom: 8px;
+    }
+
     .ant-form-item-label {
       text-align: left;
-
-      label {
-        display: inline;
-      }
     }
 
     .ant-form-item-control-input,
@@ -32,6 +49,10 @@ const Root = styled.div`
       text-align: end;
       justify-content: flex-end;
     }
+
+    .ant-divider {
+      margin: 0;
+    }
   }
 `;
 
@@ -51,8 +72,17 @@ const computeItems = (rootItems: any[] = []) => {
   return items;
 };
 
-export const PropertiesPanel: React.FC = () => {
-  const { plugins, selectedItem, updateSelectedItem: onUpdateSelectedItem, schema, setSchema } = useContext(DesignerContext);
+export const PropertiesPanel: React.FC<{
+  datasourceEnable?: boolean;
+}> = ({ datasourceEnable = true }) => {
+  const {
+    plugins,
+    selectedItem,
+    updateSelectedItem: onUpdateSelectedItem,
+    schema,
+    setSchema,
+    datasetSelector,
+  } = useContext(DesignerContext);
   const refCustomDatasource = useRef<any>(null);
   const [selectedTab, setSelectedTab] = useState<"1" | "2">("1");
   const items = useMemo(() => computeItems(schema?.items || []), [schema]);
@@ -76,9 +106,11 @@ export const PropertiesPanel: React.FC = () => {
       onUpdateSelectedItem({ ...selectedItem, props: next });
   };
   const [reportForm, setReportForm] = useState<any>(schema?.info || {});
-  const [datasource, setDatasource] = useState<any>(
+  const [datasource, setDatasource] = useState<SchemaItemType["datasource"]>(
     selectedItem?.datasource || {}
   );
+  const [datasetSelectorOpen, setDatasetSelectorOpen] =
+    useState<boolean>(false);
   const onUpdateReportProps = (next: any) => {
     setSchema({ ...schema, info: next });
   };
@@ -126,7 +158,11 @@ export const PropertiesPanel: React.FC = () => {
       />
       <div className="body">
         {activeTab === "1" && (
-          <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+          <Form
+            labelCol={{ span: 24 }}
+            wrapperCol={{ span: 24 }}
+            className="ant-form-compact"
+          >
             <Form.Item label="页面名称">
               <Input
                 size="small"
@@ -194,11 +230,15 @@ export const PropertiesPanel: React.FC = () => {
         {activeTab === "2" && (
           <>
             <Divider>基础属性</Divider>
-            <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+            <Form
+              labelCol={{ span: 24 }}
+              wrapperCol={{ span: 24 }}
+              className="ant-form-compact"
+            >
               <Form.Item
                 label="组件标识"
-                labelCol={{ span: 12 }}
-                wrapperCol={{ span: 12 }}
+                labelCol={{ span: 5 }}
+                wrapperCol={{ span: 19 }}
               >
                 {selectedItem?.id || ""}
               </Form.Item>
@@ -231,7 +271,7 @@ export const PropertiesPanel: React.FC = () => {
             </Form>
             {selectedItem?.datasource && <Divider>数据源</Divider>}
             {selectedItem?.datasource && (
-              <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+              <Form className="ant-form-compact">
                 <Form.Item
                   label={
                     <div
@@ -242,13 +282,125 @@ export const PropertiesPanel: React.FC = () => {
                       }}
                     >
                       数据来源
-                      <Radio.Group
+                    </div>
+                  }
+                  labelCol={{ span: 5 }}
+                  wrapperCol={{ span: 19 }}
+                  colon={false}
+                >
+                  <Radio.Group
+                    size="small"
+                    value={datasource?.source}
+                    onChange={(e) => {
+                      const next = {
+                        ...(datasource || {}),
+                        source: e.target.value,
+                      };
+                      setDatasource(next);
+                      onUpdateSelectedItem &&
+                        onUpdateSelectedItem({
+                          ...selectedItem,
+                          datasource: next,
+                        });
+                    }}
+                  >
+                    {!!datasetSelector && (
+                      <Radio.Button value="dataset">数据集</Radio.Button>
+                    )}
+                    {datasourceEnable && (
+                      <Radio.Button value="define">数据源</Radio.Button>
+                    )}
+                    <Radio.Button value="custom">自定义</Radio.Button>
+                  </Radio.Group>
+                </Form.Item>
+                {datasource?.source === "dataset" && datasetSelector && (
+                  <>
+                    <Form.Item
+                      label="数据集"
+                      labelCol={{ span: 5 }}
+                      wrapperCol={{ span: 19 }}
+                    >
+                      <Space.Compact>
+                        <Input
+                          size="small"
+                          readOnly={true}
+                          value={datasource?.dataset?.name || ""}
+                          style={{ width: 90 }}
+                        />
+                        {!!datasource?.dataset?.id?.length && datasource?.dataset?.output && (
+                          <Popover
+                            title="输出类型"
+                            placement="left"
+                            content={
+                              <div
+                                style={{
+                                  padding: "0 12px",
+                                  maxWidth: 500,
+                                  maxHeight: 500,
+                                  overflow: "auto",
+                                }}
+                              >
+                                <OutputTypePrint
+                                  output={datasource.dataset.output}
+                                />
+                              </div>
+                            }
+                          >
+                            <Button
+                              size="small"
+                              style={{
+                                color: "var(--ant-color-text-tertiary)",
+                              }}
+                              title="查看输出类型"
+                            >
+                              <IconFont type="icon-json" />
+                            </Button>
+                          </Popover>
+                        )}
+                        {!!datasource?.dataset?.id?.length && (
+                          <Button
+                            size="small"
+                            icon={<CloseOutlined />}
+                            onClick={() => {
+                              const next = {
+                                ...(datasource || {}),
+                                dataset: {
+                                  id: "",
+                                  name: "",
+                                  output: { fields: [] },
+                                },
+                              };
+                              setDatasource(next);
+                              onUpdateSelectedItem &&
+                                onUpdateSelectedItem({
+                                  ...selectedItem,
+                                  datasource: next,
+                                });
+                            }}
+                            title="删除数据集"
+                            style={{ color: "var(--ant-color-text-tertiary)" }}
+                          />
+                        )}
+                        <Button
+                          size="small"
+                          icon={<SelectOutlined />}
+                          title="选择数据集"
+                          onClick={() => setDatasetSelectorOpen(true)}
+                        />
+                      </Space.Compact>
+                    </Form.Item>
+                  </>
+                )}
+                {datasource?.source === "define" && (
+                  <>
+                    <Form.Item label="数据源" layout="vertical">
+                      <Select
                         size="small"
-                        value={datasource?.source}
-                        onChange={(e) => {
+                        value={datasource?.datasourceId}
+                        onChange={(v) => {
                           const next = {
                             ...(datasource || {}),
-                            source: e.target.value,
+                            datasourceId: v,
                           };
                           setDatasource(next);
                           onUpdateSelectedItem &&
@@ -258,22 +410,83 @@ export const PropertiesPanel: React.FC = () => {
                             });
                         }}
                       >
-                        <Radio.Button value="define">已定义数据源</Radio.Button>
-                        <Radio.Button value="custom">自定义</Radio.Button>
-                      </Radio.Group>
-                    </div>
-                  }
-                >
-                  {datasource?.source === "define" && (
-                    <>
-                      <Form.Item label="数据源" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
-                        <Select
-                          size="small"
-                          value={datasource?.datasourceId}
+                        {(schema?.datasources || []).map((item: any) => (
+                          <Select.Option key={item.id} value={item.id}>
+                            {item.name}
+                          </Select.Option>
+                        ))}
+                      </Select>
+                    </Form.Item>
+                    <Form.Item
+                      label="数据处理脚本"
+                      labelCol={{ span: 24 }}
+                      wrapperCol={{ span: 24 }}
+                    >
+                      <Select
+                        size="small"
+                        value={datasource?.scriptId}
+                        onChange={(v) => {
+                          const next = { ...(datasource || {}), scriptId: v };
+                          setDatasource(next);
+                          onUpdateSelectedItem &&
+                            onUpdateSelectedItem({
+                              ...selectedItem,
+                              datasource: next,
+                            });
+                        }}
+                      >
+                        {(schema?.scripts || []).map((item: any) => (
+                          <Select.Option key={item.id} value={item.id}>
+                            {item.name}
+                          </Select.Option>
+                        ))}
+                      </Select>
+                    </Form.Item>
+                  </>
+                )}
+                {datasource?.source === "custom" && (
+                  <>
+                    <Form.Item
+                      label={
+                        <>
+                          自定义
+                          <a
+                            onClick={() => {
+                              /* formatting via Monaco action not exposed here */
+                              const editor = (
+                                refCustomDatasource.current as any
+                              )?.editor;
+                              editor
+                                ?.getAction("editor.action.formatDocument")
+                                ?.run();
+                            }}
+                          >
+                            <IconFont type="icon-formate" /> 格式化
+                          </a>
+                        </>
+                      }
+                      labelCol={{ span: 24 }}
+                      wrapperCol={{ span: 24 }}
+                      className="ant-form-item-label-space"
+                    >
+                      <div
+                        style={{
+                          border: `1px solid var(--ant-color-border)`,
+                          borderRadius: "var(--ant-border-radius)",
+                          padding: 1,
+                        }}
+                      >
+                        <Editor
+                          height="200px"
+                          onMount={(editor) => {
+                            (refCustomDatasource.current as any) = { editor };
+                          }}
+                          defaultLanguage="json"
+                          value={datasource?.custom || ""}
                           onChange={(v) => {
                             const next = {
                               ...(datasource || {}),
-                              datasourceId: v,
+                              custom: v || "",
                             };
                             setDatasource(next);
                             onUpdateSelectedItem &&
@@ -282,100 +495,16 @@ export const PropertiesPanel: React.FC = () => {
                                 datasource: next,
                               });
                           }}
-                        >
-                          {(schema?.datasources || []).map((item: any) => (
-                            <Select.Option key={item.id} value={item.id}>
-                              {item.name}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                      <Form.Item label="数据处理脚本" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
-                        <Select
-                          size="small"
-                          value={datasource?.scriptId}
-                          onChange={(v) => {
-                            const next = { ...(datasource || {}), scriptId: v };
-                            setDatasource(next);
-                            onUpdateSelectedItem &&
-                              onUpdateSelectedItem({
-                                ...selectedItem,
-                                datasource: next,
-                              });
-                          }}
-                        >
-                          {(schema?.scripts || []).map((item: any) => (
-                            <Select.Option key={item.id} value={item.id}>
-                              {item.name}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                    </>
-                  )}
-                  {datasource?.source === "custom" && (
-                    <>
-                      <Form.Item
-                        label={
-                          <div
-                            style={{
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "space-between",
-                            }}
-                          >
-                            自定义
-                            <a
-                              onClick={() => {
-                                /* formatting via Monaco action not exposed here */
-                                const editor = (refCustomDatasource.current as any)?.editor;
-                                editor?.getAction("editor.action.formatDocument")?.run();
-                              }}
-                            >
-                              <IconFont type="icon-formate" /> 格式化
-                            </a>
-                          </div>
-                        }
-                        labelCol={{ span: 24 }}
-                        wrapperCol={{ span: 24 }}
-                      >
-                        <div
-                          style={{
-                            border: `1px solid var(--ant-color-border)`,
-                            borderRadius: "var(--ant-border-radius)",
-                            padding: 1,
+                          options={{
+                            minimap: { enabled: false },
+                            scrollBeyondLastLine: false,
+                            tabSize: 2,
                           }}
-                        >
-                          <Editor
-                            height="200px"
-                            onMount={(editor) => {
-                              (refCustomDatasource.current as any) = { editor };
-                            }}
-                            defaultLanguage="json"
-                            value={datasource?.custom}
-                            onChange={(v) => {
-                              const next = {
-                                ...(datasource || {}),
-                                custom: v || "",
-                              };
-                              setDatasource(next);
-                              onUpdateSelectedItem &&
-                                onUpdateSelectedItem({
-                                  ...selectedItem,
-                                  datasource: next,
-                                });
-                            }}
-                            options={{
-                              minimap: { enabled: false },
-                              scrollBeyondLastLine: false,
-                              tabSize: 2,
-                            }}
-                          />
-                        </div>
-                      </Form.Item>
-                    </>
-                  )}
-                </Form.Item>
+                        />
+                      </div>
+                    </Form.Item>
+                  </>
+                )}
               </Form>
             )}
             {FormComp && <Divider>特有属性</Divider>}
@@ -389,6 +518,84 @@ export const PropertiesPanel: React.FC = () => {
           </>
         )}
       </div>
+
+      {!!datasetSelector && (
+        <Drawer
+          title="选择数据集"
+          size={800}
+          open={datasetSelectorOpen}
+          onClose={() => {
+            setDatasetSelectorOpen(false);
+          }}
+        >
+          {datasetSelector((dataset) => {
+            datasource!.dataset = dataset;
+            setDatasetSelectorOpen(false);
+          })}
+        </Drawer>
+      )}
     </Root>
   );
 };
+
+const OutputTypePrint: React.FC<{
+  output: DataSetOutput;
+}> = ({ output }) => {
+  const renderFields = (fields: DataSetOutput["fields"], indent = 0) => {
+    if (!fields || fields.length === 0) return <span>{"{}"}</span>;
+
+    return (
+      <>
+        {"{"}
+        {fields.map((field, index) => (
+          <div key={field.key || index} style={{ paddingLeft: "1em" }}>
+            <span style={{ color: "var(--ant-color-primary)" }}>
+              {field.key}
+            </span>
+            :{" "}
+            {field.type === FieldType.ARRAY ? (
+              <>
+                Array{"<"}
+                {field.schema ? (
+                  renderFields(field.schema.fields, indent + 1)
+                ) : (
+                  <span>any</span>
+                )}
+                {">"}
+              </>
+            ) : field.type === FieldType.OBJECT ? (
+              field.schema ? (
+                renderFields(field.schema.fields, indent + 1)
+              ) : (
+                <span>{"{}"}</span>
+              )
+            ) : (
+              <span style={{ color: "var(--ant-color-success)" }}>
+                {(field.type || "string").toLowerCase()}
+              </span>
+            )}
+            {index < fields.length - 1 ? "," : ""}
+          </div>
+        ))}
+        {"}"}
+      </>
+    );
+  };
+
+  return (
+    <pre
+      style={{
+        margin: "8px 0",
+        padding: "8px",
+        background: "var(--ant-color-fill-alter)",
+        borderRadius: "var(--ant-border-radius-sm)",
+        fontSize: "12px",
+        fontFamily: "monospace",
+        overflowX: "auto",
+        border: "1px solid var(--ant-color-border-secondary)",
+      }}
+    >
+      {renderFields(output.fields)}
+    </pre>
+  );
+};

package/src/components/plugins/@antd/index.ts

@@ -53,15 +53,19 @@ export const TextPlugin: PluginType = {
   component: TextRender,
   formComponent: TextProps,
   defaultOptions: {
-    style: {
-      fontSize: 14,
-      color: "#444444",
-      fontFamily: "'宋体', 'SimSun', serif",
-      fontWeight: "normal",
-      fontStyle: "normal",
-      textDecoration: "none",
+    style: {},
+    props: {
+      text: "文本内容",
+      classNames: [],
+      customStyle: {
+        fontSize: 14,
+        color: "#444444",
+        fontFamily: "'宋体', 'SimSun', serif",
+        fontWeight: "normal",
+        fontStyle: "normal",
+        textDecoration: "none",
+      },
     },
-    props: { text: "文本内容" },
   },
 };
 
@@ -184,7 +188,6 @@ export const HtmlPlugin: PluginType = {
       custom: `{"name": "Confucius"}`,
     },
     props: {
-      dataSource: { name: "Confucius" },
       template: `<div>{{name}}, welcome to the world of programming.</div>`,
     },
   },

package/src/components/plugins/@antd/item-props/CapsuleProps.tsx

@@ -84,7 +84,7 @@ export const CapsuleProps: React.FC<PropEditorProps<CapsuleModel>> = ({
           <Radio.Button value="large">大</Radio.Button>
         </Radio.Group>
       </Form.Item>
-      <Form.Item>
+      <Form.Item labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
         <Table
           size="small"
           dataSource={model.options}