refactor(FlexBox): Replace withStyles HOC with forwardRef implementat…

…ion (#78)

packages/main/src/components/FlexBox/FlexBox.test.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { FlexBox } from '../../lib/FlexBox';
 import { FlexBoxJustifyContent } from '../../lib/FlexBoxJustifyContent';
 
+declare const expect: any;
+
 describe('FlexBox', () => {
   test('JustifyContent: End', () => {
     const wrapper = mountThemedComponent(
@@ -34,4 +36,13 @@ describe('FlexBox', () => {
     const node = wrapper.getDOMNode();
     expect(window.getComputedStyle(node).display).toEqual('inline-flex');
   });
+
+  test('with Custom Class Names and Style', () => {
+    const wrapper = mountThemedComponent(
+      <FlexBox className="testClass" style={{ backgroundColor: '#000' }}>
+        <span>Test 1</span>
+      </FlexBox>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

packages/main/src/components/FlexBox/__snapshots__/FlexBox.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlexBox with Custom Class Names and Style 1`] = `
+<div
+  class="FlexBox--flexBox- FlexBox--flexBoxDirectionRow- FlexBox--justifyContentStart- FlexBox--alignItemsStretch- FlexBox--flexWrapNoWrap- testClass"
+  style="background-color: rgb(0, 0, 0);"
+>
+  <span>
+    Test 1
+  </span>
+</div>
+`;

packages/main/src/components/FlexBox/demo.stories.tsx

@@ -0,0 +1,27 @@
+import { boolean, select, text } from '@storybook/addon-knobs/';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { FlexBox } from '../../lib/FlexBox';
+import { FlexBoxAlignItems } from '../../lib/FlexBoxAlignItems';
+import { FlexBoxDirection } from '../../lib/FlexBoxDirection';
+import { FlexBoxJustifyContent } from '../../lib/FlexBoxJustifyContent';
+import { FlexBoxWrap } from '../../lib/FlexBoxWrap';
+import { Label } from '../../lib/Label';
+
+storiesOf('Components | FlexBox', module).add('Default', () => (
+  <FlexBox
+    justifyContent={select('justifyContent', FlexBoxJustifyContent, FlexBoxJustifyContent.Start)}
+    alignItems={select('alignItems', FlexBoxAlignItems, FlexBoxAlignItems.Stretch)}
+    direction={select('direction', FlexBoxDirection, FlexBoxDirection.Row)}
+    wrap={select('wrap', FlexBoxWrap, FlexBoxWrap.NoWrap)}
+    height={text('height', 'auto')}
+    width={text('width', '500px')}
+    displayInline={boolean('displayInline', false)}
+  >
+    <Label>Item 1</Label>
+    <Label>Item 2</Label>
+    <Label>Item 3</Label>
+    <Label>Item 4</Label>
+    <Label>Item 5</Label>
+  </FlexBox>
+));

packages/main/src/components/FlexBox/index.tsx

@@ -1,37 +1,14 @@
-import { StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { Component, CSSProperties, ReactNode, ReactNodeArray } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
+import { StyleClassHelper } from '@ui5/webcomponents-react-base';
+import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react';
+import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { FlexBoxAlignItems } from '../../lib/FlexBoxAlignItems';
+import { FlexBoxDirection } from '../../lib/FlexBoxDirection';
+import { FlexBoxJustifyContent } from '../../lib/FlexBoxJustifyContent';
+import { FlexBoxWrap } from '../../lib/FlexBoxWrap';
 import { styles } from './Flexbox.jss';
 
-export enum FlexBoxJustifyContent {
-  Start = 'Start',
-  Center = 'Center',
-  End = 'End',
-  SpaceAround = 'SpaceAround',
-  SpaceBetween = 'SpaceBetween'
-}
-
-export enum FlexBoxAlignItems {
-  Start = 'Start',
-  Center = 'Center',
-  End = 'End',
-  Baseline = 'Baseline',
-  Stretch = 'Stretch'
-}
-
-export enum FlexBoxDirection {
-  Column = 'Column',
-  ColumnReverse = 'ColumnReverse',
-  Row = 'Row',
-  RowReverse = 'RowReverse'
-}
-
-export enum FlexBoxWrap {
-  NoWrap = 'NoWrap',
-  Wrap = 'Wrap',
-  WrapReverse = 'WrapReverse'
-}
+const useStyles = createUseStyles(styles, { name: 'FlexBox' });
 
 export interface FlexBoxPropTypes extends CommonProps {
   alignItems?: FlexBoxAlignItems;
@@ -45,69 +22,71 @@ export interface FlexBoxPropTypes extends CommonProps {
   children: ReactNode | ReactNodeArray;
 }
 
-@withStyles(styles)
-export class FlexBox extends Component<FlexBoxPropTypes> {
-  static defaultProps = {
-    alignItems: FlexBoxAlignItems.Stretch,
-    direction: FlexBoxDirection.Row,
-    displayInline: false,
-    height: '',
-    justifyContent: FlexBoxJustifyContent.Start,
-    width: '',
-    wrap: FlexBoxWrap.NoWrap
-  };
+const FlexBox: FC<FlexBoxPropTypes> = forwardRef((props: FlexBoxPropTypes, ref: Ref<HTMLDivElement>) => {
+  const {
+    children,
+    justifyContent,
+    direction,
+    alignItems,
+    height,
+    width,
+    displayInline,
+    wrap,
+    style,
+    className,
+    tooltip,
+    slot
+  } = props;
 
-  render() {
-    const {
-      children,
-      classes,
-      justifyContent,
-      direction,
-      alignItems,
-      height,
-      width,
-      displayInline,
-      wrap,
-      style,
-      className,
-      tooltip,
-      innerRef,
-      slot
-    } = this.props as FlexBoxPropTypes & ClassProps;
-    const flexBoxClasses = StyleClassHelper.of(classes.flexBox);
-    // direction
-    flexBoxClasses.put(classes[`flexBoxDirection${direction}`]);
-    // justify content
-    flexBoxClasses.put(classes[`justifyContent${justifyContent}`]);
-    // align items
-    flexBoxClasses.put(classes[`alignItems${alignItems}`]);
-    // wrapping
-    flexBoxClasses.put(classes[`flexWrap${wrap}`]);
+  const classes = useStyles();
+  const flexBoxClasses = StyleClassHelper.of(classes.flexBox);
+  // direction
+  flexBoxClasses.put(classes[`flexBoxDirection${direction}`]);
+  // justify content
+  flexBoxClasses.put(classes[`justifyContent${justifyContent}`]);
+  // align items
+  flexBoxClasses.put(classes[`alignItems${alignItems}`]);
+  // wrapping
+  flexBoxClasses.put(classes[`flexWrap${wrap}`]);
 
-    if (displayInline) {
-      flexBoxClasses.put(classes.flexBoxDisplayInline);
-    }
+  if (displayInline) {
+    flexBoxClasses.put(classes.flexBoxDisplayInline);
+  }
 
-    const inlineStyle = {} as CSSProperties;
+  if (className) {
+    flexBoxClasses.put(className);
+  }
+
+  const memoizedStyles = useMemo(() => {
+    const innerStyles: CSSProperties = {};
     if (height) {
-      inlineStyle.height = height;
+      innerStyles.height = height;
     }
     if (width) {
-      inlineStyle.width = width;
+      innerStyles.width = width;
     }
-
-    if (className) {
-      flexBoxClasses.put(className);
-    }
-
     if (style) {
-      Object.assign(inlineStyle, style);
+      Object.assign(innerStyles, style);
     }
+    return innerStyles;
+  }, [height, width, style]);
 
-    return (
-      <div ref={innerRef} className={flexBoxClasses.valueOf()} style={inlineStyle} title={tooltip} slot={slot}>
-        {children}
-      </div>
-    );
-  }
-}
+  return (
+    <div ref={ref} className={flexBoxClasses.valueOf()} style={memoizedStyles} title={tooltip} slot={slot}>
+      {children}
+    </div>
+  );
+});
+
+FlexBox.defaultProps = {
+  alignItems: FlexBoxAlignItems.Stretch,
+  direction: FlexBoxDirection.Row,
+  displayInline: false,
+  height: '',
+  justifyContent: FlexBoxJustifyContent.Start,
+  width: '',
+  wrap: FlexBoxWrap.NoWrap
+};
+FlexBox.displayName = 'FlexBox';
+
+export { FlexBox };

packages/main/src/enums/FlexBoxAlignItems.ts

@@ -0,0 +1,7 @@
+export enum FlexBoxAlignItems {
+  Start = 'Start',
+  Center = 'Center',
+  End = 'End',
+  Baseline = 'Baseline',
+  Stretch = 'Stretch'
+}

packages/main/src/enums/FlexBoxDirection.ts

@@ -0,0 +1,6 @@
+export enum FlexBoxDirection {
+  Column = 'Column',
+  ColumnReverse = 'ColumnReverse',
+  Row = 'Row',
+  RowReverse = 'RowReverse'
+}

packages/main/src/enums/FlexBoxJustifyContent.ts

@@ -0,0 +1,7 @@
+export enum FlexBoxJustifyContent {
+  Start = 'Start',
+  Center = 'Center',
+  End = 'End',
+  SpaceAround = 'SpaceAround',
+  SpaceBetween = 'SpaceBetween'
+}

packages/main/src/enums/FlexBoxWrap.ts

@@ -0,0 +1,5 @@
+export enum FlexBoxWrap {
+  NoWrap = 'NoWrap',
+  Wrap = 'Wrap',
+  WrapReverse = 'WrapReverse'
+}

packages/main/src/lib/FlexBoxAlignItems.ts

@@ -1,3 +1,3 @@
-import { FlexBoxAlignItems } from '../components/FlexBox';
+import { FlexBoxAlignItems } from '../enums/FlexBoxAlignItems';
 
 export { FlexBoxAlignItems };

packages/main/src/lib/FlexBoxDirection.ts

@@ -1,3 +1,3 @@
-import { FlexBoxDirection } from '../components/FlexBox';
+import { FlexBoxDirection } from '../enums/FlexBoxDirection';
 
 export { FlexBoxDirection };

packages/main/src/lib/FlexBoxJustifyContent.ts

@@ -1,3 +1,3 @@
-import { FlexBoxJustifyContent } from '../components/FlexBox';
+import { FlexBoxJustifyContent } from '../enums/FlexBoxJustifyContent';
 
 export { FlexBoxJustifyContent };

packages/main/src/lib/FlexBoxWrap.ts

@@ -1,3 +1,3 @@
-import { FlexBoxWrap } from '../components/FlexBox';
+import { FlexBoxWrap } from '../enums/FlexBoxWrap';
 
 export { FlexBoxWrap };