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.

Author: vbersch

packages/base/src/hooks/useConsolidatedRef.ts

@@ -0,0 +1,21 @@
+import { RefObject, useEffect, useMemo, useRef } from 'react';
+
+export const useConsolidatedRef = <T>(ref): RefObject<T> => {
+  const localPopoverRef: RefObject<T> = useRef(null);
+
+  const consolidatedRef = useMemo(() => {
+    if (!ref || typeof ref === 'function') {
+      return localPopoverRef;
+    }
+    return ref;
+  }, [ref]);
+
+  useEffect(() => {
+    if (typeof ref === 'function') {
+      // @ts-ignore
+      ref(consolidatedRef.current);
+    }
+  }, [consolidatedRef.current]);
+
+  return consolidatedRef;
+};

packages/base/src/index.ts

@@ -17,6 +17,7 @@ import Optional from './Optional';
 import StyleClassHelper from './StyleClassHelper';
 import { deprecationNotice, pushElementBackInScreen } from './Util';
 import { createGenerateClassName } from './withStyles/createGenerateClassName';
+import { useConsolidatedRef } from './hooks/useConsolidatedRef';
 
 export {
   StyleClassHelper,
@@ -36,5 +37,6 @@ export {
   sap_fiori_3,
   bootstrap,
   withStyles,
-  createGenerateClassName
+  createGenerateClassName,
+  useConsolidatedRef
 };

packages/base/src/withStyles/index.tsx

@@ -2,6 +2,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 import React, { ComponentType, ForwardRefExoticComponent, RefAttributes, RefObject } from 'react';
 // @ts-ignore
 import { createUseStyles, useTheme } from 'react-jss';
+import { useConsolidatedRef } from '../hooks/useConsolidatedRef';
 
 const getDisplayName = (Component) => Component.displayName || Component.name || 'Component';
 const wrapComponentName = (componentName) => `WithStyles(${componentName})`;
@@ -22,7 +23,9 @@ export function withStyles<T>(styles): any {
       const classes = useStyles(props);
       const theme = useTheme();
 
-      return <Component {...props} ref={ref} classes={classes} theme={theme} />;
+      const consolidatedRef = useConsolidatedRef(ref);
+
+      return <Component {...props} innerRef={consolidatedRef} classes={classes} theme={theme} />;
     });
 
     WithStyles.defaultProps = Component.defaultProps;

packages/charts/src/interfaces/CommonProps.ts

@@ -15,4 +15,5 @@ export interface CommonProps {
    * A tooltip which will be shown on hover
    */
   tooltip?: string;
+  slot?: string;
 }

packages/main/__karma_snapshots__/ActionSheet.md

@@ -6,22 +6,20 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]} id={{...}}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(ActionSheet) openBy={{...}} placement="Bottom">
-        <ActionSheet openBy={{...}} placement="Bottom" classes={{...}} theme={{...}}>
-          <Popover openBy={{...}} placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-            <div style={{...}} onClick={[Function]}>
-              <Button design="Default">
-                <ui5-button design="Default" class="" />
-              </Button>
-            </div>
-            <WithWebComponent(Popover) placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-              <ui5-popover placement-type="Bottom" style={[undefined]} slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
-                <ul className="ActionSheet-actionSheet---" />
-              </ui5-popover>
-            </WithWebComponent(Popover)>
-          </Popover>
-        </ActionSheet>
-      </WithStyles(ActionSheet)>
+      <ActionSheet openBy={{...}} placement="Bottom">
+        <Popover openBy={{...}} placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+          <div style={{...}} onClick={[Function]}>
+            <Button design="Default">
+              <ui5-button design="Default" class="" />
+            </Button>
+          </div>
+          <WithWebComponent(Popover) placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+            <ui5-popover placement-type="Bottom" style={[undefined]} slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
+              <ul className="-actionSheet---" />
+            </ui5-popover>
+          </WithWebComponent(Popover)>
+        </Popover>
+      </ActionSheet>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>

packages/main/__karma_snapshots__/AnalyticalCard.md

@@ -7,10 +7,10 @@
   <JssProvider generateId={[Function]} id={{...}}>
     <ThemeProvider theme={{...}}>
       <WithStyles(AnalyticalCard) renderHeader={[Function: renderHeader]}>
-        <AnalyticalCard renderHeader={[Function: renderHeader]} classes={{...}} theme={{...}}>
+        <AnalyticalCard renderHeader={[Function: renderHeader]} innerRef={{...}} classes={{...}} theme={{...}}>
           <div className="AnalyticalCard-card---" style={[undefined]} title={[undefined]}>
             <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={{...}}>
-              <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={{...}}>
+              <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={{...}}>
                 <div onClick={[Function]} className="AnalyticalCardHeader-cardHeader---" title={[undefined]} style={[undefined]}>
                   <div className="AnalyticalCardHeader-headerContent---">
                     <div className="AnalyticalCardHeader-headerText---">
@@ -44,7 +44,7 @@
                           </Label>
                           <div>
                             <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                              <Component renderWhitespace={false} wrapping={true} width={{...}} classes={{...}} theme={{...}}>
+                              <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
                                 <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
                                   Target
                                 </span>
@@ -60,7 +60,7 @@
                           </Label>
                           <div>
                             <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                              <Component renderWhitespace={false} wrapping={true} width={{...}} classes={{...}} theme={{...}}>
+                              <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
                                 <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
                                   Deviation
                                 </span>
@@ -79,7 +79,7 @@
             </WithStyles(AnalyticalCardHeader)>
             <div style={{...}}>
               <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                <Component renderWhitespace={false} wrapping={true} width={{...}} classes={{...}} theme={{...}}>
+                <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
                   <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
                     I&#39;m a content!
                   </span>