bi-sdk-react 0.0.1

package/src/components/panel/PropertiesPanel.tsx

@@ -0,0 +1,394 @@
+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";
+
+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;
+
+    .ant-form-item-label {
+      text-align: left;
+
+      label {
+        display: inline;
+      }
+    }
+
+    .ant-form-item-control-input,
+    .ant-form-item-control-input-content {
+      text-align: end;
+      justify-content: flex-end;
+    }
+  }
+`;
+
+const computeItems = (rootItems: any[] = []) => {
+  const items: any[] = [];
+  const walk = (list: any[]) => {
+    if (!Array.isArray(list)) return;
+    list.forEach((item) => {
+      items.push(item);
+      if (Array.isArray(item.children)) walk(item.children);
+      else if (typeof item.children === "object" && item.children) {
+        Object.keys(item.children).forEach((key) => walk(item.children[key]));
+      }
+    });
+  };
+  walk(rootItems || []);
+  return items;
+};
+
+export const PropertiesPanel: React.FC = () => {
+  const { plugins, selectedItem, updateSelectedItem: onUpdateSelectedItem, schema, setSchema } = useContext(DesignerContext);
+  const refCustomDatasource = useRef<any>(null);
+  const [selectedTab, setSelectedTab] = useState<"1" | "2">("1");
+  const items = useMemo(() => computeItems(schema?.items || []), [schema]);
+  const selectedItemInCanvas = useMemo(
+    () => selectedItem && items.find((i: any) => i.id === selectedItem.id),
+    [items, selectedItem]
+  );
+  const activeTab = selectedItemInCanvas ? selectedTab : "1";
+  const plugin = useMemo(
+    () => plugins.find((p: any) => p.key === selectedItem?.type),
+    [plugins, selectedItem]
+  );
+  const FormComp = plugin?.formComponent as
+    | React.ComponentType<any>
+    | undefined;
+  const model = selectedItem?.props || {};
+  const customStyle = selectedItem?.style || {};
+  const onChange = (next: any) => {
+    if (!selectedItem) return;
+    onUpdateSelectedItem &&
+      onUpdateSelectedItem({ ...selectedItem, props: next });
+  };
+  const [reportForm, setReportForm] = useState<any>(schema?.info || {});
+  const [datasource, setDatasource] = useState<any>(
+    selectedItem?.datasource || {}
+  );
+  const onUpdateReportProps = (next: any) => {
+    setSchema({ ...schema, info: next });
+  };
+  const uploadHeaders = {
+    Authorization: `Bearer ${localStorage.getItem("ASKDATA_TOKEN") || ""}`,
+  };
+  const beforeUpload = (file: File) => {
+    const isImage = file.type.startsWith("image/");
+    return isImage;
+  };
+  const handleUpload = (info: any) => {
+    if (info.file.status === "done") {
+      const cover = { url: info.file.response?.data, name: info.file.name };
+      const next = { ...reportForm, cover };
+      setReportForm(next);
+      onUpdateReportProps && onUpdateReportProps(next);
+    }
+  };
+  const removeCover = () => {
+    const next = { ...reportForm, cover: null };
+    setReportForm(next);
+    onUpdateReportProps && onUpdateReportProps(next);
+  };
+  React.useEffect(() => {
+    setSelectedTab(selectedItem ? "2" : "1");
+    setDatasource(selectedItem?.datasource || {});
+  }, [selectedItem]);
+  return (
+    <Root className="properties-panel">
+      <PaneHeader
+        title="属性"
+        extra={
+          <Radio.Group
+            value={activeTab}
+            size="small"
+            buttonStyle="outline"
+            onChange={(e) => setSelectedTab(e.target.value)}
+          >
+            <Radio.Button value="1">页面</Radio.Button>
+            {selectedItemInCanvas && (
+              <Radio.Button value="2">组件</Radio.Button>
+            )}
+          </Radio.Group>
+        }
+      />
+      <div className="body">
+        {activeTab === "1" && (
+          <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+            <Form.Item label="页面名称">
+              <Input
+                size="small"
+                value={reportForm?.name}
+                placeholder="请输入页面名称"
+                onChange={(e) => {
+                  const next = { ...reportForm, name: e.target.value };
+                  setReportForm(next);
+                  onUpdateReportProps && onUpdateReportProps(next);
+                }}
+              />
+            </Form.Item>
+            <Form.Item label="页面描述">
+              <Input.TextArea
+                size="small"
+                value={reportForm?.description}
+                placeholder="请输入页面描述"
+                onChange={(e) => {
+                  const next = { ...reportForm, description: e.target.value };
+                  setReportForm(next);
+                  onUpdateReportProps && onUpdateReportProps(next);
+                }}
+              />
+            </Form.Item>
+            <Form.Item label="封面">
+              <Upload.Dragger
+                name="file"
+                multiple={false}
+                accept=".png,.jpg,.jpeg"
+                headers={uploadHeaders}
+                action="/api/datareport/upload"
+                showUploadList={false}
+                beforeUpload={beforeUpload}
+                onChange={handleUpload}
+              >
+                <p className="ant-upload-drag-icon">
+                  <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">
+                  点击或将文件拖拽到此区域进行上传
+                </p>
+                <p className="ant-upload-hint">
+                  严禁上传公司数据或其他被禁止的文件。
+                </p>
+              </Upload.Dragger>
+              {reportForm?.cover?.url && (
+                <div style={{ marginTop: 10, textAlign: "left" }}>
+                  <div
+                    style={{ display: "flex", justifyContent: "space-between" }}
+                  >
+                    <label>封面预览</label>
+                    <a onClick={removeCover}>
+                      <DeleteOutlined />
+                    </a>
+                  </div>
+                  <img
+                    src={reportForm.cover.url}
+                    style={{ width: "100%", maxHeight: 200 }}
+                  />
+                </div>
+              )}
+            </Form.Item>
+          </Form>
+        )}
+        {activeTab === "2" && (
+          <>
+            <Divider>基础属性</Divider>
+            <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+              <Form.Item
+                label="组件标识"
+                labelCol={{ span: 12 }}
+                wrapperCol={{ span: 12 }}
+              >
+                {selectedItem?.id || ""}
+              </Form.Item>
+              <Form.Item label="组件名称">
+                <Input
+                  size="small"
+                  value={selectedItem?.name}
+                  onChange={(e) =>
+                    onUpdateSelectedItem &&
+                    onUpdateSelectedItem({
+                      ...selectedItem,
+                      name: e.target.value,
+                    })
+                  }
+                />
+              </Form.Item>
+              <Form.Item label="组件描述">
+                <Input.TextArea
+                  size="small"
+                  value={selectedItem?.description}
+                  onChange={(e) =>
+                    onUpdateSelectedItem &&
+                    onUpdateSelectedItem({
+                      ...selectedItem,
+                      description: e.target.value,
+                    })
+                  }
+                />
+              </Form.Item>
+            </Form>
+            {selectedItem?.datasource && <Divider>数据源</Divider>}
+            {selectedItem?.datasource && (
+              <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+                <Form.Item
+                  label={
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                      }}
+                    >
+                      数据来源
+                      <Radio.Group
+                        size="small"
+                        value={datasource?.source}
+                        onChange={(e) => {
+                          const next = {
+                            ...(datasource || {}),
+                            source: e.target.value,
+                          };
+                          setDatasource(next);
+                          onUpdateSelectedItem &&
+                            onUpdateSelectedItem({
+                              ...selectedItem,
+                              datasource: next,
+                            });
+                        }}
+                      >
+                        <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}
+                          onChange={(v) => {
+                            const next = {
+                              ...(datasource || {}),
+                              datasourceId: v,
+                            };
+                            setDatasource(next);
+                            onUpdateSelectedItem &&
+                              onUpdateSelectedItem({
+                                ...selectedItem,
+                                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,
+                          }}
+                        >
+                          <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>
+              </Form>
+            )}
+            {FormComp && <Divider>特有属性</Divider>}
+            {FormComp && (
+              <FormComp
+                model={model}
+                customStyle={customStyle}
+                onChange={onChange}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </Root>
+  );
+};

package/src/components/panel/ScriptPanel.tsx

@@ -0,0 +1,175 @@
+import React, { useContext, useMemo } from "react";
+import Editor from "@monaco-editor/react";
+import { Button, Space, Modal, Form, Input } from "antd";
+import { PaneHeader } from "./PaneHeader";
+import styled from "styled-components";
+import { IconFont } from "../icon/IconFont";
+import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
+import { DesignerContext } from "../context/DesignerContext";
+import { ScriptItem } from "../typing";
+
+
+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;
+  }
+  ul,
+  li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px;
+    border-bottom: 1px dotted #d9d9d9;
+  }
+  li > div:first-child {
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  li:last-child {
+    border-bottom: none;
+  }
+  .function-wrapper {
+    color: #0000ff;
+    font-size: 14px;
+    padding: 0 50px;
+  }
+`;
+
+export const ScriptPanel: React.FC = () => {
+  const {schema, setSchema} = useContext(DesignerContext);
+  const [visible, setVisible] = React.useState(false);
+  const [editIndex, setEditIndex] = React.useState(-1);
+  const [form] = Form.useForm<ScriptItem>();
+  const list = useMemo(() => schema.scripts || [], [schema]);
+  const onUpdateScripts = (scripts: ScriptItem[]) => {
+    setSchema({ ...schema, scripts });
+  };
+  const handleAdd = () => {
+    setEditIndex(-1);
+    form.setFieldsValue({ name: "", script: "return {};" });
+    setVisible(true);
+  };
+  const handleOk = async () => {
+    const vals = await form.validateFields().catch(() => null);
+    if (!vals) return;
+    const next = [...list];
+    if (editIndex === -1)
+      next.push({ id: Math.random().toString(36).slice(2, 10), ...vals });
+    else next[editIndex] = { ...next[editIndex], ...vals };
+    onUpdateScripts && onUpdateScripts(next);
+    setVisible(false);
+    setEditIndex(-1);
+    form.resetFields();
+  };
+  return (
+    <Root className="script-panel">
+      <PaneHeader
+        title="脚本"
+        extra={
+          <Space>
+            <a className="toolbar" onClick={handleAdd}>
+              +
+            </a>
+          </Space>
+        }
+      />
+      <div className="body">
+        <ul>
+          {list.map((item, index) => (
+            <li key={item.id || index}>
+              <div title={item.name}>
+                <IconFont type="icon-drag" /> {item.name}
+              </div>
+              <Space>
+                <a
+                  onClick={() => {
+                    setEditIndex(index);
+                    form.setFieldsValue({
+                      name: item.name,
+                      script: item.script,
+                    });
+                    setVisible(true);
+                  }}
+                >
+                  <EditOutlined />
+                </a>
+                <a
+                  onClick={() => {
+                    const next = [...list];
+                    next.splice(index, 1);
+                    onUpdateScripts && onUpdateScripts(next);
+                  }}
+                >
+                  <DeleteOutlined />
+                </a>
+              </Space>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <Modal
+        title="添加脚本"
+        open={visible}
+        width={600}
+        styles={{
+          body: { maxHeight: "calc(100vh - 250px)", overflow: "auto" }
+        }}
+        onCancel={() => setVisible(false)}
+        footer={
+          <Space>
+            <Button type="primary" onClick={handleOk}>
+              确定
+            </Button>
+            <Button onClick={() => setVisible(false)}>取消</Button>
+          </Space>
+        }
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            label="脚本名称"
+            name="name"
+            rules={[{ required: true, message: "请输入脚本名称" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label="脚本语句"
+            name="script"
+            rules={[{ required: true, message: "请输入脚本语句" }]}
+          >
+            <div style={{ border: "1px solid #d9d9d9", padding: "0 10px" }}>
+              <div className="function-wrapper">function fixed(data) {"{"}</div>
+              <Editor
+                height="200px"
+                defaultLanguage="javascript"
+                value={form.getFieldValue("script")}
+                onChange={(v) => form.setFieldsValue({ script: v || "" })}
+                options={{
+                  minimap: { enabled: false },
+                  scrollBeyondLastLine: false,
+                  tabSize: 2,
+                }}
+              />
+              <div className="function-wrapper">{"}"}</div>
+            </div>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Root>
+  );
+};