feat: avatar rn

xiaoyatong · Jun 11, 2024 · f4c8c88 · f4c8c88
1 parent 48935d7
commit f4c8c88
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 77 deletions.
diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
@@ -22,4 +22,6 @@ exports = module.exports = [
   'swiper',
   'textarea',
   'indicator',
+  'avatar',
+  'avatargroup',
 ]
diff --git a/packages/nutui-taro-demo-rn/src/exhibition/pages/avatar/index.tsx b/packages/nutui-taro-demo-rn/src/exhibition/pages/avatar/index.tsx
@@ -1 +1,2 @@
-export default <>button</>;
+import Demo from '@/packages/avatar/demo.taro'
+export default Demo
diff --git a/scripts/rn/copy-file.js b/scripts/rn/copy-file.js
@@ -47,9 +47,14 @@ const copyFile = async (from, to, success, isSingle = false) => {
     adapted.map((item) => {
       if (item) {
         if (
-          !['cellgroup', 'row', 'col', 'griditem', 'hoverbuttonitem'].includes(
-            item
-          )
+          ![
+            'cellgroup',
+            'row',
+            'col',
+            'griditem',
+            'hoverbuttonitem',
+            'avatargroup',
+          ].includes(item)
         ) {
           modify(
             `${targetBaseUrl}/packages/${item}/demo.taro.tsx`,

diff --git a/src/packages/avatar/avatar.scss b/src/packages/avatar/avatar.scss
@@ -10,35 +10,75 @@
   flex: 0 0 auto; // 防止被压缩
   text-align: center;
 
-  .avatar-img {
-    position: absolute;
+  &-large {
+    width: $avatar-large-width;
+    height: $avatar-large-height;
+    line-height: $avatar-large-height;
+  }
+
+  &-small {
+    width: $avatar-small-width;
+    height: $avatar-small-height;
+    line-height: $avatar-small-height;
+  }
+
+  &-normal {
+    width: $avatar-normal-width;
+    height: $avatar-normal-height;
+    line-height: $avatar-normal-height;
+  }
+
+  &-round {
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  &-square {
+    border-radius: $avatar-square;
+  }
+
+  &-img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // position: absolute;
     width: 100%;
     height: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    // top: 50%;
+    // left: 50%;
+    // transform: translate(-50%, -50%);
     flex-shrink: 0;
   }
 
-  .icon {
-    background-size: 100% 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  &-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    // background-size: 100% 100%;
+    // position: absolute;
+    // top: 50%;
+    // left: 50%;
+    // transform: translate(-50%, -50%);
   }
 
   .nut-icon-img {
     width: 100%;
     height: 100%;
   }
 
-  .text {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    overflow: hidden;
+  &-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // display: inline-block;
+    // width: 100%;
+    // height: 100%;
+    // text-align: center;
+    // overflow: hidden;
+
+    width: $avatar-normal-width;
+    height: $avatar-normal-height;
   }
 }
 
@@ -56,30 +96,3 @@
     transform: translate(50%, -50%);
   }
 }
-
-.nut-avatar-large {
-  width: $avatar-large-width;
-  height: $avatar-large-height;
-  line-height: $avatar-large-height;
-}
-
-.nut-avatar-small {
-  width: $avatar-small-width;
-  height: $avatar-small-height;
-  line-height: $avatar-small-height;
-}
-
-.nut-avatar-normal {
-  width: $avatar-normal-width;
-  height: $avatar-normal-height;
-  line-height: $avatar-normal-height;
-}
-
-.nut-avatar-round {
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.nut-avatar-square {
-  border-radius: $avatar-square;
-}
diff --git a/src/packages/avatar/avatar.taro.tsx b/src/packages/avatar/avatar.taro.tsx
@@ -9,7 +9,6 @@ import type { MouseEvent } from 'react'
 import Taro, { getEnv } from '@tarojs/taro'
 import { View, ITouchEvent } from '@tarojs/components'
 import classNames from 'classnames'
-import { User } from '@nutui/icons-react-taro'
 import Image from '@/packages/image/index.taro'
 import { AvatarContext } from '@/packages/avatargroup/context'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -173,7 +172,7 @@ export const Avatar: FunctionComponent<
             <>
               {src && (
                 <Image
-                  className="avatar-img"
+                  className="nut-avatar-img"
                   src={src}
                   style={{ objectFit: fit }}
                   onError={errorEvent}
@@ -182,11 +181,11 @@ export const Avatar: FunctionComponent<
               {React.isValidElement(icon)
                 ? React.cloneElement<any>(icon, {
                     ...icon.props,
-                    className: `${icon.props.className || ''} icon`,
+                    className: `${icon.props.className || ''} nut-avatar-icon`,
                   })
                 : null}
-              {children && <span className="text">{children}</span>}
-              {!src && !icon && !children && <User className="icon" />}
+              {children && <View className="nut-avatar-text">{children}</View>}
+              {/* {!src && !icon && !children && <User className="nut-avatar-icon" />} */}
             </>
           )}
           {/* 折叠头像 */}

diff --git a/src/packages/avatar/avatar.tsx b/src/packages/avatar/avatar.tsx
@@ -155,7 +155,7 @@ export const Avatar: FunctionComponent<
             <>
               {src && (
                 <Image
-                  className="avatar-img"
+                  className="nut-avatar-img"
                   src={src}
                   alt={alt}
                   style={{ objectFit: fit }}
@@ -165,16 +165,18 @@ export const Avatar: FunctionComponent<
               {React.isValidElement(icon)
                 ? React.cloneElement<any>(icon, {
                     ...icon.props,
-                    className: `${icon.props.className || ''} icon`,
+                    className: `${icon.props.className || ''} nut-avatar-icon`,
                   })
                 : null}
-              {children && <span className="text">{children}</span>}
-              {!src && !icon && !children && <User className="icon" />}
+              {children && <span className="nut-avatar-text">{children}</span>}
+              {!src && !icon && !children && (
+                <User className="nut-avatar-icon" />
+              )}
             </>
           )}
           {/* 折叠头像 */}
           {showMax && (
-            <div className="text">
+            <div className="nut-avatar-text">
               {parent?.propAvatarGroup?.maxContent
                 ? parent?.propAvatarGroup?.maxContent
                 : `+ ${

diff --git a/src/packages/avatar/demo.scss b/src/packages/avatar/demo.scss
@@ -1,13 +1,9 @@
-.avatar-demo {
-  .nut-cell {
-    align-items: flex-end;
-    border-radius: 0;
+.cell-avatar,
+.avatar-demo .nut-cell {
+  align-items: flex-end;
+  border-radius: 0;
 
-    & > div {
-      margin-inline-end: 30px;
-    }
+  & > div {
+    margin-inline-end: 30px;
   }
 }
-.demo-avatar {
-  color: #fff;
-}
diff --git a/src/packages/avatar/demo.taro.tsx b/src/packages/avatar/demo.taro.tsx
@@ -62,37 +62,37 @@ const AvatarDemo = () => {
         } full avatar-demo`}
       >
         <View className="h2">{translated['67f78db5']}</View>
-        <Cell align="flex-end">
+        <Cell className="cell-avatar" align="flex-end">
           <Demo1 />
         </Cell>
         <View className="h2">{translated['3928b17e']}</View>
-        <Cell>
+        <Cell className="cell-avatar">
           <Demo2 />
         </Cell>
         <View className="h2">{translated['049b6a97']}</View>
-        <Cell>
+        <Cell className="cell-avatar">
           <Demo3 />
         </Cell>
         <View className="h2">{translated.a304dabf}</View>
-        <Cell>
+        <Cell className="cell-avatar">
           <Demo4 />
         </Cell>
         <View className="h2">{translated['89bca4e7']}</View>
-        <Cell>
+        <Cell className="cell-avatar">
           <Demo5 />
         </Cell>
         <View className="h2">{translated.e981579e}</View>
         <Demo6 />
         <View className="h2">{translated.f645fc65}</View>
-        <Cell>
+        <Cell className="cell-avatar">
           <Demo7 />
         </Cell>
         <View className="h2">{translated['43f00872']}</View>
-        <Cell>
+        <Cell className="cell-avatar">
           <Demo8 />
         </Cell>
         <View className="h2">{translated.f645fc66}</View>
-        <Cell>
+        <Cell className="cell-avatar">
           <Demo9 />
         </Cell>
       </ScrollView>

diff --git a/src/packages/avatar/demos/h5/demo4.tsx b/src/packages/avatar/demos/h5/demo4.tsx
@@ -6,7 +6,6 @@ const Demo4 = () => {
   return (
     <>
       <Avatar
-        className="demo-avatar"
         color="#fff"
         background="var(--nutui-color-primary)"
         icon={<User />}