From 21cc7b888cd9106fcd356676b717fbd8d836b26d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 10 Jan 2020 17:36:25 +0100 Subject: [PATCH 1/6] -wip --- .../react/src/components/Flex/FlexItem.tsx | 3 +-- packages/react/src/utils/factories.ts | 8 ++---- packages/react/src/utils/mergeThemes.ts | 26 +++++++++++++++++++ packages/react/src/utils/renderComponent.tsx | 21 ++++++++++----- 4 files changed, 44 insertions(+), 14 deletions(-) diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx index 538fa30b26..534849557d 100644 --- a/packages/react/src/components/Flex/FlexItem.tsx +++ b/packages/react/src/components/Flex/FlexItem.tsx @@ -9,7 +9,6 @@ import { ChildrenComponentProps, ShorthandFactory, } from '../../utils' -import { mergeStyles } from '../../utils/mergeThemes' import { ComponentSlotStylesPrepared } from '../../themes/types' type ChildrenFunction = (params: { @@ -124,6 +123,6 @@ const applyStyles = ( // assuming element is Fluent UI element return React.cloneElement(element, { - styles: mergeStyles(styles.root || {}, element.props.styles), + styles: _.merge(styles.root || {}, element.props.styles), }) } diff --git a/packages/react/src/utils/factories.ts b/packages/react/src/utils/factories.ts index 8c0f4855c8..9ae5fb996b 100644 --- a/packages/react/src/utils/factories.ts +++ b/packages/react/src/utils/factories.ts @@ -9,7 +9,7 @@ import { ShorthandRenderFunction, ShorthandRenderer, } from '../types' -import { mergeStyles } from './mergeThemes' +// import { mergeStyles } from './mergeThemes' type HTMLTag = 'iframe' | 'img' | 'input' type ShorthandProp = 'children' | 'src' | 'type' @@ -250,11 +250,7 @@ function createShorthandFromValue

({ // Merge styles if (defaultProps.styles || overrideProps.styles || usersProps.styles) { - ;(props as any).styles = mergeStyles( - defaultProps.styles, - usersProps.styles, - overrideProps.styles, - ) + ;(props as any).styles = _.merge(defaultProps.styles, usersProps.styles, overrideProps.styles) } // ---------------------------------------- diff --git a/packages/react/src/utils/mergeThemes.ts b/packages/react/src/utils/mergeThemes.ts index c9f74626d1..a50ef0aab8 100644 --- a/packages/react/src/utils/mergeThemes.ts +++ b/packages/react/src/utils/mergeThemes.ts @@ -144,6 +144,32 @@ export const mergeComponentStyles__DEV = ( }, initial) } +const mergeComponentStylesCache = new WeakMap() + +export const mergeComponentStylesWithCache = ( + theme, + hashObj, + sources: (ComponentSlotStylesInput | null | undefined)[], +) => { + try { + if (!mergeComponentStylesCache.get(theme)) { + mergeComponentStylesCache.set(theme, {}) + } + + const hashVal = JSON.stringify(hashObj) + + if (!mergeComponentStylesCache.get(theme)[hashVal]) { + const value = mergeComponentStylesCache.get(theme) + value[hashVal] = mergeComponentStyles(...sources) + mergeComponentStylesCache.set(theme, value) + } + + return mergeComponentStylesCache.get(theme)[hashVal] + } catch (e) { + return mergeComponentStyles(...sources) + } +} + export const mergeComponentStyles = process.env.NODE_ENV === 'production' ? mergeComponentStyles__PROD : mergeComponentStyles__DEV diff --git a/packages/react/src/utils/renderComponent.tsx b/packages/react/src/utils/renderComponent.tsx index 518d2b8573..72a3827b73 100644 --- a/packages/react/src/utils/renderComponent.tsx +++ b/packages/react/src/utils/renderComponent.tsx @@ -25,7 +25,7 @@ import { ThemePrepared, } from '../themes/types' import { Props, ProviderContextPrepared } from '../types' -import { emptyTheme, mergeComponentStyles, mergeComponentVariables } from './mergeThemes' +import { emptyTheme, mergeComponentStylesWithCache, mergeComponentVariables } from './mergeThemes' import createAnimationStyles from './createAnimationStyles' import { isEnabled as isDebugEnabled } from './debug/debugEnabled' import { DebugData } from './debug/debugData' @@ -109,11 +109,20 @@ const renderComponent =

( : {} // Resolve styles using resolved variables, merge results, allow props.styles to override - const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles( - theme.componentStyles[displayName], - withDebugId({ root: props.design }, 'props.design'), - withDebugId({ root: props.styles }, 'props.styles'), - withDebugId({ root: animationCSSProp }, 'props.animation'), + const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStylesWithCache( + theme, + { + displayName, + design: props.design, + styles: props.styles, + animation: props.animation, + }, + [ + theme.componentStyles[displayName], + withDebugId({ root: props.design }, 'props.design'), + withDebugId({ root: props.styles }, 'props.styles'), + withDebugId({ root: animationCSSProp }, 'props.animation'), + ], ) const accessibility: ReactAccessibilityBehavior = getAccessibility( From d65c978832df4e41c0e44fd8e405ca197e740030 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 10 Jan 2020 17:47:33 +0100 Subject: [PATCH 2/6] -changed styles prop --- .../Types/InputInvertedExample.shorthand.tsx | 23 +++++++++++-------- .../TextAreaExampleInverted.shorthand.tsx | 23 +++++++++++-------- .../react/src/components/Flex/FlexItem.tsx | 3 ++- 3 files changed, 30 insertions(+), 19 deletions(-) diff --git a/docs/src/examples/components/Input/Types/InputInvertedExample.shorthand.tsx b/docs/src/examples/components/Input/Types/InputInvertedExample.shorthand.tsx index 93fab0dbce..24c5f88f3e 100644 --- a/docs/src/examples/components/Input/Types/InputInvertedExample.shorthand.tsx +++ b/docs/src/examples/components/Input/Types/InputInvertedExample.shorthand.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { Grid, Input } from '@fluentui/react' +import { Grid, Input, Provider } from '@fluentui/react' const InputExample = () => (

@@ -11,14 +11,19 @@ const InputExample = () => ( > - ({ - backgroundColor: siteVariables.colorScheme.default.background, - padding: '20px', - })} - > - - + {/* TODO: figure this out - changed because of restricting props styles to be only object :\ */} + ( + + + + )} + />
) diff --git a/docs/src/examples/components/TextArea/Variations/TextAreaExampleInverted.shorthand.tsx b/docs/src/examples/components/TextArea/Variations/TextAreaExampleInverted.shorthand.tsx index d94aabdd62..020fe2e782 100644 --- a/docs/src/examples/components/TextArea/Variations/TextAreaExampleInverted.shorthand.tsx +++ b/docs/src/examples/components/TextArea/Variations/TextAreaExampleInverted.shorthand.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { Grid, TextArea } from '@fluentui/react' +import { Grid, Provider, TextArea } from '@fluentui/react' const TextAreaExampleInverted = () => (
@@ -11,14 +11,19 @@ const TextAreaExampleInverted = () => ( >