@ywfe/materials-design/lowcode/yw-form-dialog/meta.ts

YwDesign for lowcode

import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types';
import { FormItemsProps, IPublicTypeSnippetMore, YwButtonBaseProps } from '../_base';
import { getRefConfig, uuid } from '../_utils';

const refConfig = getRefConfig('form_dialog');
const YwFormDialogMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwFormDialog',
  title: '表单弹窗',
  docUrl: '',
  screenshot: '',
  group: '基础组件',
  category: '弹窗',
  devMode: 'proCode',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.0.1-beta.6',
    exportName: 'YwFormDialog',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      refConfig,
      {
        title: '弹窗配置项',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'title',
            title: { label: '弹窗标题', tip: 'title | 标题' },
            setter: 'StringSetter',
          },
          {
            name: 'size',
            title: { label: '弹窗尺寸', tip: 'size | 弹窗尺寸' },
            supportVariable: false,
            setter: {
              componentName: 'SelectSetter',
              initialValue: 's',
              props: {
                options: [
                  {
                    label: '超小号',
                    value: 'xs',
                  },
                  {
                    label: '小号',
                    value: 's',
                  },
                  {
                    label: '中号',
                    value: 'm',
                  },
                  {
                    label: '大号',
                    value: 'l',
                  },
                  {
                    label: '全屏',
                    value: 'full',
                  },
                ],
              },
            },
          },
          {
            title: {
              label: '按钮文字',
              tip: 'btnText | 按钮文字',
            },
            name: 'btnText',
            description: '按钮文字',
            supportVariable: false,
            setter: {
              componentName: 'StringSetter',
              initialValue: '按钮',
              props: {
                placeholder: '请输入',
              },
            },
          },
          {
            title: {
              label: '按钮类型',
              tip: 'btnType | 按钮类型',
            },
            supportVariable: false,
            name: 'btnType',
            description: '按钮类型',
            defaultValue: 'default',
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    label: '主按钮',
                    value: 'primary',
                  },
                  {
                    label: '次按钮',
                    value: 'default',
                  },
                  {
                    label: '链接按钮',
                    value: 'link',
                  },
                ],
              },
              initialValue: 'primary',
            },
          },
          {
            name: 'visible',
            title: 'visible',
            setter: 'BoolSetter',
          },
          {
            title: {
              label: '表单默认值',
              tip: 'initialValues | 表单默认值',
            },
            display: 'inline',
            name: 'initialValues',
            description: '表单默认值',
            setter: {
              componentName: 'JsonSetter',
              isRequired: false,
              initialValue: {},
            },
          },
        ],
      },
      FormItemsProps,
      {
        title: {
          label: '确定操作',
          tip: 'onConfirm | 确定操作',
        },
        name: 'onConfirm',
        setter: {
          componentName: 'SchemaFunctionSetter',
          props: {
            title: 'getDataSource',
            async: true,
            properties: {
              input: {
                type: 'object',
                properties: {
                  values: {
                    type: 'string',
                  },
                },
                required: ['values'],
              },
              body: {
                type: 'array',
                items: [
                  {
                    type: 'Function',
                    properties: {
                      template: 'RequestFunction',
                      variable: 'requestRes',
                      extraProps: {
                        params: '{{values}}',
                      },
                    },
                  },
                ],
              },
              output: 'requestRes',
            },
          },
        },
      },
    ],
    supports: {
      events: [
        {
          name: 'onConfirm',
          description: '确认事件',
        },
        {
          name: 'onCancel',
          description: '取消事件',
          template: 'function onCancel() {\n  this.setState({\n    isShowDialog: false\n  });\n}',
        },
        {
          name: 'onFormInit',
          description: '表单初始化事件',
          template: 'function onFormInit(_form) {\n  this.setState({\n    form: _form\n  });\n}',
        },
        {
          name: 'onOpen',
          description: '弹窗打开事件(开发中)',
        },
      ],
      style: true,
      className: true,
      loop: false,
    },
    component: {
      isContainer: false,
    },
  },
};
const snippets: IPublicTypeSnippetMore[] = [
  {
    title: '表单弹窗',
    svgId: 'icon-biaodantanchuang',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/dialog',
    schema: {
      componentName: 'YwFormDialog',
      props: {
        btnText: '编辑',
        // onFormInit: {
        //   type: 'JSExpression',
        //   value: '(form)=>{form.setValues(this.record)}',
        // },
        // onConfirm: {
        //   type: 'JSExpression',
        //   value:
        //     '(values) => {return new Promise((resolve)=>{console.log("values",values);this.reload();resolve()})}',
        // },
        // initialValues: {
        //   type: 'JSExpression',
        //   value: 'this.record',
        // },
        // reload: {
        //   type: 'JSExpression',
        //   value: 'this.reload',
        // },
        btnType: 'link',
        title: '弹窗标题',
        items: [
          {
            component: 'Input',
            primaryKey: `input_${uuid()}`,
            label: '表单项',
            size: 'medium',
            title: '表单项',
            name: `input_${uuid()}`,
          },
        ],
        visible: undefined,
      },
    },
  },
];

export default {
  ...YwFormDialogMeta,
  snippets,
};