import snippets from "./snippets";

export default {
  snippets,
  componentName: "PisellAvatar",
  title: "头像",
  category: "数据展示",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "PisellAvatar",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      name: "icon",
      title: { label: "头像图标", tip: "icon | 设置头像的自定义图标" },
      propType: "node",
    },
    {
      name: "shape",
      title: { label: "头像形状", tip: "shape | 指定头像的形状" },
      propType: { type: "oneOf", value: ["circle", "square"] },
      defaultValue: "circle",
    },
    {
      name: "borderRadius",
      title: { label: "圆角度数", tip: "borderRadius | 方形头像的圆角大小" },
      propType: "number",
      defaultValue: 4,
      condition: {
        type: "JSFunction",
        value: "target => target.getProps().getPropValue('shape') === 'square'",
      },
    },
    {
      name: "size",
      title: { label: "尺寸", tip: "size | 设置头像的大小" },
      propType: {
        type: "oneOf",
        value: ["xs", "sm", "md", "lg", "xl", "xxl"],
      },
      defaultValue: "xs",
    },
    {
      name: "useTextAvatar",
      title: { label: "使用文本头像", tip: "useTextAvatar | 是否使用文本作为头像" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "children",
      title: { label: "文本内容", tip: "children | 文本头像的内容" },
      propType: "string",
      condition: {
        type: "JSFunction",
        value: "target => target.getProps().getPropValue('useTextAvatar')",
      },
    },
    {
      name: "src",
      title: { label: "图片地址", tip: "src | 图片类头像的资源地址" },
      propType: "string",
    },
    {
      name: "alt",
      title: {
        label: "替代文本",
        tip: "alt | 图像无法显示时的替代文本",
      },
      propType: "string",
      setter: "PisellI18nSetter",
    },
    {
      name: "onError",
      title: {
        label: "图片加载失败的事件",
        tip: "图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为",
      },
      propType: "func",
    },
    {
      name: "gap",
      title: {
        label: "文字边距",
        tip: "gap | 字符类型距离左右两侧边界单位像素",
      },
      propType: "number",
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: "onError",
          template:
            "onError(${extParams}){\n// 图片加载失败的事件\nconsole.log('onError');}",
        },
        {
          name: "onClick",
          template:
            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
        }
      ],
    },
  },
};