From 2d5d52598e6d1371feccf44f6858276b5f3d0e43 Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Thu, 1 Aug 2019 12:40:34 +0200 Subject: [PATCH 1/2] refactor(FlexBox): Replace withStyles HOC with forwardRef implementation --- .../src/components/FlexBox/FlexBox.test.tsx | 11 ++ .../__snapshots__/FlexBox.test.tsx.snap | 12 ++ .../src/components/FlexBox/demo.stories.tsx | 27 +++ .../main/src/components/FlexBox/index.tsx | 159 ++++++++---------- packages/main/src/enums/FlexBoxAlignItems.ts | 7 + packages/main/src/enums/FlexBoxDirection.ts | 6 + .../main/src/enums/FlexBoxJustifyContent.ts | 7 + packages/main/src/enums/FlexBoxWrap.ts | 5 + packages/main/src/lib/FlexBoxAlignItems.ts | 2 +- packages/main/src/lib/FlexBoxDirection.ts | 2 +- .../main/src/lib/FlexBoxJustifyContent.ts | 2 +- packages/main/src/lib/FlexBoxWrap.ts | 2 +- 12 files changed, 147 insertions(+), 95 deletions(-) create mode 100644 packages/main/src/components/FlexBox/__snapshots__/FlexBox.test.tsx.snap create mode 100644 packages/main/src/components/FlexBox/demo.stories.tsx create mode 100644 packages/main/src/enums/FlexBoxAlignItems.ts create mode 100644 packages/main/src/enums/FlexBoxDirection.ts create mode 100644 packages/main/src/enums/FlexBoxJustifyContent.ts create mode 100644 packages/main/src/enums/FlexBoxWrap.ts diff --git a/packages/main/src/components/FlexBox/FlexBox.test.tsx b/packages/main/src/components/FlexBox/FlexBox.test.tsx index a9f42f2fa6a..53035dcaf2c 100644 --- a/packages/main/src/components/FlexBox/FlexBox.test.tsx +++ b/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( + + Test 1 + + ); + expect(wrapper.render()).toMatchSnapshot(); + }); }); diff --git a/packages/main/src/components/FlexBox/__snapshots__/FlexBox.test.tsx.snap b/packages/main/src/components/FlexBox/__snapshots__/FlexBox.test.tsx.snap new file mode 100644 index 00000000000..32b4599f351 --- /dev/null +++ b/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`] = ` +
+ + Test 1 + +
+`; diff --git a/packages/main/src/components/FlexBox/demo.stories.tsx b/packages/main/src/components/FlexBox/demo.stories.tsx new file mode 100644 index 00000000000..bbe79fdf2d4 --- /dev/null +++ b/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', () => ( + + + + + + + +)); diff --git a/packages/main/src/components/FlexBox/index.tsx b/packages/main/src/components/FlexBox/index.tsx index 84ce481f270..9efee4046e0 100644 --- a/packages/main/src/components/FlexBox/index.tsx +++ b/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 } from 'react'; +import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { styles } from './Flexbox.jss'; +import { FlexBoxJustifyContent } from '../../lib/FlexBoxJustifyContent'; +import { FlexBoxAlignItems } from '../../lib/FlexBoxAlignItems'; +import { FlexBoxDirection } from '../../lib/FlexBoxDirection'; +import { FlexBoxWrap } from '../../lib/FlexBoxWrap'; -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,69 @@ export interface FlexBoxPropTypes extends CommonProps { children: ReactNode | ReactNodeArray; } -@withStyles(styles) -export class FlexBox extends Component { - static defaultProps = { - alignItems: FlexBoxAlignItems.Stretch, - direction: FlexBoxDirection.Row, - displayInline: false, - height: '', - justifyContent: FlexBoxJustifyContent.Start, - width: '', - wrap: FlexBoxWrap.NoWrap - }; - - 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 FlexBox: FC = forwardRef((props: FlexBoxPropTypes, ref: Ref) => { + const { + children, + justifyContent, + direction, + alignItems, + height, + width, + displayInline, + wrap, + style, + className, + tooltip, + slot + } = props; - if (displayInline) { - flexBoxClasses.put(classes.flexBoxDisplayInline); - } + 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}`]); - const inlineStyle = {} as CSSProperties; - if (height) { - inlineStyle.height = height; - } - if (width) { - inlineStyle.width = width; - } + if (displayInline) { + flexBoxClasses.put(classes.flexBoxDisplayInline); + } - if (className) { - flexBoxClasses.put(className); - } + const inlineStyle = {} as CSSProperties; + if (height) { + inlineStyle.height = height; + } + if (width) { + inlineStyle.width = width; + } - if (style) { - Object.assign(inlineStyle, style); - } + if (className) { + flexBoxClasses.put(className); + } - return ( -
- {children} -
- ); + if (style) { + Object.assign(inlineStyle, style); } -} + + return ( +
+ {children} +
+ ); +}); + +FlexBox.defaultProps = { + alignItems: FlexBoxAlignItems.Stretch, + direction: FlexBoxDirection.Row, + displayInline: false, + height: '', + justifyContent: FlexBoxJustifyContent.Start, + width: '', + wrap: FlexBoxWrap.NoWrap +}; +FlexBox.displayName = 'FlexBox'; + +export { FlexBox }; diff --git a/packages/main/src/enums/FlexBoxAlignItems.ts b/packages/main/src/enums/FlexBoxAlignItems.ts new file mode 100644 index 00000000000..23838db497c --- /dev/null +++ b/packages/main/src/enums/FlexBoxAlignItems.ts @@ -0,0 +1,7 @@ +export enum FlexBoxAlignItems { + Start = 'Start', + Center = 'Center', + End = 'End', + Baseline = 'Baseline', + Stretch = 'Stretch' +} diff --git a/packages/main/src/enums/FlexBoxDirection.ts b/packages/main/src/enums/FlexBoxDirection.ts new file mode 100644 index 00000000000..807111a4b63 --- /dev/null +++ b/packages/main/src/enums/FlexBoxDirection.ts @@ -0,0 +1,6 @@ +export enum FlexBoxDirection { + Column = 'Column', + ColumnReverse = 'ColumnReverse', + Row = 'Row', + RowReverse = 'RowReverse' +} diff --git a/packages/main/src/enums/FlexBoxJustifyContent.ts b/packages/main/src/enums/FlexBoxJustifyContent.ts new file mode 100644 index 00000000000..a8ed590bda4 --- /dev/null +++ b/packages/main/src/enums/FlexBoxJustifyContent.ts @@ -0,0 +1,7 @@ +export enum FlexBoxJustifyContent { + Start = 'Start', + Center = 'Center', + End = 'End', + SpaceAround = 'SpaceAround', + SpaceBetween = 'SpaceBetween' +} diff --git a/packages/main/src/enums/FlexBoxWrap.ts b/packages/main/src/enums/FlexBoxWrap.ts new file mode 100644 index 00000000000..6c9104af342 --- /dev/null +++ b/packages/main/src/enums/FlexBoxWrap.ts @@ -0,0 +1,5 @@ +export enum FlexBoxWrap { + NoWrap = 'NoWrap', + Wrap = 'Wrap', + WrapReverse = 'WrapReverse' +} diff --git a/packages/main/src/lib/FlexBoxAlignItems.ts b/packages/main/src/lib/FlexBoxAlignItems.ts index bd59df63746..9a95cedb29e 100644 --- a/packages/main/src/lib/FlexBoxAlignItems.ts +++ b/packages/main/src/lib/FlexBoxAlignItems.ts @@ -1,3 +1,3 @@ -import { FlexBoxAlignItems } from '../components/FlexBox'; +import { FlexBoxAlignItems } from '../enums/FlexBoxAlignItems'; export { FlexBoxAlignItems }; diff --git a/packages/main/src/lib/FlexBoxDirection.ts b/packages/main/src/lib/FlexBoxDirection.ts index 6226dd23a4c..eb642c20a3d 100644 --- a/packages/main/src/lib/FlexBoxDirection.ts +++ b/packages/main/src/lib/FlexBoxDirection.ts @@ -1,3 +1,3 @@ -import { FlexBoxDirection } from '../components/FlexBox'; +import { FlexBoxDirection } from '../enums/FlexBoxDirection'; export { FlexBoxDirection }; diff --git a/packages/main/src/lib/FlexBoxJustifyContent.ts b/packages/main/src/lib/FlexBoxJustifyContent.ts index 159252205cc..e20b1e2c091 100644 --- a/packages/main/src/lib/FlexBoxJustifyContent.ts +++ b/packages/main/src/lib/FlexBoxJustifyContent.ts @@ -1,3 +1,3 @@ -import { FlexBoxJustifyContent } from '../components/FlexBox'; +import { FlexBoxJustifyContent } from '../enums/FlexBoxJustifyContent'; export { FlexBoxJustifyContent }; diff --git a/packages/main/src/lib/FlexBoxWrap.ts b/packages/main/src/lib/FlexBoxWrap.ts index 9a1c3f15d4b..e43a8690f45 100644 --- a/packages/main/src/lib/FlexBoxWrap.ts +++ b/packages/main/src/lib/FlexBoxWrap.ts @@ -1,3 +1,3 @@ -import { FlexBoxWrap } from '../components/FlexBox'; +import { FlexBoxWrap } from '../enums/FlexBoxWrap'; export { FlexBoxWrap }; From 551bd56b815b17406f68c572c438d68edd8039fc Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Fri, 2 Aug 2019 07:58:34 +0200 Subject: [PATCH 2/2] WIP: Memoize inline styles --- .../main/src/components/FlexBox/index.tsx | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/main/src/components/FlexBox/index.tsx b/packages/main/src/components/FlexBox/index.tsx index 9efee4046e0..6c23316008a 100644 --- a/packages/main/src/components/FlexBox/index.tsx +++ b/packages/main/src/components/FlexBox/index.tsx @@ -1,12 +1,12 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base'; -import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react'; +import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; -import { styles } from './Flexbox.jss'; -import { FlexBoxJustifyContent } from '../../lib/FlexBoxJustifyContent'; 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'; const useStyles = createUseStyles(styles, { name: 'FlexBox' }); @@ -53,24 +53,26 @@ const FlexBox: FC = forwardRef((props: FlexBoxPropTypes, ref: flexBoxClasses.put(classes.flexBoxDisplayInline); } - const inlineStyle = {} as CSSProperties; - if (height) { - inlineStyle.height = height; - } - if (width) { - inlineStyle.width = width; - } - if (className) { flexBoxClasses.put(className); } - if (style) { - Object.assign(inlineStyle, style); - } + const memoizedStyles = useMemo(() => { + const innerStyles: CSSProperties = {}; + if (height) { + innerStyles.height = height; + } + if (width) { + innerStyles.width = width; + } + if (style) { + Object.assign(innerStyles, style); + } + return innerStyles; + }, [height, width, style]); return ( -
+
{children}
);