Skip to content

Commit 685d1ec

Browse files
MarcusNotheisMarcusNotheis
authored
refactor(Avatar): Replace withStyles HOC with forwardRef implementation (#72)
1 parent b505ab9 commit 685d1ec

File tree

4 files changed

+143
-161
lines changed

4 files changed

+143
-161
lines changed

‎packages/main/__karma_snapshots__/Avatar.md

Lines changed: 41 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@
66
<ThemeProvider withToastContainer={false}>
77
<JssProvider generateId={[Function]}>
88
<ThemeProvider theme={{...}}>
9-
<WithStyles(Avatar) size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
10-
<Avatar size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
11-
<span className="Avatar-avatar--- Avatar-sizeXL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
12-
</Avatar>
13-
</WithStyles(Avatar)>
9+
<Avatar size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
10+
<span className="-avatar--- -sizeXL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
11+
</Avatar>
1412
</ThemeProvider>
1513
</JssProvider>
1614
</ThemeProvider>
@@ -22,11 +20,9 @@
2220
<ThemeProvider withToastContainer={false}>
2321
<JssProvider generateId={[Function]}>
2422
<ThemeProvider theme={{...}}>
25-
<WithStyles(Avatar) size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
26-
<Avatar size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
27-
<span className="Avatar-avatar--- Avatar-sizeXL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
28-
</Avatar>
29-
</WithStyles(Avatar)>
23+
<Avatar size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
24+
<span className="-avatar--- -sizeXL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
25+
</Avatar>
3026
</ThemeProvider>
3127
</JssProvider>
3228
</ThemeProvider>
@@ -38,11 +34,9 @@
3834
<ThemeProvider withToastContainer={false}>
3935
<JssProvider generateId={[Function]}>
4036
<ThemeProvider theme={{...}}>
41-
<WithStyles(Avatar) size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
42-
<Avatar size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
43-
<span className="Avatar-avatar--- Avatar-sizeL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
44-
</Avatar>
45-
</WithStyles(Avatar)>
37+
<Avatar size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
38+
<span className="-avatar--- -sizeL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
39+
</Avatar>
4640
</ThemeProvider>
4741
</JssProvider>
4842
</ThemeProvider>
@@ -54,11 +48,9 @@
5448
<ThemeProvider withToastContainer={false}>
5549
<JssProvider generateId={[Function]}>
5650
<ThemeProvider theme={{...}}>
57-
<WithStyles(Avatar) size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
58-
<Avatar size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
59-
<span className="Avatar-avatar--- Avatar-sizeL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
60-
</Avatar>
61-
</WithStyles(Avatar)>
51+
<Avatar size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
52+
<span className="-avatar--- -sizeL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
53+
</Avatar>
6254
</ThemeProvider>
6355
</JssProvider>
6456
</ThemeProvider>
@@ -70,11 +62,9 @@
7062
<ThemeProvider withToastContainer={false}>
7163
<JssProvider generateId={[Function]}>
7264
<ThemeProvider theme={{...}}>
73-
<WithStyles(Avatar) size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
74-
<Avatar size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
75-
<span className="Avatar-avatar--- Avatar-sizeM--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
76-
</Avatar>
77-
</WithStyles(Avatar)>
65+
<Avatar size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
66+
<span className="-avatar--- -sizeM--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
67+
</Avatar>
7868
</ThemeProvider>
7969
</JssProvider>
8070
</ThemeProvider>
@@ -86,11 +76,9 @@
8676
<ThemeProvider withToastContainer={false}>
8777
<JssProvider generateId={[Function]}>
8878
<ThemeProvider theme={{...}}>
89-
<WithStyles(Avatar) size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
90-
<Avatar size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
91-
<span className="Avatar-avatar--- Avatar-sizeM---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
92-
</Avatar>
93-
</WithStyles(Avatar)>
79+
<Avatar size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
80+
<span className="-avatar--- -sizeM---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
81+
</Avatar>
9482
</ThemeProvider>
9583
</JssProvider>
9684
</ThemeProvider>
@@ -102,11 +90,9 @@
10290
<ThemeProvider withToastContainer={false}>
10391
<JssProvider generateId={[Function]}>
10492
<ThemeProvider theme={{...}}>
105-
<WithStyles(Avatar) size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
106-
<Avatar size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
107-
<span className="Avatar-avatar--- Avatar-sizeS--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
108-
</Avatar>
109-
</WithStyles(Avatar)>
93+
<Avatar size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
94+
<span className="-avatar--- -sizeS--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
95+
</Avatar>
11096
</ThemeProvider>
11197
</JssProvider>
11298
</ThemeProvider>
@@ -118,11 +104,9 @@
118104
<ThemeProvider withToastContainer={false}>
119105
<JssProvider generateId={[Function]}>
120106
<ThemeProvider theme={{...}}>
121-
<WithStyles(Avatar) size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
122-
<Avatar size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
123-
<span className="Avatar-avatar--- Avatar-sizeS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
124-
</Avatar>
125-
</WithStyles(Avatar)>
107+
<Avatar size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
108+
<span className="-avatar--- -sizeS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
109+
</Avatar>
126110
</ThemeProvider>
127111
</JssProvider>
128112
</ThemeProvider>
@@ -134,11 +118,9 @@
134118
<ThemeProvider withToastContainer={false}>
135119
<JssProvider generateId={[Function]}>
136120
<ThemeProvider theme={{...}}>
137-
<WithStyles(Avatar) size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
138-
<Avatar size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
139-
<span className="Avatar-avatar--- Avatar-sizeXS--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
140-
</Avatar>
141-
</WithStyles(Avatar)>
121+
<Avatar size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
122+
<span className="-avatar--- -sizeXS--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
123+
</Avatar>
142124
</ThemeProvider>
143125
</JssProvider>
144126
</ThemeProvider>
@@ -150,11 +132,9 @@
150132
<ThemeProvider withToastContainer={false}>
151133
<JssProvider generateId={[Function]}>
152134
<ThemeProvider theme={{...}}>
153-
<WithStyles(Avatar) size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
154-
<Avatar size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
155-
<span className="Avatar-avatar--- Avatar-sizeXS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
156-
</Avatar>
157-
</WithStyles(Avatar)>
135+
<Avatar size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
136+
<span className="-avatar--- -sizeXS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
137+
</Avatar>
158138
</ThemeProvider>
159139
</JssProvider>
160140
</ThemeProvider>
@@ -166,11 +146,9 @@
166146
<ThemeProvider withToastContainer={false}>
167147
<JssProvider generateId={[Function]}>
168148
<ThemeProvider theme={{...}}>
169-
<WithStyles(Avatar) size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
170-
<Avatar size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
171-
<span className="Avatar-avatar--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
172-
</Avatar>
173-
</WithStyles(Avatar)>
149+
<Avatar size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
150+
<span className="-avatar--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
151+
</Avatar>
174152
</ThemeProvider>
175153
</JssProvider>
176154
</ThemeProvider>
@@ -182,11 +160,9 @@
182160
<ThemeProvider withToastContainer={false}>
183161
<JssProvider generateId={[Function]}>
184162
<ThemeProvider theme={{...}}>
185-
<WithStyles(Avatar) size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
186-
<Avatar size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
187-
<span className="Avatar-avatar---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
188-
</Avatar>
189-
</WithStyles(Avatar)>
163+
<Avatar size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
164+
<span className="-avatar---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
165+
</Avatar>
190166
</ThemeProvider>
191167
</JssProvider>
192168
</ThemeProvider>
@@ -198,13 +174,11 @@
198174
<ThemeProvider withToastContainer={false}>
199175
<JssProvider generateId={[Function]}>
200176
<ThemeProvider theme={{...}}>
201-
<WithStyles(Avatar) size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
202-
<Avatar size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" innerRef={{...}} classes={{...}} theme={{...}}>
203-
<span className="Avatar-avatar--- Avatar-sizeXL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]}>
204-
JD
205-
</span>
206-
</Avatar>
207-
</WithStyles(Avatar)>
177+
<Avatar size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
178+
<span className="-avatar--- -sizeXL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]}>
179+
JD
180+
</span>
181+
</Avatar>
208182
</ThemeProvider>
209183
</JssProvider>
210184
</ThemeProvider>

‎packages/main/__karma_snapshots__/CheckBox.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
```
66
<ThemeProvider withToastContainer={false}>
7-
<JssProvider generateId={[Function]} id={{...}}>
7+
<JssProvider generateId={[Function]}>
88
<ThemeProvider theme={{...}}>
99
<CheckBox valueState="None">
1010
<ui5-checkbox value-state="None" class="" />

‎packages/main/src/components/Avatar/Avatar.karma.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ describe('Avatar', () => {
6767
it('enter key down', () => {
6868
const callback = sinon.spy();
6969
const wrapper = mountThemedComponent(<Avatar size={AvatarSize.XL} initials="JD" onClick={callback} />);
70-
wrapper.find(Avatar).simulate('keyDown', { keyCode: KeyCodes.ENTER });
70+
wrapper.find(Avatar).simulate('keyDown', { key: 'Enter' });
7171
expect(callback.called).to.equal(true);
7272
});
7373

0 commit comments

Comments
 (0)