Skip to content

Commit

Permalink
Refactor #4602 - For Avatar/AvatarGroup
Browse files Browse the repository at this point in the history
  • Loading branch information
habubey committed Aug 7, 2023
1 parent 89cd19a commit 1a257dc
Show file tree
Hide file tree
Showing 7 changed files with 40 additions and 27 deletions.
6 changes: 3 additions & 3 deletions components/lib/avatar/Avatar.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
import { AvatarBase } from './AvatarBase';
import { PrimeReactContext } from '../api/Api';
import { useHandleStyle } from '../componentbase/ComponentBase';
import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
import { AvatarBase } from './AvatarBase';

export const Avatar = React.forwardRef((inProps, ref) => {
const context = React.useContext(PrimeReactContext);
Expand Down Expand Up @@ -78,7 +78,7 @@ export const Avatar = React.forwardRef((inProps, ref) => {
{
ref: elementRef,
style: props.style,
className: cx('root', { imageFailed })
className: classNames(props.className, cx('root', { imageFailed }))
},
AvatarBase.getOtherProps(props),
ptm('root')
Expand Down
18 changes: 7 additions & 11 deletions components/lib/avatar/AvatarBase.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,13 @@ 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
),
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
}),
label: 'p-avatar-text',
icon: 'p-avatar-icon'
};
Expand Down
8 changes: 0 additions & 8 deletions components/lib/avatargroup/AvatarGroup.css

This file was deleted.

10 changes: 6 additions & 4 deletions components/lib/avatargroup/AvatarGroup.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import * as React from 'react';
import { PrimeReactContext } from '../api/Api';
import { useHandleStyle } from '../componentbase/ComponentBase';
import { classNames, mergeProps } from '../utils/Utils';
import { AvatarGroupBase } from './AvatarGroupBase';
import { PrimeReactContext } from '../api/Api';

export const AvatarGroup = React.forwardRef((inProps, ref) => {
const context = React.useContext(PrimeReactContext);
const props = AvatarGroupBase.getProps(inProps, context);

const { ptm } = AvatarGroupBase.setMetaData({
const { ptm, cx, isUnstyled } = AvatarGroupBase.setMetaData({
props
});

useHandleStyle(AvatarGroupBase.css.styles, isUnstyled, { name: 'avatargroup' });

const elementRef = React.useRef(null);
const className = classNames('p-avatar-group p-component', props.className);

React.useImperativeHandle(ref, () => ({
props,
Expand All @@ -23,7 +25,7 @@ export const AvatarGroup = React.forwardRef((inProps, ref) => {
{
ref: elementRef,
style: props.style,
className
className: classNames(props.className, cx('root'))
},
AvatarGroupBase.getOtherProps(props),
ptm('root')
Expand Down
19 changes: 19 additions & 0 deletions components/lib/avatargroup/AvatarGroupBase.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,29 @@
import { ComponentBase } from '../componentbase/ComponentBase';

const classes = {
root: 'p-avatar-group p-component'
};

const styles = `
.p-avatar-group .p-avatar + .p-avatar {
margin-left: -1rem;
}
.p-avatar-group {
display: flex;
align-items: center;
}
`;

export const AvatarGroupBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'AvatarGroup',
style: null,
className: null,
children: undefined
},
css: {
classes,
styles
}
});
5 changes: 5 additions & 0 deletions components/lib/avatargroup/avatargroup.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@ export interface AvatarGroupProps extends Omit<React.DetailedHTMLProps<React.HTM
* @type {AvatarGroupPassThroughOptions}
*/
pt?: AvatarGroupPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}

/**
Expand Down
1 change: 0 additions & 1 deletion styles/primereact.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@
@import "../components/lib/tooltip/Tooltip.css";
@import "../components/lib/treetable/TreeTable.css";
@import "../components/lib/ripple/Ripple.css";
@import "../components/lib/avatargroup/AvatarGroup.css";
@import "../components/lib/virtualscroller/VirtualScroller.css";

0 comments on commit 1a257dc

Please sign in to comment.