Refactor #4602 - For Avatar

primefaces · Jul 13, 2023 · 0887106 · 0887106
1 parent 798ce3a
commit 0887106
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 51 deletions.
diff --git a/components/lib/avatar/Avatar.css b/components/lib/avatar/Avatar.css
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { classNames, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
+import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
 import { AvatarBase } from './AvatarBase';
 import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
 
 export const Avatar = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
@@ -10,7 +11,8 @@ export const Avatar = React.forwardRef((inProps, ref) => {
     const elementRef = React.useRef(null);
     const [imageFailed, setImageFailed] = React.useState(false);
 
-    const { ptm } = AvatarBase.setMetaData({
+    useStyle(AvatarBase.css.styles, { name: 'primereact_avatar_style' });
+    const { ptm, cx } = AvatarBase.setMetaData({
         props,
         state: {
             imageFailed: imageFailed
@@ -31,7 +33,7 @@ export const Avatar = React.forwardRef((inProps, ref) => {
         } else if (props.label) {
             const labelProps = mergeProps(
                 {
-                    className: 'p-avatar-text'
+                    className: cx('label')
                 },
                 ptm('label')
             );
@@ -40,7 +42,7 @@ export const Avatar = React.forwardRef((inProps, ref) => {
         } else if (props.icon) {
             const iconProps = mergeProps(
                 {
-                    className: 'p-avatar-icon'
+                    className: cx('icon')
                 },
                 ptm('icon')
             );
@@ -71,23 +73,11 @@ export const Avatar = React.forwardRef((inProps, ref) => {
         getElement: () => elementRef.current
     }));
 
-    const containerClassName = classNames(
-        'p-avatar p-component',
-        {
-            'p-avatar-image': ObjectUtils.isNotEmpty(props.image) && !imageFailed,
-            'p-avatar-circle': props.shape === 'circle',
-            'p-avatar-lg': props.size === 'large',
-            'p-avatar-xl': props.size === 'xlarge',
-            'p-avatar-clickable': !!props.onClick
-        },
-        props.className
-    );
-
     const rootProps = mergeProps(
         {
             ref: elementRef,
             style: props.style,
-            className: containerClassName
+            className: cx('root', { imageFailed })
         },
         AvatarBase.getOtherProps(props),
         ptm('root')

diff --git a/components/lib/avatar/AvatarBase.js b/components/lib/avatar/AvatarBase.js
@@ -1,4 +1,58 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils, classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, state }) =>
+        classNames(
+            'p-avatar p-component',
+            {
+                'p-avatar-image': ObjectUtils.isNotEmpty(props.image) && !state.imageFailed,
+                'p-avatar-circle': props.shape === 'circle',
+                'p-avatar-lg': props.size === 'large',
+                'p-avatar-xl': props.size === 'xlarge',
+                'p-avatar-clickable': !!props.onClick
+            },
+            props.className
+        ),
+    label: 'p-avatar-text',
+    icon: 'p-avatar-icon'
+};
+
+const styles = `
+.p-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1rem;
+}
+
+.p-avatar.p-avatar-image {
+    background-color: transparent;
+}
+
+.p-avatar-circle {
+    border-radius: 50%;
+}
+
+.p-avatar-circle img {
+    border-radius: 50%;
+}
+
+.p-avatar .p-avatar-icon {
+    font-size: 1rem;
+}
+
+.p-avatar img {
+    width: 100%;
+    height: 100%;
+}
+
+.p-avatar-clickable {
+    cursor: pointer;
+}
+`;
 
 export const AvatarBase = ComponentBase.extend({
     defaultProps: {
@@ -15,5 +69,9 @@ export const AvatarBase = ComponentBase.extend({
         style: null,
         template: null,
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });
diff --git a/styles/primereact.css b/styles/primereact.css
@@ -54,7 +54,6 @@
 @import "../components/lib/treetable/TreeTable.css";
 @import "../components/lib/image/Image.css";
 @import "../components/lib/ripple/Ripple.css";
-@import "../components/lib/avatar/Avatar.css";
 @import "../components/lib/avatargroup/AvatarGroup.css";
 @import "../components/lib/divider/Divider.css";
 @import "../components/lib/splitter/Splitter.css";