From 27b95ddab8d608ce9756c37c160826e3689d534c Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Wed, 26 Jun 2019 11:37:49 +0200 Subject: [PATCH 01/12] WIP: refactor ObjectPageAnchor, AutoCloseOnOutsideClick and SegmentedButton to new ref api --- .../AutoCloseOnOutsideClick/index.tsx | 16 ++++------- .../ObjectPage/ObjectPageAnchor.tsx | 11 ++------ .../src/components/SegmentedButton/index.tsx | 28 +++++++++---------- 3 files changed, 20 insertions(+), 35 deletions(-) diff --git a/packages/main/src/components/AutoCloseOnOutsideClick/index.tsx b/packages/main/src/components/AutoCloseOnOutsideClick/index.tsx index 7f000fed6a2..f513054caa6 100644 --- a/packages/main/src/components/AutoCloseOnOutsideClick/index.tsx +++ b/packages/main/src/components/AutoCloseOnOutsideClick/index.tsx @@ -1,5 +1,5 @@ import { Event } from '@ui5/webcomponents-react-base'; -import React, { PureComponent, ReactNode } from 'react'; +import React, { PureComponent, ReactNode, RefObject } from 'react'; export interface AutoCloseOnOutsideClickPropTypes { onOutsideClick?: (e: Event) => void; @@ -21,16 +21,16 @@ export class AutoCloseOnOutsideClick extends PureComponent< isContentAreaOpen: true }; - private contentRef: HTMLDivElement; + private contentRef: RefObject = React.createRef(); componentDidMount() { document.addEventListener('mousedown', this.checkFocus); } private checkFocus = (oEvent) => { - const contentDiv = this.contentRef; + const contentDiv = this.contentRef.current; - if (contentDiv !== null) { + if (contentDiv) { if (!contentDiv.contains(oEvent.target)) { this.setState({ isContentAreaOpen: !this.state.isContentAreaOpen @@ -46,13 +46,7 @@ export class AutoCloseOnOutsideClick extends PureComponent< const { isContentAreaOpen } = this.state; if (!isContentAreaOpen) return null; return ( -
{ - this.contentRef = element; - }} - > +
{children}
); diff --git a/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx b/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx index 38c5a9eb0c7..b0dd40c16c9 100644 --- a/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx @@ -1,5 +1,5 @@ import { Event, StyleClassHelper } from '@ui5/webcomponents-react-base'; -import React, { Component } from 'react'; +import React, { Component, RefObject } from 'react'; import { Link } from 'react-scroll'; import { ObjectWithVariableKeys } from '../../interfaces/ObjectWithVariableKeys'; import { Button } from '../../lib/Button'; @@ -32,8 +32,6 @@ export class ObjectPageAnchor extends Component { this.setState({ open: true @@ -140,12 +138,7 @@ export class ObjectPageAnchor extends Component { - this.containerDiv = ref; - }} - className={containerClasses.valueOf()} - > +
{anchorContent} {subSectionsAvailable && ( = React.createRef(); + static getDerivedStateFromProps(nextProps, prevState) { if (prevState.prevPropSelectedKey !== nextProps.selectedKey) { const newKey = nextProps.selectedKey ? nextProps.selectedKey : nextProps.children[0].props.id; @@ -61,14 +69,6 @@ export class SegmentedButton extends Component { const selectedKey = e.getParameter('selectedKey'); if (selectedKey !== this.state.selectedKey) { @@ -84,14 +84,14 @@ export class SegmentedButton extends Component { - for (let i = 0; i < this.items.childElementCount; i++) { - const item = this.items.children.item(i) as HTMLUListElement; + for (let i = 0; i < this.items.current.childElementCount; i++) { + const item = this.items.current.children.item(i) as HTMLUListElement; if (item.offsetWidth && item.offsetWidth > maxWidth) { maxWidth = item.offsetWidth; } } - if (maxWidth > this.items.offsetWidth) { + if (maxWidth > this.items.current.offsetWidth) { this.setState({ itemWidth: 'auto' }); @@ -126,9 +126,7 @@ export class SegmentedButton extends Component { - this.items = el; - }} + ref={this.items} title={tooltip} data-ui5-slot={this.props['data-ui5-slot']} > From 908ed32c731e2e5d594d37ca17303f335f6a4fa9 Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Wed, 26 Jun 2019 12:34:26 +0200 Subject: [PATCH 02/12] WIP: upgrade react-jss --- packages/base/package.json | 2 +- yarn.lock | 299 +++++++++++++++++++++++-------------- 2 files changed, 187 insertions(+), 114 deletions(-) diff --git a/packages/base/package.json b/packages/base/package.json index 1fdda38a777..97d4d8821c8 100644 --- a/packages/base/package.json +++ b/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", "tslib": "^1.9.3" } } diff --git a/yarn.lock b/yarn.lock index 41df4f32891..32e47819df2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -883,7 +883,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5": version "7.4.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ== @@ -990,6 +990,13 @@ dependencies: "@emotion/memoize" "0.7.1" +"@emotion/is-prop-valid@^0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc" + integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA== + dependencies: + "@emotion/memoize" "0.7.1" + "@emotion/memoize@0.7.1": version "0.7.1" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" @@ -4128,11 +4135,6 @@ braces@^3.0.1: dependencies: fill-range "^7.0.1" -brcast@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/brcast/-/brcast-3.0.1.tgz#6256a8349b20de9eed44257a9b24d71493cd48dd" - integrity sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg== - brorand@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" @@ -5368,6 +5370,15 @@ css-declaration-sorter@^4.0.1: postcss "^7.0.1" timsort "^0.3.0" +css-jss@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/css-jss/-/css-jss-10.0.0-alpha.21.tgz#22aa346a3f862deb2d9bdf5f871f5651ab357af1" + integrity sha512-ZyXmicBxKicvKkDZdUrfa+sIHWO2qjd1+IjkOuZcD86quN3lPgGR9xSAdG9Ez9ssCfwf6AgOhOZfNdJrovKybg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + jss-preset-default "10.0.0-alpha.21" + css-loader@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea" @@ -5457,11 +5468,12 @@ css-url-regex@^1.1.0: resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec" integrity sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w= -css-vendor@^0.3.8: - version "0.3.8" - resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" - integrity sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo= +css-vendor@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.5.tgz#949c58fd5307e79a9417daa0939506f0e5d0a187" + integrity sha512-36w+4Cg0zqFIt5TAkaM3proB6XWh5kSGmbddRCPdrRLQiYNfHPTgaWPOlCrcuZIO0iAtrG+5wsHJZ6jj8AUULA== dependencies: + "@babel/runtime" "^7.3.1" is-in-browser "^1.0.2" css-what@2.1, css-what@^2.1.2: @@ -7767,12 +7779,12 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0: +hoist-non-react-statics@^2.3.1: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== -hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA== @@ -7945,7 +7957,7 @@ husky@^2.2.0: run-node "^1.0.0" slash "^3.0.0" -hyphenate-style-name@^1.0.2: +hyphenate-style-name@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ== @@ -9400,97 +9412,142 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" -jss-camel-case@^6.1.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44" - integrity sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ== - dependencies: - hyphenate-style-name "^1.0.2" - -jss-compose@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484" - integrity sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA== - dependencies: - warning "^3.0.0" - -jss-default-unit@^8.0.2: - version "8.0.2" - resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6" - integrity sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg== - -jss-expand@^5.3.0: - version "5.3.0" - resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.3.0.tgz#02be076efe650125c842f5bb6fb68786fe441ed6" - integrity sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg== - -jss-extend@^6.2.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.2.0.tgz#4af09d0b72fb98ee229970f8ca852fec1ca2a8dc" - integrity sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA== - dependencies: - warning "^3.0.0" - -jss-global@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2" - integrity sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q== - -jss-nested@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-6.0.1.tgz#ef992b79d6e8f63d939c4397b9d99b5cbbe824ca" - integrity sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA== - dependencies: - warning "^3.0.0" - -jss-preset-default@^4.3.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.5.0.tgz#d3a457012ccd7a551312014e394c23c4b301cadd" - integrity sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ== - dependencies: - jss-camel-case "^6.1.0" - jss-compose "^5.0.0" - jss-default-unit "^8.0.2" - jss-expand "^5.3.0" - jss-extend "^6.2.0" - jss-global "^3.0.0" - jss-nested "^6.0.1" - jss-props-sort "^6.0.0" - jss-template "^1.0.1" - jss-vendor-prefixer "^7.0.0" - -jss-props-sort@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323" - integrity sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g== +jss-plugin-camel-case@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.21.tgz#8a27bbba16c0266a722bb6d415fe1cd37390f82d" + integrity sha512-Pjh81t6ynW7wlH75HONWEQ3JDf1ne/GZBFknA8zK+JLsrah97+nxhk2VLUw9ZEgFoZrG8emrJU+Y2K4NvUpuHQ== + dependencies: + "@babel/runtime" "^7.3.1" + hyphenate-style-name "^1.0.3" + jss "10.0.0-alpha.21" + +jss-plugin-compose@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-compose/-/jss-plugin-compose-10.0.0-alpha.21.tgz#f80cbce9821c0ff69a257545f35a497c0a61be72" + integrity sha512-eLlKqLrp1Le6/4xr1NN2ZzQPacWecuextr6FtopP7heYJT0Aw9wCcmo+iiAu2SKjoJTHwThXWdSNx/+ziWYFrw== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + tiny-warning "^1.0.2" + +jss-plugin-default-unit@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.21.tgz#920b928e5088411bd9da26624777615f1a242133" + integrity sha512-7Cfck9s1U+S5GqfZukZARmpX/xmcaRiF8XpTe3IdYF27QffElXPAqcO1ri77pp8k5pJrzifxKZZrEdCeYl2JEA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + +jss-plugin-expand@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-expand/-/jss-plugin-expand-10.0.0-alpha.21.tgz#1fdbc127e00257c4019f93716e612e4fe17fed0b" + integrity sha512-pSU3y1i8eTR2qGMcKKMfscnsJnLbxCjjyjK7IdmSb+aUJbfQJxDwNLrCCDLUE+q+hsJzUEABHqal5fMKwtxk8Q== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + +jss-plugin-extend@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-extend/-/jss-plugin-extend-10.0.0-alpha.21.tgz#b4072a631ee7bd06055104b2b2f963993d13ce03" + integrity sha512-rYlwThMQlfv7zeTUeCUCmVWflWaP78kvxViAcjM6iQAi/pdspumZWaE3vG7z2KuTPfqo4J9DMXT0eC1EkYvUkg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + tiny-warning "^1.0.2" + +jss-plugin-global@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.21.tgz#2dbbcb67e0d17804398b9f4d85784db2f21ca4b9" + integrity sha512-jRBUyWVAkeH62oNum9EiKRvaVfcQRn52GxWy6hcvc2MGbKeD6S91RFPtk3Jl2UqB2mU95bDzH3V0eK1P6kcUzg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + +jss-plugin-nested@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.21.tgz#36ca7d2d466062a7be6bbd1ad20a0ff32d1290fb" + integrity sha512-Ig6eFB+WMpU343ZmQAcABWpeMqtfMowTnz36VCaId0fv8OkxtBxb9AbbYM8QlUPSlmFn1iolmfqW0P+8PnEQbQ== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + tiny-warning "^1.0.2" + +jss-plugin-props-sort@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.21.tgz#6ef2b64f94f98d32dbc2d6645a43e0cb618876f5" + integrity sha512-pQD3rgitjj/3zUiEIRLhvcTw4cLHiOpnXOV+h4BBr88eKAhNm9oWSjH++n+6sHygHT6ZhqA5bLLkQVwNv8tS3g== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + +jss-plugin-rule-value-function@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.21.tgz#ac34dd348eda11211d1de4a1bc2526e950aee367" + integrity sha512-ozItLb1c7A6DPrqfHSeJip4EeVWJN71avvdBd/asWFKpmFtqeJ4X7xRV9GbSNpTp9fnv7BXLp1t0iVpjQvJkfg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + +jss-plugin-rule-value-observable@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.0.0-alpha.21.tgz#f5c75cacaa63d6d85580854ec548546cec837a72" + integrity sha512-qMvsCPp06JRhEVzZv1TUeTy43I57w3NEQHaRTefShKYw6UgbQWXQ5W0mjratRk0WZvHwNR9vK2Fx4iXsGkOk1A== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + symbol-observable "^1.2.0" + +jss-plugin-template@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-template/-/jss-plugin-template-10.0.0-alpha.21.tgz#b059ce7241faf7e8114303b626dd514d609da6dc" + integrity sha512-uXrlBqy0VyKoiX9OCqxWf+DP3HJIF3YsH+0mM2meES6wbJHLKhhP0Hz0nHZj1XBRGP3j7ehQfoB66iBzU6Jb1Q== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + tiny-warning "^1.0.2" + +jss-plugin-vendor-prefixer@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.21.tgz#36b63e40dff1ca61287dc07c2df460dd32a736fc" + integrity sha512-A/o6ojkXKIYpdIpgRA1cy4thwxxTnInCRQxBhDSdH23wGruqU/nn1EYRflVnU0XZnz+LzVK0+cWKScrPq2V2kw== + dependencies: + "@babel/runtime" "^7.3.1" + css-vendor "^2.0.5" + jss "10.0.0-alpha.21" + +jss-preset-default@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-10.0.0-alpha.21.tgz#cc6a70a380460ce762aa05a043a95249191d1116" + integrity sha512-dPQoRlw9yQ3JDzjI/NH+WzlStE40nIN95LWQxvt/KTVZ39DJ+btFNbzh2t1J+vabfk6+ERVZCBYkU5HSYsl5pA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0-alpha.21" + jss-plugin-camel-case "10.0.0-alpha.21" + jss-plugin-compose "10.0.0-alpha.21" + jss-plugin-default-unit "10.0.0-alpha.21" + jss-plugin-expand "10.0.0-alpha.21" + jss-plugin-extend "10.0.0-alpha.21" + jss-plugin-global "10.0.0-alpha.21" + jss-plugin-nested "10.0.0-alpha.21" + jss-plugin-props-sort "10.0.0-alpha.21" + jss-plugin-rule-value-function "10.0.0-alpha.21" + jss-plugin-rule-value-observable "10.0.0-alpha.21" + jss-plugin-template "10.0.0-alpha.21" + jss-plugin-vendor-prefixer "10.0.0-alpha.21" jss-snapshot-serializer@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/jss-snapshot-serializer/-/jss-snapshot-serializer-1.0.0.tgz#963395f83dddc355964290393b05e734c69dde7b" integrity sha512-BSnjcqVhR48WUjickNUSdNP8Hk7fkeW01l1vo9GDb+MaZBPILrIO9rSvyoriIXZwQRyYmwZNI91tlKMZmGQX5w== -jss-template@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a" - integrity sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg== - dependencies: - warning "^3.0.0" - -jss-vendor-prefixer@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71" - integrity sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA== - dependencies: - css-vendor "^0.3.8" - -jss@^9.7.0: - version "9.8.7" - resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05" - integrity sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ== +jss@10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.21.tgz#b7aae809b1ab6d4470233056a9894b26742e7a8f" + integrity sha512-7DPGcTF+SPrYKPlR4eak52CJo8XPVJzMPraR/JiafsXA5Xf4U65oTl1sjRizIWaTuUibPjBJgwERgON6emFzrw== dependencies: + "@babel/runtime" "^7.3.1" is-in-browser "^1.1.3" - symbol-observable "^1.1.0" - warning "^3.0.0" + tiny-warning "^1.0.2" just-extend@^4.0.2: version "4.0.2" @@ -12880,6 +12937,11 @@ react-dev-utils@^9.0.0: strip-ansi "5.2.0" text-table "0.2.0" +react-display-name@^0.2.4: + version "0.2.4" + resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.4.tgz#e2a670b81d79a2204335510c01246f4c92ff12cf" + integrity sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA== + react-docgen-typescript-loader@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.1.0.tgz#09cacf872617c97f946ee920d2239f51d543be41" @@ -13008,16 +13070,22 @@ react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4, react-is resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== -react-jss@^8.6.1: - version "8.6.1" - resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252" - integrity sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ== +react-jss@^10.0.0-alpha.21: + version "10.0.0-alpha.21" + resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-10.0.0-alpha.21.tgz#451f8c878ee3cf5b5de4e63cd1564a8b8fe3f220" + integrity sha512-eFUzf44PzPqqbKgHlvBWcYjRk2zchQrvHBaUGKmrYPVhH8uoDlnRWGhv3GO6YZl0t3bAKAy35bw1rmbRwFhWVg== dependencies: - hoist-non-react-statics "^2.5.0" - jss "^9.7.0" - jss-preset-default "^4.3.0" + "@babel/runtime" "^7.3.1" + "@emotion/is-prop-valid" "^0.7.3" + css-jss "10.0.0-alpha.21" + hoist-non-react-statics "^3.2.0" + is-in-browser "^1.1.3" + jss "10.0.0-alpha.21" + jss-preset-default "10.0.0-alpha.21" prop-types "^15.6.0" - theming "^1.3.0" + shallow-equal "^1.2.0" + theming "3.2.0" + tiny-warning "^1.0.2" react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: version "3.0.4" @@ -14079,7 +14147,7 @@ shallow-clone@^0.1.2: lazy-cache "^0.2.3" mixin-object "^2.0.1" -shallow-equal@^1.1.0: +shallow-equal@^1.1.0, shallow-equal@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.0.tgz#fd828d2029ff4e19569db7e19e535e94e2d1f5cc" integrity sha512-Z21pVxR4cXsfwpMKMhCEIO1PCi5sp7KEp+CmOpBQ+E8GpHwKOw2sEzk7sgblM3d/j4z4gakoWEoPcjK0VJQogA== @@ -14835,7 +14903,7 @@ svgo@^1.0.0, svgo@^1.2.1: unquote "~1.1.1" util.promisify "~1.0.0" -symbol-observable@^1.0.4, symbol-observable@^1.1.0: +symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== @@ -14987,15 +15055,15 @@ text-table@0.2.0, text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= -theming@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/theming/-/theming-1.3.0.tgz#286d5bae80be890d0adc645e5ca0498723725bdc" - integrity sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw== +theming@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/theming/-/theming-3.2.0.tgz#237b13ae46e0596a7d1dc2ce4a31bcfce52cad8e" + integrity sha512-n0fSNYXkX63rcFBBeAthy14IcgPZLHp0OGkGZheaj64j7cBoP7INLd6+7HIXqWVjFn1M5cYSiZ1nszi+jo/Szg== dependencies: - brcast "^3.0.1" - is-function "^1.0.1" - is-plain-object "^2.0.1" + hoist-non-react-statics "^3.3.0" prop-types "^15.5.8" + react-display-name "^0.2.4" + tiny-warning "^1.0.2" throat@^4.0.0: version "4.1.0" @@ -15044,6 +15112,11 @@ tiny-emitter@^2.0.0: resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== +tiny-warning@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28" + integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q== + tinycolor2@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" From 07c051a4ccc8388cef26c6cdcdaecc11809607a7 Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Wed, 26 Jun 2019 13:24:05 +0200 Subject: [PATCH 03/12] WIP: refactor WithStyles to functional component --- packages/base/src/withStyles/index.tsx | 61 +++++++++----------------- 1 file changed, 20 insertions(+), 41 deletions(-) diff --git a/packages/base/src/withStyles/index.tsx b/packages/base/src/withStyles/index.tsx index d0fe0ba9715..9dbcac8233f 100644 --- a/packages/base/src/withStyles/index.tsx +++ b/packages/base/src/withStyles/index.tsx @@ -1,7 +1,7 @@ import deepMerge from 'deepmerge'; import hoistNonReactStatics from 'hoist-non-react-statics'; -import React, { ComponentType, Ref } from 'react'; -import injectSheet from 'react-jss'; +import React, { ComponentType, ForwardRefExoticComponent, RefAttributes } from 'react'; +import { createUseStyles, useTheme } from 'react-jss'; import { createGenerateClassName } from './createGenerateClassName'; const generateClassName = createGenerateClassName(); @@ -16,51 +16,30 @@ const mergeStyles = (styles, ...newStyles) => { const getDisplayName = (Component) => Component.displayName || Component.name || 'Component'; const wrapComponentName = (componentName) => `WithStyles(${componentName})`; -export interface WithStylesPropTypes { - innerComponentRef: Ref; +export interface WithStylesComponent extends ForwardRefExoticComponent> { + InnerComponent?: ComponentType; + withCustomStyles?: (args: any[]) => WithStylesComponent; } export const withStyles = (styles) => (Component: ComponentType) => { - class WithStyles extends React.Component { - static defaultProps = Component.defaultProps; - static InnerComponent = Component; - static displayName = wrapComponentName(getDisplayName(Component)); - static withCustomStyles = (...newStyles) => { - return withStyles(mergeStyles(styles, ...newStyles))(Component); - }; - - state = { - error: false - }; - - componentDidUpdate(prevProps) { - if (prevProps !== this.props) { - // retry rendering of Component - this.setState({ error: false }); - } - } + const useStyles = createUseStyles(styles, { + generateClassName + }); - componentDidCatch(error, info) { - // Logger.error(error.message, Component.displayName || WithStyles.displayName); - this.setState({ error: true }); - } + const WithStyles: WithStylesComponent = React.forwardRef((props, ref) => { + const classes = useStyles(props); + const theme = useTheme(); - render() { - const { innerComponentRef, ...rest } = this.props; - const { error } = this.state; + return ; + }); - // props containing theme, classes generated by react-jss as well as - // user defined props - if (!error) { - return ; - } else { - return null; - } - } - } + WithStyles.defaultProps = Component.defaultProps; + WithStyles.InnerComponent = Component; + WithStyles.displayName = wrapComponentName(getDisplayName(Component)); + WithStyles.withCustomStyles = (...newStyles) => { + return withStyles(mergeStyles(styles, ...newStyles))(Component); + }; hoistNonReactStatics(WithStyles, Component); - return injectSheet(styles, { - generateClassName - })(WithStyles); + return WithStyles; }; From 1d9b404e916d3e050feb1faa2b75a4c4e4868ce6 Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Wed, 26 Jun 2019 15:19:47 +0200 Subject: [PATCH 04/12] WIP: remove withCustomStyles --- packages/base/src/withStyles/index.tsx | 47 ++++++-------- .../base/src/withStyles/withStyles.test.tsx | 63 +------------------ .../main/src/components/Bar/demo.stories.tsx | 42 +------------ .../main/src/internal/withWebComponent.tsx | 10 +-- 4 files changed, 24 insertions(+), 138 deletions(-) diff --git a/packages/base/src/withStyles/index.tsx b/packages/base/src/withStyles/index.tsx index 9dbcac8233f..13be74f702e 100644 --- a/packages/base/src/withStyles/index.tsx +++ b/packages/base/src/withStyles/index.tsx @@ -1,45 +1,34 @@ -import deepMerge from 'deepmerge'; import hoistNonReactStatics from 'hoist-non-react-statics'; -import React, { ComponentType, ForwardRefExoticComponent, RefAttributes } from 'react'; +import React, { ComponentType, ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'; +// @ts-ignore import { createUseStyles, useTheme } from 'react-jss'; import { createGenerateClassName } from './createGenerateClassName'; const generateClassName = createGenerateClassName(); -const getStyle = (style) => (...args) => (typeof style === 'function' ? style(...args) : style); - -const mergeStyles = (styles, ...newStyles) => { - return (...args) => - deepMerge.all([getStyle(styles)(...args), ...newStyles.map((newStyle) => getStyle(newStyle)(...args))]); -}; - const getDisplayName = (Component) => Component.displayName || Component.name || 'Component'; const wrapComponentName = (componentName) => `WithStyles(${componentName})`; -export interface WithStylesComponent extends ForwardRefExoticComponent> { +export interface WithStylesComponent extends ForwardRefExoticComponent> { InnerComponent?: ComponentType; - withCustomStyles?: (args: any[]) => WithStylesComponent; } -export const withStyles = (styles) => (Component: ComponentType) => { - const useStyles = createUseStyles(styles, { - generateClassName - }); +export function withStyles(styles): any { + return (Component: ComponentType) => { + const useStyles = createUseStyles(styles, { + generateClassName + }); - const WithStyles: WithStylesComponent = React.forwardRef((props, ref) => { - const classes = useStyles(props); - const theme = useTheme(); + const WithStyles: WithStylesComponent = React.forwardRef((props: T, ref: RefObject) => { + const classes = useStyles(props); + const theme = useTheme(); - return ; - }); + return ; + }); - WithStyles.defaultProps = Component.defaultProps; - WithStyles.InnerComponent = Component; - WithStyles.displayName = wrapComponentName(getDisplayName(Component)); - WithStyles.withCustomStyles = (...newStyles) => { - return withStyles(mergeStyles(styles, ...newStyles))(Component); + WithStyles.defaultProps = Component.defaultProps; + WithStyles.displayName = wrapComponentName(getDisplayName(Component)); + hoistNonReactStatics(WithStyles, Component); + return WithStyles; }; - - hoistNonReactStatics(WithStyles, Component); - return WithStyles; -}; +} diff --git a/packages/base/src/withStyles/withStyles.test.tsx b/packages/base/src/withStyles/withStyles.test.tsx index 08cc3732e5c..71e5c65996f 100644 --- a/packages/base/src/withStyles/withStyles.test.tsx +++ b/packages/base/src/withStyles/withStyles.test.tsx @@ -1,12 +1,9 @@ -import React, { cloneElement, Component } from 'react'; +import React, { Component } from 'react'; import { withStyles } from './index'; import { mountThemedComponent } from '@shared/tests/utils'; import sinon from 'sinon'; -const testAttribute = 'TEST'; - class UnitTestDemo extends Component { - static testAttribute = testAttribute; render() { const { classes } = this.props; if (!classes) { @@ -16,25 +13,6 @@ class UnitTestDemo extends Component { } } -const UnitTestDemoSfc = (props) => { - const { classes } = props; - if (!classes) { - throw 'No classes passed down'; - } - return
; -}; - -// @ts-ignore -UnitTestDemoSfc.testAttribute = testAttribute; - -const FaultyComponent = withStyles(() => ({}))((props) => { - if (props.fail) { - throw 'Oooops'; - } - - return
All fine!
; -}); - const styles = () => ({ testClass: { color: 'green' @@ -42,45 +20,10 @@ const styles = () => ({ }); describe('withStyles', () => { - test('Extend Class Component with Styles and check statics', () => { - const DemoWithStyles = withStyles(styles)(UnitTestDemo); - expect(DemoWithStyles.testAttribute).toBe(testAttribute); - expect(DemoWithStyles.InnerComponent).toBe(UnitTestDemo); - - const ExtendedDemo = DemoWithStyles.withCustomStyles({ testClass: { color: 'black' } }); - expect(ExtendedDemo.testAttribute).toBe(testAttribute); - expect(ExtendedDemo.InnerComponent).toBe(UnitTestDemo); - }); - - test('render styled component without crashing', () => { - const DemoWithStyles = withStyles(styles)(UnitTestDemo); - mountThemedComponent(); - const ExtendedDemo = DemoWithStyles.withCustomStyles({ testClass: { color: 'black' } }); - mountThemedComponent(); - }); - - test('innerComponentRef', () => { + test('component ref', () => { const callback = sinon.spy(); const DemoWithStyles = withStyles(styles)(UnitTestDemo); - mountThemedComponent(); + mountThemedComponent(); expect(callback.callCount).toBe(1); }); - - test('test with SFC', () => { - const DemoWithStyles = withStyles(styles)(UnitTestDemoSfc); - mountThemedComponent(); - expect(DemoWithStyles.testAttribute).toBe(testAttribute); - const ExtendedDemo = DemoWithStyles.withCustomStyles({ testClass: { color: 'black' } }); - mountThemedComponent(); - expect(ExtendedDemo.testAttribute).toBe(testAttribute); - }); - - test('Error Boundary', () => { - const wrapper = mountThemedComponent(); - expect((wrapper.find('WithStyles(Component)').instance().state as any).error).toBe(true); - wrapper.setProps({ - children: cloneElement(wrapper.props().children, { fail: false }) - }); - expect((wrapper.find('WithStyles(Component)').instance().state as any).error).toBe(false); - }); }); diff --git a/packages/main/src/components/Bar/demo.stories.tsx b/packages/main/src/components/Bar/demo.stories.tsx index d98cc2419d9..c471c622335 100644 --- a/packages/main/src/components/Bar/demo.stories.tsx +++ b/packages/main/src/components/Bar/demo.stories.tsx @@ -13,44 +13,4 @@ function renderStory() { ); } -function renderWithExtendedStyles() { - const styles = () => ({ - bar: { - backgroundColor: 'pink' - } - }); - - const leftStyles = () => ({ - left: { - backgroundColor: (props) => { - return 'black'; - } - } - }); - - const heightAndRightStyles = () => { - return { - bar: { - height: '5rem' - }, - right: { - backgroundColor: 'green' - } - }; - }; - - // @ts-ignore - const ExtendedBar = Bar.withCustomStyles(styles, heightAndRightStyles, leftStyles); - - return ( - } - renderContentMiddle={() => } - renderContentRight={() => } - /> - ); -} - -storiesOf('Components | Bar', module) - .add('Default', renderStory) - .add('Extended Styles', renderWithExtendedStyles); +storiesOf('Components | Bar', module).add('Default', renderStory); diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index 1ef0cfcd9e7..833658fb982 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -1,8 +1,6 @@ import { Event } from '@ui5/webcomponents-react-base'; import React, { Children, cloneElement, Component, CSSProperties, FC, ReactElement } from 'react'; -import { withTheme } from 'react-jss'; import { Fiori3CommonProps } from '../interfaces/Fiori3CommonProps'; -import { JSSTheme } from '../interfaces/JSSTheme'; import { Ui5DomRef } from '../interfaces/Ui5DomRef'; import { Ui5WebComponentMetadata } from '../interfaces/Ui5WebComponentMetadata'; @@ -20,10 +18,6 @@ export interface WithWebComponentPropTypes extends Fiori3CommonProps { innerStyles?: CSSProperties; } -interface WithWebComponentInternalPropTypes extends WithWebComponentPropTypes { - theme: JSSTheme; -} - export function withWebComponent(WebComponent): FC { class WithWebComponent extends Component { state = { @@ -221,7 +215,7 @@ export function withWebComponent(WebComponent): FC { const slots = WebComponent.getMetadata().getSlots(); const { props, slotProps } = this.regularProps; - const { children, theme, ...regularProps } = props as T & WithWebComponentInternalPropTypes; + const { children, ...regularProps } = props as T & WithWebComponentPropTypes; return ( {Object.keys(slots).map((slot) => { @@ -241,5 +235,5 @@ export function withWebComponent(WebComponent): FC { } } - return withTheme(WithWebComponent); + return WithWebComponent; } From 4ae7dea705ecabb28fbc16477085ead96363952e Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Wed, 26 Jun 2019 15:34:31 +0200 Subject: [PATCH 05/12] WIP: refactor ObjectPage refs to new ref api --- .../main/src/components/ObjectPage/index.tsx | 51 ++++++++++--------- 1 file changed, 28 insertions(+), 23 deletions(-) diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 59f140be0bd..aeac63da660 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -1,5 +1,13 @@ import { Event, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base'; -import React, { Children, cloneElement, PureComponent, ReactElement, ReactNode, ReactNodeArray } from 'react'; +import React, { + Children, + cloneElement, + PureComponent, + ReactElement, + ReactNode, + ReactNodeArray, + RefObject +} from 'react'; import { scroller } from 'react-scroll'; import { ClassProps } from '../../interfaces/ClassProps'; import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps'; @@ -31,16 +39,18 @@ const objectPageContentStyles = ({ parameters }: JSSTheme) => ({ } }); -const ObjectPageContent = withStyles(objectPageContentStyles)((props) => { - const { children, classes, getFillerDivDomRef } = props; +const ObjectPageContent = withStyles(objectPageContentStyles)( + React.forwardRef((props: any, ref: RefObject) => { + const { children, classes } = props; - return ( -
- {children} -
-
- ); -}); + return ( +
+ {children} +
+
+ ); + }) +); export interface ObjectPagePropTypes extends Fiori3CommonProps { title?: string; @@ -80,8 +90,8 @@ export class ObjectPage extends PureComponent = React.createRef(); + private fillerDivDomRef: RefObject = React.createRef(); static getDerivedStateFromProps(nextProps: ObjectPagePropTypes, prevState: ObjectPageState) { if (nextProps.selectedSectionId !== prevState.prevProps.selectedSectionId) { @@ -107,10 +117,6 @@ export class ObjectPage extends PureComponent { - this.fillerDivDomRef = ref; - }; - componentDidMount() { this.adjustDummyDivHeight(); if (this.props.mode !== ObjectPageMode.IconTabBar) { @@ -149,7 +155,7 @@ export class ObjectPage extends PureComponent 0 ? heightDiff : 0; - this.fillerDivDomRef.style.height = `${heightDiff}px`; + this.fillerDivDomRef.current.style.height = `${heightDiff}px`; } render() { @@ -218,9 +224,7 @@ export class ObjectPage extends PureComponent { - this.objectPage = el; - }} + ref={this.objectPage} title={tooltip} >
@@ -262,6 +266,7 @@ export class ObjectPage extends PureComponent {this.props.showHideHeaderButton && (
- {content} + {content}
); } From e84b438b992bada5ce4f65e13268905a18fdf1bd Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Thu, 27 Jun 2019 10:42:02 +0200 Subject: [PATCH 06/12] WIP: First version of functional WithWebComponent --- .../main/src/internal/withWebComponent.tsx | 321 +++++++++--------- 1 file changed, 158 insertions(+), 163 deletions(-) diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index 833658fb982..976c55f5359 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -1,5 +1,16 @@ import { Event } from '@ui5/webcomponents-react-base'; -import React, { Children, cloneElement, Component, CSSProperties, FC, ReactElement } from 'react'; +import React, { + Children, + cloneElement, + CSSProperties, + FC, + MutableRefObject, + ReactElement, + RefObject, + useEffect, + useRef, + useState +} from 'react'; import { Fiori3CommonProps } from '../interfaces/Fiori3CommonProps'; import { Ui5DomRef } from '../interfaces/Ui5DomRef'; import { Ui5WebComponentMetadata } from '../interfaces/Ui5WebComponentMetadata'; @@ -12,6 +23,11 @@ function toKebabCase(s: string) { return s.replace(/([A-Z])/g, (a, b) => `-${b.toLowerCase()}`); } +const propBlacklist = { + className: true, + innerStyles: true +}; + export interface WithWebComponentPropTypes extends Fiori3CommonProps { innerComponentRef?: (el: HTMLElement) => void; children?: any | void; @@ -19,149 +35,139 @@ export interface WithWebComponentPropTypes extends Fiori3CommonProps { } export function withWebComponent(WebComponent): FC { - class WithWebComponent extends Component { - state = { - updateAfterMount: false - }; - - private wcRef: Ui5DomRef; - private shadowRootRef: HTMLElement; - private eventRegistry = {}; - private eventRegistryWrapped = {}; - - private handleInnerRef = (ref: HTMLElement) => { - const { innerComponentRef } = this.props; - this.wcRef = ref; - if (innerComponentRef) { - innerComponentRef(ref); - } - }; + const getWebComponentMetadata = (): Ui5WebComponentMetadata => { + if (WebComponent) { + return WebComponent.getMetadata(); + } - private getWebComponentMetadata = (): Ui5WebComponentMetadata => { - if (WebComponent) { - return WebComponent.getMetadata(); + return { + getProperties() { + return {}; + }, + getEvents() { + return {}; + }, + getSlots() { + return {}; } - - return { - getProperties() { - return {}; - }, - getEvents() { - return {}; - }, - getSlots() { - return {}; - } - }; }; + }; - private getMetadataBooleans = () => { - return Object.entries(this.getWebComponentMetadata().getProperties()) - .filter(([key, value]) => value.type === Boolean) - .map(([key]) => key); - }; + const getMetadataBooleans = () => { + return Object.entries(getWebComponentMetadata().getProperties()) + .filter(([key, value]) => value.type === Boolean) + .map(([key]) => key); + }; - private createEventWrapperFor = (eventIdentifier, eventHandler) => (e) => { - let payload = Object.keys(this.getWebComponentMetadata().getProperties()).reduce((acc, val) => { - if (/^_/.test(val)) { - return acc; - } - acc[val] = e.target[toKebabCase(val)]; + const createEventWrapperFor = (eventIdentifier, eventHandler) => (e) => { + let payload = Object.keys(getWebComponentMetadata().getProperties()).reduce((acc, val) => { + if (/^_/.test(val)) { return acc; - }, {}); - - payload = Object.keys(this.getWebComponentMetadata().getEvents()[eventIdentifier]).reduce((acc, val) => { - if (val === 'detail' && e[val]) { - return { - ...acc, - ...e[val] - }; + } + acc[val] = e.target[toKebabCase(val)]; + return acc; + }, {}); + + payload = Object.keys(getWebComponentMetadata().getEvents()[eventIdentifier]).reduce((acc, val) => { + if (val === 'detail' && e[val]) { + return { + ...acc, + ...e[val] + }; + } + acc[val] = (e.detail && e.detail[val]) || e[val]; + return acc; + }, payload); + // TODO: Pass Web Component Ref in here? + eventHandler(Event.of(null, e, payload)); + }; + + const getMetadataEvents = () => { + return Object.keys(getWebComponentMetadata().getEvents()); + }; + + const getMetadataSlots = () => { + return Object.keys(getWebComponentMetadata().getSlots()); + }; + + const CustomTag = WebComponent.getMetadata().getTag(); + const slots = WebComponent.getMetadata().getSlots(); + + const WithWebComponent = React.forwardRef((props: T & WithWebComponentPropTypes, wcRef: RefObject) => { + const { className = '' } = props; + + const [updateAfterMount, setUpdateAfterMount] = useState(false); + const prevInnerStylesProp = useRef(null); + const shadowRootRef: MutableRefObject = useRef(); + const eventRegistry = useRef({}); + const eventRegistryWrapped = useRef({}); + const localWcRef = useRef(null); + + const getWcRef = () => wcRef || localWcRef; + + const getBooleanProps = () => { + return getMetadataBooleans().reduce((acc, key) => { + if (props[key]) { + acc[toKebabCase(key)] = true; } - acc[val] = (e.detail && e.detail[val]) || e[val]; return acc; - }, payload); - eventHandler(Event.of(this, e, payload)); + }, {}); }; - private bindEvents = () => { - this.getMetadataEvents().forEach((eventIdentifier) => { + const bindEvents = () => { + getMetadataEvents().forEach((eventIdentifier) => { const alternativeKey = 'on' + capitalizeFirstLetter(eventIdentifier); - const eventHandler = this.props[eventIdentifier] || this.props[alternativeKey]; - if (typeof eventHandler === 'function' && this.eventRegistry[alternativeKey] !== eventHandler) { - if (this.eventRegistry[alternativeKey]) { - this.wcRef.removeEventListener(eventIdentifier, this.eventRegistryWrapped[alternativeKey]); + const eventHandler = props[eventIdentifier] || props[alternativeKey]; + if (typeof eventHandler === 'function' && eventRegistry.current[alternativeKey] !== eventHandler) { + if (eventRegistry.current[alternativeKey]) { + getWcRef().current.removeEventListener(eventIdentifier, eventRegistryWrapped.current[alternativeKey]); } - this.eventRegistryWrapped[alternativeKey] = this.createEventWrapperFor(eventIdentifier, eventHandler); - this.wcRef.addEventListener(eventIdentifier, this.eventRegistryWrapped[alternativeKey]); - this.eventRegistry[alternativeKey] = eventHandler; - } else if (this.eventRegistry[alternativeKey] && !eventHandler) { - this.wcRef.removeEventListener(eventIdentifier, this.eventRegistryWrapped[alternativeKey]); + eventRegistryWrapped.current[alternativeKey] = createEventWrapperFor(eventIdentifier, eventHandler); + getWcRef().current.addEventListener(eventIdentifier, eventRegistryWrapped.current[alternativeKey]); + eventRegistry.current[alternativeKey] = eventHandler; + } else if (eventRegistry.current[alternativeKey] && !eventHandler) { + getWcRef().current.removeEventListener(eventIdentifier, eventRegistryWrapped.current[alternativeKey]); } }); }; - private getMetadataSlots = () => { - return Object.keys(this.getWebComponentMetadata().getSlots()); - }; - - private getMetadataEvents = () => { - return Object.keys(this.getWebComponentMetadata().getEvents()); - }; - - get booleanProps() { - return this.getMetadataBooleans().reduce((acc, key) => { - if (this.props[key]) { - acc[toKebabCase(key)] = true; - } - return acc; - }, {}); - } - - static get propBlacklist() { - return { - className: true, - innerStyles: true - }; - } - - get shadowDomRef() { - if (this.shadowRootRef) { - return this.shadowRootRef; + const getShadowDomRef = () => { + if (shadowRootRef.current) { + return shadowRootRef.current; } - return (this.shadowRootRef = this.wcRef && this.wcRef.getDomRef ? this.wcRef.getDomRef() : null); - } + return (shadowRootRef.current = + getWcRef().current && getWcRef().current.getDomRef ? getWcRef().current.getDomRef() : null); + }; - get regularProps() { - if (this.wcRef) { - this.bindEvents(); + const getRegularProps = () => { + if (getWcRef().current) { + bindEvents(); } - const props = {}; + const regularProps = {}; const slotProps = {}; - Object.entries(this.props) - .filter(([key]) => !this.getMetadataBooleans().includes(key)) + Object.entries(props) + .filter(([key]) => !getMetadataBooleans().includes(key)) .filter( ([key]) => - !this.getMetadataEvents().some( - (eventKey) => `on${capitalizeFirstLetter(eventKey)}` === key || key === eventKey - ) + !getMetadataEvents().some((eventKey) => `on${capitalizeFirstLetter(eventKey)}` === key || key === eventKey) ) - .filter(([key]) => !WithWebComponent.propBlacklist[key]) + .filter(([key]) => !propBlacklist[key]) .forEach(([key, value]) => { - if (this.getMetadataSlots().includes(key)) { + if (getMetadataSlots().includes(key)) { slotProps[key] = value; } else { - props[toKebabCase(key)] = value; + regularProps[toKebabCase(key)] = value; } }); - return { props, slotProps }; - } + return { regularProps, slotProps }; + }; - applyInnerStyles = () => { - const { innerStyles } = this.props; - const shadowRef = this.shadowDomRef; + const applyInnerStyles = () => { + const { innerStyles } = props; + const shadowRef = getShadowDomRef(); if (!shadowRef) { return; } @@ -172,68 +178,57 @@ export function withWebComponent(WebComponent): FC { } }; - removeOldStyles = (prevStyles) => { + const removeOldStyles = (prevStyles) => { if (prevStyles) { Object.keys(prevStyles).forEach((key) => { - this.shadowDomRef.style[key] = ''; + getShadowDomRef().style[key] = ''; }); } }; - componentDidUpdate(prevProps) { - const executionList = []; - - if (prevProps.innerStyles !== this.props.innerStyles) { - executionList.push(() => this.removeOldStyles(prevProps.innerStyles)); - executionList.push(this.applyInnerStyles); - } + // effects + useEffect(() => { + requestAnimationFrame(() => { + removeOldStyles(prevInnerStylesProp.current); + applyInnerStyles(); + }); - if (executionList.length > 0) { - requestAnimationFrame(() => { - executionList.forEach((exec) => exec()); - }); - } - } + prevInnerStylesProp.current = props.innerStyles; + }, [props.innerStyles]); - componentDidMount() { - if (this.wcRef) { - this.bindEvents(); + useEffect(() => { + if (getWcRef().current) { + bindEvents(); requestAnimationFrame(() => { - this.applyInnerStyles(); + applyInnerStyles(); }); } else { - this.setState({ - updateAfterMount: true - }); + setUpdateAfterMount(true); } - } - - render() { - const { className = '' } = this.props; - - const CustomTag = WebComponent.getMetadata().getTag(); - const slots = WebComponent.getMetadata().getSlots(); - - const { props, slotProps } = this.regularProps; - const { children, ...regularProps } = props as T & WithWebComponentPropTypes; - return ( - - {Object.keys(slots).map((slot) => { - if (slotProps[slot]) { - return Children.map(slotProps[slot], (item: ReactElement, index) => - cloneElement(item, { - key: `${slot}-${index}`, - 'data-ui5-slot': slot - }) - ); - } - return null; - })} - {children} - - ); - } - } - + }, []); + + // render + const { regularProps: passedProps, slotProps: actualSlotProps } = getRegularProps(); + + const { children, ...rest } = passedProps as T & WithWebComponentPropTypes; + return ( + + {Object.keys(slots).map((slot) => { + if (actualSlotProps[slot]) { + return Children.map(actualSlotProps[slot], (item: ReactElement, index) => + cloneElement(item, { + key: `${slot}-${index}`, + 'data-ui5-slot': slot + }) + ); + } + return null; + })} + {children} + + ); + }); + + // @ts-ignore return WithWebComponent; } From abb0061bf917fb7ef58795b54d3847151dcb3531 Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Thu, 27 Jun 2019 13:56:36 +0200 Subject: [PATCH 07/12] refactoring: move components to new ref api closes #35 --- .../main/src/internal/withWebComponent.tsx | 9 +-- .../main/src/webComponents/Dialog/index.tsx | 55 ++++++++----------- 2 files changed, 27 insertions(+), 37 deletions(-) diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index 976c55f5359..fdd26c665ee 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -6,6 +6,8 @@ import React, { FC, MutableRefObject, ReactElement, + Ref, + RefForwardingComponent, RefObject, useEffect, useRef, @@ -29,12 +31,12 @@ const propBlacklist = { }; export interface WithWebComponentPropTypes extends Fiori3CommonProps { - innerComponentRef?: (el: HTMLElement) => void; + ref?: Ref; children?: any | void; innerStyles?: CSSProperties; } -export function withWebComponent(WebComponent): FC { +export function withWebComponent(WebComponent): RefForwardingComponent { const getWebComponentMetadata = (): Ui5WebComponentMetadata => { if (WebComponent) { return WebComponent.getMetadata(); @@ -229,6 +231,5 @@ export function withWebComponent(WebComponent): FC { ); }); - // @ts-ignore - return WithWebComponent; + return WithWebComponent as RefForwardingComponent; } diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx index 167eaf44edd..c0c253d25b7 100644 --- a/packages/main/src/webComponents/Dialog/index.tsx +++ b/packages/main/src/webComponents/Dialog/index.tsx @@ -1,7 +1,8 @@ import { Event } from '@ui5/webcomponents-react-base'; import UI5Dialog from '@ui5/webcomponents/dist/Dialog'; -import React, { Component, ReactNode } from 'react'; +import React, { ReactNode, RefForwardingComponent, RefObject, useEffect, useRef } from 'react'; import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; +import { Ui5DomRef } from '../../interfaces/Ui5DomRef'; export interface DialogPropTypes extends WithWebComponentPropTypes { initialFocus?: string; // @generated @@ -18,44 +19,32 @@ export interface DialogPropTypes extends WithWebComponentPropTypes { open?: boolean; } -const InnerDialog = withWebComponent(UI5Dialog); +const InnerDialog: RefForwardingComponent = withWebComponent(UI5Dialog); -export class Dialog extends Component { - static defaultProps = { - initialFocus: null, // @generated - headerText: '' // @generated - }; +const Dialog = React.forwardRef((props: DialogPropTypes, dialogRef: RefObject) => { + const localDialogRef: RefObject = useRef(null); - private dialogRef; + const getDialogRef = () => dialogRef || localDialogRef; - private handleDialogRef = (el) => { - const { innerComponentRef } = this.props; - this.dialogRef = el; - if (innerComponentRef) { - innerComponentRef(el); + const setDialogOpen = (open) => { + if (!getDialogRef().current || (!getDialogRef().current as any).open) { + return; } + return open ? (getDialogRef().current as any).open() : (getDialogRef().current as any).close(); }; - private setDialogOpen(open) { - if (!this.dialogRef || !this.dialogRef.open) { - return; - } - return open ? this.dialogRef.open() : this.dialogRef.close(); - } + useEffect(() => { + setDialogOpen(props.open); + }, [props.open]); - componentDidUpdate(prevProps) { - if (prevProps.open !== this.props.open) { - this.setDialogOpen(this.props.open); - } - } + return ; +}); - componentDidMount() { - if (this.props.open) { - this.setDialogOpen(true); - } - } +Dialog.defaultProps = { + initialFocus: null, // @generated + headerText: '' // @generated +}; - render() { - return ; - } -} +Dialog.displayName = 'Dialog'; + +export { Dialog }; From 8733b5c6647ed3f87f07c8e50c87d7327b19e682 Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Thu, 27 Jun 2019 14:29:24 +0200 Subject: [PATCH 08/12] WIP: move Popover to new ref api --- .../main/src/components/ActionSheet/index.tsx | 11 +- .../columnHeader/ColumnHeaderModal.tsx | 13 +-- .../main/src/webComponents/Dialog/index.tsx | 13 ++- .../main/src/webComponents/Popover/index.tsx | 102 ++++++++---------- 4 files changed, 61 insertions(+), 78 deletions(-) diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx index 837e8903b2e..c7e02b8ead8 100644 --- a/packages/main/src/components/ActionSheet/index.tsx +++ b/packages/main/src/components/ActionSheet/index.tsx @@ -1,5 +1,5 @@ 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'; @@ -7,6 +7,7 @@ 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'; export interface ActionSheetPropTypes extends Fiori3CommonProps { openBy: ReactNode; @@ -26,7 +27,7 @@ export class ActionSheet extends Component = React.createRef(); private onActionButtonClicked = (handler) => () => { this.setState({ open: false }); @@ -52,10 +53,6 @@ export class ActionSheet extends Component { - this.popoverRef = el; - }; - render() { const { children, placement, classes, openBy, style } = this.props as ActionSheetPropsInternal; @@ -69,7 +66,7 @@ export class ActionSheet extends Component ({ modalRoot: { @@ -49,11 +50,7 @@ export class ColumnHeaderModal extends Component { onFilterChange: () => {} }; - private popoverRef = null; - - private handlePopoverRef = (el) => { - this.popoverRef = el; - }; + private popoverRef: RefObject = React.createRef(); private handleSort = (e) => { const sortType = e.getParameter('item').getAttribute('data-sort'); @@ -62,7 +59,7 @@ export class ColumnHeaderModal extends Component { } else { this.props.sortDescending(Event.of(this, e.getOriginalEvent())); } - this.popoverRef.close(); + this.popoverRef.current.close(); }; private static DEFAULT_FILTER_COMPONENT({ filter, onChange }) { @@ -84,7 +81,7 @@ export class ColumnHeaderModal extends Component { noArrow horizontalAlign={PopoverHorizontalAlign.Left} placementType={PlacementType.Bottom} - innerComponentRef={this.handlePopoverRef} + ref={this.popoverRef} > {showSort && ( diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx index c0c253d25b7..8406bd3d49a 100644 --- a/packages/main/src/webComponents/Dialog/index.tsx +++ b/packages/main/src/webComponents/Dialog/index.tsx @@ -19,18 +19,23 @@ export interface DialogPropTypes extends WithWebComponentPropTypes { open?: boolean; } +export interface Ui5DialogDomRef extends Ui5DomRef { + open: () => void; + close: () => void; +} + const InnerDialog: RefForwardingComponent = withWebComponent(UI5Dialog); -const Dialog = React.forwardRef((props: DialogPropTypes, dialogRef: RefObject) => { - const localDialogRef: RefObject = useRef(null); +const Dialog = React.forwardRef((props: DialogPropTypes, dialogRef: RefObject) => { + const localDialogRef: RefObject = useRef(null); const getDialogRef = () => dialogRef || localDialogRef; const setDialogOpen = (open) => { - if (!getDialogRef().current || (!getDialogRef().current as any).open) { + if (!getDialogRef().current || !getDialogRef().current.open) { return; } - return open ? (getDialogRef().current as any).open() : (getDialogRef().current as any).close(); + return open ? getDialogRef().current.open() : getDialogRef().current.close(); }; useEffect(() => { diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index db3b2e31791..bdb7bbeaea5 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -1,10 +1,11 @@ import { Event } from '@ui5/webcomponents-react-base'; import UI5Popover from '@ui5/webcomponents/dist/Popover'; -import React, { Component, CSSProperties, ReactNode, RefObject } from 'react'; +import React, { CSSProperties, ReactNode, RefObject, useCallback, useEffect, useRef } from 'react'; 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'; export interface PopoverPropTypes extends WithWebComponentPropTypes { initialFocus?: string; // @generated @@ -29,75 +30,58 @@ export interface PopoverPropTypes extends WithWebComponentPropTypes { open?: boolean; } +export interface Ui5PopoverDomRef extends Ui5DomRef { + openBy: (p: HTMLElement) => void; + close: () => void; +} + const InternalPopover = withWebComponent(UI5Popover); -class Popover extends Component { - private popoverRef: any; - private openByRef: RefObject = React.createRef(); +export const Popover = React.forwardRef((props: PopoverPropTypes, popoverRef: RefObject) => { + const { openBy, openByStyle, open, ...rest } = props; - static defaultProps = { - initialFocus: null, // @generated - headerText: '', // @generated - placementType: PlacementType.Right, // @generated - horizontalAlign: PopoverHorizontalAlign.Center, // @generated - verticalAlign: PopoverVerticalAlign.Center // @generated - }; + const localPopoverRef: RefObject = useRef(null); + const openByRef: RefObject = useRef(null); + const getPopoverRef = () => popoverRef || localPopoverRef; - private handleOpenPopover = () => { - return this.popoverRef.openBy ? this.popoverRef.openBy(this.openByRef.current) : null; - }; + const handleOpenPopover = useCallback(() => { + return getPopoverRef().current.openBy ? getPopoverRef().current.openBy(openByRef.current) : null; + }, [getPopoverRef(), openByRef]); - private closePopover = () => { - return this.popoverRef.close ? this.popoverRef.close() : null; - }; - - getPopoverRef = (el: any) => { - const { innerComponentRef } = this.props; - this.popoverRef = el; - if (innerComponentRef) { - innerComponentRef(el); - } + const closePopover = () => { + return getPopoverRef().current.close ? getPopoverRef().current.close() : null; }; - componentDidMount() { - const { open } = this.props; - if (!this.popoverRef) { - return; - } + useEffect(() => { if (open) { - this.handleOpenPopover(); + handleOpenPopover(); } else { - this.closePopover(); + closePopover(); } - } + }, [open]); - componentDidUpdate(prevProps) { - if (prevProps.open !== this.props.open) { - if (this.props.open) { - this.handleOpenPopover(); - } else { - this.closePopover(); - } - } + let style = { display: 'inline-block' }; + if (openByStyle) { + style = Object.assign(openByStyle, style); } - render() { - const { openBy, openByStyle, ...props } = this.props; - let style = { display: 'inline-block' }; - if (openByStyle) { - style = Object.assign(openByStyle, style); - } - return ( - <> - {openBy && ( -
- {openBy} -
- )} - - - ); - } -} + return ( + <> + {openBy && ( +
+ {openBy} +
+ )} + + + ); +}); -export { Popover }; +Popover.defaultProps = { + initialFocus: null, // @generated + headerText: '', // @generated + placementType: PlacementType.Right, // @generated + horizontalAlign: PopoverHorizontalAlign.Center, // @generated + verticalAlign: PopoverVerticalAlign.Center // @generated +}; +Popover.displayName = 'Popover'; From 679339d8286e681b68015aa7a73d0966bd47500a Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Mon, 1 Jul 2019 10:36:50 +0200 Subject: [PATCH 09/12] WIP: Update tests --- packages/base/src/index.ts | 5 +- packages/base/src/withStyles/index.tsx | 10 +- .../main/__karma_snapshots__/ActionSheet.md | 30 +- .../__karma_snapshots__/AnalyticalCard.md | 148 +- .../__karma_snapshots__/AnalyticalTable.md | 968 +++++------- packages/main/__karma_snapshots__/Avatar.md | 156 +- packages/main/__karma_snapshots__/Badge.md | 28 +- .../main/__karma_snapshots__/BusyIndicator.md | 48 +- packages/main/__karma_snapshots__/Button.md | 12 +- packages/main/__karma_snapshots__/Calendar.md | 12 +- .../__karma_snapshots__/CalendarHeader.md | 12 +- packages/main/__karma_snapshots__/Card.md | 12 +- packages/main/__karma_snapshots__/Carousel.md | 534 +++---- packages/main/__karma_snapshots__/CheckBox.md | 12 +- .../__karma_snapshots__/CustomListItem.md | 12 +- .../main/__karma_snapshots__/DatePicker.md | 12 +- .../main/__karma_snapshots__/DayPicker.md | 12 +- packages/main/__karma_snapshots__/Dialog.md | 18 +- .../main/__karma_snapshots__/FilterBar.md | 718 ++++----- .../GroupHeaderListItem.md | 12 +- packages/main/__karma_snapshots__/Icon.md | 12 +- packages/main/__karma_snapshots__/Input.md | 12 +- packages/main/__karma_snapshots__/Label.md | 12 +- packages/main/__karma_snapshots__/Link.md | 12 +- packages/main/__karma_snapshots__/List.md | 12 +- .../main/__karma_snapshots__/MessageBox.md | 476 +++--- .../main/__karma_snapshots__/MessageStrip.md | 12 +- .../main/__karma_snapshots__/MonthPicker.md | 12 +- .../main/__karma_snapshots__/MultiComboBox.md | 12 +- .../main/__karma_snapshots__/ObjectPage.md | 1390 +++++++---------- .../main/__karma_snapshots__/ObjectStatus.md | 112 +- packages/main/__karma_snapshots__/Option.md | 12 +- packages/main/__karma_snapshots__/Panel.md | 12 +- packages/main/__karma_snapshots__/Popover.md | 18 +- .../__karma_snapshots__/ProgressIndicator.md | 100 +- .../main/__karma_snapshots__/RadioButton.md | 12 +- .../SegmentedButtonItem.md | 80 +- packages/main/__karma_snapshots__/Select.md | 12 +- packages/main/__karma_snapshots__/ShellBar.md | 12 +- .../main/__karma_snapshots__/ShellBarItem.md | 12 +- .../__karma_snapshots__/StandardListItem.md | 12 +- packages/main/__karma_snapshots__/Switch.md | 12 +- packages/main/__karma_snapshots__/Tab.md | 12 +- .../main/__karma_snapshots__/TabContainer.md | 12 +- .../main/__karma_snapshots__/TabSeparator.md | 12 +- packages/main/__karma_snapshots__/Table.md | 12 +- .../main/__karma_snapshots__/TableCell.md | 12 +- .../main/__karma_snapshots__/TableColumn.md | 12 +- packages/main/__karma_snapshots__/TableRow.md | 12 +- packages/main/__karma_snapshots__/Text.md | 36 +- packages/main/__karma_snapshots__/TextArea.md | 12 +- packages/main/__karma_snapshots__/Timeline.md | 12 +- .../main/__karma_snapshots__/TimelineItem.md | 12 +- packages/main/__karma_snapshots__/Title.md | 12 +- .../main/__karma_snapshots__/ToggleButton.md | 12 +- packages/main/__karma_snapshots__/Token.md | 12 +- .../main/__karma_snapshots__/Tokenizer.md | 12 +- .../__karma_snapshots__/VariantManagement.md | 80 +- .../main/__karma_snapshots__/YearPicker.md | 12 +- .../Grid/__snapshots__/Grid.test.tsx.snap | 22 +- packages/main/src/components/Grid/index.tsx | 21 +- .../src/components/ThemeProvider/index.tsx | 33 +- .../main/src/internal/withWebComponent.tsx | 11 +- 63 files changed, 2467 insertions(+), 3055 deletions(-) diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts index 704914ddafd..603f2b3733e 100644 --- a/packages/base/src/index.ts +++ b/packages/base/src/index.ts @@ -15,8 +15,8 @@ import KeyCodes from './KeyCodes'; import { LOG_LEVEL, Logger } from './Logger'; import Optional from './Optional'; import StyleClassHelper from './StyleClassHelper'; - import { deprecationNotice, pushElementBackInScreen } from './Util'; +import { createGenerateClassName } from './withStyles/createGenerateClassName'; export { StyleClassHelper, @@ -35,5 +35,6 @@ export { HSLColor, sap_fiori_3, bootstrap, - withStyles + withStyles, + createGenerateClassName }; diff --git a/packages/base/src/withStyles/index.tsx b/packages/base/src/withStyles/index.tsx index 13be74f702e..c07b906a5de 100644 --- a/packages/base/src/withStyles/index.tsx +++ b/packages/base/src/withStyles/index.tsx @@ -2,9 +2,6 @@ import hoistNonReactStatics from 'hoist-non-react-statics'; import React, { ComponentType, ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'; // @ts-ignore import { createUseStyles, useTheme } from 'react-jss'; -import { createGenerateClassName } from './createGenerateClassName'; - -const generateClassName = createGenerateClassName(); const getDisplayName = (Component) => Component.displayName || Component.name || 'Component'; const wrapComponentName = (componentName) => `WithStyles(${componentName})`; @@ -15,8 +12,10 @@ export interface WithStylesComponent extends ForwardRefExoticComponent(styles): any { return (Component: ComponentType) => { + const displayName = wrapComponentName(getDisplayName(Component)); + const useStyles = createUseStyles(styles, { - generateClassName + name: displayName }); const WithStyles: WithStylesComponent = React.forwardRef((props: T, ref: RefObject) => { @@ -27,7 +26,8 @@ export function withStyles(styles): any { }); WithStyles.defaultProps = Component.defaultProps; - WithStyles.displayName = wrapComponentName(getDisplayName(Component)); + WithStyles.displayName = displayName; + WithStyles.InnerComponent = Component; hoistNonReactStatics(WithStyles, Component); return WithStyles; }; diff --git a/packages/main/__karma_snapshots__/ActionSheet.md b/packages/main/__karma_snapshots__/ActionSheet.md index 5c1e7362cbc..aee2dc8845c 100644 --- a/packages/main/__karma_snapshots__/ActionSheet.md +++ b/packages/main/__karma_snapshots__/ActionSheet.md @@ -4,30 +4,26 @@ ``` - - - - - + + + + +
- - - -
    - - - + + +
      + + - - + + ``` diff --git a/packages/main/__karma_snapshots__/AnalyticalCard.md b/packages/main/__karma_snapshots__/AnalyticalCard.md index 82c41d7e98f..1ba4659da51 100644 --- a/packages/main/__karma_snapshots__/AnalyticalCard.md +++ b/packages/main/__karma_snapshots__/AnalyticalCard.md @@ -4,105 +4,93 @@ ``` - - - - + + + +
      - - - -
      -
      -
      - - Title - -
      - Subtitle -
      + + +
      +
      +
      + + Title + +
      + Subtitle
      -
      -
      -
      -
      - Value -
      -
      -
      -
      - Unit -
      +
      +
      +
      +
      +
      + Value +
      +
      +
      +
      + Unit
      -
      +
      +
      +
      +
      - -
      - - - - - Target - - - - -
      + + +
      -
      -
      +
      + +
      + + + Deviation - - - -
      - - - - - Deviation - - - - -
      +       +       +
      -
      - Description -
      +
      +
      + Description
      - - - +
      + +
      - - - - - I'm a content! - - - - + + + + I'm a content! + + +
      - - + + ``` diff --git a/packages/main/__karma_snapshots__/AnalyticalTable.md b/packages/main/__karma_snapshots__/AnalyticalTable.md index a091354aa22..8c4675767ce 100644 --- a/packages/main/__karma_snapshots__/AnalyticalTable.md +++ b/packages/main/__karma_snapshots__/AnalyticalTable.md @@ -4,27 +4,23 @@ ``` - - - - + + + +
      - - - -
      - - <WithWebComponent theme={{...}} level="H2"> - <ui5-title level="H2" class=""> - Test - </ui5-title> - </WithWebComponent> - -
      -       -       -       - + + +
      + + <ui5-title level="H2" class=""> + Test + </ui5-title> + +
      +       +       +
      @@ -32,212 +28,164 @@
      - - - - - - - -
      -
      -
      - Name -
      - -
      - -
      -
      + + + + + +
      +
      +
      + Name
      - - - - - - - - - - Sort Ascending - - - - - - - Sort Descending - - - - - - - - - - - - - - - - - - - - - - - -
      -
      -
      - Age -
      - -
      - -
      -
      + +
      + +
      +
      +
      + + + + + + + Sort Ascending + + + + + Sort Descending + + + + + + + + + + + + + + + + +
      +
      +
      + Age
      - - - - - - - - - - Sort Ascending - - - - - - - Sort Descending - - - - - - - - - - - - - - - - - - - - - - - -
      -
      -
      - Friend Name -
      - -
      - -
      -
      + +
      + +
      +
      +
      + + + + + + + Sort Ascending + + + + + Sort Descending + + + + + + + + + + + + + + + + +
      +
      +
      + Friend Name
      - - - - - - - - - - Sort Ascending - - - - - - - Sort Descending - - - - - - - - - - - - - - - - - - - - - - - -
      -
      -
      - - Friend Age - -
      - -
      - -
      -
      + +
      + +
      +
      +
      + + + + + + + Sort Ascending + + + + + Sort Descending + + + + + + + + + + + + + + + + +
      +
      +
      + + Friend Age +
      - - - - - - - - - - Sort Ascending - - - - - - - Sort Descending - - - - - - - - - - - - - - - - + +
      + +
      +
      +
      + + + + + + + Sort Ascending + + + + + Sort Descending + + + + + + + + + + +
      @@ -593,57 +541,45 @@
      - - - -
      -
      - -
      - - - - - < - - - - - - - - - 1 - - - - - - - - - > - - - - + + +
      +
      +
      - - - + + + + < + + + + + + + 1 + + + + + + + > + + + +
      +       +
      - - - +
      @@ -652,8 +588,8 @@
      - - + + ``` @@ -661,27 +597,23 @@ ``` - - - - + + + +
      - - - -
      - - <WithWebComponent theme={{...}} level="H2"> - <ui5-title level="H2" class=""> - Test - </ui5-title> - </WithWebComponent> - -
      -       -       -       - + + +
      + + <ui5-title level="H2" class=""> + Test + </ui5-title> + +
      +       +       +
      @@ -689,212 +621,164 @@
      - - - - - - - -
      -
      -
      - Name -
      - -
      - -
      -
      + + + + + +
      +
      +
      + Name
      - - - - - - - - - - Sort Ascending - - - - - - - Sort Descending - - - - - - - - - - - - - - - - - - - - - - - -
      -
      -
      - Age -
      - -
      - -
      -
      + +
      + +
      +
      +
      + + + + + + + Sort Ascending + + + + + Sort Descending + + + + + + + + + + + + + + + + +
      +
      +
      + Age
      - - - - - - - - - - Sort Ascending - - - - - - - Sort Descending - - - - - - - - - - - - - - - - - - - - - - - -
      -
      -
      - Friend Name -
      - -
      - -
      -
      + +
      + +
      +
      +
      + + + + + + + Sort Ascending + + + + + Sort Descending + + + + + + + + + + + + + + + + +
      +
      +
      + Friend Name
      - - - - - - - - - - Sort Ascending - - - - - - - Sort Descending - - - - - - - - - - - - - - - - - - - - - - - -
      -
      -
      - - Friend Age - -
      - -
      - -
      -
      + +
      + +
      +
      +
      + + + + + + + Sort Ascending + + + + + Sort Descending + + + + + + + + + + + + + + + + +
      +
      +
      + + Friend Age +
      - - - - - - - - - - Sort Ascending - - - - - - - Sort Descending - - - - - - - - - - - - - - - - + +
      + +
      +
      +
      + + + + + + + Sort Ascending + + + + + Sort Descending + + + + + + + + + + +
      @@ -1258,66 +1142,52 @@
      - - - -
      -
      - -
      - - - - - < - - - - - - - - - 1 - - - - - - - - - 2 - - - - - - - - - > - - - - + + +
      +
      +
      - - - + + + + < + + + + + + + 1 + + + + + + + 2 + + + + + + + > + + + +
      +       +
      - - - +
      @@ -1326,8 +1196,8 @@
      - - + + ``` diff --git a/packages/main/__karma_snapshots__/Avatar.md b/packages/main/__karma_snapshots__/Avatar.md index 6c53092b2c5..39c067b45b3 100644 --- a/packages/main/__karma_snapshots__/Avatar.md +++ b/packages/main/__karma_snapshots__/Avatar.md @@ -4,15 +4,15 @@ ``` - - - - + + + + - - + + ``` @@ -20,15 +20,15 @@ ``` - - - - + + + + - - + + ``` @@ -36,15 +36,15 @@ ``` - - - - + + + + - - + + ``` @@ -52,15 +52,15 @@ ``` - - - - + + + + - - + + ``` @@ -68,15 +68,15 @@ ``` - - - - + + + + - - + + ``` @@ -84,15 +84,15 @@ ``` - - - - + + + + - - + + ``` @@ -100,15 +100,15 @@ ``` - - - - + + + + - - + + ``` @@ -116,15 +116,15 @@ ``` - - - - + + + + - - + + ``` @@ -132,15 +132,15 @@ ``` - - - - + + + + - - + + ``` @@ -148,15 +148,15 @@ ``` - - - - + + + + - - + + ``` @@ -164,15 +164,15 @@ ``` - - - - + + + + - - + + ``` @@ -180,15 +180,15 @@ ``` - - - - + + + + - - + + ``` @@ -196,17 +196,17 @@ ``` - - - - + + + + JD - - + + ``` diff --git a/packages/main/__karma_snapshots__/Badge.md b/packages/main/__karma_snapshots__/Badge.md index bee6d9f4051..b4d23a5c9c6 100644 --- a/packages/main/__karma_snapshots__/Badge.md +++ b/packages/main/__karma_snapshots__/Badge.md @@ -4,15 +4,15 @@ ``` - - - + + + My Badge - - - + + + ``` @@ -20,20 +20,18 @@ ``` - - - + + + - - - + My Badge - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/BusyIndicator.md b/packages/main/__karma_snapshots__/BusyIndicator.md index 0dd80728758..02dc792f529 100644 --- a/packages/main/__karma_snapshots__/BusyIndicator.md +++ b/packages/main/__karma_snapshots__/BusyIndicator.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` @@ -18,13 +18,13 @@ ``` - - - + + + - - - + + + ``` @@ -32,13 +32,13 @@ ``` - - - + + + - - - + + + ``` @@ -46,13 +46,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Button.md b/packages/main/__karma_snapshots__/Button.md index 0d068cb1d4c..fa69ee432a5 100644 --- a/packages/main/__karma_snapshots__/Button.md +++ b/packages/main/__karma_snapshots__/Button.md @@ -4,13 +4,13 @@ ``` - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Calendar.md b/packages/main/__karma_snapshots__/Calendar.md index 93800e7d0a0..13dec4e39dd 100644 --- a/packages/main/__karma_snapshots__/Calendar.md +++ b/packages/main/__karma_snapshots__/Calendar.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/CalendarHeader.md b/packages/main/__karma_snapshots__/CalendarHeader.md index 333b6ef94a2..d1ec9747655 100644 --- a/packages/main/__karma_snapshots__/CalendarHeader.md +++ b/packages/main/__karma_snapshots__/CalendarHeader.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Card.md b/packages/main/__karma_snapshots__/Card.md index dc56bb5e8c1..a2d66d5d358 100644 --- a/packages/main/__karma_snapshots__/Card.md +++ b/packages/main/__karma_snapshots__/Card.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Carousel.md b/packages/main/__karma_snapshots__/Carousel.md index 0dc3351f44f..6b7d9b2a4fa 100644 --- a/packages/main/__karma_snapshots__/Carousel.md +++ b/packages/main/__karma_snapshots__/Carousel.md @@ -4,10 +4,10 @@ ``` - - - - + + + +
      @@ -48,56 +48,50 @@
      - - - -
      -
      - - - - - -
      -
      - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - -
      -
      - - - - - -
      + + +
      +
      + + +
      - - - +
      + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + +
      +
      + + + +
      +
      +       +
      -       -       +       + ``` @@ -105,10 +99,10 @@ ``` - - - - + + + +
      @@ -164,42 +158,34 @@
      - - - -
      -
      - - - - - -
      -
      - -
      -
      - - - - - -
      + + +
      +
      + + + +
      +
      + +
      +
      + + +
      - - - +
      +       +
      -       -       +       + ``` @@ -207,10 +193,10 @@ ``` - - - - + + + +
      @@ -251,56 +237,50 @@
      - - - -
      -
      - - - - - -
      -
      - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - -
      -
      - - - - - -
      + + +
      +
      + + + +
      +
      + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 +
      - - - +
      + + + +
      +
      +       +
      -       -       +       + ``` @@ -308,10 +288,10 @@ ``` - - - - + + + +
      @@ -352,56 +332,50 @@
      - - - -
      -
      - - - - - -
      -
      - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - -
      -
      - - - - - -
      + + +
      +
      + + +
      - - - +
      + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + +
      +
      + + + +
      +
      +       +
      -       -       +       + ``` @@ -409,56 +383,50 @@ ``` - - - - + + + +
      - - - -
      -
      - - - - - -
      -
      - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - -
      -
      - - - - - -
      + + +
      +
      + + + +
      +
      + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + +
      +
      + + +
      - - - +
      +       +
      @@ -501,8 +469,8 @@
      - - + + ``` @@ -510,10 +478,10 @@ ``` - - - - + + + +
      @@ -554,56 +522,50 @@
      - - - -
      -
      - - - - - -
      -
      - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - -
      -
      - - - - - -
      + + +
      +
      + + + +
      +
      + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 +
      - - - +
      + + + +
      +
      +       +
      -       -       +       + ``` diff --git a/packages/main/__karma_snapshots__/CheckBox.md b/packages/main/__karma_snapshots__/CheckBox.md index e9f3f32b2cf..b77f76286bd 100644 --- a/packages/main/__karma_snapshots__/CheckBox.md +++ b/packages/main/__karma_snapshots__/CheckBox.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/CustomListItem.md b/packages/main/__karma_snapshots__/CustomListItem.md index aa8861cf9b6..8365cb62eb1 100644 --- a/packages/main/__karma_snapshots__/CustomListItem.md +++ b/packages/main/__karma_snapshots__/CustomListItem.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/DatePicker.md b/packages/main/__karma_snapshots__/DatePicker.md index 0f8cd21065a..a971fbd5ab8 100644 --- a/packages/main/__karma_snapshots__/DatePicker.md +++ b/packages/main/__karma_snapshots__/DatePicker.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/DayPicker.md b/packages/main/__karma_snapshots__/DayPicker.md index 30cd1c08497..e14c9b2123a 100644 --- a/packages/main/__karma_snapshots__/DayPicker.md +++ b/packages/main/__karma_snapshots__/DayPicker.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Dialog.md b/packages/main/__karma_snapshots__/Dialog.md index fdab69d5e4d..dc1201418ae 100644 --- a/packages/main/__karma_snapshots__/Dialog.md +++ b/packages/main/__karma_snapshots__/Dialog.md @@ -4,15 +4,15 @@ ``` - - - - - - - - - + + + + + + + + + ``` diff --git a/packages/main/__karma_snapshots__/FilterBar.md b/packages/main/__karma_snapshots__/FilterBar.md index a1742560eb0..3ffe24df882 100644 --- a/packages/main/__karma_snapshots__/FilterBar.md +++ b/packages/main/__karma_snapshots__/FilterBar.md @@ -4,154 +4,118 @@ ``` - - - - + + + +
      - - - - -
      -
      - - - <WithWebComponent theme={{...}} level="H4"> - <ui5-title level="H4" class=""> - Variant 1 - </ui5-title> - </WithWebComponent> - - - -
      + + + +
      +
      + + + <ui5-title level="H4" class=""> + Variant 1 + </ui5-title> + + +
      - - - - - - - - - - - Variant 1 - - - - - - - Variant 2 - - - - - - - - - - - - - +
      + + + + + + + + Variant 1 + + + + + Variant 2 + + + + + + +       +       +
      - - - +
      - - - -
      - - -
      -       -       -       - - - -
      - -
      - - - - - -
      + + +
      + + +
      +       +       + + +
      + +
      + + +
      - - - +
      +       +
      - - + + ``` @@ -159,165 +123,125 @@ ``` - - - - + + + +
      - - - - -
      -
      - - - <WithWebComponent theme={{...}} level="H4"> - <ui5-title level="H4" class=""> - Variant 1 - </ui5-title> - </WithWebComponent> - - - -
      + + + +
      +
      + + + <ui5-title level="H4" class=""> + Variant 1 + </ui5-title> + + +
      - - - - - - - - - - - Variant 1 - - - - - - - Variant 2 - - - - - - - - - - - - - +
      + + + + + + + + Variant 1 + + + + + Variant 2 + + + + + + +       +       +
      - - - -
      - - + + +
      + + +
      +       +       + + +
      + +
      + + +
      - - - - - - -
      - -
      - - - - - -
      -
      -       -       -       - - - -
      - - - - - - -
      -       -       -       +
      +       +       + + +
      + + + + +
      +       +
      - - + + ``` @@ -325,163 +249,123 @@ ``` - - - - + + + +
      - - - - -
      -
      - - - <WithWebComponent theme={{...}} level="H4"> - <ui5-title level="H4" class=""> - Variant 1 - </ui5-title> - </WithWebComponent> - - - -
      + + + +
      +
      + + + <ui5-title level="H4" class=""> + Variant 1 + </ui5-title> + + +
      - - - - - - - - - - - Variant 1 - - - - - - - Variant 2 - - - - - - - - - - - - - +
      + + + + + + + + Variant 1 + + + + + Variant 2 + + + + + + +       +       +
      - - - -
      - - -
      -       -       -       - - - -
      - - - - - - -
      -       -       -       - - - -
      - - - - - - -
      -       -       -       + + +
      + + +
      +       +       + + +
      + + + + +
      +       +       + + +
      + + + + +
      +       +
      - - + + ``` diff --git a/packages/main/__karma_snapshots__/GroupHeaderListItem.md b/packages/main/__karma_snapshots__/GroupHeaderListItem.md index fe377dbb4eb..671c68993bc 100644 --- a/packages/main/__karma_snapshots__/GroupHeaderListItem.md +++ b/packages/main/__karma_snapshots__/GroupHeaderListItem.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Icon.md b/packages/main/__karma_snapshots__/Icon.md index 7153dc01a45..0617491a5bb 100644 --- a/packages/main/__karma_snapshots__/Icon.md +++ b/packages/main/__karma_snapshots__/Icon.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Input.md b/packages/main/__karma_snapshots__/Input.md index b0756680e07..dfd5e376743 100644 --- a/packages/main/__karma_snapshots__/Input.md +++ b/packages/main/__karma_snapshots__/Input.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Label.md b/packages/main/__karma_snapshots__/Label.md index 505951bc89b..5c71689b723 100644 --- a/packages/main/__karma_snapshots__/Label.md +++ b/packages/main/__karma_snapshots__/Label.md @@ -4,13 +4,13 @@ ``` - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Link.md b/packages/main/__karma_snapshots__/Link.md index b3d3dc5f621..94274ed627e 100644 --- a/packages/main/__karma_snapshots__/Link.md +++ b/packages/main/__karma_snapshots__/Link.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/List.md b/packages/main/__karma_snapshots__/List.md index da1031ca401..4bcf75184e5 100644 --- a/packages/main/__karma_snapshots__/List.md +++ b/packages/main/__karma_snapshots__/List.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/MessageBox.md b/packages/main/__karma_snapshots__/MessageBox.md index 394079bb508..4f766e7c699 100644 --- a/packages/main/__karma_snapshots__/MessageBox.md +++ b/packages/main/__karma_snapshots__/MessageBox.md @@ -4,56 +4,46 @@ ``` - - - - + + + +
      - - - +
      - <WithWebComponent theme={{...}} level="H5"> - <ui5-title level="H5" class=""> - Confirmation - </ui5-title> - </WithWebComponent> + <ui5-title level="H5" class=""> + Confirmation + </ui5-title>
      - - - - - Confirm - OK - - - - + + + + Confirm - OK + + +
      @@ -61,8 +51,8 @@
      - - + + ``` @@ -70,56 +60,46 @@ ``` - - - - + + + +
      - - - +
      - <WithWebComponent theme={{...}} level="H5"> - <ui5-title level="H5" class=""> - Confirmation - </ui5-title> - </WithWebComponent> + <ui5-title level="H5" class=""> + Confirmation + </ui5-title>
      - - - - - Confirm - Cancel - - - - + + + + Confirm - Cancel + + +
      @@ -127,8 +107,8 @@
      - - + + ``` @@ -136,47 +116,39 @@ ``` - - - - + + + +
      - - - +
      - <WithWebComponent theme={{...}} level="H5"> - <ui5-title level="H5" class=""> - Success - </ui5-title> - </WithWebComponent> + <ui5-title level="H5" class=""> + Success + </ui5-title>
      - - - - - Success - - - - + + + + Success + + +
      @@ -184,8 +156,8 @@
      - - + + ``` @@ -193,47 +165,39 @@ ``` - - - - + + + +
      - - - +
      - <WithWebComponent theme={{...}} level="H5"> - <ui5-title level="H5" class=""> - Warning - </ui5-title> - </WithWebComponent> + <ui5-title level="H5" class=""> + Warning + </ui5-title>
      - - - - - Warning - - - - + + + + Warning + + +
      @@ -241,8 +205,8 @@
      - - + + ``` @@ -250,47 +214,39 @@ ``` - - - - + + + +
      - - - +
      - <WithWebComponent theme={{...}} level="H5"> - <ui5-title level="H5" class=""> - Error - </ui5-title> - </WithWebComponent> + <ui5-title level="H5" class=""> + Error + </ui5-title>
      - - - - - Error - - - - + + + + Error + + +
      @@ -298,8 +254,8 @@
      - - + + ``` @@ -307,47 +263,39 @@ ``` - - - - + + + +
      - - - +
      - <WithWebComponent theme={{...}} level="H5"> - <ui5-title level="H5" class=""> - Information - </ui5-title> - </WithWebComponent> + <ui5-title level="H5" class=""> + Information + </ui5-title>
      - - - - - Information - - - - + + + + Information + + +
      @@ -355,8 +303,8 @@
      - - + + ``` @@ -364,56 +312,46 @@ ``` - - - - + + + +
      - - - +
      - <WithWebComponent theme={{...}} level="H5"> - <ui5-title level="H5" class=""> - Custom - </ui5-title> - </WithWebComponent> + <ui5-title level="H5" class=""> + Custom + </ui5-title>
      - - - - - Custom - - - - + + + + Custom + + +
      @@ -421,8 +359,8 @@
      - - + + ``` @@ -430,47 +368,39 @@ ``` - - - - + + + +
      - - - +
      - <WithWebComponent theme={{...}} level="H5"> - <ui5-title level="H5" class=""> - Custom Success - </ui5-title> - </WithWebComponent> + <ui5-title level="H5" class=""> + Custom Success + </ui5-title>
      - - - - - Custom Success - - - - + + + + Custom Success + + +
      @@ -478,8 +408,8 @@
      - - + + ``` @@ -487,13 +417,13 @@ ``` " - - - - + + + + - - + + " ``` @@ -501,56 +431,46 @@ ``` - - - - + + + +
      - - - +
      - <WithWebComponent theme={{...}} level="H5"> - <ui5-title level="H5" class=""> - Confirmation - </ui5-title> - </WithWebComponent> + <ui5-title level="H5" class=""> + Confirmation + </ui5-title>
      - - - - - No Title - - - - + + + + No Title + + +
      @@ -558,8 +478,8 @@
      - - + + ``` diff --git a/packages/main/__karma_snapshots__/MessageStrip.md b/packages/main/__karma_snapshots__/MessageStrip.md index 73bcb1c0566..88c0576165c 100644 --- a/packages/main/__karma_snapshots__/MessageStrip.md +++ b/packages/main/__karma_snapshots__/MessageStrip.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/MonthPicker.md b/packages/main/__karma_snapshots__/MonthPicker.md index f6538d35b91..686f8060d86 100644 --- a/packages/main/__karma_snapshots__/MonthPicker.md +++ b/packages/main/__karma_snapshots__/MonthPicker.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/MultiComboBox.md b/packages/main/__karma_snapshots__/MultiComboBox.md index 48848ba0a5e..f751344100f 100644 --- a/packages/main/__karma_snapshots__/MultiComboBox.md +++ b/packages/main/__karma_snapshots__/MultiComboBox.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/ObjectPage.md b/packages/main/__karma_snapshots__/ObjectPage.md index a9614b875ba..b55185bc907 100644 --- a/packages/main/__karma_snapshots__/ObjectPage.md +++ b/packages/main/__karma_snapshots__/ObjectPage.md @@ -4,10 +4,10 @@ ``` - - - - + + + +
      @@ -21,11 +21,9 @@
      @@ -34,47 +32,37 @@
      - - - www.myurl.com - - + + www.myurl.com + - - - - - Address 1 - - - - - - - - - Address 2 - - - - - - - - - Address 3 - - - - + + + + Address 1 + + + + + + + Address 2 + + + + + + + Address 3 + + +
      @@ -85,11 +73,9 @@ @@ -102,11 +88,9 @@ @@ -119,11 +103,9 @@ @@ -136,11 +118,9 @@ @@ -148,61 +128,47 @@
      - - - +
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      @@ -212,11 +178,9 @@ @@ -224,243 +188,207 @@
      - - - +
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      - - - -
      - - - -
      -
      -
      - Test 1 -
      -
      -
      -
      - -
      + + +
      + + +
      +
      +
      + Test 1 +
      +
      +
      +
      + +
      +
      +
      +       +       + + +
      +
      +
      + Test 2 +
      +
      +
      +
      +
      + Test2
      -
      -       -       - - - - -
      -
      -
      - Test 2 -
      -
      -
      -
      -
      - Test2 +
      +
      +
      +       +       + + +
      +
      +
      + Test 3 +
      +
      +
      +
      + Test1 +
      +
      +
      +       +       + + +
      +
      +
      + Test 4 +
      +
      +
      +
      +

      + Section 4 +

      + + +
      +
      +
      + SubSection 4.1 +
      +
      +
      + Test 4 SubSection 1 +
      -
      -
      -
      -       -       -       - - - -
      -
      -
      - Test 3 -
      -
      -
      -
      - Test1 -
      -
      -
      -       -       -       - - - -
      -
      -
      - Test 4 -
      -
      -
      -
      -

      - Section 4 -

      - - - -
      -
      -
      - SubSection 4.1 -
      -
      -
      - Test 4 SubSection 1 -
      -
      -       -       -       - - - -
      -
      -
      - SubSection 4.2 -
      -
      -
      - Test 4 SubSection 2 -
      -
      -       -       -       -
      -
      -
      -       -       -       - - - -
      -
      -
      - Test 5 -
      -
      -
      -
      - - - -
      -
      -
      - SubSection 5.1 -
      -
      -
      - Content of SubSection 5.1 -
      -
      -       -       -       - - - -
      -
      -
      - SubSection 5.2 -
      -
      -
      - Content of SubSection 5.2 -
      -
      -       -       -       -
      -
      -
      -       -       -       -
      -
      - -       - + + + + +
      +
      +
      + SubSection 4.2 +
      +
      +
      + Test 4 SubSection 2 +
      +
      +       +       +
      +
      + + + + + +
      +
      +
      + Test 5 +
      +
      +
      +
      + + +
      +
      +
      + SubSection 5.1 +
      +
      +
      + Content of SubSection 5.1 +
      +
      +       +       + + +
      +
      +
      + SubSection 5.2 +
      +
      +
      + Content of SubSection 5.2 +
      +
      +       +       +
      +
      +
      +       +       +
      + + +
      - -       +       +       ``` @@ -468,10 +396,10 @@ ``` - - - - + + + +
      @@ -485,11 +413,9 @@
      @@ -498,39 +424,31 @@
      - - - www.myurl.com - - + + www.myurl.com + - - - - - Address 1 - - - - - - - - - Address 2 - - - - - - - - - Address 3 - - - - + + + + Address 1 + + + + + + + Address 2 + + + + + + + Address 3 + + +
      @@ -543,11 +461,9 @@ @@ -560,11 +476,9 @@ @@ -577,11 +491,9 @@ @@ -590,92 +502,78 @@ - - - -
      - - - -
      -
      -
      - Test 1 -
      -
      -
      -
      - -
      -
      -
      -       -       -       - - - -
      -
      -
      - Test 2 -
      -
      -
      -
      - -
      -
      -
      -       -       -       - - - -
      -
      -
      - Test 3 -
      -
      -
      -
      - -
      -
      -
      -       -       -       -
      -
      -       -       -       + + +
      + + +
      +
      +
      + Test 1 +
      +
      +
      +
      + +
      +
      +
      +       +       + + +
      +
      +
      + Test 2 +
      +
      +
      +
      + +
      +
      +
      +       +       + + +
      +
      +
      + Test 3 +
      +
      +
      +
      + +
      +
      +
      +       +       +
      +
      +       +
      - -       +       +       ``` @@ -683,10 +581,10 @@ ``` - - - - + + + +
      @@ -700,11 +598,9 @@
      @@ -713,47 +609,37 @@
      - - - www.myurl.com - - + + www.myurl.com + - - - - - Address 1 - - - - - - - - - Address 2 - - - - - - - - - Address 3 - - - - + + + + Address 1 + + + + + + + Address 2 + + + + + + + Address 3 + + +
      @@ -761,216 +647,172 @@
      - - - +
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      - - - +
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      - - - -
      - - - -
      -
      -
      - Test 1 -
      -
      -
      -
      - -
      -
      -
      -       -       -       -
      -
      -       -       -       + + +
      + + +
      +
      +
      + Test 1 +
      +
      +
      +
      + +
      +
      +
      +       +       +
      +
      +       +
      - -       +       +       ``` @@ -984,10 +826,10 @@ ``` - - - - + + + +
      @@ -1005,44 +847,38 @@
      - - - -
      - - - -
      -
      -
      -
      -
      -
      - Test -
      -
      -
      -       -       -       -
      -
      -       -       -       + + +
      + + +
      +
      +
      +
      +
      +
      + Test +
      +
      +
      +       +       +
      +
      +       +
      -       -       +       + ``` @@ -1050,10 +886,10 @@ ``` - - - - + + + +
      @@ -1069,20 +905,18 @@
      - - - -
      -
      -
      -       -       -       + + +
      +
      +
      +       +
      - -       +       +       ``` @@ -1090,10 +924,10 @@ ``` - - - - + + + +
      @@ -1111,53 +945,45 @@
      - - - -
      - - - -
      -
      -
      -
      -
      -
      - Test 2 -
      -
      -
      -       -       -       -
      -
      -       -       -       + + +
      + + +
      +
      +
      +
      +
      +
      + Test 2 +
      +
      +
      +       +       +
      +
      +       +
      -       -       +       + ``` diff --git a/packages/main/__karma_snapshots__/ObjectStatus.md b/packages/main/__karma_snapshots__/ObjectStatus.md index 2cbbdc80eba..458bd6a9e4d 100644 --- a/packages/main/__karma_snapshots__/ObjectStatus.md +++ b/packages/main/__karma_snapshots__/ObjectStatus.md @@ -4,16 +4,14 @@ ``` - - - - + + + +
      - - - +
      @@ -22,8 +20,8 @@
      -       -       +       + ``` @@ -31,16 +29,14 @@ ``` - - - - + + + +
      - - - +
      @@ -49,8 +45,8 @@
      -       -       +       + ``` @@ -58,23 +54,21 @@ ``` - - - - + + + +
      - - - +
      -       -       +       + ``` @@ -82,23 +76,21 @@ ``` - - - - + + + +
      - - - +
      -       -       +       + ``` @@ -106,23 +98,21 @@ ``` - - - - + + + +
      - - - +
      -       -       +       + ``` @@ -130,23 +120,21 @@ ``` - - - - + + + +
      - - - +
      -       -       +       + ``` @@ -154,23 +142,21 @@ ``` - - - - + + + +
      - - - +
      -       -       +       + ``` diff --git a/packages/main/__karma_snapshots__/Option.md b/packages/main/__karma_snapshots__/Option.md index 12ed625a466..7acd6473e7b 100644 --- a/packages/main/__karma_snapshots__/Option.md +++ b/packages/main/__karma_snapshots__/Option.md @@ -4,13 +4,13 @@ ``` - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Panel.md b/packages/main/__karma_snapshots__/Panel.md index 821c34dbd5e..f7dd3b695d9 100644 --- a/packages/main/__karma_snapshots__/Panel.md +++ b/packages/main/__karma_snapshots__/Panel.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Popover.md b/packages/main/__karma_snapshots__/Popover.md index 05eb0deceae..ec39ed96ef5 100644 --- a/packages/main/__karma_snapshots__/Popover.md +++ b/packages/main/__karma_snapshots__/Popover.md @@ -4,15 +4,15 @@ ``` - - - - - - - - - + + + + + + + + + ``` diff --git a/packages/main/__karma_snapshots__/ProgressIndicator.md b/packages/main/__karma_snapshots__/ProgressIndicator.md index e8fb0b89bdf..022104fce71 100644 --- a/packages/main/__karma_snapshots__/ProgressIndicator.md +++ b/packages/main/__karma_snapshots__/ProgressIndicator.md @@ -4,12 +4,12 @@ ``` - - - - + + + +
      -
      +
      @@ -20,8 +20,8 @@
      - - + + ``` @@ -29,13 +29,13 @@ ``` - - - - + + + +
      -
      - +
      + @@ -44,8 +44,8 @@
      - - + + ``` @@ -53,12 +53,12 @@ ``` - - - - + + + +
      -
      +
      @@ -68,8 +68,8 @@
      - - + + ``` @@ -77,12 +77,12 @@ ``` - - - - + + + +
      -
      +
      @@ -92,8 +92,8 @@
      - - + + ``` @@ -101,12 +101,12 @@ ``` - - - - + + + +
      -
      +
      @@ -116,8 +116,8 @@
      - - + + ``` @@ -125,12 +125,12 @@ ``` - - - - + + + +
      -
      +
      @@ -140,8 +140,8 @@
      - - + + ``` @@ -149,12 +149,12 @@ ``` - - - - + + + +
      -
      +
      @@ -164,8 +164,8 @@
      - - + + ``` diff --git a/packages/main/__karma_snapshots__/RadioButton.md b/packages/main/__karma_snapshots__/RadioButton.md index c2f05d91207..9ca1bca99a5 100644 --- a/packages/main/__karma_snapshots__/RadioButton.md +++ b/packages/main/__karma_snapshots__/RadioButton.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/SegmentedButtonItem.md b/packages/main/__karma_snapshots__/SegmentedButtonItem.md index 0ec48c16dc1..2ec1b5db790 100644 --- a/packages/main/__karma_snapshots__/SegmentedButtonItem.md +++ b/packages/main/__karma_snapshots__/SegmentedButtonItem.md @@ -4,24 +4,22 @@ ``` - - - - + + + +
    • - - - +
      My Item
      • -       -       +       + ``` @@ -29,24 +27,22 @@ ``` - - - - + + + +
    • - - - +
      My Item
      • -       -       +       + ``` @@ -54,23 +50,21 @@ ``` - - - - + + + +
    • - - - +
      • -       -       +       + ``` @@ -78,23 +72,21 @@ ``` - - - - + + + +
    • - - - +
      • -       -       +       + ``` @@ -102,23 +94,21 @@ ``` - - - - + + + +
    • - - - +
      • -       -       +       + ``` diff --git a/packages/main/__karma_snapshots__/Select.md b/packages/main/__karma_snapshots__/Select.md index c83f35e2ea1..f6f538beefb 100644 --- a/packages/main/__karma_snapshots__/Select.md +++ b/packages/main/__karma_snapshots__/Select.md @@ -4,13 +4,13 @@ ``` - - - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/ShellBar.md b/packages/main/__karma_snapshots__/ShellBar.md index a5d1ac77eba..9b71976f272 100644 --- a/packages/main/__karma_snapshots__/ShellBar.md +++ b/packages/main/__karma_snapshots__/ShellBar.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/ShellBarItem.md b/packages/main/__karma_snapshots__/ShellBarItem.md index ba89a5a5f68..71dbf6250be 100644 --- a/packages/main/__karma_snapshots__/ShellBarItem.md +++ b/packages/main/__karma_snapshots__/ShellBarItem.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/StandardListItem.md b/packages/main/__karma_snapshots__/StandardListItem.md index 1c2fa8cc203..8851b120840 100644 --- a/packages/main/__karma_snapshots__/StandardListItem.md +++ b/packages/main/__karma_snapshots__/StandardListItem.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Switch.md b/packages/main/__karma_snapshots__/Switch.md index 3797be335c6..5b94c639766 100644 --- a/packages/main/__karma_snapshots__/Switch.md +++ b/packages/main/__karma_snapshots__/Switch.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Tab.md b/packages/main/__karma_snapshots__/Tab.md index 3b8be68eba2..be768f5fb89 100644 --- a/packages/main/__karma_snapshots__/Tab.md +++ b/packages/main/__karma_snapshots__/Tab.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/TabContainer.md b/packages/main/__karma_snapshots__/TabContainer.md index fd9e6f053de..1d582710a39 100644 --- a/packages/main/__karma_snapshots__/TabContainer.md +++ b/packages/main/__karma_snapshots__/TabContainer.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/TabSeparator.md b/packages/main/__karma_snapshots__/TabSeparator.md index 9515634f253..b1f273f9420 100644 --- a/packages/main/__karma_snapshots__/TabSeparator.md +++ b/packages/main/__karma_snapshots__/TabSeparator.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Table.md b/packages/main/__karma_snapshots__/Table.md index 2952eea437e..de8e7968785 100644 --- a/packages/main/__karma_snapshots__/Table.md +++ b/packages/main/__karma_snapshots__/Table.md @@ -4,13 +4,13 @@ ``` - - - + + +
      - -
      -       + +       + ``` diff --git a/packages/main/__karma_snapshots__/TableCell.md b/packages/main/__karma_snapshots__/TableCell.md index c6101b09779..1bb729309df 100644 --- a/packages/main/__karma_snapshots__/TableCell.md +++ b/packages/main/__karma_snapshots__/TableCell.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/TableColumn.md b/packages/main/__karma_snapshots__/TableColumn.md index d9200757cfe..03974c4827e 100644 --- a/packages/main/__karma_snapshots__/TableColumn.md +++ b/packages/main/__karma_snapshots__/TableColumn.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/TableRow.md b/packages/main/__karma_snapshots__/TableRow.md index 3d55e362683..24bd65e6838 100644 --- a/packages/main/__karma_snapshots__/TableRow.md +++ b/packages/main/__karma_snapshots__/TableRow.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Text.md b/packages/main/__karma_snapshots__/Text.md index f1cbc3a2535..f1b26787ec6 100644 --- a/packages/main/__karma_snapshots__/Text.md +++ b/packages/main/__karma_snapshots__/Text.md @@ -4,17 +4,17 @@ ``` - - - - + + + + FioriText - - + + ``` @@ -22,17 +22,17 @@ ``` - - - - + + + + Lorem Ipsum dolor sit amed - - + + ``` @@ -40,17 +40,17 @@ ``` - - - - + + + + Lorem Ipsum dolor sit amed - - + + ``` diff --git a/packages/main/__karma_snapshots__/TextArea.md b/packages/main/__karma_snapshots__/TextArea.md index 54e879a053d..a79d2d61462 100644 --- a/packages/main/__karma_snapshots__/TextArea.md +++ b/packages/main/__karma_snapshots__/TextArea.md @@ -4,13 +4,13 @@ ``` - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Timeline.md b/packages/main/__karma_snapshots__/Timeline.md index 2b3e998bf47..0644ca448ec 100644 --- a/packages/main/__karma_snapshots__/Timeline.md +++ b/packages/main/__karma_snapshots__/Timeline.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/TimelineItem.md b/packages/main/__karma_snapshots__/TimelineItem.md index 38b87fa3146..5378fc3c50d 100644 --- a/packages/main/__karma_snapshots__/TimelineItem.md +++ b/packages/main/__karma_snapshots__/TimelineItem.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Title.md b/packages/main/__karma_snapshots__/Title.md index bfe85e5151d..4ce1d701e35 100644 --- a/packages/main/__karma_snapshots__/Title.md +++ b/packages/main/__karma_snapshots__/Title.md @@ -4,13 +4,13 @@ ``` - - - <WithWebComponent theme={{...}} level="H2"> + <JssProvider generateId={[Function]} id={{...}}> + <ThemeProvider theme={{...}}> + <Title level="H2"> <ui5-title level="H2" class="" /> - </WithWebComponent> - - + + + ``` diff --git a/packages/main/__karma_snapshots__/ToggleButton.md b/packages/main/__karma_snapshots__/ToggleButton.md index d16e6cfcc50..9131268a6b5 100644 --- a/packages/main/__karma_snapshots__/ToggleButton.md +++ b/packages/main/__karma_snapshots__/ToggleButton.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Token.md b/packages/main/__karma_snapshots__/Token.md index a31647bf554..28c01629d95 100644 --- a/packages/main/__karma_snapshots__/Token.md +++ b/packages/main/__karma_snapshots__/Token.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/Tokenizer.md b/packages/main/__karma_snapshots__/Tokenizer.md index 68717ab636b..7cc05b9a11b 100644 --- a/packages/main/__karma_snapshots__/Tokenizer.md +++ b/packages/main/__karma_snapshots__/Tokenizer.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/__karma_snapshots__/VariantManagement.md b/packages/main/__karma_snapshots__/VariantManagement.md index 749b5875220..9ef7fbaf445 100644 --- a/packages/main/__karma_snapshots__/VariantManagement.md +++ b/packages/main/__karma_snapshots__/VariantManagement.md @@ -4,67 +4,53 @@ ``` - - - - + + + +
      - <WithWebComponent theme={{...}} level="H4"> - <ui5-title level="H4" class=""> - Variant 1 - </ui5-title> - </WithWebComponent> + <ui5-title level="H4" class=""> + Variant 1 + </ui5-title>
      - - - - - - - - - - - Variant 1 - - - - - - - Variant 2 - - - - - - - - - + + + + + + + + Variant 1 + + + + + Variant 2 + + + + + +       -       -       +       + ``` diff --git a/packages/main/__karma_snapshots__/YearPicker.md b/packages/main/__karma_snapshots__/YearPicker.md index 0082a2210ba..be52a187ca8 100644 --- a/packages/main/__karma_snapshots__/YearPicker.md +++ b/packages/main/__karma_snapshots__/YearPicker.md @@ -4,13 +4,13 @@ ``` - - - + + + - - - + + + ``` diff --git a/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap b/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap index e861a1e76b9..44bc60dba98 100644 --- a/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap +++ b/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap @@ -2,11 +2,11 @@ exports[`Grid Custom Class Names and Styling 1`] = `
      { +@withStyles(styles) +export class Grid extends Component { private static INDENT_PATTERN = /^([X][L](?:[0-9]|1[0-1]))? ?([L](?:[0-9]|1[0-1]))? ?([M](?:[0-9]|1[0-1]))? ?([S](?:[0-9]|1[0-1]))?$/i; private static SPAN_PATTERN = /^([X][L](?:[1-9]|1[0-2]))? ?([L](?:[1-9]|1[0-2]))? ?([M](?:[1-9]|1[0-2]))? ?([S](?:[1-9]|1[0-2]))?$/i; @@ -103,16 +104,16 @@ class GridComponent extends Component { }; private static getSpanFromString = (span) => { - const currentSpan = GridComponent.getCurrentSpan(); - const spanConfig = GridComponent.SPAN_PATTERN.exec(span); + const currentSpan = Grid.getCurrentSpan(); + const spanConfig = Grid.SPAN_PATTERN.exec(span); return spanConfig[currentSpan] ? parseInt(spanConfig[currentSpan].replace(/[XLMS]{0,2}/g, ''), 10) : [undefined, 3, 3, 6, 12][currentSpan]; }; private static getIndentFromString = (indent) => { - const currentSpan = GridComponent.getCurrentSpan(); - const indentConfig = GridComponent.INDENT_PATTERN.exec(indent); + const currentSpan = Grid.getCurrentSpan(); + const indentConfig = Grid.INDENT_PATTERN.exec(indent); return indentConfig[currentSpan] ? parseInt(indentConfig[currentSpan].replace(/[XLMS]{0,2}/g, ''), 10) : [undefined, 0, 0, 0, 0][currentSpan]; @@ -121,19 +122,19 @@ class GridComponent extends Component { private renderGridElements = (child: ReactElement) => { const { defaultIndent, defaultSpan, classes } = this.props as GridPropsInternal; - const span = GridComponent.getSpanFromString(defaultSpan); - const indentSpan = GridComponent.getIndentFromString(defaultIndent); + const span = Grid.getSpanFromString(defaultSpan); + const indentSpan = Grid.getIndentFromString(defaultIndent); const gridSpanClasses = StyleClassHelper.of(classes.gridSpan); if (child.props['data-layout'] && child.props['data-layout'].span) { - const childSpan = GridComponent.getSpanFromString(child.props['data-layout'].span); + const childSpan = Grid.getSpanFromString(child.props['data-layout'].span); gridSpanClasses.put(classes[`gridSpan${childSpan}`]); } else { gridSpanClasses.put(classes[`gridSpan${span}`]); } if (child.props['data-layout'] && child.props['data-layout'].indent) { - const childIndent = GridComponent.getIndentFromString(child.props['data-layout'].indent); + const childIndent = Grid.getIndentFromString(child.props['data-layout'].indent); if (childIndent && childIndent > 0) { gridSpanClasses.put(classes[`gridIndent${childIndent}`]); } @@ -188,5 +189,3 @@ class GridComponent extends Component { ); } } - -export const Grid = withStyles(styles)(GridComponent); diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx index 6ac04ba84b0..f808acae8f5 100644 --- a/packages/main/src/components/ThemeProvider/index.tsx +++ b/packages/main/src/components/ThemeProvider/index.tsx @@ -1,7 +1,7 @@ -import { sap_fiori_3 } from '@ui5/webcomponents-react-base'; +import { createGenerateClassName, sap_fiori_3 } from '@ui5/webcomponents-react-base'; import { getCompactSize, getTheme } from '@ui5/webcomponents-base/src/Configuration'; import React, { Fragment, PureComponent, ReactNode } from 'react'; -import { jss, ThemeProvider as ReactJssThemeProvider } from 'react-jss'; +import { JssProvider, ThemeProvider as ReactJssThemeProvider } from 'react-jss'; import { ContentDensity } from '../../lib/ContentDensity'; import { MessageToast } from '../../lib/MessageToast'; import { Themes } from '../../lib/Themes'; @@ -11,6 +11,8 @@ export interface ThemeProviderProps { children: ReactNode; } +const generateClassName = createGenerateClassName(); + export class ThemeProvider extends PureComponent { static defaultProps = { withToastContainer: false @@ -28,19 +30,20 @@ export class ThemeProvider extends PureComponent { render() { const { withToastContainer } = this.props; return ( - - - {this.props.children} - {withToastContainer && } - - + + + + {this.props.children} + {withToastContainer && } + + + ); } } diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index fdd26c665ee..2ff21f8e0e0 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -3,7 +3,6 @@ import React, { Children, cloneElement, CSSProperties, - FC, MutableRefObject, ReactElement, Ref, @@ -92,9 +91,6 @@ export function withWebComponent(WebComponent): RefForwardingComponent) => { const { className = '' } = props; @@ -105,6 +101,9 @@ export function withWebComponent(WebComponent): RefForwardingComponent wcRef || localWcRef; const getBooleanProps = () => { @@ -231,5 +230,9 @@ export function withWebComponent(WebComponent): RefForwardingComponent; } From 7f02b99e32024b52e8a66497752034b2cd1afbca Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Mon, 1 Jul 2019 13:52:07 +0200 Subject: [PATCH 10/12] WIP: Changes according to PR comments --- packages/base/package.json | 2 +- packages/main/src/components/ActionSheet/index.tsx | 4 ++-- .../AnalyticalTable/columnHeader/ColumnHeaderModal.tsx | 6 +++--- packages/main/src/index.ts | 6 ++++++ packages/main/src/interfaces/Ui5DialogDomRef.ts | 6 ++++++ packages/main/src/interfaces/Ui5PopoverDomRef.ts | 6 ++++++ packages/main/src/internal/withWebComponent.tsx | 2 +- packages/main/src/lib/Button.ts | 4 ++-- packages/main/src/lib/Ui5DialogDomRef.ts | 3 +++ packages/main/src/lib/Ui5DomRef.ts | 3 +++ packages/main/src/lib/Ui5PopoverDomRef.ts | 3 +++ packages/main/src/webComponents/Dialog/index.tsx | 8 ++------ packages/main/src/webComponents/Popover/index.tsx | 7 +------ 13 files changed, 39 insertions(+), 21 deletions(-) create mode 100644 packages/main/src/interfaces/Ui5DialogDomRef.ts create mode 100644 packages/main/src/interfaces/Ui5PopoverDomRef.ts create mode 100644 packages/main/src/lib/Ui5DialogDomRef.ts create mode 100644 packages/main/src/lib/Ui5DomRef.ts create mode 100644 packages/main/src/lib/Ui5PopoverDomRef.ts diff --git a/packages/base/package.json b/packages/base/package.json index 07e0957820f..d82791ef03d 100644 --- a/packages/base/package.json +++ b/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": "^10.0.0-alpha.21", + "react-jss": "10.0.0-alpha.21", "tslib": "^1.9.3" } } diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx index c7e02b8ead8..4fcf4a7f69b 100644 --- a/packages/main/src/components/ActionSheet/index.tsx +++ b/packages/main/src/components/ActionSheet/index.tsx @@ -5,9 +5,9 @@ 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 { ButtonPropTypes } from '../../lib/Button'; import styles from './ActionSheet.jss'; -import { Ui5PopoverDomRef } from '../../webComponents/Popover'; +import { Ui5PopoverDomRef } from '../../lib/Ui5PopoverDomRef'; export interface ActionSheetPropTypes extends Fiori3CommonProps { openBy: ReactNode; diff --git a/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx index f391f2114ce..5677a6abdb3 100644 --- a/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx @@ -10,10 +10,10 @@ import { PlacementType } from '../../../lib/PlacementType'; import { Popover } from '../../../lib/Popover'; import { PopoverHorizontalAlign } from '../../../lib/PopoverHorizontalAlign'; import { StandardListItem } from '../../../lib/StandardListItem'; -import { Icon } from '../../../webComponents/Icon'; -import { FlexBox, FlexBoxAlignItems } from '../../FlexBox'; +import { Icon } from '../../../lib/Icon'; +import { FlexBox } from '../../FlexBox'; import { ColumnType } from '../types/ColumnType'; -import { Ui5PopoverDomRef } from '../../../webComponents/Popover'; +import { Ui5PopoverDomRef } from '../../../lib/Ui5PopoverDomRef'; const styles = ({ parameters }: JSSTheme) => ({ modalRoot: { diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts index ac8392617cb..f8b073cca64 100644 --- a/packages/main/src/index.ts +++ b/packages/main/src/index.ts @@ -107,6 +107,9 @@ import { TitleLevel } from './lib/TitleLevel'; import { ToggleButton } from './lib/ToggleButton'; import { Token } from './lib/Token'; import { Tokenizer } from './lib/Tokenizer'; +import { Ui5DialogDomRef } from './lib/Ui5DialogDomRef'; +import { Ui5DomRef } from './lib/Ui5DomRef'; +import { Ui5PopoverDomRef } from './lib/Ui5PopoverDomRef'; import { ValueState } from './lib/ValueState'; import { VariantManagement } from './lib/VariantManagement'; import { VerticalAlign } from './lib/VerticalAlign'; @@ -218,6 +221,9 @@ export { ToggleButton, Token, Tokenizer, + Ui5DialogDomRef, + Ui5DomRef, + Ui5PopoverDomRef, ValueState, VariantManagement, VerticalAlign, diff --git a/packages/main/src/interfaces/Ui5DialogDomRef.ts b/packages/main/src/interfaces/Ui5DialogDomRef.ts new file mode 100644 index 00000000000..0c0eb8f115e --- /dev/null +++ b/packages/main/src/interfaces/Ui5DialogDomRef.ts @@ -0,0 +1,6 @@ +import { Ui5DomRef } from './Ui5DomRef'; + +export interface Ui5DialogDomRef extends Ui5DomRef { + open: () => void; + close: () => void; +} diff --git a/packages/main/src/interfaces/Ui5PopoverDomRef.ts b/packages/main/src/interfaces/Ui5PopoverDomRef.ts new file mode 100644 index 00000000000..ce4dab65a6e --- /dev/null +++ b/packages/main/src/interfaces/Ui5PopoverDomRef.ts @@ -0,0 +1,6 @@ +import { Ui5DomRef } from '../lib/Ui5DomRef'; + +export interface Ui5PopoverDomRef extends Ui5DomRef { + openBy: (p: HTMLElement) => void; + close: () => void; +} diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index 2ff21f8e0e0..bf824eb218e 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -13,7 +13,7 @@ import React, { useState } from 'react'; import { Fiori3CommonProps } from '../interfaces/Fiori3CommonProps'; -import { Ui5DomRef } from '../interfaces/Ui5DomRef'; +import { Ui5DomRef } from '../lib/Ui5DomRef'; import { Ui5WebComponentMetadata } from '../interfaces/Ui5WebComponentMetadata'; function capitalizeFirstLetter(s: string) { diff --git a/packages/main/src/lib/Button.ts b/packages/main/src/lib/Button.ts index 1b656c1f774..abf02d155c5 100644 --- a/packages/main/src/lib/Button.ts +++ b/packages/main/src/lib/Button.ts @@ -1,3 +1,3 @@ -import { Button } from '../webComponents/Button'; +import { Button, ButtonPropTypes } from '../webComponents/Button'; -export { Button }; +export { Button, ButtonPropTypes }; diff --git a/packages/main/src/lib/Ui5DialogDomRef.ts b/packages/main/src/lib/Ui5DialogDomRef.ts new file mode 100644 index 00000000000..5114ff63a39 --- /dev/null +++ b/packages/main/src/lib/Ui5DialogDomRef.ts @@ -0,0 +1,3 @@ +import { Ui5DialogDomRef } from '../interfaces/Ui5DialogDomRef'; + +export { Ui5DialogDomRef }; diff --git a/packages/main/src/lib/Ui5DomRef.ts b/packages/main/src/lib/Ui5DomRef.ts new file mode 100644 index 00000000000..8949545331b --- /dev/null +++ b/packages/main/src/lib/Ui5DomRef.ts @@ -0,0 +1,3 @@ +import { Ui5DomRef } from '../interfaces/Ui5DomRef'; + +export { Ui5DomRef }; diff --git a/packages/main/src/lib/Ui5PopoverDomRef.ts b/packages/main/src/lib/Ui5PopoverDomRef.ts new file mode 100644 index 00000000000..7bf3f702e8b --- /dev/null +++ b/packages/main/src/lib/Ui5PopoverDomRef.ts @@ -0,0 +1,3 @@ +import { Ui5PopoverDomRef } from '../interfaces/Ui5PopoverDomRef'; + +export { Ui5PopoverDomRef }; diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx index 8406bd3d49a..beee7a27ddf 100644 --- a/packages/main/src/webComponents/Dialog/index.tsx +++ b/packages/main/src/webComponents/Dialog/index.tsx @@ -2,7 +2,8 @@ import { Event } from '@ui5/webcomponents-react-base'; import UI5Dialog from '@ui5/webcomponents/dist/Dialog'; import React, { ReactNode, RefForwardingComponent, RefObject, useEffect, useRef } from 'react'; import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; -import { Ui5DomRef } from '../../interfaces/Ui5DomRef'; +import { Ui5DomRef } from '../../lib/Ui5DomRef'; +import { Ui5DialogDomRef } from '../../lib/Ui5DialogDomRef'; export interface DialogPropTypes extends WithWebComponentPropTypes { initialFocus?: string; // @generated @@ -19,11 +20,6 @@ export interface DialogPropTypes extends WithWebComponentPropTypes { open?: boolean; } -export interface Ui5DialogDomRef extends Ui5DomRef { - open: () => void; - close: () => void; -} - const InnerDialog: RefForwardingComponent = withWebComponent(UI5Dialog); const Dialog = React.forwardRef((props: DialogPropTypes, dialogRef: RefObject) => { diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index bdb7bbeaea5..2dc8906c8d7 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -5,7 +5,7 @@ import { withWebComponent, WithWebComponentPropTypes } from '../../internal/with import { PlacementType } from '../../lib/PlacementType'; import { PopoverHorizontalAlign } from '../../lib/PopoverHorizontalAlign'; import { PopoverVerticalAlign } from '../../lib/PopoverVerticalAlign'; -import { Ui5DomRef } from '../../interfaces/Ui5DomRef'; +import { Ui5PopoverDomRef } from '../../lib/Ui5PopoverDomRef'; export interface PopoverPropTypes extends WithWebComponentPropTypes { initialFocus?: string; // @generated @@ -30,11 +30,6 @@ export interface PopoverPropTypes extends WithWebComponentPropTypes { open?: boolean; } -export interface Ui5PopoverDomRef extends Ui5DomRef { - openBy: (p: HTMLElement) => void; - close: () => void; -} - const InternalPopover = withWebComponent(UI5Popover); export const Popover = React.forwardRef((props: PopoverPropTypes, popoverRef: RefObject) => { From 0040320ab60c8381f77cba9ff64bb8fb3cbfc32b Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Mon, 1 Jul 2019 14:55:59 +0200 Subject: [PATCH 11/12] WIP: Removed interfaces from lib to fix build --- .../main/src/components/ActionSheet/index.tsx | 4 +-- .../columnHeader/ColumnHeaderModal.tsx | 5 +-- packages/main/src/index.ts | 6 ---- .../main/src/internal/withWebComponent.tsx | 2 +- packages/main/src/lib/Button.ts | 4 +-- packages/main/src/lib/Ui5DialogDomRef.ts | 3 -- packages/main/src/lib/Ui5DomRef.ts | 3 -- packages/main/src/lib/Ui5PopoverDomRef.ts | 3 -- .../main/src/webComponents/Dialog/index.tsx | 4 +-- .../main/src/webComponents/Popover/index.tsx | 2 +- scripts/rollup/results.json | 34 +++++++++---------- 11 files changed, 28 insertions(+), 42 deletions(-) delete mode 100644 packages/main/src/lib/Ui5DialogDomRef.ts delete mode 100644 packages/main/src/lib/Ui5DomRef.ts delete mode 100644 packages/main/src/lib/Ui5PopoverDomRef.ts diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx index 4fcf4a7f69b..a61b84a3487 100644 --- a/packages/main/src/components/ActionSheet/index.tsx +++ b/packages/main/src/components/ActionSheet/index.tsx @@ -5,9 +5,9 @@ import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps'; import { ButtonDesign } from '../../lib/ButtonDesign'; import { PlacementType } from '../../lib/PlacementType'; import { Popover } from '../../lib/Popover'; -import { ButtonPropTypes } from '../../lib/Button'; +import { ButtonPropTypes } from '../../webComponents/Button'; import styles from './ActionSheet.jss'; -import { Ui5PopoverDomRef } from '../../lib/Ui5PopoverDomRef'; +import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef'; export interface ActionSheetPropTypes extends Fiori3CommonProps { openBy: ReactNode; diff --git a/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx index 5677a6abdb3..95da9591e4c 100644 --- a/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx @@ -11,9 +11,10 @@ import { Popover } from '../../../lib/Popover'; import { PopoverHorizontalAlign } from '../../../lib/PopoverHorizontalAlign'; import { StandardListItem } from '../../../lib/StandardListItem'; import { Icon } from '../../../lib/Icon'; -import { FlexBox } from '../../FlexBox'; +import { FlexBox } from '../../../lib/FlexBox'; +import { FlexBoxAlignItems } from '../../../lib/FlexBoxAlignItems'; import { ColumnType } from '../types/ColumnType'; -import { Ui5PopoverDomRef } from '../../../lib/Ui5PopoverDomRef'; +import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef'; const styles = ({ parameters }: JSSTheme) => ({ modalRoot: { diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts index f8b073cca64..ac8392617cb 100644 --- a/packages/main/src/index.ts +++ b/packages/main/src/index.ts @@ -107,9 +107,6 @@ import { TitleLevel } from './lib/TitleLevel'; import { ToggleButton } from './lib/ToggleButton'; import { Token } from './lib/Token'; import { Tokenizer } from './lib/Tokenizer'; -import { Ui5DialogDomRef } from './lib/Ui5DialogDomRef'; -import { Ui5DomRef } from './lib/Ui5DomRef'; -import { Ui5PopoverDomRef } from './lib/Ui5PopoverDomRef'; import { ValueState } from './lib/ValueState'; import { VariantManagement } from './lib/VariantManagement'; import { VerticalAlign } from './lib/VerticalAlign'; @@ -221,9 +218,6 @@ export { ToggleButton, Token, Tokenizer, - Ui5DialogDomRef, - Ui5DomRef, - Ui5PopoverDomRef, ValueState, VariantManagement, VerticalAlign, diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index bf824eb218e..2ff21f8e0e0 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -13,7 +13,7 @@ import React, { useState } from 'react'; import { Fiori3CommonProps } from '../interfaces/Fiori3CommonProps'; -import { Ui5DomRef } from '../lib/Ui5DomRef'; +import { Ui5DomRef } from '../interfaces/Ui5DomRef'; import { Ui5WebComponentMetadata } from '../interfaces/Ui5WebComponentMetadata'; function capitalizeFirstLetter(s: string) { diff --git a/packages/main/src/lib/Button.ts b/packages/main/src/lib/Button.ts index abf02d155c5..1b656c1f774 100644 --- a/packages/main/src/lib/Button.ts +++ b/packages/main/src/lib/Button.ts @@ -1,3 +1,3 @@ -import { Button, ButtonPropTypes } from '../webComponents/Button'; +import { Button } from '../webComponents/Button'; -export { Button, ButtonPropTypes }; +export { Button }; diff --git a/packages/main/src/lib/Ui5DialogDomRef.ts b/packages/main/src/lib/Ui5DialogDomRef.ts deleted file mode 100644 index 5114ff63a39..00000000000 --- a/packages/main/src/lib/Ui5DialogDomRef.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Ui5DialogDomRef } from '../interfaces/Ui5DialogDomRef'; - -export { Ui5DialogDomRef }; diff --git a/packages/main/src/lib/Ui5DomRef.ts b/packages/main/src/lib/Ui5DomRef.ts deleted file mode 100644 index 8949545331b..00000000000 --- a/packages/main/src/lib/Ui5DomRef.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Ui5DomRef } from '../interfaces/Ui5DomRef'; - -export { Ui5DomRef }; diff --git a/packages/main/src/lib/Ui5PopoverDomRef.ts b/packages/main/src/lib/Ui5PopoverDomRef.ts deleted file mode 100644 index 7bf3f702e8b..00000000000 --- a/packages/main/src/lib/Ui5PopoverDomRef.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Ui5PopoverDomRef } from '../interfaces/Ui5PopoverDomRef'; - -export { Ui5PopoverDomRef }; diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx index beee7a27ddf..fa2329f7207 100644 --- a/packages/main/src/webComponents/Dialog/index.tsx +++ b/packages/main/src/webComponents/Dialog/index.tsx @@ -2,8 +2,8 @@ import { Event } from '@ui5/webcomponents-react-base'; import UI5Dialog from '@ui5/webcomponents/dist/Dialog'; import React, { ReactNode, RefForwardingComponent, RefObject, useEffect, useRef } from 'react'; import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; -import { Ui5DomRef } from '../../lib/Ui5DomRef'; -import { Ui5DialogDomRef } from '../../lib/Ui5DialogDomRef'; +import { Ui5DomRef } from '../../interfaces/Ui5DomRef'; +import { Ui5DialogDomRef } from '../../interfaces/Ui5DialogDomRef'; export interface DialogPropTypes extends WithWebComponentPropTypes { initialFocus?: string; // @generated diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index 2dc8906c8d7..b28bd9a7b96 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -5,7 +5,7 @@ import { withWebComponent, WithWebComponentPropTypes } from '../../internal/with import { PlacementType } from '../../lib/PlacementType'; import { PopoverHorizontalAlign } from '../../lib/PopoverHorizontalAlign'; import { PopoverVerticalAlign } from '../../lib/PopoverVerticalAlign'; -import { Ui5PopoverDomRef } from '../../lib/Ui5PopoverDomRef'; +import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef'; export interface PopoverPropTypes extends WithWebComponentPropTypes { initialFocus?: string; // @generated diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json index 4b5331d805e..e1d3d6d8b76 100644 --- a/scripts/rollup/results.json +++ b/scripts/rollup/results.json @@ -32,57 +32,57 @@ "filename": "base.development.js", "bundleType": "NODE_ES_DEV", "packageName": "base", - "size": 211441, - "gzip": 46069 + "size": 209580, + "gzip": 45730 }, { "filename": "base.production.min.js", "bundleType": "NODE_ES_PROD", "packageName": "base", - "size": 211261, - "gzip": 45963 + "size": 209400, + "gzip": 45611 }, { "filename": "base.development.js", "bundleType": "NODE_DEV", "packageName": "base", - "size": 212048, - "gzip": 46154 + "size": 210207, + "gzip": 45814 }, { "filename": "base.production.min.js", "bundleType": "NODE_PROD", "packageName": "base", - "size": 86402, - "gzip": 25866 + "size": 85535, + "gzip": 25658 }, { "filename": "main.development.js", "bundleType": "NODE_ES_DEV", "packageName": "main", - "size": 186567, - "gzip": 32438 + "size": 182744, + "gzip": 32318 }, { "filename": "main.production.min.js", "bundleType": "NODE_ES_PROD", "packageName": "main", - "size": 186567, - "gzip": 32438 + "size": 182744, + "gzip": 32318 }, { "filename": "main.development.js", "bundleType": "NODE_DEV", "packageName": "main", - "size": 192174, - "gzip": 32563 + "size": 188375, + "gzip": 32399 }, { "filename": "main.production.min.js", "bundleType": "NODE_PROD", "packageName": "main", - "size": 98840, - "gzip": 24961 + "size": 96671, + "gzip": 24719 } ] -} +} \ No newline at end of file From 916cdd8bc57259df98c96a016f420e513d7dc73c Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Mon, 1 Jul 2019 15:41:21 +0200 Subject: [PATCH 12/12] WIP: Updated yarn lock --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 32e47819df2..0477ca5bc17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13070,7 +13070,7 @@ react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4, react-is resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== -react-jss@^10.0.0-alpha.21: +react-jss@10.0.0-alpha.21: version "10.0.0-alpha.21" resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-10.0.0-alpha.21.tgz#451f8c878ee3cf5b5de4e63cd1564a8b8fe3f220" integrity sha512-eFUzf44PzPqqbKgHlvBWcYjRk2zchQrvHBaUGKmrYPVhH8uoDlnRWGhv3GO6YZl0t3bAKAy35bw1rmbRwFhWVg==