DragForm 表单拖拽

基本使用

tsx

import React from "react";
import { Button } from "shineout";
import { Drag, DragForm } from "@lite-code/pro-shineout";

export default () => {
  const [schema, setSchema] = React.useState([]);
  const [selectedKey, setSelectedKey] = React.useState();
  return (
    <div>
      <Drag
        onChange={(item: any) => {
          console.log(item);
        }}
        accept={false}
        items={[
          {
            type: "Input",
            name: "input",
            label: "输入框",
          },
          {
            type: "Select",
            name: "select",
            label: "下拉选",
          },
          {
            type: "FormList",
            name: "formList",
            label: "子表单容器",
            span: 24,
            props: {},
          },
        ].map((schema) => {
          return {
            key: schema.type,
            schema: {
              ...schema,
              name: Math.random().toString(16).substring(2, 8),
            },
            content: (
              <Button
                type="primary"
                mode="outline"
                style={{ marginBottom: 10 }}
              >
                {schema.label}
              </Button>
            ),
          };
        })}
      />
      <DragForm
        title="添加表单元素"
        column={2}
        emptyHeight={200}
        items={schema}
        onChange={(newSchema: any) => {
          setSchema(newSchema);
          console.log("onChange", newSchema);
        }}
        selectedKey={selectedKey}
        onSelected={(itemKey: any) => {
          setSelectedKey(itemKey);
          console.log("onSelected", itemKey);
        }}
      />
      <pre
        style={{
          background: "var(--vp-c-bg-soft)",
          padding: 10,
          maxHeight: 500,
          overflow: "auto"
        }}
      >
        {JSON.stringify(
          {
            title: "添加表单元素",
            column: 2,
            schema,
          },
          null,
          2
        )}
      </pre>
    </div>
  );
};