/*
 * @Author: llx
 * @Date: 2024-09-03 15:23:25
 * @LastEditors: llx
 * @LastEditTime: 2024-09-04 10:41:02
 * @Description: file content
 */
const TabBarMeta = {
  componentName: 'TabBar',
  category: '通用',
  group: '移动端',
  title: 'TabBar',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'web-sdk-h5-material',
    version: '0.1.0',
    exportName: 'TabBar',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    component: { isContainer: true },
    props: [
      {
        title: '数据源',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'dataSource',
            title: { label: '标签栏数据源', tip: '标签栏数据源' },
            propType: { type: 'arrayOf', value: 'any' },
            setter: ['JsonSetter', 'VariableSetter'],
          },
        ],
      },
      {
        title: '当前激活的key',
        name: 'activeKey',
        setter: {
          componentName: 'StringSetter',
          isRequired: false,
          initialValue: '',
        },
      },
      {
        title: '初始化选中的key',
        name: 'defaultActiveKey',
        setter: {
          componentName: 'StringSetter',
          isRequired: false,
          initialValue: '',
        },
      },
      {
        title: '切换面板的回调',
        name: 'onChange',
        setter: {
          componentName: 'FunctionSetter',
        },
      },
      {
        title: '开启安全区适配',
        name: 'safeArea',
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: false,
        },
      },
      {
        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',
                          },
                        },
                      },
                    },
                  ],
                },
              },
            ],
          },
        ],
      },
    ],
    supports: {
      className: true,
      style: true,
    },
  },
};
const snippets = [
  {
    title: 'TabBar',
    screenshot: '',
    schema: {
      componentName: 'TabBar',
      props: {},
      isH5Mode: true,
    },
  },
];

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