refactoring: replace innerComponentRef with ref for Web Components #44

vbersch · 2019-07-01T08:40:18Z

Refactored WithWebComponent to functional Component to be able to use ForwardRef
Refactored all components to use current React ref api (React.createRef / useRef)

Breaking Changes

replaced innerComponentRef prop with ref for Web Components

…Button to new ref api

closes #35

MarcusNotheis · 2019-07-01T10:10:40Z

packages/base/package.json

@@ -16,7 +16,7 @@
    "core-js": "^3.1.4",
    "deepmerge": "^3.2.0",
    "hoist-non-react-statics": "^3.3.0",
-    "react-jss": "^8.6.1",
+    "react-jss": "^10.0.0-alpha.21",


I think we should use a fixed version for the alpha release

Suggested change

"react-jss": "^10.0.0-alpha.21",

"react-jss": "10.0.0-alpha.21",

MarcusNotheis · 2019-07-01T10:17:12Z

packages/main/src/webComponents/Popover/index.tsx

@@ -29,75 +30,58 @@ export interface PopoverPropTypes extends WithWebComponentPropTypes {
  open?: boolean;
 }

+export interface Ui5PopoverDomRef extends Ui5DomRef {


I think we should move that to the interfaces folder and add a lib export

MarcusNotheis · 2019-07-01T10:18:01Z

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

 import { ClassProps } from '../../interfaces/ClassProps';
 import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
 import { ButtonDesign } from '../../lib/ButtonDesign';
 import { PlacementType } from '../../lib/PlacementType';
 import { Popover } from '../../lib/Popover';
 import { ButtonPropTypes } from '../../webComponents/Button';
 import styles from './ActionSheet.jss';
+import { Ui5PopoverDomRef } from '../../webComponents/Popover';


After moving this interface, please import from lib folder

MarcusNotheis · 2019-07-01T10:18:09Z

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

@@ -1,12 +1,13 @@
 import { Device, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { Children, cloneElement, Component, ReactElement, ReactNode } from 'react';
+import React, { Children, cloneElement, Component, ReactElement, ReactNode, RefObject } from 'react';
 import { ClassProps } from '../../interfaces/ClassProps';
 import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
 import { ButtonDesign } from '../../lib/ButtonDesign';
 import { PlacementType } from '../../lib/PlacementType';
 import { Popover } from '../../lib/Popover';
 import { ButtonPropTypes } from '../../webComponents/Button';


Suggested change

import { ButtonPropTypes } from '../../webComponents/Button';

import { ButtonPropTypes } from '../../lib/Button';

MarcusNotheis · 2019-07-01T10:18:35Z

packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx

@@ -13,6 +13,7 @@ import { StandardListItem } from '../../../lib/StandardListItem';
 import { Icon } from '../../../webComponents/Icon';


Suggested change

import { Icon } from '../../../webComponents/Icon';

import { Icon } from '../../../lib/Icon';

MarcusNotheis · 2019-07-01T10:19:12Z

packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx

@@ -13,6 +13,7 @@ import { StandardListItem } from '../../../lib/StandardListItem';
 import { Icon } from '../../../webComponents/Icon';
 import { FlexBox, FlexBoxAlignItems } from '../../FlexBox';


Not your change, but just saw it

Suggested change

import { FlexBox, FlexBoxAlignItems } from '../../FlexBox';

import { FlexBox } from '../../lib/FlexBox';

import { FlexBoxAlignItems } from '../../lib/FlexBoxAlignItems';

MarcusNotheis · 2019-07-01T10:19:35Z

packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx

@@ -13,6 +13,7 @@ import { StandardListItem } from '../../../lib/StandardListItem';
 import { Icon } from '../../../webComponents/Icon';
 import { FlexBox, FlexBoxAlignItems } from '../../FlexBox';
 import { ColumnType } from '../types/ColumnType';
+import { Ui5PopoverDomRef } from '../../../webComponents/Popover';


Import from lib then

MarcusNotheis · 2019-07-01T10:21:25Z

packages/main/src/webComponents/Popover/index.tsx

 import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
 import { PlacementType } from '../../lib/PlacementType';
 import { PopoverHorizontalAlign } from '../../lib/PopoverHorizontalAlign';
 import { PopoverVerticalAlign } from '../../lib/PopoverVerticalAlign';
+import { Ui5DomRef } from '../../interfaces/Ui5DomRef';


Maybe also from lib?

MarcusNotheis

🚢

vbersch added 9 commits June 26, 2019 11:37

WIP: refactor ObjectPageAnchor, AutoCloseOnOutsideClick and Segmented…

27b95dd

…Button to new ref api

WIP: upgrade react-jss

908ed32

WIP: refactor WithStyles to functional component

07c051a

WIP: remove withCustomStyles

1d9b404

WIP: refactor ObjectPage refs to new ref api

4ae7dea

WIP: First version of functional WithWebComponent

e84b438

refactoring: move components to new ref api

abb0061

closes #35

WIP: move Popover to new ref api

8733b5c

WIP: Update tests

679339d

vbersch requested a review from MarcusNotheis July 1, 2019 08:40

Merge branch 'master' into feature/refs

dcf4216

MarcusNotheis requested changes Jul 1, 2019

View reviewed changes

WIP: Changes according to PR comments

7f02b99

MarcusNotheis approved these changes Jul 1, 2019

View reviewed changes

MarcusNotheis added 2 commits July 1, 2019 14:55

WIP: Removed interfaces from lib to fix build

0040320

WIP: Updated yarn lock

916cdd8

MarcusNotheis merged commit 08982ba into master Jul 1, 2019

MarcusNotheis deleted the feature/refs branch July 1, 2019 13:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactoring: replace innerComponentRef with ref for Web Components #44

refactoring: replace innerComponentRef with ref for Web Components #44

vbersch commented Jul 1, 2019

MarcusNotheis Jul 1, 2019

MarcusNotheis Jul 1, 2019

MarcusNotheis Jul 1, 2019

MarcusNotheis Jul 1, 2019

MarcusNotheis Jul 1, 2019

MarcusNotheis Jul 1, 2019

MarcusNotheis Jul 1, 2019

MarcusNotheis Jul 1, 2019

MarcusNotheis left a comment

	"react-jss": "^10.0.0-alpha.21",
	"react-jss": "10.0.0-alpha.21",

	import { ButtonPropTypes } from '../../webComponents/Button';
	import { ButtonPropTypes } from '../../lib/Button';

		@@ -13,6 +13,7 @@ import { StandardListItem } from '../../../lib/StandardListItem';
		import { Icon } from '../../../webComponents/Icon';

	import { Icon } from '../../../webComponents/Icon';
	import { Icon } from '../../../lib/Icon';

		@@ -13,6 +13,7 @@ import { StandardListItem } from '../../../lib/StandardListItem';
		import { Icon } from '../../../webComponents/Icon';
		import { FlexBox, FlexBoxAlignItems } from '../../FlexBox';

	import { FlexBox, FlexBoxAlignItems } from '../../FlexBox';
	import { FlexBox } from '../../lib/FlexBox';
	import { FlexBoxAlignItems } from '../../lib/FlexBoxAlignItems';

refactoring: replace innerComponentRef with ref for Web Components #44

refactoring: replace innerComponentRef with ref for Web Components #44

Conversation

vbersch commented Jul 1, 2019

Breaking Changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MarcusNotheis left a comment

Choose a reason for hiding this comment