import snippets from './snippets';
import { color, fontSize, stringProp } from '../_utils/css';

export default {
  snippets,
  componentName: 'AMTextArea',
  docUrl: 'https://mobile.ant.design/zh/components/text-area',
  title: '文本区域',
  category: '表单',
  group: '基础组件',
  props: [
    {
      name: 'id',
      title: { label: 'ID', tip: 'input元素的id' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: '默认内容' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'value',
      title: { label: '当前值', tip: '当前值' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'placeholder',
      title: { label: '占位提示', tip: '占位提示' },
      propType: 'string',
      defaultValue: '请输入',
      setter: 'StringSetter',
    },
    {
      name: 'readOnly',
      title: { label: '是否只读', tip: '是否只读' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'rows',
      title: { label: '行数', tip: '行数' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'maxLength',
      title: { label: '最大长度', tip: '最大长度' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'max',
      title: { label: '最大字符数', tip: '最大字符数' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'showCount',
      title: { label: '显示字数', tip: '显示字数' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'autoSize',
      title: { label: '自适应内容高度', tip: '自适应内容高度' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        fontSize('', '字体大小'),
        color('', '字体颜色'),
        color('placeholder', '提示字体颜色'),
        color('disabled', '禁用状态下的文字颜色'),
        stringProp('text-align', '文字对齐方式'),
        stringProp('count-text-align', '统计文字对齐方式'),
      ],
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          description: '输入框内容变化时的回调',
          template:
            "\tonChange(value,${extParams}){\n\t\t// 输入框内容变化时的回调\n\t\tconsole.log('onChange',value);\n\t}\n",
        },
        {
          name: 'onEnterPress',
          description: '按下回车的回调',
          template:
            "\tonPressEnter(event,${extParams}){\n\t\t// 按下回车的回调\n\t\tconsole.log('onPressEnter',event);\n\t}\n",
        },
        {
          name: 'onClear',
          description: '点击清除按钮后回调',
          template: "\tonClear(){\n\t\t// 点击清除按钮后回调\n\t\tconsole.log('onClear');\n\t}\n",
        },
        {
          name: 'onFocus',
          description: '获取焦点回调',
          template:
            "\tonFocus(event,${extParams}){\n\t\t// 获取焦点回调\n\t\tconsole.log('onFocus',event);\n\t}\n",
        },
        {
          name: 'onKeyDown',
          description: '按键按下时的回调',
          template:
            "\tonKeyDown(event,${extParams}){\n\t\t// 按键按下时的回调\n\t\tconsole.log('onKeyDown',event);\n\t}\n",
        },
        {
          name: 'onBlur',
          description: '移除焦点回调',
          template:
            "\tonBlur(event,${extParams}){\n\t\t// 移除焦点回调\n\t\tconsole.log('onBlur',event);\n\t}\n",
        },
      ],
    },
  },
};