From 1e405f6cef8da665198edfc466f23cf1a41eff69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Merve=20=C3=96z=C3=A7if=C3=A7i?= Date: Thu, 27 Sep 2018 13:37:46 +0300 Subject: [PATCH] Fixed #591 --- src/App.js | 3 + .../deferedcontent/DeferedContent.js | 65 +++++ .../deferedcontent/DeferedContentDemo.js | 232 ++++++++++++++++++ 3 files changed, 300 insertions(+) create mode 100644 src/components/deferedcontent/DeferedContent.js create mode 100644 src/showcase/deferedcontent/DeferedContentDemo.js diff --git a/src/App.js b/src/App.js index aa243f656c..a1c705b7ac 100644 --- a/src/App.js +++ b/src/App.js @@ -18,6 +18,7 @@ import { SplitButtonDemo } from './showcase/splitbutton/SplitButtonDemo'; import { CheckboxDemo } from './showcase/checkbox/CheckboxDemo'; import { ChipsDemo } from './showcase/chips/ChipsDemo'; import { DialogDemo } from './showcase/dialog/DialogDemo'; +import { DeferedContentDemo } from './showcase/deferedcontent/DeferedContentDemo'; import { DropdownDemo } from './showcase/dropdown/DropdownDemo'; import { FieldsetDemo } from './showcase/fieldset/FieldsetDemo'; import { FileUploadDemo } from './showcase/fileupload/FileUploadDemo'; @@ -337,6 +338,7 @@ class AppMenu extends Component { ● Captcha ● Inplace ● ProgressSpinner + ● DeferedContent @@ -559,6 +561,7 @@ class App extends Component { +
Released under the MIT License, Copyright © 2018 PrimeTek diff --git a/src/components/deferedcontent/DeferedContent.js b/src/components/deferedcontent/DeferedContent.js new file mode 100644 index 0000000000..a909dfc484 --- /dev/null +++ b/src/components/deferedcontent/DeferedContent.js @@ -0,0 +1,65 @@ +import React, {Component} from "react"; +import PropTypes from "prop-types"; + +export class DeferedContent extends Component { + + static defaultProps = { + onload: null + } + + static propsTypes = { + onLoad: PropTypes.func + } + + constructor() { + super(); + this.state = { + loaded: false + }; + } + + componentDidMount() { + if(this.shouldLoad() && !this.state.loaded) { + this.load(); + } + + this.documentScrollListener = () => { + if(this.shouldLoad() && !this.state.loaded) { + this.load(); + } + }; + window.addEventListener('scroll', this.documentScrollListener); + } + + + shouldLoad() { + let rect = this.container.getBoundingClientRect(); + let docElement = document.documentElement; + let scrollTop = (window.pageYOffset||document.documentElement.scrollTop); + let winHeight = docElement.clientHeight; + + return (winHeight >= rect.top); + } + + load(event) { + this.setState({loaded:true}) + if (this.props.onLoad) { + this.props.onLoad(event); + } + } + + componentWillUnmount() { + if(this.documentScrollListener) { + window.removeEventListener('scroll', this.documentScrollListener) + } + } + + render() { + return ( +
this.container = el}> + {this.state.loaded ? this.props.children : null} +
+ ); + } + +} \ No newline at end of file diff --git a/src/showcase/deferedcontent/DeferedContentDemo.js b/src/showcase/deferedcontent/DeferedContentDemo.js new file mode 100644 index 0000000000..a7ddf522e1 --- /dev/null +++ b/src/showcase/deferedcontent/DeferedContentDemo.js @@ -0,0 +1,232 @@ +import React, {Component} from 'react'; +import {DeferedContent} from '../../components/deferedcontent/DeferedContent'; +import {TabView,TabPanel} from '../../components/tabview/TabView'; +import {CodeHighlight} from '../codehighlight/CodeHighlight'; +import {CarService} from "../service/CarService"; +import {DataTable} from "../../components/datatable/DataTable"; +import {Column} from "../../components/column/Column"; +import {Growl} from "../../components/growl/Growl"; + +export class DeferedContentDemo extends Component { + + constructor() { + super(); + this.state = { + cars: [] + }; + this.carservice = new CarService(); + this.initImage = this.initImage.bind(this); + this.initData = this.initData.bind(this); + } + + componentDidMount() { + this.carservice.getCarsSmall().then(data => this.setState({cars: data})); + } + + initImage() { + this.growl.show({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to see datatable'}); + } + + initData() { + this.growl.show({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'}); + } + + render() { + return ( +
+
+
+

DeferedContent

+

DeferedContent postpones the loading the content that is initially not in viewport until it becomes visible on scroll. Scroll down to load the DataTable which initiates a query that is not executed on initial page load to speed up load performance.

+
+
+ +
+ this.growl = el} /> +
+ Image is not loaded, scroll down to initialize it. +
+ + prime + + + +
+
+ + + + + + + + +
+ + + +
+ ) + } +} + +export class DeferedContentDoc extends Component { + + shouldComponentUpdate(){ + return false; + } + + render() { + return ( +
+ + +

Import

+ + {` +import {DeferedContent} from 'primereact/deferedcontent'; + +`} + + +

Getting Started

+

Defer is applied to a container element where content needs to be placed inside an child component.

+ + {` + + + + + + + + + +`} + + +

Callback

+

onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.

+ + {` + + + + + + + + + +`} + + +

Properties

+
+ Component has no attributes. +
+ +

Events

+
+ + + + + + + + + + + + + + + +
NameParametersDescription
onLoadevent: Event objectCallback to invoke when deferred content is loaded.
+
+ +

Styling

+
+ Componentdoes not apply any styling to host. +
+ +

Dependencies

+

None.

+ + + + + + View on GitHub + + + {` +export class DeferedContentDemo extends Component { + + constructor() { + super(); + this.state = { + cars: [] + }; + this.carservice = new CarService(); + this.initImage = this.initImage.bind(this); + this.initData = this.initData.bind(this); + } + + componentDidMount() { + this.carservice.getCarsSmall().then(data => this.setState({cars: data})); + } + + initImage() { + this.growl.show({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to see datatable'}); + } + + initData() { + this.growl.show({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'}); + } + + render() { + return ( +
+
+
+

DeferedContent

+

+
+
+ +
+ this.growl = el} /> +
+ Image is not loaded, scroll down to initialize it. +
+ + prime + + + +
+
+ + + + + + + + +
+ +
+ ) + } +} +`} + + + +
+ ); + } +} \ No newline at end of file