Skip to content

Commit

Permalink
refactor(Avatar): Replace withStyles HOC with forwardRef implementati…
Browse files Browse the repository at this point in the history 
…on (#72)
  • Loading branch information
@MarcusNotheis
MarcusNotheis authored Jul 25, 2019
1 parent b505ab9 commit 685d1ec
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 161 deletions.
108 changes: 41 additions & 67 deletions packages/main/__karma_snapshots__/Avatar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeXL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeXL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -22,11 +20,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeXL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeXL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -38,11 +34,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -54,11 +48,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -70,11 +62,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeM--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeM--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -86,11 +76,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeM---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeM---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -102,11 +90,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeS--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeS--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -118,11 +104,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -134,11 +118,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeXS--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeXS--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -150,11 +132,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeXS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeXS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -166,11 +146,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -182,11 +160,9 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</WithStyles(Avatar)>
<Avatar size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand All @@ -198,13 +174,11 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(Avatar) size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<Avatar size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
<span className="Avatar-avatar--- Avatar-sizeXL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]}>
JD
</span>
</Avatar>
</WithStyles(Avatar)>
<Avatar size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
<span className="-avatar--- -sizeXL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]}>
JD
</span>
</Avatar>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand Down
2 changes: 1 addition & 1 deletion packages/main/__karma_snapshots__/CheckBox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

```
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]} id={{...}}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<CheckBox valueState="None">
<ui5-checkbox value-state="None" class="" />
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/components/Avatar/Avatar.karma.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ describe('Avatar', () => {
it('enter key down', () => {
const callback = sinon.spy();
const wrapper = mountThemedComponent(<Avatar size={AvatarSize.XL} initials="JD" onClick={callback} />);
wrapper.find(Avatar).simulate('keyDown', { keyCode: KeyCodes.ENTER });
wrapper.find(Avatar).simulate('keyDown', { key: 'Enter' });
expect(callback.called).to.equal(true);
});

Expand Down
Loading

0 comments on commit 685d1ec

Please sign in to comment.