From 6da2d1dfc8882dbe23fa07a174ea4fa6b1da8ece Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Wed, 24 Jul 2019 08:52:50 +0200 Subject: [PATCH] refactor(Avatar): Replace withStyles HOC with forwardRef implementation --- packages/main/__karma_snapshots__/Avatar.md | 108 ++++------ packages/main/__karma_snapshots__/CheckBox.md | 2 +- .../src/components/Avatar/Avatar.karma.tsx | 2 +- packages/main/src/components/Avatar/index.tsx | 192 +++++++++--------- 4 files changed, 143 insertions(+), 161 deletions(-) diff --git a/packages/main/__karma_snapshots__/Avatar.md b/packages/main/__karma_snapshots__/Avatar.md index c826497f3cf..fb002849c00 100644 --- a/packages/main/__karma_snapshots__/Avatar.md +++ b/packages/main/__karma_snapshots__/Avatar.md @@ -6,11 +6,9 @@ - - - - - + + + @@ -22,11 +20,9 @@ - - - - - + + + @@ -38,11 +34,9 @@ - - - - - + + + @@ -54,11 +48,9 @@ - - - - - + + + @@ -70,11 +62,9 @@ - - - - - + + + @@ -86,11 +76,9 @@ - - - - - + + + @@ -102,11 +90,9 @@ - - - - - + + + @@ -118,11 +104,9 @@ - - - - - + + + @@ -134,11 +118,9 @@ - - - - - + + + @@ -150,11 +132,9 @@ - - - - - + + + @@ -166,11 +146,9 @@ - - - - - + + + @@ -182,11 +160,9 @@ - - - - - + + + @@ -198,13 +174,11 @@ - - - - JD - - - + + + JD + + diff --git a/packages/main/__karma_snapshots__/CheckBox.md b/packages/main/__karma_snapshots__/CheckBox.md index b77f76286bd..299e8db0cfd 100644 --- a/packages/main/__karma_snapshots__/CheckBox.md +++ b/packages/main/__karma_snapshots__/CheckBox.md @@ -4,7 +4,7 @@ ``` - + diff --git a/packages/main/src/components/Avatar/Avatar.karma.tsx b/packages/main/src/components/Avatar/Avatar.karma.tsx index f80ce72c5b4..15ae69b5af7 100644 --- a/packages/main/src/components/Avatar/Avatar.karma.tsx +++ b/packages/main/src/components/Avatar/Avatar.karma.tsx @@ -67,7 +67,7 @@ describe('Avatar', () => { it('enter key down', () => { const callback = sinon.spy(); const wrapper = mountThemedComponent(); - wrapper.find(Avatar).simulate('keyDown', { keyCode: KeyCodes.ENTER }); + wrapper.find(Avatar).simulate('keyDown', { key: 'Enter' }); expect(callback.called).to.equal(true); }); diff --git a/packages/main/src/components/Avatar/index.tsx b/packages/main/src/components/Avatar/index.tsx index 438ea9bfc44..eb14f34c9d1 100644 --- a/packages/main/src/components/Avatar/index.tsx +++ b/packages/main/src/components/Avatar/index.tsx @@ -1,7 +1,8 @@ -import { Event, KeyCodes, withStyles } from '@ui5/webcomponents-react-base'; -import React, { CSSProperties, PureComponent } from 'react'; -import { ClassProps } from '../../interfaces/ClassProps'; +import { Event } from '@ui5/webcomponents-react-base'; +import React, { CSSProperties, forwardRef, Ref, useCallback } from 'react'; +import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; +import { JSSTheme } from '../../interfaces/JSSTheme'; import { AvatarShape } from '../../lib/AvatarShape'; import { AvatarSize } from '../../lib/AvatarSize'; import styles from './Avatar.jss'; @@ -17,93 +18,100 @@ export interface AvatarPropTypes extends CommonProps { customFontSize?: CSSProperties['width']; } -export interface AvatarPropsInternal extends AvatarPropTypes, CommonProps, ClassProps {} - -@withStyles(styles) -export class Avatar extends PureComponent { - static defaultProps = { - size: AvatarSize.S, - shape: AvatarShape.Circle, - initials: null, - image: null, - onClick: null, - customDisplaySize: '3rem', - customFontSize: '1.125rem' - }; - - private handleKeyDown = (e) => { - if (e.keyCode === KeyCodes.ENTER) { - this.props.onClick(Event.of(this, e)); - } - }; - - private handleOnClick = (e) => { - this.props.onClick(Event.of(this, e)); - }; - - render() { - const { - initials, - size, - shape, - image, - onClick, - classes, - customFontSize, - customDisplaySize, - children, - className, - style, - tooltip, - innerRef, - slot - } = this.props as AvatarPropsInternal; - - const cssClasses = [classes.avatar]; - const inlineStyle: CSSProperties = {}; - if (size === AvatarSize.Custom) { - inlineStyle.fontSize = customFontSize; - inlineStyle.width = customDisplaySize; - inlineStyle.height = customDisplaySize; - inlineStyle.lineHeight = customDisplaySize; - } else { - cssClasses.push(classes[`size${size}`]); - } - - inlineStyle['--sapUiContentNonInteractiveIconColor'] = 'var(--sapContent_ContrastIconColor)'; - - if (shape === AvatarShape.Circle) { - cssClasses.push(classes.circle); - } - - if (image) { - inlineStyle.backgroundImage = `url(${image})`; - } - - if (onClick) { - inlineStyle.cursor = 'pointer'; - } - - if (className) { - cssClasses.push(className); - } - if (style) { - Object.assign(inlineStyle, style); - } - - return ( - - {initials ? initials : children} - - ); +const useStyles = createUseStyles(styles); + +const Avatar = forwardRef((props: AvatarPropTypes, ref: Ref) => { + const { + initials, + size, + shape, + image, + onClick, + customFontSize, + customDisplaySize, + children, + className, + style, + tooltip, + slot + } = props; + + const classes = useStyles(); + + const cssClasses = [classes.avatar]; + const inlineStyle: CSSProperties = {}; + if (size === AvatarSize.Custom) { + inlineStyle.fontSize = customFontSize; + inlineStyle.width = customDisplaySize; + inlineStyle.height = customDisplaySize; + inlineStyle.lineHeight = customDisplaySize; + } else { + cssClasses.push(classes[`size${size}`]); } -} + + inlineStyle['--sapUiContentNonInteractiveIconColor'] = 'var(--sapContent_ContrastIconColor)'; + + if (shape === AvatarShape.Circle) { + cssClasses.push(classes.circle); + } + + if (image) { + inlineStyle.backgroundImage = `url(${image})`; + } + + if (onClick) { + inlineStyle.cursor = 'pointer'; + } + + if (className) { + cssClasses.push(className); + } + if (style) { + Object.assign(inlineStyle, style); + } + + const handleKeyDown = useCallback( + (e) => { + if (e.key === 'Enter') { + onClick(Event.of(null, e)); + } + }, + [onClick] + ); + + const handleOnClick = useCallback( + (e) => { + onClick(Event.of(null, e)); + }, + [onClick] + ); + + return ( + + {initials ? initials : children} + + ); +}); + +Avatar.defaultProps = { + size: AvatarSize.S, + shape: AvatarShape.Circle, + initials: null, + image: null, + onClick: null, + customDisplaySize: '3rem', + customFontSize: '1.125rem' +}; + +Avatar.displayName = 'Avatar'; + +export { Avatar };