import snippets from "./snippets";

export default {
  snippets,
  componentName: "PisellViewGrid",
  title: "栅格视图",
  category: "数据展示",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "PisellViewGrid",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      title: '数据源',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'dataSource',
          title: { label: '列表数据源', tip: 'dataSource | 列表数据源' },
          propType: { type: 'arrayOf', value: 'any' },
          setter: ['JsonSetter', 'VariableSetter'],
        },
        {
          name: 'loading',
          title: {
            label: '是否加载中',
            tip: 'loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位',
          },
          propType: 'bool',
          defaultValue: false,
          setter: ['BoolSetter', 'VariableSetter'],
        },
        {
          name: 'rowKey',
          title: {
            label: '行Key',
            tip: 'rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式',
          },
          propType: {
            type: 'oneOfType',
            value: ['string', 'function'],
          },
          defaultValue: 'id',
          setter: [
            'StringSetter',
            {
              componentName: 'FunctionSetter',
              props: {
                template:
                  'rowKey(item,${extParams}){\n// 自定义每一行的 key\nreturn `key-${item.id}`;\n}',
              },
            },
            'VariableSetter',
          ],
        },
      ],
    },
    {
      title: '栅格  ',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'columns',
          title: { label: '列数', tip: 'columns | 列数' },
          propType: 'number',
          setter: 'NumberSetter',
          defaultValue: 3,
        },
        {
          name: 'horizontalGap',
          title: { label: '水平间隔', tip: 'horizontalGap | 栅格水平间隔，单位为像素(px)' },
          propType: 'number',
          setter: {
            componentName: 'NumberSetter', props: {
              min: 0,
            },
          },
          defaultValue: 10,
        },
        {
          name: 'verticalGap',
          title: { label: '垂直间隔', tip: 'verticalGap | 栅格垂直间隔，单位为像素(px)' },
          propType: 'number',
          setter: {
            componentName: 'NumberSetter',
            props: {
              min: 0,
            },
          },
          defaultValue: 10,
        },
        {
          name: 'singleRow',
          title: { label: '一行展示', tip: 'singleRow | 一行展示' },
          propType: 'boolean',
          defaultValue: false,
          setter: 'BoolSetter',
        },
      ]
    },
    {
      title: '扩展',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'renderItem',
          title: {
            label: '渲染函数',
            tip: 'renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项',
          },
          propType: 'func',
          setter: [
            {
              componentName: 'SlotSetter',
              title: '渲染函数插槽',
              initialValue: {
                type: 'JSSlot',
                params: ['item'],
                value: [
                  {
                    componentName: 'List.Item',
                    props: {},
                    children: {
                      componentName: 'Typography.Text',
                      props: {
                        children: {
                          type: 'JSExpression',
                          value: 'this.item.text',
                        },
                      },
                    },
                  },
                ],
              },
            },
            {
              componentName: 'FunctionSetter',
              props: {
                template: 'renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}',
              },
            },
            'VariableSetter',
          ],
        },
      ],
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [],
    },
    component: {
      isContainer: true,
    },
  },
};