diff --git a/demo/index.js b/demo/index.js new file mode 100644 index 00000000000..4be7a0729a7 --- /dev/null +++ b/demo/index.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { render } from 'react-dom'; +import { ObjectPage } from '@ui5/webcomponents-react/lib/ObjectPage'; +import { Button } from '@ui5/webcomponents-react/lib/Button'; +import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; +import { Link } from '@ui5/webcomponents-react/lib/Link'; +import { ObjectPageSection } from '@ui5/webcomponents-react/lib/ObjectPageSection'; +import { ObjectPageSubSection } from '@ui5/webcomponents-react/lib/ObjectPageSubSection'; +import { Text } from '@ui5/webcomponents-react/lib/Text'; +import SampleImage from '@ui5/webcomponents-react/src/components/ObjectPage/DemoImage.png'; +import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider'; + +const renderHeaderContent = () => ( +
+ www.myurl.com + Address 1 + Address 2 + Address 3 +
+); + +render( + + + Primary Action + , + + ]} + image={SampleImage} + renderHeaderContent={renderHeaderContent} + imageShapeCircle={false} + showHideHeaderButton={true} + style={{ height: '700px' }} + > + +
My Content 1
+ + +
Test2
+ + + Test1 + + +

Section 4

+ + Test 4 SubSection 1 + + + Test 4 SubSection 2 + + + + + Content of SubSection 5.1 + + + Content of SubSection 5.2 + + + {' '} + , + document.querySelector('body') +); diff --git a/demo/webpack.config.js b/demo/webpack.config.js new file mode 100644 index 00000000000..dda2ee1f44f --- /dev/null +++ b/demo/webpack.config.js @@ -0,0 +1,55 @@ +const PATHS = require('../config/paths'); +const path = require('path'); + +const tsLoader = { + test: /\.[tj]sx?$/, + use: [ + { + loader: require.resolve('babel-loader'), + options: { + presets: [[require.resolve('babel-preset-react-app'), { flow: false, typescript: true }]] + } + } + ] +}; + +process.env.NODE_ENV = 'development'; +process.env.BABEL_ENV = 'development'; + +const HtmlWebpackPlugin = require('html-webpack-plugin'); +module.exports = { + mode: 'development', + entry: './index.js', + module: { + rules: [ + tsLoader, + { + test: /\.png$/, + use: 'file-loader' + }, + { + test: /\.css$/, + use: ['style-loader', 'css-loader'], + exclude: { + test: [/test-resources/] + } + } + ] + }, + devServer: { + contentBase: __dirname, + compress: true, + port: 9000 + }, + output: { + path: __dirname + '/dist', + filename: 'index_bundle.js' + }, + plugins: [new HtmlWebpackPlugin()], + resolve: { + extensions: ['.ts', '.tsx', '.js', '.jsx', '.cjs', '.mjs', '.esm'], + alias: { + '@ui5/webcomponents-react/lib': path.join(PATHS.root, 'packages', 'main', 'src', 'lib') + } + } +}; diff --git a/package.json b/package.json index 2f3ae4b7433..82f2f637b41 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "global": "^4.4.0", "google-closure-compiler": "^20190415.0.0", "gzip-size": "^5.1.0", + "html-webpack-plugin": "^3.2.0", "husky": "^3.0.2", "identity-obj-proxy": "^3.0.0", "istanbul-instrumenter-loader": "^3.0.1", @@ -120,7 +121,8 @@ "util": "^0.12.0", "uuid": "^3.3.2", "webpack": "^4.39.1", - "webpack-cli": "^3.3.2" + "webpack-cli": "^3.3.2", + "webpack-dev-server": "^3.8.0" }, "resolutions": { "@types/react": "16.8.24" diff --git a/packages/base/src/hooks/useIsMounted.ts b/packages/base/src/hooks/useIsMounted.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/main/__karma_snapshots__/CustomListItem.md b/packages/main/__karma_snapshots__/CustomListItem.md index 7cca1ab1b94..5fcc6af7ab6 100644 --- a/packages/main/__karma_snapshots__/CustomListItem.md +++ b/packages/main/__karma_snapshots__/CustomListItem.md @@ -3,8 +3,8 @@ #### `Basic Test (generated)` ``` - - + + diff --git a/packages/main/__karma_snapshots__/DayPicker.md b/packages/main/__karma_snapshots__/DayPicker.md index e1ba848919e..ab4aacc2afa 100644 --- a/packages/main/__karma_snapshots__/DayPicker.md +++ b/packages/main/__karma_snapshots__/DayPicker.md @@ -3,8 +3,8 @@ #### `Basic Test (generated)` ``` - - + + diff --git a/packages/main/__karma_snapshots__/GroupHeaderListItem.md b/packages/main/__karma_snapshots__/GroupHeaderListItem.md index 671c68993bc..41bfa0e7104 100644 --- a/packages/main/__karma_snapshots__/GroupHeaderListItem.md +++ b/packages/main/__karma_snapshots__/GroupHeaderListItem.md @@ -3,8 +3,8 @@ #### `Basic Test (generated)` ``` - - + + diff --git a/packages/main/__karma_snapshots__/Input.md b/packages/main/__karma_snapshots__/Input.md index dfd5e376743..8cc2bddb11f 100644 --- a/packages/main/__karma_snapshots__/Input.md +++ b/packages/main/__karma_snapshots__/Input.md @@ -3,8 +3,8 @@ #### `Basic Test (generated)` ``` - - + + diff --git a/packages/main/__karma_snapshots__/Link.md b/packages/main/__karma_snapshots__/Link.md index 94274ed627e..bf60a9613da 100644 --- a/packages/main/__karma_snapshots__/Link.md +++ b/packages/main/__karma_snapshots__/Link.md @@ -3,8 +3,8 @@ #### `Basic Test (generated)` ``` - - + + diff --git a/packages/main/__karma_snapshots__/MessageStrip.md b/packages/main/__karma_snapshots__/MessageStrip.md index 88c0576165c..c3b126a14b9 100644 --- a/packages/main/__karma_snapshots__/MessageStrip.md +++ b/packages/main/__karma_snapshots__/MessageStrip.md @@ -3,8 +3,8 @@ #### `Basic Test (generated)` ``` - - + + diff --git a/packages/main/__karma_snapshots__/MonthPicker.md b/packages/main/__karma_snapshots__/MonthPicker.md index afd495b3b17..ffa3c9198fc 100644 --- a/packages/main/__karma_snapshots__/MonthPicker.md +++ b/packages/main/__karma_snapshots__/MonthPicker.md @@ -3,8 +3,8 @@ #### `Basic Test (generated)` ``` - - + + diff --git a/packages/main/__karma_snapshots__/MultiComboBox.md b/packages/main/__karma_snapshots__/MultiComboBox.md index f751344100f..0cb4b35f4de 100644 --- a/packages/main/__karma_snapshots__/MultiComboBox.md +++ b/packages/main/__karma_snapshots__/MultiComboBox.md @@ -3,8 +3,8 @@ #### `Basic Test (generated)` ``` - - + + diff --git a/packages/main/__karma_snapshots__/ObjectPage.md b/packages/main/__karma_snapshots__/ObjectPage.md index 2d3471af2a1..c5703bdffc8 100644 --- a/packages/main/__karma_snapshots__/ObjectPage.md +++ b/packages/main/__karma_snapshots__/ObjectPage.md @@ -8,321 +8,319 @@
- -
-
- -

- Fiori Object Page Title -

- - Sub Title - - - - - -
-
-
- -
- - - www.myurl.com - - - - - Address 1 - - - - - Address 2 - - - - - Address 3 - - -
- + + +
+
+
-
-
- -
- -
  • - - - - - Test 1 - - - - -
    • -     - -
  • - - - - - Test 2 - - - - -
    • -     - -
  • - - - - - Test 3 - - - - -
    • -     - -
  • - - - - - Test 4 - - - - - -
    - - - -
    - - - - - - - - - - SubSection 4.1 - - - - - - - - - - - SubSection 4.2 - - - - - - - - - -     -
    • -     - -
  • - - - - - Test 5 +
    +
    +
    • -     -
    - -
    - -
    -
    -
    - Test 1 -
    +
    -
    -
    - -
    -
    -
    -     - -
    -
    -
    - Test 2 -
    -
    -
    -
    -
    - Test2 + + + + + +
    +
    +
    +
    +
    +
    +
    + +
    + + + www.myurl.com + + + + + Address 1 + + + + + Address 2 + + + + + Address 3 + + +
    +     +
    +
    +
    + +
  • + +
    + + Test 1 + +
    +     +
    • +     + +
  • + +
    + + Test 2 + +
    +     +
    • +     + +
  • + +
    + + Test 3 + +
    +     +
    • +     + +
  • + +
    + + Test 4 + +
    +     + +
    + + + +
    + + + + + +
    + + + SubSection 4.1 + + +
    +     + +
    + + + SubSection 4.2 + + +
    +     +     +     +     +     +     +
    • +     + +
  • + +
    + + Test 5 + +
    +     + +
    + + + +
    + + + + + +
    + + + SubSection 5.1 + + +
    +     + +
    + + + SubSection 5.2 + + +
    +     +     +     +     +     +     +
    • +     +
    -
    -
    -     - -
    -
    -
    - Test 3 -
    -
    -
    -
    - Test1 -
    -
    -
    -     - -
    -
    -
    - Test 4 -
    -
    -
    -
    -

    - Section 4 -

    - -
    -
    - SubSection 4.1 +
    + +
    +
    +
    + Test 1 +
    -
    - Test 4 SubSection 1 +
    +
    + +
    -
    - - -
    -
    - SubSection 4.2 +
    +     + +
    +
    +
    + Test 2 +
    -
    - Test 4 SubSection 2 +
    +
    +
    + Test2 +
    +
    -
    - -
    -
    -
    -     - -
    -
    -
    - Test 5 -
    -
    -
    -
    - -
    -
    - SubSection 5.1 +
    +     + +
    +
    +
    + Test 3 +
    -
    - Content of SubSection 5.1 +
    +
    + Test1 +
    -
    - - -
    -
    - SubSection 5.2 +
    +     + +
    +
    +
    + Test 4 +
    -
    - Content of SubSection 5.2 +
    +
    +

    + 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 +
    +
    +     +
    +
    +
    +     + +
    - - -
    - - +
    + + +     @@ -338,155 +336,165 @@
    - -
    -
    - -

    - Fiori Object Page Title -

    - - Sub Title - -     - - - -
    -
    -
    - -
    - - - www.myurl.com - - - - - Address 1 - - - - - Address 2 - - - - - Address 3 - - -
    -     + + +
    +
    +
    -
    -     -
    - -
  • - - - - - Test 1 - - - - -
    • -     - -
  • - - - - - Test 2 - - - - -
    • -     - -
  • - - - - - Test 3 +
    +
    +
    • -     -
    - -
    - -
    -
    -
    - Test 1 -
    -
    -
    -
    - -
    -
    -
    -     - -
    -
    -
    - Test 2 -
    +
    -
    -
    - -
    -
    -
    -     - -
    -
    -
    - Test 3 -
    -
    -
    -
    - + + + + + +
    +
    +
    +
    +
    +
    +
    + +
    + + + www.myurl.com + + + + + Address 1 + + + + + Address 2 + + + + + Address 3 + + +
    +     +
    +
    +
    + +
  • + +
    + + Test 1 + +
    +     +
    • +     + +
  • + +
    + + Test 2 + +
    +     +
    • +     + +
  • + +
    + + Test 3 + +
    +     +
    • +     +
    +
    + +
    +
    +
    + Test 1 +
    +
    +
    +
    + +
    +
    +
    +     + +
    +
    +
    + Test 2 +
    +
    +
    +
    + +
    +
    +
    +     + +
    +
    +
    + Test 3 +
    +
    +
    +
    + +
    +
    +
    +     +
    +
    -
    -     -
    -
    -     +
    + + +     @@ -502,168 +510,184 @@
    - -
    -
    - -

    - Fiori Object Page Title -

    - - Sub Title - -     - - - -
    -
    -
    - -
    - - - www.myurl.com - - - - - Address 1 - - - - - Address 2 - - - - - Address 3 - - -
    -     + + +
    +
    +
    -
    -
    -     -
    - -
  • - - Test 1 - -
    • -     - -
  • - - Test 2 - -
    • -     - -
  • - - Test 3 - -
    • -     - -
  • - - Test 4 - - -
    - - - -
    - - - - - - - SubSection 4.1 - - - - - SubSection 4.2 - - - - - - -     -
    • -     - -
  • - - Test 5 - - -
    - - - -
    - - - - - - - SubSection 5.1 - - - - - SubSection 5.2 - - - - - - -     -
    • -     -
    - -
    - -
    -
    -
    - Test 1 -
    +
    +
    +
    + +

    + Fiori Object Page Title +

    + + Sub Title + +
    -
    -
    - + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + + www.myurl.com + + + + + Address 1 + + + + + Address 2 + + + + + Address 3 + + +
    +     +
    + +
    +
    + +
  • + + Test 1 + +
    • +     + +
  • + + Test 2 + +
    • +     + +
  • + + Test 3 + +
    • +     + +
  • + + Test 4 + + +
    + + + +
    + + + + + + + SubSection 4.1 + + + + + SubSection 4.2 + + + + + + +     +
    • +     + +
  • + + Test 5 + + +
    + + + +
    + + + + + + + SubSection 5.1 + + + + + SubSection 5.2 + + + + + + +     +
    • +     +
    +
    + +
    +
    +
    + Test 1 +
    +
    +
    +
    + +
    +
    +
    +     +
    +
    -
    -     -
    -
    -     +
    + + +     @@ -674,7 +698,7 @@ #### `Just Some Sections` ``` -

    Test
    +
    Test
    ``` #### `Not crashing with 1 section - Default Mode` @@ -685,50 +709,64 @@
    - -
    -
    - -

    - - - -

    -
    -
    + + +
    +
    +
    +
    -
    -     -
    - -
  • - - - - - - - -
    • -     -
    - -
    - -
    -
    -
    +
    +
    +
    + +

    + +

    -
    -
    - Test + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
  • + +
    + +
    +     +
    • +     +
    +
    + +
    +
    +
    +
    +
    +
    + Test +
    +
    +
    +     +
    +
    -
    -     -
    -
    -     +
    + + +     @@ -744,44 +782,60 @@
    - -
    -
    - -

    - - - -

    -
    -
    + + +
    +
    +
    +
    -
    -     -
    - -
  • - -
    • -     -
    - -
    - -
    -
    -
    +
    +
    +
    + +

    + +

    -
    -
    - Test + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
  • + +
    • +     +
    +
    + +
    +
    +
    +
    +
    +
    + Test +
    +
    +
    +     +
    +
    -
    -     -
    -
    -     +
    + + +     @@ -797,26 +851,41 @@
    - -
    -
    - -

    - - - + + +
    +
    +
    +
    +
    +
    +
    +
    + +

    + + +

    + +
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -

    - -
    - -
    -
    -
    -     + +
    @@ -832,49 +901,65 @@
    - -
    -
    - -

    - - - -

    -
    -
    + + +
    +
    +
    +
    -
    -     -
    - -
  • - -
    • -     - -
  • - -
    • -     -
    - -
    - -
    -
    -
    +
    +
    +
    + +

    + +

    -
    -
    - Test 2 + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
  • + +
    • +     + +
  • + +
    • +     +
    +
    + +
    +
    +
    +
    +
    +
    + Test 2 +
    +
    +
    +     +
    +
    -
    -     -
    -
    -     +
    + + +     @@ -890,59 +975,72 @@
    -
    - -
  • - - - - - - - -
    • -     - -
  • - - - - - - - -
    • -     -
    - -
    - -
    -
    -
    -
    -
    -
    - Test -
    -
    + + +
    +
    +
    +
    +
    +
    +
    + +
  • + +
    + +
    +     +
    • +     + +
  • + +
    + +
    +     +
    • +
    - - -
    -
    -
    -
    -
    -
    - Test 2 -
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + Test +
    +
    +
    +     + +
    +
    +
    +
    +
    +
    + Test 2 +
    +
    +
    +     +
    +
    -
    -     -
    -
    -     +
    + + +     diff --git a/packages/main/__karma_snapshots__/Option.md b/packages/main/__karma_snapshots__/Option.md index 0872e9d94ac..41fb5b79255 100644 --- a/packages/main/__karma_snapshots__/Option.md +++ b/packages/main/__karma_snapshots__/Option.md @@ -3,8 +3,8 @@ #### `Basic Test (generated)` ``` - - + +