import snippets from './snippets';
import { border, lengthProp } from '../_utils/css';

export default {
  componentName: 'AMNavBar',
  docUrl: 'https://mobile.ant.design/zh/components/nav-bar',
  title: '导航栏',
  category: '通用',
  group: '基础组件',
  props: [
    {
      name: 'children',
      title: {
        label: '标题',
        tip: 'children | 标题',
      },
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      name: 'back',
      title: {
        label: '返回区域的文字',
        tip: 'back | 返回区域的文字，如果为 null 的话，backArrow 也不会渲染',
      },
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      name: 'backArrow',
      title: {
        label: '返回箭头',
        tip: 'block | 是否显示返回区域的箭头，也可以传入 ReactNode 进行自定义',
      },
      propType: 'backArrow',
      setter: 'BoolSetter',
      defaultValue: true,
    },
    {
      name: 'left',
      title: {
        label: '左侧内容',
        tip: 'left | 渲染在返回区域的右侧',
      },
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      name: 'right',
      title: {
        label: '右侧内容',
        tip: 'right | 右侧内容',
      },
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [border('bottom', '下边框'), lengthProp('height', '高度')],
    },
  ],
  configure: {
    supports: {
      events: [
        {
          name: 'onBack',
          description: '点击返回区域后的回调',
          template: "onBack(){\n// 点击返回区域后的回调\nconsole.log('onBack');}",
        },
      ],
      style: true,
    },
  },
  snippets,
};