import snippets from './snippets';
export default {
  snippets,
  componentName: 'SortableList',
  title: '排序列表',
  category: '数据展示',
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "SortableList",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      title: '数据源',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'dataSource',
          title: { label: '列表数据源', tip: '列表数据源' },
          propType: { type: 'arrayOf', value: 'any' },
          setter: ['JsonSetter', '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: 'renderItem',
          title: {
            label: '渲染函数',
            tip: 'renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项',
          },
          propType: 'func',
          setter: [
            {
              componentName: 'SlotSetter',
              title: '渲染函数插槽',
              initialValue: {
                type: 'JSSlot',
                params: ['item', 'index'],
                value: [
                  {
                    componentName: 'Button',
                    props: {
                      children: {
                        type: 'JSExpression',
                        value: 'this.item.text',
                      },
                    },
                  },
                  {
                    componentName: 'Button',
                    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: [
        {
          name: 'onChange',
          template: 'onChange(list,${extParams}){\n// 排序 改变的回调\n}',
        },
      ],
    },
  },
};