import snippets from './snippets';

export default {
  snippets,
  componentName: 'ColorPicker',
  title: '颜色选择器',
  category: '表单',
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "ColorPicker",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      name: 'allowClear',
      title: { label: '清除', tip: '允许清除选择的颜色' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'arrow',
      title: { label: '箭头', tip: '配置弹出的箭头' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'children',
      title: { label: '触发器', tip: '颜色选择器的触发器' },
      setter: 'SlotSetter',
    },
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: '默认内容' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'defaultFormat',
      title: { label: '格式', tip: '颜色格式默认的值' },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            {
              title: 'rgb',
              value: 'rgb',
            },
            {
              title: 'hex',
              value: 'hex',
            },
            {
              title: 'hsb',
              value: 'hsb',
            },
          ],
        },
      },
      propType: { type: 'oneOf', value: ['rgb', 'hex', 'hsb'] },
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'disabledAlpha',
      title: { label: '禁用透明度', tip: '禁用透明度' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'disabledFormat',
      title: { label: '禁用选择颜色格式', tip: '禁用选择颜色格式' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'destroyTooltipOnHide',
      title: { label: '关闭后是否销毁弹窗', tip: '关闭后是否销毁弹窗' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'format',
      title: { label: '颜色格式', tip: '颜色格式' },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            {
              title: 'rgb',
              value: 'rgb',
            },
            {
              title: 'hex',
              value: 'hex',
            },
            {
              title: 'hsb',
              value: 'hsb',
            },
          ],
        },
      },
      propType: { type: 'oneOf', value: ['rgb', 'hex', 'hsb'] },
    },
    {
      name: 'open',
      title: { label: '是否显示弹出窗口', tip: '是否显示弹出窗口' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'presets',
      title: { label: '预设的颜色', tip: '预设的颜色' },
      setter: "JsonSetter",
    },
    {
      name: 'placement',
      title: { label: '弹出窗口的位置', tip: '弹出窗口的位置' },
      propType: {
        type: 'oneOf',
        value: [
          'top',
          'left',
          'right',
          'bottom',
          'topLeft',
          'topRight',
          'bottomLeft',
          'bottomRight',
          'leftTop',
          'leftBottom',
          'rightTop',
          'rightBottom',
        ],
      },
      defaultValue: 'top',
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: [
            {
              title: '上',
              value: 'top',
            },
            {
              title: '左',
              value: 'left',
            },
            {
              title: '右',
              value: 'right',
            },
            {
              title: '下',
              value: 'bottom',
            },
            {
              title: '上左',
              value: 'topLeft',
            },
            {
              title: '上右',
              value: 'topRight',
            },
            {
              title: '下左',
              value: 'bottomLeft',
            },
            {
              title: '下右',
              value: 'bottomRight',
            },
            {
              title: '左上',
              value: 'leftTop',
            },
            {
              title: '左下',
              value: 'leftBottom',
            },
            {
              title: '右上',
              value: 'rightTop',
            },
            {
              title: '右下',
              value: 'rightBottom',
            },
          ],
        },
      },
    },
    {
      name: 'value',
      title: { label: '当前值', tip: '当前值' },
      propType: 'string',
      setter: 'StringSetter'
    },
    {
      name: 'showText',
      title: { label: '是否显示弹出窗口', tip: '是否显示弹出窗口' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'size',
      title: { label: '控件大小', tip: '控件大小' },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            {
              title: '大',
              value: 'large',
            },
            {
              title: '中',
              value: 'middle',
            },
            {
              title: '小',
              value: 'small',
            },
          ],
        },
      },
      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
      defaultValue: 'middle',
    },
    {
      name: 'trigger',
      title: { label: '触发模式', tip: '颜色选择器的触发模式' },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            {
              title: 'hover',
              value: 'hover',
            },
            {
              title: 'click',
              value: 'click',
            },
          ],
        },
      },
      propType: { type: 'oneOf', value: ['hover', 'click'] },
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(event, css,${extParams}){\n// 颜色变化的回调\nconsole.log('onChange',event, css);}",
        },
        {
          name: 'onChangeComplete',
          template:
            "onChangeComplete(event,${extParams}){\n// 颜色选择完成的回调，通过 onChangeComplete 对 value 受控时拖拽不会改变展示颜色\nconsole.log('onChangeComplete',event);}",
        },
        {
          name: 'onFormatChange',
          template: "onFormatChange(event,${extParams}){\n// 颜色格式变化的回调\nconsole.log('onFormatChange',event);}",
        },
        {
          name: 'onOpenChange',
          template:
            "onOpenChange(event,${extParams}){\n// 当 open 被改变时的回调\nconsole.log('onOpenChange',event);}",
        },
        {
          name: 'onClear',
          template:
            "onClear(event,${extParams}){\n// 清除的回调\nconsole.log('onClear',event);}",
        },
      ],
    },
  },
};