Skip to content

Commit 6788b59

Browse files
vberschMarcusNotheis
vbersch
authored and
MarcusNotheis
committed
feat(ObjectPage): Collapse header on scroll (#104)
1 parent 43a4354 commit 6788b59

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+2594
-1115
lines changed

‎demo/index.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
import { ObjectPage } from '@ui5/webcomponents-react/lib/ObjectPage';
4+
import { Button } from '@ui5/webcomponents-react/lib/Button';
5+
import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
6+
import { Link } from '@ui5/webcomponents-react/lib/Link';
7+
import { ObjectPageSection } from '@ui5/webcomponents-react/lib/ObjectPageSection';
8+
import { ObjectPageSubSection } from '@ui5/webcomponents-react/lib/ObjectPageSubSection';
9+
import { Text } from '@ui5/webcomponents-react/lib/Text';
10+
import SampleImage from '@ui5/webcomponents-react/src/components/ObjectPage/DemoImage.png';
11+
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
12+
13+
const renderHeaderContent = () => (
14+
<div style={{ display: 'flex', flexDirection: 'column' }}>
15+
<Link href="https://www.sap.com">www.myurl.com</Link>
16+
<Text>Address 1</Text>
17+
<Text>Address 2</Text>
18+
<Text>Address 3</Text>
19+
</div>
20+
);
21+
22+
render(
23+
<ThemeProvider>
24+
<ObjectPage
25+
title={'Object Page Title'}
26+
subTitle={'Object Page Sub Title'}
27+
headerActions={[
28+
<Button key="1" design={ButtonDesign.Emphasized}>
29+
Primary Action
30+
</Button>,
31+
<Button key="2">Action</Button>
32+
]}
33+
image={SampleImage}
34+
renderHeaderContent={renderHeaderContent}
35+
imageShapeCircle={false}
36+
showHideHeaderButton={true}
37+
style={{ height: '700px' }}
38+
>
39+
<ObjectPageSection title="Test 1" id="1">
40+
<div style={{ height: '20px' }}>My Content 1</div>
41+
</ObjectPageSection>
42+
<ObjectPageSection title="Test 2" id="2">
43+
<div style={{ height: '800px' }}>Test2</div>
44+
</ObjectPageSection>
45+
<ObjectPageSection title="Test 3" id="3">
46+
Test1
47+
</ObjectPageSection>
48+
<ObjectPageSection title="Test 4" id="4">
49+
<h1>Section 4</h1>
50+
<ObjectPageSubSection title="SubSection 4.1" id="4.1">
51+
Test 4 SubSection 1
52+
</ObjectPageSubSection>
53+
<ObjectPageSubSection title="SubSection 4.2" id="4.2">
54+
Test 4 SubSection 2
55+
</ObjectPageSubSection>
56+
</ObjectPageSection>
57+
<ObjectPageSection title="Test 5" id="5">
58+
<ObjectPageSubSection title="SubSection 5.1" id="5.1">
59+
Content of SubSection 5.1
60+
</ObjectPageSubSection>
61+
<ObjectPageSubSection title="SubSection 5.2" id="5.2">
62+
Content of SubSection 5.2
63+
</ObjectPageSubSection>
64+
</ObjectPageSection>
65+
</ObjectPage>{' '}
66+
</ThemeProvider>,
67+
document.querySelector('body')
68+
);

‎demo/webpack.config.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const PATHS = require('../config/paths');
2+
const path = require('path');
3+
4+
const tsLoader = {
5+
test: /\.[tj]sx?$/,
6+
use: [
7+
{
8+
loader: require.resolve('babel-loader'),
9+
options: {
10+
presets: [[require.resolve('babel-preset-react-app'), { flow: false, typescript: true }]]
11+
}
12+
}
13+
]
14+
};
15+
16+
process.env.NODE_ENV = 'development';
17+
process.env.BABEL_ENV = 'development';
18+
19+
const HtmlWebpackPlugin = require('html-webpack-plugin');
20+
module.exports = {
21+
mode: 'development',
22+
entry: './index.js',
23+
module: {
24+
rules: [
25+
tsLoader,
26+
{
27+
test: /\.png$/,
28+
use: 'file-loader'
29+
},
30+
{
31+
test: /\.css$/,
32+
use: ['style-loader', 'css-loader'],
33+
exclude: {
34+
test: [/test-resources/]
35+
}
36+
}
37+
]
38+
},
39+
devServer: {
40+
contentBase: __dirname,
41+
compress: true,
42+
port: 9000
43+
},
44+
output: {
45+
path: __dirname + '/dist',
46+
filename: 'index_bundle.js'
47+
},
48+
plugins: [new HtmlWebpackPlugin()],
49+
resolve: {
50+
extensions: ['.ts', '.tsx', '.js', '.jsx', '.cjs', '.mjs', '.esm'],
51+
alias: {
52+
'@ui5/webcomponents-react/lib': path.join(PATHS.root, 'packages', 'main', 'src', 'lib')
53+
}
54+
}
55+
};

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
"global": "^4.4.0",
6363
"google-closure-compiler": "^20190415.0.0",
6464
"gzip-size": "^5.1.0",
65+
"html-webpack-plugin": "^3.2.0",
6566
"husky": "^3.0.2",
6667
"identity-obj-proxy": "^3.0.0",
6768
"istanbul-instrumenter-loader": "^3.0.1",
@@ -120,7 +121,8 @@
120121
"util": "^0.12.0",
121122
"uuid": "^3.3.2",
122123
"webpack": "^4.39.1",
123-
"webpack-cli": "^3.3.2"
124+
"webpack-cli": "^3.3.2",
125+
"webpack-dev-server": "^3.8.0"
124126
},
125127
"resolutions": {
126128
"@types/react": "16.8.24"

‎packages/base/src/hooks/useIsMounted.ts‎

Whitespace-only changes.

‎packages/main/__karma_snapshots__/CustomListItem.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
#### `Basic Test (generated)`
44

55
```
6-
<ThemeProvider withToastContainer={false}>
7-
<JssProvider generateId={[Function]}>
6+
<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
7+
<JssProvider generateId={[Function]} jss={[undefined]}>
88
<ThemeProvider theme={{...}}>
99
<CustomListItem type="Active">
1010
<ui5-li-custom type="Active" class="" />

‎packages/main/__karma_snapshots__/DayPicker.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
#### `Basic Test (generated)`
44

55
```
6-
<ThemeProvider withToastContainer={false}>
7-
<JssProvider generateId={[Function]}>
6+
<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
7+
<JssProvider generateId={[Function]} jss={[undefined]}>
88
<ThemeProvider theme={{...}}>
99
<DayPicker>
1010
<ui5-daypicker class="" />

‎packages/main/__karma_snapshots__/GroupHeaderListItem.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
#### `Basic Test (generated)`
44

55
```
6-
<ThemeProvider withToastContainer={false}>
7-
<JssProvider generateId={[Function]} id={{...}}>
6+
<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
7+
<JssProvider generateId={[Function]} jss={[undefined]}>
88
<ThemeProvider theme={{...}}>
99
<GroupHeaderListItem>
1010
<ui5-li-groupheader class="" />

‎packages/main/__karma_snapshots__/Input.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
#### `Basic Test (generated)`
44

55
```
6-
<ThemeProvider withToastContainer={false}>
7-
<JssProvider generateId={[Function]} id={{...}}>
6+
<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
7+
<JssProvider generateId={[Function]} jss={[undefined]}>
88
<ThemeProvider theme={{...}}>
99
<Input placeholder={{...}} type="Text" value="" valueState="None">
1010
<ui5-input placeholder={{...}} type="Text" value="" value-state="None" class="" />

‎packages/main/__karma_snapshots__/Link.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
#### `Basic Test (generated)`
44

55
```
6-
<ThemeProvider withToastContainer={false}>
7-
<JssProvider generateId={[Function]} id={{...}}>
6+
<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
7+
<JssProvider generateId={[Function]} jss={[undefined]}>
88
<ThemeProvider theme={{...}}>
99
<Link design="Default">
1010
<ui5-link design="Default" class="" />

‎packages/main/__karma_snapshots__/MessageStrip.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
#### `Basic Test (generated)`
44

55
```
6-
<ThemeProvider withToastContainer={false}>
7-
<JssProvider generateId={[Function]} id={{...}}>
6+
<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
7+
<JssProvider generateId={[Function]} jss={[undefined]}>
88
<ThemeProvider theme={{...}}>
99
<MessageStrip type="Information">
1010
<ui5-messagestrip type="Information" class="" />

0 commit comments

Comments
 (0)