From 228e290c1e38fbe59c89a719089791e42b299d68 Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Mon, 5 Aug 2019 15:20:51 +0200 Subject: [PATCH 1/2] fix: Re-enable passing refs to non-webcomponent components --- .../main/src/components/ActionSheet/index.tsx | 12 +- .../main/src/components/FilterItem/index.tsx | 190 +++++----- .../main/src/components/FlexBox/index.tsx | 112 +++--- .../main/src/components/ObjectPage/index.tsx | 344 +++++++++--------- .../components/ObjectPageSection/index.tsx | 4 +- .../components/ObjectPageSubSection/index.tsx | 6 +- .../main/src/components/Spinner/index.tsx | 58 +-- packages/main/src/components/Text/index.tsx | 48 +-- .../components/VariantManagement/index.tsx | 4 +- 9 files changed, 402 insertions(+), 376 deletions(-) diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx index 805ca2f524e..92bcb2059c8 100644 --- a/packages/main/src/components/ActionSheet/index.tsx +++ b/packages/main/src/components/ActionSheet/index.tsx @@ -1,5 +1,13 @@ import { Device, StyleClassHelper, useConsolidatedRef } from '@ui5/webcomponents-react-base'; -import React, { Children, cloneElement, forwardRef, ReactElement, ReactNode, RefObject, FC } from 'react'; +import React, { + Children, + cloneElement, + forwardRef, + ReactElement, + ReactNode, + RefForwardingComponent, + RefObject +} from 'react'; import { CommonProps } from '../../interfaces/CommonProps'; import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef'; import { ButtonDesign } from '../../lib/ButtonDesign'; @@ -17,7 +25,7 @@ export interface ActionSheetPropTypes extends CommonProps { const useStyles = createUseStyles(styles, { name: 'ActionSheet' }); -const ActionSheet: FC = forwardRef( +const ActionSheet: RefForwardingComponent = forwardRef( (props: ActionSheetPropTypes, ref: RefObject) => { const { children, placement, openBy, style, slot } = props; diff --git a/packages/main/src/components/FilterItem/index.tsx b/packages/main/src/components/FilterItem/index.tsx index 3f982e45139..ef0a9ae661e 100644 --- a/packages/main/src/components/FilterItem/index.tsx +++ b/packages/main/src/components/FilterItem/index.tsx @@ -1,5 +1,5 @@ import { Event, StyleClassHelper } from '@ui5/webcomponents-react-base'; -import React, { FC, forwardRef, ReactNode, RefObject, useMemo } from 'react'; +import React, { forwardRef, ReactNode, RefForwardingComponent, RefObject, useMemo } from 'react'; import { CommonProps } from '../../interfaces/CommonProps'; import { BusyIndicator } from '../../lib/BusyIndicator'; import { FilterType } from '../../lib/FilterType'; @@ -28,112 +28,114 @@ export interface FilterItemPropTypes extends CommonProps { const useStyles = createUseStyles(styles, { name: 'FilterItem' }); -const FilterItem: FC = forwardRef((props: FilterItemPropTypes, ref: RefObject) => { - const { - filterItems, - onChange, - type, - placeholder, - children, - loading, - changeEventName, - valueParamName, - label, - style, - tooltip - } = props as FilterItemPropTypes; - const classes = useStyles(); +const FilterItem: RefForwardingComponent = forwardRef( + (props: FilterItemPropTypes, ref: RefObject) => { + const { + filterItems, + onChange, + type, + placeholder, + children, + loading, + changeEventName, + valueParamName, + label, + style, + tooltip + } = props as FilterItemPropTypes; + const classes = useStyles(); - function getItemByKey(key) { - return filterItems.filter((item) => item.key === key)[0]; - } + function getItemByKey(key) { + return filterItems.filter((item) => item.key === key)[0]; + } - function onSelect(e) { - const selectedKey = e.getParameter('selectedOption').getAttribute('data-key'); - const item = getItemByKey(selectedKey) || filterItems[0]; - onChange(Event.of(null, e.getOriginalEvent(), { selectedItem: item })); - } + function onSelect(e) { + const selectedKey = e.getParameter('selectedOption').getAttribute('data-key'); + const item = getItemByKey(selectedKey) || filterItems[0]; + onChange(Event.of(null, e.getOriginalEvent(), { selectedItem: item })); + } - function onMultiCbChange(e) { - const selectedItems = e.getParameter('items'); - onChange( - Event.of(null, e.getOriginalEvent(), { - selectedItems: selectedItems.map((item) => { - return getItemByKey(item.getAttribute('data-key')); + function onMultiCbChange(e) { + const selectedItems = e.getParameter('items'); + onChange( + Event.of(null, e.getOriginalEvent(), { + selectedItems: selectedItems.map((item) => { + return getItemByKey(item.getAttribute('data-key')); + }) }) - }) - ); - } - - const filterComponent = useMemo(() => { - if (loading) { - return ( -
- -
); } - switch (type) { - case FilterType.Default: - return ; - case FilterType.MultiSelect: - return ( - - {filterItems.map((item) => ( - - {item.text} - - ))} - - ); - case FilterType.Select: + const filterComponent = useMemo(() => { + if (loading) { return ( - - ); - case FilterType.Custom: - return ( -
- {React.Children.map(children, (child) => { - return React.cloneElement(child as React.ReactElement, { - [changeEventName]: (event) => { - onSelect(event); - // @ts-ignore - if (child.props.hasOwnProperty(changeEventName)) { - // @ts-ignore - child.props[changeEventName](event); - } - }, - valueParameter: valueParamName, - style: { width: '100%' } - }); - })} +
+
); - } - }, [valueParamName, changeEventName, filterItems, loading, type, children]); + } - const filterItemClasses = StyleClassHelper.of(classes.filterItem); + switch (type) { + case FilterType.Default: + return ; + case FilterType.MultiSelect: + return ( + + {filterItems.map((item) => ( + + {item.text} + + ))} + + ); + case FilterType.Select: + return ( + + ); + case FilterType.Custom: + return ( +
+ {React.Children.map(children, (child) => { + return React.cloneElement(child as React.ReactElement, { + [changeEventName]: (event) => { + onSelect(event); + // @ts-ignore + if (child.props.hasOwnProperty(changeEventName)) { + // @ts-ignore + child.props[changeEventName](event); + } + }, + valueParameter: valueParamName, + style: { width: '100%' } + }); + })} +
+ ); + } + }, [valueParamName, changeEventName, filterItems, loading, type, children]); - return ( -
-
- - {filterComponent} + const filterItemClasses = StyleClassHelper.of(classes.filterItem); + + return ( +
+
+ + {filterComponent} +
-
- ); -}); + ); + } +); FilterItem.defaultProps = { placeholder: '', diff --git a/packages/main/src/components/FlexBox/index.tsx b/packages/main/src/components/FlexBox/index.tsx index 6c23316008a..7b77e50c8f6 100644 --- a/packages/main/src/components/FlexBox/index.tsx +++ b/packages/main/src/components/FlexBox/index.tsx @@ -1,5 +1,13 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base'; -import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; +import React, { + CSSProperties, + forwardRef, + ReactNode, + ReactNodeArray, + Ref, + RefForwardingComponent, + useMemo +} from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { FlexBoxAlignItems } from '../../lib/FlexBoxAlignItems'; @@ -22,61 +30,63 @@ export interface FlexBoxPropTypes extends CommonProps { children: ReactNode | ReactNodeArray; } -const FlexBox: FC = forwardRef((props: FlexBoxPropTypes, ref: Ref) => { - const { - children, - justifyContent, - direction, - alignItems, - height, - width, - displayInline, - wrap, - style, - className, - tooltip, - slot - } = props; +const FlexBox: RefForwardingComponent = forwardRef( + (props: FlexBoxPropTypes, ref: Ref) => { + const { + children, + justifyContent, + direction, + alignItems, + height, + width, + displayInline, + wrap, + style, + className, + tooltip, + slot + } = props; - 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 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 (className) { - flexBoxClasses.put(className); - } - - const memoizedStyles = useMemo(() => { - const innerStyles: CSSProperties = {}; - if (height) { - innerStyles.height = height; + if (displayInline) { + flexBoxClasses.put(classes.flexBoxDisplayInline); } - if (width) { - innerStyles.width = width; - } - if (style) { - Object.assign(innerStyles, style); + + if (className) { + flexBoxClasses.put(className); } - return innerStyles; - }, [height, width, style]); - return ( -
- {children} -
- ); -}); + 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} +
+ ); + } +); FlexBox.defaultProps = { alignItems: FlexBoxAlignItems.Stretch, diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 5cf56fe6074..6b1a28eca64 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -6,12 +6,12 @@ import React, { ReactElement, ReactNode, ReactNodeArray, + RefForwardingComponent, RefObject, useCallback, useEffect, useRef, - useState, - FC + useState } from 'react'; import { createUseStyles } from 'react-jss'; import { scroller } from 'react-scroll'; @@ -61,198 +61,200 @@ const scrollToSectionById = (id, index) => { }); }; -const ObjectPage: FC = forwardRef((props: ObjectPagePropTypes, ref: RefObject) => { - const { - title, - image, - subTitle, - headerActions, - renderHeaderContent, - mode, - imageShapeCircle, - className, - style, - tooltip, - slot, - showHideHeaderButton, - children, - onSelectedSectionChanged, - selectedSectionId, - noHeader - } = props; +const ObjectPage: RefForwardingComponent = forwardRef( + (props: ObjectPagePropTypes, ref: RefObject) => { + const { + title, + image, + subTitle, + headerActions, + renderHeaderContent, + mode, + imageShapeCircle, + className, + style, + tooltip, + slot, + showHideHeaderButton, + children, + onSelectedSectionChanged, + selectedSectionId, + noHeader + } = props; - const [selectedSectionIndex, setSelectedSectionIndex] = useState(findSectionIndexById(children, selectedSectionId)); - const [selectedSubSectionId, setSelectedSubSectionId] = useState(null); - const objectPage: RefObject = useConsolidatedRef(ref); - const fillerDivDomRef: RefObject = useRef(); - const objectPageContent: RefObject = useRef(); + const [selectedSectionIndex, setSelectedSectionIndex] = useState(findSectionIndexById(children, selectedSectionId)); + const [selectedSubSectionId, setSelectedSubSectionId] = useState(null); + const objectPage: RefObject = useConsolidatedRef(ref); + const fillerDivDomRef: RefObject = useRef(); + const objectPageContent: RefObject = useRef(); - useEffect(() => { - let selectedIndex = findSectionIndexById(children, selectedSectionId); - if (selectedIndex === -1) { - selectedIndex = 0; - } - - if (selectedSectionIndex !== selectedIndex) { - setSelectedSectionIndex(selectedIndex); - } - }, [selectedSectionId]); - - let content = children; - if (mode === ObjectPageMode.IconTabBar) { - content = Children.toArray(children)[selectedSectionIndex]; - } - - const adjustDummyDivHeight = () => { - requestAnimationFrame(() => { - if (!objectPage.current) { - // in case componentWillUnmount didn´t fire - window.removeEventListener('resize', adjustDummyDivHeight); - return; + useEffect(() => { + let selectedIndex = findSectionIndexById(children, selectedSectionId); + if (selectedIndex === -1) { + selectedIndex = 0; } - const sections = objectPage.current.querySelectorAll('[id^="ObjectPageSection"]'); - if (!sections || sections.length < 1) { - return; + if (selectedSectionIndex !== selectedIndex) { + setSelectedSectionIndex(selectedIndex); } + }, [selectedSectionId]); - const lastSectionDomRef = sections[sections.length - 1]; - const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]'); - let scrollOffset = 0; - - let domRef = null; - if (subSections.length > 0) { - domRef = subSections[subSections.length - 1]; - } else { - domRef = lastSectionDomRef; - scrollOffset = 45; - } + let content = children; + if (mode === ObjectPageMode.IconTabBar) { + content = Children.toArray(children)[selectedSectionIndex]; + } - let heightDiff = objectPageContent.current.offsetHeight - domRef.offsetHeight + scrollOffset; - heightDiff = heightDiff > 0 ? heightDiff : 0; - fillerDivDomRef.current.style.height = `${heightDiff}px`; - }); - }; + const adjustDummyDivHeight = () => { + requestAnimationFrame(() => { + if (!objectPage.current) { + // in case componentWillUnmount didn´t fire + window.removeEventListener('resize', adjustDummyDivHeight); + return; + } - // register resize handler - useEffect(() => { - window.addEventListener('resize', adjustDummyDivHeight); - return window.removeEventListener('resize', adjustDummyDivHeight); - }, []); + const sections = objectPage.current.querySelectorAll('[id^="ObjectPageSection"]'); + if (!sections || sections.length < 1) { + return; + } - useEffect(() => { - adjustDummyDivHeight(); - }, [noHeader]); + const lastSectionDomRef = sections[sections.length - 1]; + const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]'); + let scrollOffset = 0; - // scroll to selected section after mount - useEffect(() => { - if (mode !== ObjectPageMode.IconTabBar) { - if (selectedSectionId && selectedSectionIndex > 0) { - scrollToSectionById(selectedSectionId, selectedSectionIndex); - } - } - }, []); + let domRef = null; + if (subSections.length > 0) { + domRef = subSections[subSections.length - 1]; + } else { + domRef = lastSectionDomRef; + scrollOffset = 45; + } - useEffect(() => { - if (selectedSubSectionId && mode === ObjectPageMode.IconTabBar) { - requestAnimationFrame(() => { - scroller.scrollTo(`ObjectPageSubSection-${selectedSubSectionId}`, { - containerId: 'ObjectPageSections', - smooth: true, - offset: 36, - duration: 400 - }); + let heightDiff = objectPageContent.current.offsetHeight - domRef.offsetHeight + scrollOffset; + heightDiff = heightDiff > 0 ? heightDiff : 0; + fillerDivDomRef.current.style.height = `${heightDiff}px`; }); - } - }, [selectedSubSectionId]); + }; - useEffect(() => { - if (mode === ObjectPageMode.Default) { - // @ts-ignore - scrollToSectionById(Children.toArray(children)[selectedSectionIndex].props.id, selectedSectionIndex); - } - if (mode === ObjectPageMode.IconTabBar) { + // register resize handler + useEffect(() => { + window.addEventListener('resize', adjustDummyDivHeight); + return window.removeEventListener('resize', adjustDummyDivHeight); + }, []); + + useEffect(() => { adjustDummyDivHeight(); - } - }, [selectedSectionIndex]); + }, [noHeader]); - const fireOnSelectedChangedEvent = debounce((e) => { - onSelectedSectionChanged( - Event.of(null, e.getOriginalEvent(), { - selectedSectionIndex: e.getParameter('index'), - selectedSectionId: e.getParameter('props').id, - section: e.getParameters() - }) - ); - }, 500); + // scroll to selected section after mount + useEffect(() => { + if (mode !== ObjectPageMode.IconTabBar) { + if (selectedSectionId && selectedSectionIndex > 0) { + scrollToSectionById(selectedSectionId, selectedSectionIndex); + } + } + }, []); - const handleOnSectionSelected = useCallback( - (e) => { - if (mode === ObjectPageMode.IconTabBar) { - setSelectedSectionIndex(e.getParameter('index')); + useEffect(() => { + if (selectedSubSectionId && mode === ObjectPageMode.IconTabBar) { + requestAnimationFrame(() => { + scroller.scrollTo(`ObjectPageSubSection-${selectedSubSectionId}`, { + containerId: 'ObjectPageSections', + smooth: true, + offset: 36, + duration: 400 + }); + }); } - fireOnSelectedChangedEvent(e); - }, - [onSelectedSectionChanged] - ); + }, [selectedSubSectionId]); - const handleOnSubSectionSelected = useCallback( - (e) => { + useEffect(() => { + if (mode === ObjectPageMode.Default) { + // @ts-ignore + scrollToSectionById(Children.toArray(children)[selectedSectionIndex].props.id, selectedSectionIndex); + } if (mode === ObjectPageMode.IconTabBar) { - const sectionIndex = e.getParameter('sectionIndex'); - const subSection = e.getParameter('subSection'); - setSelectedSectionIndex(sectionIndex); - setSelectedSubSectionId(subSection.props.id); + adjustDummyDivHeight(); } - }, - [mode] - ); + }, [selectedSectionIndex]); - const classes = useStyles(); - const objectPageClasses = StyleClassHelper.of(classes.objectPage); - if (className) { - objectPageClasses.put(className); - } + const fireOnSelectedChangedEvent = debounce((e) => { + onSelectedSectionChanged( + Event.of(null, e.getOriginalEvent(), { + selectedSectionIndex: e.getParameter('index'), + selectedSectionId: e.getParameter('props').id, + section: e.getParameters() + }) + ); + }, 500); - return ( -
- {!noHeader && ( - - )} -
- {Children.map(children, (section, index) => ( - { + if (mode === ObjectPageMode.IconTabBar) { + setSelectedSectionIndex(e.getParameter('index')); + } + fireOnSelectedChangedEvent(e); + }, + [onSelectedSectionChanged] + ); + + const handleOnSubSectionSelected = useCallback( + (e) => { + if (mode === ObjectPageMode.IconTabBar) { + const sectionIndex = e.getParameter('sectionIndex'); + const subSection = e.getParameter('subSection'); + setSelectedSectionIndex(sectionIndex); + setSelectedSubSectionId(subSection.props.id); + } + }, + [mode] + ); + + const classes = useStyles(); + const objectPageClasses = StyleClassHelper.of(classes.objectPage); + if (className) { + objectPageClasses.put(className); + } + + return ( +
+ {!noHeader && ( + - ))} -
- - {content} - -
- ); -}); + )} +
+ {Children.map(children, (section, index) => ( + + ))} +
+ + {content} + +
+ ); + } +); ObjectPage.defaultProps = { title: '', diff --git a/packages/main/src/components/ObjectPageSection/index.tsx b/packages/main/src/components/ObjectPageSection/index.tsx index c770bcf3381..9b778179a8a 100644 --- a/packages/main/src/components/ObjectPageSection/index.tsx +++ b/packages/main/src/components/ObjectPageSection/index.tsx @@ -1,5 +1,5 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base'; -import React, { forwardRef, ReactNode, ReactNodeArray, RefObject, FC } from 'react'; +import React, { forwardRef, ReactNode, ReactNodeArray, RefForwardingComponent, RefObject } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; @@ -15,7 +15,7 @@ export interface ObjectPageSectionPropTypes extends CommonProps { const useStyles = createUseStyles>(styles, { name: 'ObjectPageSection' }); -const ObjectPageSection: FC = forwardRef( +const ObjectPageSection: RefForwardingComponent = forwardRef( (props: ObjectPageSectionPropTypes, ref: RefObject) => { const { title, id, children, titleUppercase, className, style, tooltip } = props; const classes = useStyles(); diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx index 2963f44598f..dfbedfb105e 100644 --- a/packages/main/src/components/ObjectPageSubSection/index.tsx +++ b/packages/main/src/components/ObjectPageSubSection/index.tsx @@ -1,5 +1,5 @@ import { fonts, StyleClassHelper } from '@ui5/webcomponents-react-base'; -import React, { forwardRef, ReactNode, ReactNodeArray, RefObject, FC } from 'react'; +import React, { forwardRef, ReactNode, ReactNodeArray, RefForwardingComponent, RefObject } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; @@ -31,8 +31,8 @@ const styles = ({ parameters }: JSSTheme) => ({ const useStyles = createUseStyles>(styles, { name: 'ObjectPageSubSection' }); -const ObjectPageSubSection: FC = forwardRef( - (props: ObjectPageSubSectionPropTypes, ref: RefObject) => { +const ObjectPageSubSection: RefForwardingComponent = forwardRef( + (props: ObjectPageSubSectionPropTypes, ref: RefObject) => { const { children, id, title, className, style, tooltip } = props; if (!id) { diff --git a/packages/main/src/components/Spinner/index.tsx b/packages/main/src/components/Spinner/index.tsx index e8270806a5c..91c395f1842 100644 --- a/packages/main/src/components/Spinner/index.tsx +++ b/packages/main/src/components/Spinner/index.tsx @@ -1,5 +1,5 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base'; -import React, { forwardRef, RefObject, FC } from 'react'; +import React, { forwardRef, RefForwardingComponent, RefObject } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { Size } from '../../lib/Size'; @@ -11,34 +11,36 @@ export interface SpinnerProps extends CommonProps { const useStyles = createUseStyles(styles, { name: 'Spinner' }); -const Spinner: FC = forwardRef((props: SpinnerProps, ref: RefObject) => { - const { className, size, tooltip, slot } = props; - const classes = useStyles(); - - const spinnerClasses = StyleClassHelper.of(classes.spinner); - if (className) { - spinnerClasses.put(className); +const Spinner: RefForwardingComponent = forwardRef( + (props: SpinnerProps, ref: RefObject) => { + const { className, size, tooltip, slot } = props; + const classes = useStyles(); + + const spinnerClasses = StyleClassHelper.of(classes.spinner); + if (className) { + spinnerClasses.put(className); + } + + spinnerClasses.put(classes[`spinner${size}`]); + + return ( +
+ Loading... +
+ ); } - - spinnerClasses.put(classes[`spinner${size}`]); - - return ( -
- Loading... -
- ); -}); +); Spinner.defaultProps = { size: Size.Medium diff --git a/packages/main/src/components/Text/index.tsx b/packages/main/src/components/Text/index.tsx index fa38a6df2a0..abb86297952 100644 --- a/packages/main/src/components/Text/index.tsx +++ b/packages/main/src/components/Text/index.tsx @@ -1,5 +1,5 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base'; -import React, { CSSProperties, FC, forwardRef, ReactNode, Ref } from 'react'; +import React, { CSSProperties, forwardRef, ReactNode, Ref, RefForwardingComponent } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; @@ -25,29 +25,31 @@ export interface TextProps extends CommonProps { const useStyles = createUseStyles>(TextStyles, { name: 'Text' }); -const Text: FC = forwardRef((props: TextProps, ref: Ref) => { - const { children, renderWhitespace, wrapping, width, className, style, tooltip, slot } = props; - const classes = useStyles(); - const classNameString = StyleClassHelper.of(classes.text); - if (wrapping === false) { - classNameString.put(classes.noWrap); +const Text: RefForwardingComponent = forwardRef( + (props: TextProps, ref: Ref) => { + const { children, renderWhitespace, wrapping, width, className, style, tooltip, slot } = props; + const classes = useStyles(); + const classNameString = StyleClassHelper.of(classes.text); + if (wrapping === false) { + classNameString.put(classes.noWrap); + } + if (renderWhitespace) { + classNameString.put(classes.renderWhitespace); + } + if (className) { + classNameString.put(className); + } + const inlineStyles = { width }; + if (style) { + Object.assign(inlineStyles, style); + } + return ( + + {children} + + ); } - if (renderWhitespace) { - classNameString.put(classes.renderWhitespace); - } - if (className) { - classNameString.put(className); - } - const inlineStyles = { width }; - if (style) { - Object.assign(inlineStyles, style); - } - return ( - - {children} - - ); -}); +); Text.defaultProps = { renderWhitespace: false, diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx index 5e4652caeea..e5f5eb7314e 100644 --- a/packages/main/src/components/VariantManagement/index.tsx +++ b/packages/main/src/components/VariantManagement/index.tsx @@ -1,5 +1,5 @@ import { Event } from '@ui5/webcomponents-react-base'; -import React, { FC, forwardRef, Ref, useCallback, useMemo, useState, useEffect } from 'react'; +import React, { FC, forwardRef, Ref, useCallback, useMemo, useState, useEffect, RefForwardingComponent } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; @@ -65,7 +65,7 @@ const styles = ({ parameters }: JSSTheme) => ({ const useStyles = createUseStyles>(styles, { name: 'Variant Management' }); -const VariantManagement: FC = forwardRef( +const VariantManagement: RefForwardingComponent = forwardRef( (props: VariantManagementPropTypes, ref: Ref) => { const { variantItems, From 1ad012ce633dd4f0eaec6f8aa0579a7f5cfb001e Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Mon, 5 Aug 2019 15:40:29 +0200 Subject: [PATCH 2/2] WIP: PR Comments --- packages/main/src/components/ObjectPageSection/index.tsx | 4 ++-- packages/main/src/components/VariantManagement/index.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/main/src/components/ObjectPageSection/index.tsx b/packages/main/src/components/ObjectPageSection/index.tsx index 9b778179a8a..ade14a29a60 100644 --- a/packages/main/src/components/ObjectPageSection/index.tsx +++ b/packages/main/src/components/ObjectPageSection/index.tsx @@ -15,8 +15,8 @@ export interface ObjectPageSectionPropTypes extends CommonProps { const useStyles = createUseStyles>(styles, { name: 'ObjectPageSection' }); -const ObjectPageSection: RefForwardingComponent = forwardRef( - (props: ObjectPageSectionPropTypes, ref: RefObject) => { +const ObjectPageSection: RefForwardingComponent = forwardRef( + (props: ObjectPageSectionPropTypes, ref: RefObject) => { const { title, id, children, titleUppercase, className, style, tooltip } = props; const classes = useStyles(); diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx index e5f5eb7314e..8f3ddcb2870 100644 --- a/packages/main/src/components/VariantManagement/index.tsx +++ b/packages/main/src/components/VariantManagement/index.tsx @@ -1,5 +1,5 @@ import { Event } from '@ui5/webcomponents-react-base'; -import React, { FC, forwardRef, Ref, useCallback, useMemo, useState, useEffect, RefForwardingComponent } from 'react'; +import React, { forwardRef, Ref, RefForwardingComponent, useCallback, useEffect, useMemo, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; @@ -13,6 +13,7 @@ import { Popover } from '../../lib/Popover'; import { StandardListItem } from '../../lib/StandardListItem'; import { Title } from '../../lib/Title'; import { TitleLevel } from '../../lib/TitleLevel'; +import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef'; export interface VariantItem { key: string; @@ -65,8 +66,8 @@ const styles = ({ parameters }: JSSTheme) => ({ const useStyles = createUseStyles>(styles, { name: 'Variant Management' }); -const VariantManagement: RefForwardingComponent = forwardRef( - (props: VariantManagementPropTypes, ref: Ref) => { +const VariantManagement: RefForwardingComponent = forwardRef( + (props: VariantManagementPropTypes, ref: Ref) => { const { variantItems, popupTitle,