Skip to content

Commit c285ee6

Browse files
vberschMarcusNotheis
vbersch
authored and
MarcusNotheis
committed
refactor(Custom Components): Expose HTML Element via ref in every component (#54)
BREAKING CHANGE All Components now expose their root html node/the encapsulated Web Component via ref instead of the React instance.
1 parent fcb5694 commit c285ee6

File tree

50 files changed

+479
-384
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+479
-384
lines changed

‎packages/base/src/hooks/useConsolidatedRef.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { RefObject, useEffect, useMemo, useRef } from 'react';
2+
3+
export const useConsolidatedRef = <T>(ref): RefObject<T> => {
4+
const localPopoverRef: RefObject<T> = useRef(null);
5+
6+
const consolidatedRef = useMemo(() => {
7+
if (!ref || typeof ref === 'function') {
8+
return localPopoverRef;
9+
}
10+
return ref;
11+
}, [ref]);
12+
13+
useEffect(() => {
14+
if (typeof ref === 'function') {
15+
// @ts-ignore
16+
ref(consolidatedRef.current);
17+
}
18+
}, [consolidatedRef.current]);
19+
20+
return consolidatedRef;
21+
};

‎packages/base/src/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Optional from './Optional';
1717
import StyleClassHelper from './StyleClassHelper';
1818
import { deprecationNotice, pushElementBackInScreen } from './Util';
1919
import { createGenerateClassName } from './withStyles/createGenerateClassName';
20+
import { useConsolidatedRef } from './hooks/useConsolidatedRef';
2021

2122
export {
2223
StyleClassHelper,
@@ -36,5 +37,6 @@ export {
3637
sap_fiori_3,
3738
bootstrap,
3839
withStyles,
39-
createGenerateClassName
40+
createGenerateClassName,
41+
useConsolidatedRef
4042
};

‎packages/base/src/withStyles/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
22
import React, { ComponentType, ForwardRefExoticComponent, RefAttributes, RefObject } from 'react';
33
// @ts-ignore
44
import { createUseStyles, useTheme } from 'react-jss';
5+
import { useConsolidatedRef } from '../hooks/useConsolidatedRef';
56

67
const getDisplayName = (Component) => Component.displayName || Component.name || 'Component';
78
const wrapComponentName = (componentName) => `WithStyles(${componentName})`;
@@ -22,7 +23,9 @@ export function withStyles<T>(styles): any {
2223
const classes = useStyles(props);
2324
const theme = useTheme();
2425

25-
return <Component {...props} ref={ref} classes={classes} theme={theme} />;
26+
const consolidatedRef = useConsolidatedRef(ref);
27+
28+
return <Component {...props} innerRef={consolidatedRef} classes={classes} theme={theme} />;
2629
});
2730

2831
WithStyles.defaultProps = Component.defaultProps;

‎packages/charts/src/interfaces/CommonProps.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,5 @@ export interface CommonProps {
1515
* A tooltip which will be shown on hover
1616
*/
1717
tooltip?: string;
18+
slot?: string;
1819
}

‎packages/main/__karma_snapshots__/ActionSheet.md

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,20 @@
66
<ThemeProvider withToastContainer={false}>
77
<JssProvider generateId={[Function]} id={{...}}>
88
<ThemeProvider theme={{...}}>
9-
<WithStyles(ActionSheet) openBy={{...}} placement="Bottom">
10-
<ActionSheet openBy={{...}} placement="Bottom" classes={{...}} theme={{...}}>
11-
<Popover openBy={{...}} placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
12-
<div style={{...}} onClick={[Function]}>
13-
<Button design="Default">
14-
<ui5-button design="Default" class="" />
15-
</Button>
16-
</div>
17-
<WithWebComponent(Popover) placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
18-
<ui5-popover placement-type="Bottom" style={[undefined]} slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
19-
<ul className="ActionSheet-actionSheet---" />
20-
</ui5-popover>
21-
</WithWebComponent(Popover)>
22-
</Popover>
23-
</ActionSheet>
24-
</WithStyles(ActionSheet)>
9+
<ActionSheet openBy={{...}} placement="Bottom">
10+
<Popover openBy={{...}} placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
11+
<div style={{...}} onClick={[Function]}>
12+
<Button design="Default">
13+
<ui5-button design="Default" class="" />
14+
</Button>
15+
</div>
16+
<WithWebComponent(Popover) placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
17+
<ui5-popover placement-type="Bottom" style={[undefined]} slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
18+
<ul className="-actionSheet---" />
19+
</ui5-popover>
20+
</WithWebComponent(Popover)>
21+
</Popover>
22+
</ActionSheet>
2523
</ThemeProvider>
2624
</JssProvider>
2725
</ThemeProvider>

‎packages/main/__karma_snapshots__/AnalyticalCard.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<JssProvider generateId={[Function]} id={{...}}>
88
<ThemeProvider theme={{...}}>
99
<WithStyles(AnalyticalCard) renderHeader={[Function: renderHeader]}>
10-
<AnalyticalCard renderHeader={[Function: renderHeader]} classes={{...}} theme={{...}}>
10+
<AnalyticalCard renderHeader={[Function: renderHeader]} innerRef={{...}} classes={{...}} theme={{...}}>
1111
<div className="AnalyticalCard-card---" style={[undefined]} title={[undefined]}>
1212
<WithStyles(AnalyticalCardHeader) title="Title" subTitle="Subtitle" arrowIndicator="Down" indicatorState="Success" value="Value" valueState="Success" unit="Unit" target="Target" deviation="Deviation" loading={false} showIndicator={true} description="Description" onHeaderPress={{...}}>
13-
<AnalyticalCardHeader title="Title" subTitle="Subtitle" arrowIndicator="Down" indicatorState="Success" value="Value" valueState="Success" unit="Unit" target="Target" deviation="Deviation" loading={false} showIndicator={true} description="Description" onHeaderPress={{...}} classes={{...}} theme={{...}}>
13+
<AnalyticalCardHeader title="Title" subTitle="Subtitle" arrowIndicator="Down" indicatorState="Success" value="Value" valueState="Success" unit="Unit" target="Target" deviation="Deviation" loading={false} showIndicator={true} description="Description" onHeaderPress={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
1414
<div onClick={[Function]} className="AnalyticalCardHeader-cardHeader---" title={[undefined]} style={[undefined]}>
1515
<div className="AnalyticalCardHeader-headerContent---">
1616
<div className="AnalyticalCardHeader-headerText---">
@@ -44,7 +44,7 @@
4444
</Label>
4545
<div>
4646
<WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
47-
<Component renderWhitespace={false} wrapping={true} width={{...}} classes={{...}} theme={{...}}>
47+
<Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
4848
<span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
4949
Target
5050
</span>
@@ -60,7 +60,7 @@
6060
</Label>
6161
<div>
6262
<WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
63-
<Component renderWhitespace={false} wrapping={true} width={{...}} classes={{...}} theme={{...}}>
63+
<Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
6464
<span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
6565
Deviation
6666
</span>
@@ -79,7 +79,7 @@
7979
</WithStyles(AnalyticalCardHeader)>
8080
<div style={{...}}>
8181
<WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
82-
<Component renderWhitespace={false} wrapping={true} width={{...}} classes={{...}} theme={{...}}>
82+
<Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
8383
<span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
8484
I&#39;m a content!
8585
</span>

0 commit comments

Comments
 (0)