feat(ObjectPage): Collapse header on scroll (#104)

SAP · Aug 23, 2019 · 6788b59 · 6788b59
1 parent 43a4354
commit 6788b59
Show file tree

Hide file tree

Showing 53 changed files with 2,594 additions and 1,115 deletions.
diff --git a/demo/index.js 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 = () => (
+  <div style={{ display: 'flex', flexDirection: 'column' }}>
+    <Link href="https://www.sap.com">www.myurl.com</Link>
+    <Text>Address 1</Text>
+    <Text>Address 2</Text>
+    <Text>Address 3</Text>
+  </div>
+);
+
+render(
+  <ThemeProvider>
+    <ObjectPage
+      title={'Object Page Title'}
+      subTitle={'Object Page Sub Title'}
+      headerActions={[
+        <Button key="1" design={ButtonDesign.Emphasized}>
+          Primary Action
+        </Button>,
+        <Button key="2">Action</Button>
+      ]}
+      image={SampleImage}
+      renderHeaderContent={renderHeaderContent}
+      imageShapeCircle={false}
+      showHideHeaderButton={true}
+      style={{ height: '700px' }}
+    >
+      <ObjectPageSection title="Test 1" id="1">
+        <div style={{ height: '20px' }}>My Content 1</div>
+      </ObjectPageSection>
+      <ObjectPageSection title="Test 2" id="2">
+        <div style={{ height: '800px' }}>Test2</div>
+      </ObjectPageSection>
+      <ObjectPageSection title="Test 3" id="3">
+        Test1
+      </ObjectPageSection>
+      <ObjectPageSection title="Test 4" id="4">
+        <h1>Section 4</h1>
+        <ObjectPageSubSection title="SubSection 4.1" id="4.1">
+          Test 4 SubSection 1
+        </ObjectPageSubSection>
+        <ObjectPageSubSection title="SubSection 4.2" id="4.2">
+          Test 4 SubSection 2
+        </ObjectPageSubSection>
+      </ObjectPageSection>
+      <ObjectPageSection title="Test 5" id="5">
+        <ObjectPageSubSection title="SubSection 5.1" id="5.1">
+          Content of SubSection 5.1
+        </ObjectPageSubSection>
+        <ObjectPageSubSection title="SubSection 5.2" id="5.2">
+          Content of SubSection 5.2
+        </ObjectPageSubSection>
+      </ObjectPageSection>
+    </ObjectPage>{' '}
+  </ThemeProvider>,
+  document.querySelector('body')
+);
diff --git a/demo/webpack.config.js 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
@@ -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
diff --git a/packages/main/__karma_snapshots__/CustomListItem.md b/packages/main/__karma_snapshots__/CustomListItem.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <CustomListItem type="Active">
         <ui5-li-custom type="Active" class="" />

diff --git a/packages/main/__karma_snapshots__/DayPicker.md b/packages/main/__karma_snapshots__/DayPicker.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <DayPicker>
         <ui5-daypicker class="" />

diff --git a/packages/main/__karma_snapshots__/GroupHeaderListItem.md b/packages/main/__karma_snapshots__/GroupHeaderListItem.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <GroupHeaderListItem>
         <ui5-li-groupheader class="" />

diff --git a/packages/main/__karma_snapshots__/Input.md b/packages/main/__karma_snapshots__/Input.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Input placeholder={{...}} type="Text" value="" valueState="None">
         <ui5-input placeholder={{...}} type="Text" value="" value-state="None" class="" />

diff --git a/packages/main/__karma_snapshots__/Link.md b/packages/main/__karma_snapshots__/Link.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Link design="Default">
         <ui5-link design="Default" class="" />

diff --git a/packages/main/__karma_snapshots__/MessageStrip.md b/packages/main/__karma_snapshots__/MessageStrip.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <MessageStrip type="Information">
         <ui5-messagestrip type="Information" class="" />

diff --git a/packages/main/__karma_snapshots__/MonthPicker.md b/packages/main/__karma_snapshots__/MonthPicker.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <MonthPicker>
         <ui5-month-picker class="" />

diff --git a/packages/main/__karma_snapshots__/MultiComboBox.md b/packages/main/__karma_snapshots__/MultiComboBox.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <MultiComboBox value="" placeholder="" valueState="None">
         <ui5-multi-combobox value="" placeholder="" value-state="None" class="" />