refactor(Bar): Functional Component with forwardRef (#136)

SAP · Sep 24, 2019 · 2279d4b · 2279d4b
1 parent 7ab3122
commit 2279d4b
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 96 deletions.
diff --git a/packages/main/src/components/Bar/Bar.jss.ts b/packages/main/src/components/Bar/Bar.jss.ts
@@ -1,21 +1,11 @@
-import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
-
-/**
- * Style Class Generator Function
- *
- * @param {Object} themeContext - Current Theme Context by JSS Provider.
- * @param {string} obj.theme - Current Theme (sap_fiori_3)
- * @param {string} obj.contentDensity - Current Content Density (Cozy, Compact)
- * @param {object} obj.parameters - Theming parameters (e.g. LabelColor)
- */
-const styles = ({ theme, contentDensity }) => ({
+const styles = {
   // outer container, controlling height and width
   bar: {
     width: '100%',
     display: 'block',
     position: 'relative',
-    height: ContentDensity.Compact === contentDensity ? '2.5rem' : '2.75rem',
-    lineHeight: ContentDensity.Compact === contentDensity ? '2.5rem' : '2.75rem',
+    height: '2.75rem',
+    lineHeight: '2.75rem',
     '& ui5-button': {
       display: 'flex'
     }
@@ -43,7 +33,7 @@ const styles = ({ theme, contentDensity }) => ({
   inner: {
     display: 'inline-block',
     padding: '0 0.5rem 0 0.5rem',
-    height: ContentDensity.Compact === contentDensity ? '2.5rem' : '2.75rem'
+    height: '2.75rem'
   },
   // right container
   right: {
@@ -55,7 +45,17 @@ const styles = ({ theme, contentDensity }) => ({
     textAlign: 'right',
     display: 'flex',
     alignItems: 'center'
+  },
+
+  compact: {
+    '&$bar': {
+      height: '2.5rem',
+      lineHeight: '2.5rem'
+    },
+    '& $inner': {
+      height: '2.5rem'
+    }
   }
-});
+};
 
 export default styles;
diff --git a/packages/main/src/components/Bar/__snapshots__/Bar.test.tsx.snap b/packages/main/src/components/Bar/__snapshots__/Bar.test.tsx.snap
@@ -2,31 +2,31 @@
 
 exports[`Bar Render all content 1`] = `
 <div
-  class="Bar-bar-"
+  class="Bar--bar-"
   data-bar-part="Root"
 >
   <div
-    class="Bar-left-"
+    class="Bar--left-"
     data-bar-part="Left"
   >
     <div>
       Content Left
     </div>
   </div>
   <div
-    class="Bar-center-"
+    class="Bar--center-"
     data-bar-part="Center"
   >
     <div
-      class="Bar-inner-"
+      class="Bar--inner-"
     >
       <div>
         Content Middle
       </div>
     </div>
   </div>
   <div
-    class="Bar-right-"
+    class="Bar--right-"
     data-bar-part="Right"
   >
     <div>
@@ -38,23 +38,23 @@ exports[`Bar Render all content 1`] = `
 
 exports[`Bar Renders with default Props 1`] = `
 <div
-  class="Bar-bar-"
+  class="Bar--bar-"
   data-bar-part="Root"
 >
   <div
-    class="Bar-left-"
+    class="Bar--left-"
     data-bar-part="Left"
   />
   <div
-    class="Bar-center-"
+    class="Bar--center-"
     data-bar-part="Center"
   >
     <div
-      class="Bar-inner-"
+      class="Bar--inner-"
     />
   </div>
   <div
-    class="Bar-right-"
+    class="Bar--right-"
     data-bar-part="Right"
   />
 </div>

diff --git a/packages/main/src/components/Bar/index.tsx b/packages/main/src/components/Bar/index.tsx
@@ -1,8 +1,9 @@
-import { withStyles } from '@ui5/webcomponents-react-base/lib/withStyles';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
-import React, { Component } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
+import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
+import React, { FC, forwardRef, Ref } from 'react';
+import { createUseStyles, useTheme } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './Bar.jss';
 
 export interface BarPropTypes extends CommonProps {
@@ -11,52 +12,43 @@ export interface BarPropTypes extends CommonProps {
   renderContentRight?: () => JSX.Element;
 }
 
-interface BarInternalProps extends BarPropTypes, ClassProps {}
-
-@withStyles(styles)
-export class Bar extends Component<BarPropTypes> {
-  static defaultProps = {
-    renderContentLeft: () => null,
-    renderContentMiddle: () => null,
-    renderContentRight: () => null
-  };
-
-  render() {
-    const {
-      classes,
-      renderContentLeft,
-      renderContentMiddle,
-      renderContentRight,
-      className,
-      style,
-      tooltip,
-      innerRef,
-      slot
-    } = this.props as BarInternalProps;
-
-    const cssClasses = StyleClassHelper.of(classes.bar);
-    if (className) {
-      cssClasses.put(className);
-    }
-    return (
-      <div
-        data-bar-part="Root"
-        className={cssClasses.toString()}
-        style={style}
-        title={tooltip}
-        slot={slot}
-        ref={innerRef}
-      >
-        <div data-bar-part="Left" className={classes.left}>
-          {renderContentLeft()}
-        </div>
-        <div data-bar-part="Center" className={classes.center}>
-          <div className={classes.inner}>{renderContentMiddle()}</div>
-        </div>
-        <div data-bar-part="Right" className={classes.right}>
-          {renderContentRight()}
-        </div>
-      </div>
-    );
+const useStyles = createUseStyles(styles, { name: 'Bar' });
+
+const Bar: FC<BarPropTypes> = forwardRef((props: BarPropTypes, ref: Ref<HTMLDivElement>) => {
+  const { renderContentLeft, renderContentMiddle, renderContentRight, className, style, tooltip, slot } = props;
+
+  const classes = useStyles();
+
+  const cssClasses = StyleClassHelper.of(classes.bar);
+  if (className) {
+    cssClasses.put(className);
   }
-}
+
+  const { contentDensity } = useTheme() as JSSTheme;
+  if (contentDensity === ContentDensity.Compact) {
+    cssClasses.put(classes.compact);
+  }
+
+  return (
+    <div data-bar-part="Root" className={cssClasses.toString()} style={style} title={tooltip} slot={slot} ref={ref}>
+      <div data-bar-part="Left" className={classes.left}>
+        {renderContentLeft()}
+      </div>
+      <div data-bar-part="Center" className={classes.center}>
+        <div className={classes.inner}>{renderContentMiddle()}</div>
+      </div>
+      <div data-bar-part="Right" className={classes.right}>
+        {renderContentRight()}
+      </div>
+    </div>
+  );
+});
+
+Bar.displayName = 'Bar';
+Bar.defaultProps = {
+  renderContentLeft: () => null,
+  renderContentMiddle: () => null,
+  renderContentRight: () => null
+};
+
+export { Bar };
diff --git a/packages/main/src/components/Page/Page.test.tsx b/packages/main/src/components/Page/Page.test.tsx
@@ -1,26 +1,28 @@
-import { renderThemedComponent, ThemedComponent } from '@shared/tests/utils';
-import { shallow } from 'enzyme';
-import React from 'react';
+import { renderThemedComponent } from '@shared/tests/utils';
 import { Page } from '@ui5/webcomponents-react/lib/Page';
-
-const renderPage = (props = {}) =>
-  ThemedComponent(
-    <div style={{ height: '100vh', width: '100vw' }}>
-      <Page title="Page Demo" showFooter showHeader {...props}>
-        Page Content
-      </Page>
-    </div>
-  );
+import React from 'react';
 
 describe('Page', () => {
   test('Basic Page', () => {
-    const wrapper = shallow(renderPage()).render();
-    expect(wrapper.html()).toMatchSnapshot();
+    const wrapper = renderThemedComponent(
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <Page title="Page Demo" showFooter showHeader>
+          Page Content
+        </Page>
+      </div>
+    );
+    expect(wrapper).toMatchSnapshot();
   });
 
   test('Basic Page w/o back button', () => {
-    const wrapper = shallow(renderPage({ showBackButton: false })).render();
-    expect(wrapper.html()).toMatchSnapshot();
+    const wrapper = renderThemedComponent(
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <Page title="Page Demo" showFooter showHeader showBackButton={false}>
+          Page Content
+        </Page>
+      </div>
+    );
+    expect(wrapper).toMatchSnapshot();
   });
 
   test('Without footer and Header', () => {
@@ -29,6 +31,6 @@ describe('Page', () => {
         Page Content
       </Page>
     );
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
 });