Merge pull request #371 from webzard-io/feat/avatar

refactor avatar component

packages/arco-lib/src/components/Avatar.tsx

@@ -1,49 +1,55 @@
-import { Avatar as BaseAvatar } from "@arco-design/web-react";
-import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
-import { css } from "@emotion/css";
-import { Type, Static } from "@sinclair/typebox";
-import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
-import { AvatarPropsSpec as BaseAvatarPropsSpec } from "../generated/types/Avatar";
+import { Avatar as BaseAvatar } from '@arco-design/web-react';
+import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
+import { css } from '@emotion/css';
+import { Type, Static } from '@sinclair/typebox';
+import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
+import { AvatarPropsSpec as BaseAvatarPropsSpec } from '../generated/types/Avatar';
 
 const AvatarPropsSpec = Type.Object({
   ...BaseAvatarPropsSpec,
 });
 const AvatarStateSpec = Type.Object({});
 
-const AvatarImpl: ComponentImpl<Static<typeof AvatarPropsSpec>> = (props) => {
-  const { elementRef, slotsElements, customStyle } = props;
-  const { ...cProps } = getComponentProps(props);
+const AvatarImpl: ComponentImpl<Static<typeof AvatarPropsSpec>> = props => {
+  const { slotsElements, elementRef, customStyle } = props;
+  const { type, src, text, ...cProps } = getComponentProps(props);
 
   return (
-    <BaseAvatar ref={elementRef} className={css(customStyle?.content)} {...cProps}>
-      {slotsElements.content}
+    <BaseAvatar
+      ref={elementRef}
+      className={css(customStyle?.content)}
+      {...cProps}
+      triggerIcon={slotsElements.triggerIcon}
+    >
+      {type === 'img' ? <img src={src} /> : text}
     </BaseAvatar>
   );
 };
 
 const exampleProperties: Static<typeof AvatarPropsSpec> = {
-  shape: "circle",
-  triggerType: "button",
-  size:50
+  shape: 'circle',
+  triggerType: 'button',
+  size: 50,
+  type: 'text',
 };
 
 const options = {
-  version: "arco/v1",
+  version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
-    name: "avatar",
-    displayName: "Avatar",
+    name: 'avatar',
+    displayName: 'Avatar',
     exampleProperties,
     annotations: {
-      category: "Display",
-    }
+      category: 'Display',
+    },
   },
   spec: {
     properties: AvatarPropsSpec,
     state: AvatarStateSpec,
     methods: {},
-    slots: ["content"],
-    styleSlots: ["content"],
+    slots: ['triggerIcon'],
+    styleSlots: ['content'],
     events: [],
   },
 };

packages/arco-lib/src/generated/types/Avatar.ts

@@ -5,16 +5,50 @@ import { StringUnion } from '../../sunmao-helper';
 
 export const AvatarPropsSpec = {
   shape: StringUnion(['circle', 'square'], {
-    title:'Shape',
+    title: 'Shape',
     category: Category.Style
   }),
-  size:Type.Number({
-    title:'Size',
+  size: Type.Number({
+    title: 'Size',
     category: Category.Style
   }),
-  triggerType: StringUnion(['button', 'mask'],{
-    title:'Trigger Type',
+  type: StringUnion(['img', 'text'], {
+    title: 'Type',
+    category: Category.Basic
+  }),
+  src: Type.Optional(Type.String({
+    title: 'Src',
     category: Category.Basic,
-    description:'Clickable avatar interaction type'
+    conditions: [
+      {
+        key: 'type',
+        value: 'img'
+      }
+    ]
+  })),
+  text: Type.Optional(Type.String({
+    title: 'Text',
+    category: Category.Basic,
+    conditions: [
+      {
+        key: 'type',
+        value: 'text'
+      }
+    ]
+  })),
+  autoFixFontSize: Type.Optional(Type.Boolean({
+    title: 'Auto Fix Font Size',
+    category: Category.Basic,
+    conditions: [
+      {
+        key: 'type',
+        value: 'text'
+      }
+    ]
+  })),
+  triggerType: StringUnion(['button', 'mask'], {
+    title: 'Trigger Type',
+    category: Category.Basic,
+    description: 'Clickable avatar interaction type'
   })
 };