From a8b75161e0e5a16e70710473452368afbb21ebb7 Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Fri, 11 Oct 2019 14:14:44 +0200 Subject: [PATCH 1/3] fix(WebComponents): Update to rc.4 --- packages/main/package.json | 2 +- .../components/MessageBox/MessageBox.jss.ts | 1 - .../SegmentedButtonItem.jss.ts | 4 +- .../src/interfaces/Ui5WebComponentMetadata.ts | 1 + .../main/src/internal/withWebComponent.tsx | 37 +++---------------- .../main/src/webComponents/Button/index.tsx | 9 ----- .../src/webComponents/ToggleButton/index.tsx | 9 ----- yarn.lock | 32 ++++++++-------- 8 files changed, 25 insertions(+), 70 deletions(-) diff --git a/packages/main/package.json b/packages/main/package.json index 13dc7ca1d40..66db30badce 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -19,7 +19,7 @@ "postbuild": "rollup -c rollup.config.js" }, "dependencies": { - "@ui5/webcomponents": "1.0.0-rc.3", + "@ui5/webcomponents": "1.0.0-rc.4", "@ui5/webcomponents-react-base": "0.6.0-rc.14", "lodash.debounce": "^4.0.8", "react-table": "7.0.0-beta.12", diff --git a/packages/main/src/components/MessageBox/MessageBox.jss.ts b/packages/main/src/components/MessageBox/MessageBox.jss.ts index 80b4786a2ae..087937b4d62 100644 --- a/packages/main/src/components/MessageBox/MessageBox.jss.ts +++ b/packages/main/src/components/MessageBox/MessageBox.jss.ts @@ -73,7 +73,6 @@ const style = ({ parameters, contentDensity }: JSSTheme) => ({ }, footer: { height: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem', - lineHeight: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', diff --git a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts index 050ccda3aca..faf6fbdca1f 100644 --- a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts +++ b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts @@ -64,8 +64,8 @@ const styles = ({ contentDensity, parameters }: JSSTheme) => ({ '&:focus': { outline: 'none' }, - '& >*': { - verticalAlign: 'bottom' + '& > *': { + verticalAlign: 'middle' } }, withText: { diff --git a/packages/main/src/interfaces/Ui5WebComponentMetadata.ts b/packages/main/src/interfaces/Ui5WebComponentMetadata.ts index 0d6f971ca3e..e449b7d7cd9 100644 --- a/packages/main/src/interfaces/Ui5WebComponentMetadata.ts +++ b/packages/main/src/interfaces/Ui5WebComponentMetadata.ts @@ -6,6 +6,7 @@ export interface Ui5WebComponentMetadata { getProperties?: () => DynamicObjectList; events?: DynamicObjectList; getSlots?: () => DynamicObjectList; + getEvents?: () => DynamicObjectList; metadata: { events: DynamicObjectList; }; diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index 57906b2875a..59678a22a9d 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -18,11 +18,6 @@ function capitalizeFirstLetter(s: string) { return s.charAt(0).toUpperCase() + s.slice(1); } -function convertEventListenerPropToEventKey(s: string) { - const eventName = s.replace('on', ''); - return eventName.charAt(0).toLowerCase() + eventName.slice(1); -} - function toKebabCase(s: string) { return s.replace(/([A-Z])/g, (a, b) => `-${b.toLowerCase()}`); } @@ -51,6 +46,9 @@ export function withWebComponent(WebComponent): RefForwardingComponent(WebComponent): RefForwardingComponent { - return Object.keys(getWebComponentMetadata().metadata.events || {}); + return Object.keys(getWebComponentMetadata().getEvents() || {}); }; const createEventWrapperFor = (eventIdentifier, eventHandler) => (e) => { @@ -78,8 +76,7 @@ export function withWebComponent(WebComponent): RefForwardingComponent { if (val === 'detail' && e[val]) { @@ -132,30 +129,6 @@ export function withWebComponent(WebComponent): RefForwardingComponent /^on/.test(prop) && !!value) - .map(([prop]) => prop) - .filter((prop) => !knownEvents.includes(`on${prop}`)); - - unknownPassedEvents.forEach((eventIdentifier) => { - const eventHandler = props[eventIdentifier]; - const eventKey = convertEventListenerPropToEventKey(eventIdentifier); - if (typeof eventHandler === 'function' && eventRegistry.current[eventIdentifier] !== eventHandler) { - if (eventRegistry.current[eventIdentifier]) { - getWcRef().current.removeEventListener(eventKey, eventRegistryWrapped.current[eventIdentifier]); - } - eventRegistryWrapped.current[eventIdentifier] = createEventWrapperFor(eventKey, eventHandler); - getWcRef().current.addEventListener(eventKey, eventRegistryWrapped.current[eventIdentifier]); - eventRegistry.current[eventIdentifier] = eventHandler; - } else if (eventRegistry.current[eventIdentifier] && !eventHandler) { - getWcRef().current.removeEventListener(eventKey, eventRegistryWrapped.current[eventIdentifier]); - } - }); }; const getRegularProps = () => { diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx index 73d28a6f72c..36ba46c9ad8 100644 --- a/packages/main/src/webComponents/Button/index.tsx +++ b/packages/main/src/webComponents/Button/index.tsx @@ -1,4 +1,3 @@ -import { addCustomCSS } from '@ui5/webcomponents-base/dist/Theming'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent'; @@ -16,14 +15,6 @@ export interface ButtonPropTypes extends WithWebComponentPropTypes { children?: string; // @generated } -addCustomCSS( - 'ui5-button', - ` -.ui5-button-root { - font-family: var(--sapUiFontFamily,var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif)); -}` -); - const Button: FC = withWebComponent(UI5Button); Button.displayName = 'Button'; diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx index f6a34f459be..40b1f7e4a7f 100644 --- a/packages/main/src/webComponents/ToggleButton/index.tsx +++ b/packages/main/src/webComponents/ToggleButton/index.tsx @@ -1,4 +1,3 @@ -import { addCustomCSS } from '@ui5/webcomponents-base/dist/Theming'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent'; @@ -17,14 +16,6 @@ export interface ToggleButtonPropTypes extends WithWebComponentPropTypes { children?: string; // @generated } -addCustomCSS( - 'ui5-togglebutton', - ` -.ui5-button-root { - font-family: var(--sapUiFontFamily,var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif)); -}` -); - const ToggleButton: FC = withWebComponent(UI5ToggleButton); ToggleButton.displayName = 'ToggleButton'; diff --git a/yarn.lock b/yarn.lock index 0c96739608b..68feab4d563 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2973,7 +2973,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@16.9.2", "@types/react@^16.9.2": +"@types/react@*", "@types/react@^16.9.2": version "16.9.2" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268" integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg== @@ -3013,28 +3013,28 @@ resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916" integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw== -"@ui5/webcomponents-base@0.16.0": - version "0.16.0" - resolved "https://registry.yarnpkg.com/@ui5/webcomponents-base/-/webcomponents-base-0.16.0.tgz#4f1ed9f2957e88d57eb2c6a0b6d7f19b47cc0f3c" - integrity sha512-PqCN/aSFGGC1cPyZJEeQAb7BDTdrXAdNR8Jh9bFQXQ7SfVBVxbCfWslMGAhxOJqf7F3sx6v/8JKLTe+yXcCZAw== +"@ui5/webcomponents-base@0.17.0": + version "0.17.0" + resolved "https://registry.yarnpkg.com/@ui5/webcomponents-base/-/webcomponents-base-0.17.0.tgz#01d84e84f243739b1d4b9d29a232530799eb1947" + integrity sha512-uI6bom1c668ZsokFKcBHKX82NEozGcoCVMyYnl7FoLF6ANoYq+RRVQud/5V3PBBtUcjAcLU95pyVlPyFLMu+ZA== dependencies: - "@ui5/webcomponents-core" "0.16.0" + "@ui5/webcomponents-core" "0.17.0" lit-html "^1.0.0" regenerator-runtime "0.12.1" url-search-params-polyfill "^5.0.0" -"@ui5/webcomponents-core@0.16.0": - version "0.16.0" - resolved "https://registry.yarnpkg.com/@ui5/webcomponents-core/-/webcomponents-core-0.16.0.tgz#d3d3f856df315b6e807dc4d6d170cbfefc9abb0f" - integrity sha512-RwTlmMTiCGU3n34rJMf28pzGurIB7HwZ7igO/4hIQMVoj+6A0EHf67Tp8RuiMZc8/FZO/pN9KRihlPiGb2QyPQ== +"@ui5/webcomponents-core@0.17.0": + version "0.17.0" + resolved "https://registry.yarnpkg.com/@ui5/webcomponents-core/-/webcomponents-core-0.17.0.tgz#c48fc23b900c8aca73d8d5c5b329a8eb2cc0c3cb" + integrity sha512-rdfF+Yg9RoqINrjDgM9LLHxT4XkCG+65wl8dU4OKMywxFhbderdlggDan/rYBSDb0TGIxvWqF7YFUDPVV42n3w== -"@ui5/webcomponents@1.0.0-rc.3": - version "1.0.0-rc.3" - resolved "https://registry.yarnpkg.com/@ui5/webcomponents/-/webcomponents-1.0.0-rc.3.tgz#fe349b3e35646414d1155cf6794c5b45fa56288c" - integrity sha512-5Zegf2Ntc6RnP+VxGIxQ+f6DoHedj6+9bKHc/XTwOXRwDZ7ogf0LzJ4nn54JT1ypwct0wXLgsCrmxtWCxj0smA== +"@ui5/webcomponents@1.0.0-rc.4": + version "1.0.0-rc.4" + resolved "https://registry.yarnpkg.com/@ui5/webcomponents/-/webcomponents-1.0.0-rc.4.tgz#c8bba475f0df50a262050bb3adee58978f2fdd47" + integrity sha512-1fmak9wvZ4zXO7i89rbkah6jJdD12f02gff1xGtw3bl+YygGxohYfbiVG61oS6+1RpdYCQQgLV1/d+DsE+Tazw== dependencies: - "@ui5/webcomponents-base" "0.16.0" - "@ui5/webcomponents-core" "0.16.0" + "@ui5/webcomponents-base" "0.17.0" + "@ui5/webcomponents-core" "0.17.0" "@webassemblyjs/ast@1.8.5": version "1.8.5" From afa8678ac57bea2f5e11bd6fc9a6d18b27ddd5a5 Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Fri, 11 Oct 2019 15:01:19 +0200 Subject: [PATCH 2/3] WIP: Fix Event Binding --- .../src/internal/WithWebComponent.test.tsx | 23 +++++++++++++++++++ .../main/src/internal/withWebComponent.tsx | 4 ++++ 2 files changed, 27 insertions(+) diff --git a/packages/main/src/internal/WithWebComponent.test.tsx b/packages/main/src/internal/WithWebComponent.test.tsx index 1dd97beb27a..5b82a577dc3 100644 --- a/packages/main/src/internal/WithWebComponent.test.tsx +++ b/packages/main/src/internal/WithWebComponent.test.tsx @@ -24,4 +24,27 @@ describe('withWebComponent', () => { component.fireEvent('click'); expect(callback.callCount).toEqual(2); }); + + test('Bind new event handler', () => { + let Button: FC = withWebComponent(UI5Button); + const callback = spy(); + const wrapper = mountThemedComponent(