import snippets from './snippets';

export default {
  snippets,
  componentName: 'PisellText.Editable',
  title: '可编辑文本',
  category: '数据输入',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellText',
    main: 'src/index.tsx',
    destructuring: true,
    subName: 'Editable',
  },
  props: [
    {
      name: 'value',
      title: {
        label: '文本内容',
        tip: '文本内容，支持字符串或多语言对象'
      },
      propType: {
        type: 'oneOfType',
        value: ['string', 'object']
      },
      setter: {
        componentName: 'MixedSetter',
        props: {
          setters: [
            'StringSetter',
            'JsonSetter'
          ]
        }
      },
    },
    {
      name: 'editable',
      title: {
        label: '启用编辑',
        tip: '启用编辑功能，支持布尔值或详细配置对象',
      },
      propType: {
        type: 'oneOfType',
        value: ['bool', 'object']
      },
      setter: {
        componentName: 'MixedSetter',
        props: {
          setters: [
            'BoolSetter',
            {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'disabled',
                      title: { label: '禁用编辑', tip: '是否禁用编辑功能' },
                      propType: 'bool',
                      setter: 'BoolSetter',
                      defaultValue: false,
                    },
                    {
                      name: 'maxLength',
                      title: { label: '最大长度', tip: '编辑时的最大字符长度' },
                      propType: 'number',
                      setter: 'NumberSetter',
                    }
                  ]
                }
              }
            }
          ]
        }
      },
      defaultValue: false,
    },
    {
      name: 'size',
      title: { label: '尺寸', tip: '输入框尺寸' },
      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              { title: 'Large', value: 'large' },
              { title: 'Middle', value: 'middle' },
              { title: 'Small', value: 'small' },
            ]
          }
        },
        'VariableSetter'
      ],
      defaultValue: 'middle',
    },
    {
      name: 'className',
      title: { label: '类名', tip: '自定义CSS类名' },
      propType: 'string',
      setter: 'StringSetter',
    },
  ],
  configure: {
    supports: {
      style: true,
      className: true,
      events: ['onChange'],
    }
  },
};