@ywfe/materials-design/lowcode/yw-drawer-selector/meta.ts

YwDesign for lowcode

import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { TableBaseProps, YwButtonBaseProps, BaseFormItemProps } from '../_base';
import { uuid } from '../_utils';

const YwDrawerSelectorMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwDrawerSelector',
  title: 'YwDrawerSelector',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '基础组件',
  category: '数据录入',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.0.1-beta.6',
    exportName: 'YwDrawerSelector',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'ref',
        title: {
          label: '组件标识',
          tip: "ref | 通过 this.$('xxx') 获取到组件实例",
        },
        defaultValue: () => {
          return `table__dialog__${uuid()}`;
        },
        setter: 'StringSetter',
      },
      {
        name: 'title',
        title: { label: '弹窗标题', tip: 'title | 标题' },
        setter: 'StringSetter',
      },
      ...YwButtonBaseProps,
      {
        title: {
          label: '数据筛选',
          tip: 'items | 数据筛选',
        },
        display: 'accordion',
        name: 'filterItems',
        description: '数据筛选',
        condition: (target) => {
          return target.parent.getPropValue('hasFilter');
        },
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                descriptor: 'title',
                config: {
                  items: BaseFormItemProps,
                },
              },
              initialValue: () => {
                const mockProps: any = {};
                BaseFormItemProps.forEach((item) => {
                  if (item.defaultValue) {
                    if (typeof item.defaultValue === 'function') {
                      mockProps[item.name] = item.defaultValue();
                    } else {
                      mockProps[item.name] = item.defaultValue;
                    }
                  }
                });
                return {
                  component: 'Input',
                  ...mockProps,
                };
              },
            },
          },
        },
      },
      {
        title: {
          label: '商品预览',
          tip: 'previewConfig | 商品预览',
        },
        display: 'accordion',
        name: '_previewConfig',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'imgUrl',
                  title: { label: '商品图片', tip: 'imgUrl | 选择商品图片字段' },
                  setter: 'StringSetter',
                },
                {
                  name: 'tooltip',
                  title: { label: '悬浮提示', tip: 'tooltip | 选择商品图片字段' },
                  setter: 'StringSetter',
                },
              ],
            },
          },
        },
        extraProps: {
          setValue: (target) => {
            //  获取商品名称字段和 商品图片链接字段
            target.parent.setPropValue('formatPreviewItemValue', {
              type: 'JSFunction',
              value:
                '(item)=>{return {imgUrl:item.imgUrl,tooltip:{title:item.itemName,placement:"topLeft"}}}',
            });
          },
        },
      },
      ...TableBaseProps,
    ],
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '商品选择器',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/goods',
    schema: {
      componentName: 'YwDrawerSelector',
      props: {
        visible: true,
      },
    },
  },
];

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