@ywfe/materials-design/lowcode/yw-image/meta.ts

YwDesign for lowcode

import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types';
import { IPublicTypeSnippetMore } from '../_base';

const YwImageMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwImage',
  title: 'YwImage',
  group: '基础组件',
  docUrl: '',
  category: '展示',
  screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/imagePreview',
  devMode: 'proCode',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.0.1-beta.6',
    exportName: 'YwImage',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: '图片链接',
          tip: 'value ｜ 图片链接',
        },
        name: 'value',
        // setter: {
        //   componentName: 'MixedSetter',
        //   props: {
        //     setters: [
        //       {
        //         componentName: 'VariableSetter',
        //       },
        //     ],
        //   },
        // },
      },
      {
        title: {
          label: '最多预览几张',
          tip: 'maxShow ｜ 最多展示几张',
        },
        name: 'maxShow',
        supportVariable: false,
        setter: {
          componentName: 'NumberSetter',
          initialValue: 1,
        },
      },
      {
        title: {
          label: '图片描述',
          tip: 'alt ｜ 图片描述',
        },
        name: 'alt',
        supportVariable: false,
        setter: {
          componentName: 'StringSetter',
        },
      },
      {
        title: {
          label: '图片宽',
          tip: 'width ｜ 图片宽',
        },
        name: 'width',
        supportVariable: false,
        setter: {
          componentName: 'NumberSetter',
          initialValue: 64,
        },
      },
      {
        title: {
          label: '图片高',
          tip: 'height ｜ 图片高',
        },
        name: 'height',
        supportVariable: false,
        setter: {
          componentName: 'NumberSetter',
          initialValue: 64,
        },
      },
      {
        title: {
          label: '内边距',
          tip: 'padding ｜ 内边距',
        },
        name: 'padding',
        supportVariable: false,
        setter: {
          componentName: 'NumberSetter',
        },
      },
      {
        title: {
          label: '类名',
          tip: 'classname ｜ 类名',
        },
        name: 'classname',
        isRequired: false,
        setter: {
          componentName: 'StringSetter',
        },
      },
      {
        title: {
          label: '是否展示图片上遮罩',
          tip: 'isShowLastFix ｜ 是否展示图片上遮罩',
        },
        name: 'isShowLastFix',
        supportVariable: false,
        setter: {
          componentName: 'BoolSetter',
          initialValue: false,
        },
      },
      {
        title: {
          label: 'oss图片预览地址自定义配置',
          tip: 'ossImgConfig ｜ oss图片预览地址自定义配置',
        },
        name: 'ossImgConfig',
        supportVariable: false,
        setter: ['JsonSetter', 'StringSetter'],
      },
      {
        title: {
          label: '弹窗属性配置',
          tip: 'modalProps ｜ 弹窗属性配置',
        },
        name: 'modalProps',
        supportVariable: false,
        setter: {
          componentName: 'JsonSetter',
          isRequired: false,
          initialValue: {
            maskClosable: true,
            keyboard: true,
          },
        },
      },
      {
        title: {
          label: '底部渲染元素',
          tip: 'bottomRender ｜ 底部渲染元素',
        },
        name: 'bottomRender',
        supportVariable: false,
        setter: {
          componentName: 'MixedSetter',
          props: {
            defaultValue: () => ({
              schema: {
                title: 'bottomRender',
                type: 'JSFunction',
                async: false,
                properties: {
                  input: {
                    type: 'object',
                    properties: {
                      data: {
                        type: 'object',
                        defaultValue: {},
                      },
                    },
                    required: ['data'],
                  },
                  body: {
                    type: 'array',
                    items: [
                      {
                        type: 'Function',
                        properties: {
                          template: 'LogicFunction',
                        },
                      },
                    ],
                  },
                },
                required: ['input', 'body'],
              },
            }),
            setters: ['FunctionSetter'],
          },
        },
      },
    ],
    supports: {
      className: true,
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippetMore[] = [
  {
    title: '图片预览',
    svgId: 'icon-tupianyulan',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/imagePreview',
    schema: {
      componentName: 'YwImage',
      props: {},
    },
  },
];

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