From b9ec8f56d6a9d164fb85c2f9dbddd6c69fd9c3dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?= Date: Tue, 12 Dec 2017 15:49:18 +0300 Subject: [PATCH] Fixed #251, New ScrollPanel component --- src/App.js | 3 + src/components/scrollpanel/ScrollPanel.css | 46 +++ src/components/scrollpanel/ScrollPanel.js | 104 +++++++ src/sass/App.scss | 33 ++- src/showcase/scrollpanel/ScrollPanelDemo.js | 294 ++++++++++++++++++++ 5 files changed, 479 insertions(+), 1 deletion(-) create mode 100644 src/components/scrollpanel/ScrollPanel.css create mode 100644 src/components/scrollpanel/ScrollPanel.js create mode 100644 src/showcase/scrollpanel/ScrollPanelDemo.js diff --git a/src/App.js b/src/App.js index 0174723829..a8a940c076 100644 --- a/src/App.js +++ b/src/App.js @@ -28,6 +28,7 @@ import { MessagesDemo } from './showcase/messages/MessagesDemo'; import { MultiSelectDemo } from './showcase/multiselect/MultiSelectDemo'; import { OverlayPanelDemo } from './showcase/overlaypanel/OverlayPanelDemo'; import { PanelDemo } from './showcase/panel/PanelDemo'; +import { ScrollPanelDemo } from './showcase/scrollpanel/ScrollPanelDemo'; import { ProgressBarDemo } from './showcase/progressbar/ProgressBarDemo'; import { RadioButtonDemo } from './showcase/radiobutton/RadioButtonDemo'; import { TabViewDemo } from './showcase/tabview/TabViewDemo'; @@ -209,6 +210,7 @@ class AppMenu extends Component { ● Fieldset ● Grid ● Panel + ● ScrollPanel ● TabView ● Toolbar @@ -520,6 +522,7 @@ class App extends Component { +
Released under the MIT License, Copyright © 2017 PrimeTek diff --git a/src/components/scrollpanel/ScrollPanel.css b/src/components/scrollpanel/ScrollPanel.css new file mode 100644 index 0000000000..b025e7e204 --- /dev/null +++ b/src/components/scrollpanel/ScrollPanel.css @@ -0,0 +1,46 @@ +.ui-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; +} + +.ui-scrollpanel-content { + height: 100%; + width: calc(100% + 18px); + padding: 0 0 0 0; + position: relative; + overflow: auto; + box-sizing: border-box; +} + +.ui-scrollpanel-bar { + position: relative; + background: #c1c1c1; + width: 9px; + border-radius: 3px; + top: 0; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; +} + +.ui-scrollpanel-hidden { + display: none; +} + +.ui-scrollpanel:hover .ui-scrollpanel-bar, +.ui-scrollpanel:active .ui-scrollpanel-bar { + opacity: 1; +} + +.ui-scrollpanel-grabbed { + -o-user-select: none; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} \ No newline at end of file diff --git a/src/components/scrollpanel/ScrollPanel.js b/src/components/scrollpanel/ScrollPanel.js new file mode 100644 index 0000000000..db5e1ec6b9 --- /dev/null +++ b/src/components/scrollpanel/ScrollPanel.js @@ -0,0 +1,104 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import DomHandler from '../utils/DomHandler'; +import classNames from 'classnames'; + +export class ScrollPanel extends Component { + + static defaultProps = { + style: null, + className: null + } + + static propTypes = { + style: PropTypes.object, + className: PropTypes.string + }; + + constructor(props) { + super(props); + + this.moveBar = this.moveBar.bind(this); + this.onBarMouseDown = this.onBarMouseDown.bind(this); + this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this); + this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this); + } + + componentDidMount() { + this.moveBar(); + this.moveBar = this.moveBar.bind(this); + + window.addEventListener('resize', this.moveBar); + this.initialized = true; + } + + componentWillUnmount() { + if(this.initialized) { + window.removeEventListener('resize', this.moveBar); + } + } + + moveBar() { + let totalHeight = this.content.scrollHeight; + let ownHeight = this.content.clientHeight; + let right = (this.container.clientWidth - this.bar.clientWidth) * -1; + this.scrollRatio = ownHeight / totalHeight; + + this.requestAnimationFrame(() => { + if (this.scrollRatio >= 1) { + DomHandler.addClass(this.bar, 'ui-scrollpanel-hidden'); + } + else { + DomHandler.removeClass(this.bar, 'ui-scrollpanel-hidden'); + this.bar.style.cssText = 'height:' + Math.max(this.scrollRatio * 100, 10) + '%; top:' + (this.content.scrollTop / totalHeight) * 100 + '%;right:' + right + 'px;'; + } + }); + } + + onBarMouseDown(e) { + this.lastPageY = e.pageY; + DomHandler.addClass(this.bar, 'ui-scrollpanel-grabbed'); + DomHandler.addClass(document.body, 'ui-scrollpanel-grabbed'); + + document.addEventListener('mousemove', this.onDocumentMouseMove); + document.addEventListener('mouseup', this.onDocumentMouseUp); + e.preventDefault(); + } + + onDocumentMouseMove(e) { + let delta = e.pageY - this.lastPageY; + this.lastPageY = e.pageY; + + this.requestAnimationFrame(() => { + this.content.scrollTop += delta / this.scrollRatio; + }); + } + + onDocumentMouseUp(e) { + DomHandler.removeClass(this.bar, 'ui-scrollpanel-grabbed'); + DomHandler.removeClass(document.body, 'ui-scrollpanel-grabbed'); + + document.removeEventListener('mousemove', this.onDocumentMouseMove); + document.removeEventListener('mouseup', this.onDocumentMouseUp); + } + + requestAnimationFrame(f) { + let frame = window.requestAnimationFrame ||  this.timeoutFrame; + frame(f); + } + + render() { + let className = classNames('ui-scrollpanel ui-widget ui-widget-content ui-corner-all', this.props.className); + + return ( +
{ this.container = el; }} id={this.props.id} className={className} style={this.props.style}> +
+
{ this.content = el; }} className="ui-scrollpanel-content" onScroll={this.moveBar} onMouseEnter={this.moveBar}> + {this.props.children} +
+
+
{ this.bar = el; }} className="ui-scrollpanel-bar" onMouseDown={this.onBarMouseDown}>
+
+ ); + } +} \ No newline at end of file diff --git a/src/sass/App.scss b/src/sass/App.scss index e438f64af8..c8b2dad165 100644 --- a/src/sass/App.scss +++ b/src/sass/App.scss @@ -448,7 +448,7 @@ body { border-radius: 2px; color: #fff; font-weight: 700; - margin-bottom: 1em; + margin: .5em 0; display: inline-block; transition: background-color .3s; @@ -895,6 +895,37 @@ a{ border: 1px solid #fafafa; } +.scrollpanel-demo { + .custombar1 .ui-scrollpanel-wrapper { + border-right: 9px solid #f4f4f4; + } + + .custombar1 .ui-scrollpanel-bar { + background-color: #1976d2; + opacity: 1; + transition: background-color .3s; + } + + .custombar1 .ui-scrollpanel-bar:hover { + background-color: #135ba1; + } + + .custombar2 .ui-scrollpanel-wrapper { + border-right: 9px solid #000000; + } + + .custombar2 .ui-scrollpanel-bar { + background-color: #68C77D; + border-radius: 0; + opacity: 1; + transition: background-color .3s; + } + + .custombar2:hover .ui-scrollpanel-bar { + background-color: #46A55A; + } +} + /* Animation */ @-webkit-keyframes fadeInDown { from { diff --git a/src/showcase/scrollpanel/ScrollPanelDemo.js b/src/showcase/scrollpanel/ScrollPanelDemo.js new file mode 100644 index 0000000000..cc809173f8 --- /dev/null +++ b/src/showcase/scrollpanel/ScrollPanelDemo.js @@ -0,0 +1,294 @@ +import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; +import { ScrollPanel } from '../../components/scrollpanel/ScrollPanel'; +import { TabView, TabPanel } from '../../components/tabview/TabView'; +import { CodeHighlight } from '../codehighlight/CodeHighlight'; + +export class ScrollPanelDemo extends Component { + + render() { + return ( +
+
+
+

ScrollPanel

+

ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar..

+
+
+ +
+
+
+ +
+ The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through + Michael's life the nature of the family business becomes clear. The business of the family is just like the head + of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands + against the good of the family. + The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's + life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind + and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the + family. +
+ +
+
+ +
+ The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through + Michael's life the nature of the family business becomes clear. The business of the family is just like the head + of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands + against the good of the family. + The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's + life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind + and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the + family. +
+ +
+
+ +
+ The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through + Michael's life the nature of the family business becomes clear. The business of the family is just like the head + of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands + against the good of the family. + The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's + life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind + and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the + family. +
+ +
+
+
+ + +
+ ) + } +} + +export class ScrollPanelDoc extends Component { + + shouldComponentUpdate() { + return false; + } + + render() { + return ( +
+ + +

Import

+ + {` +import {ScrollPanel} from 'primereact/components/scrollpanel/ScrollPanelDoc'; + +`} + + +

Getting Started

+

ScrollPanel is defined using dimensions for the scrollable viewport.

+ + {` + + The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. + His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. + Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, + kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. + + +`} + + +

Customization

+

Look and feel can easily be customized, here is an example with a background and blue handle.

+ + {` + + The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. + His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. + Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, + kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. + + +`} + + + + {` +.custom .ui-scrollpanel-wrapper { + border-right: 9px solid #f4f4f4; +} + +.custom .ui-scrollpanel-bar { + background-color: #1976d2; + opacity: 1; + transition: background-color .3s; +} + +.custom .ui-scrollpanel-bar:hover { + background-color: #135ba1; +} + +`} + + +

Properties

+
+ + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.
+
+ +

Styling

+

Following is the list of structural style classes, for theming classes visit theming page.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
ui-scrollpanelContainer element.
ui-scrollpanel-wrapperWrapper of content section.
ui-scrollpanel-contentContent section.
ui-scrollpanel-barScrollbar handle.
+ +

Dependencies

+

None.

+
+ + + + + + + View on GitHub + + + {` +import React, { Component } from 'react'; +import { ScrollPanel } from 'primereact/components/scrollpanel/ScrollPanel'; + +export class ScrollPanelDemo extends Component { + + render() { + return ( +
+
+
+

ScrollPanel

+

ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar..

+
+
+ +
+
+
+ +
+ The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through + Michael's life the nature of the family business becomes clear. The business of the family is just like the head + of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands + against the good of the family. + The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's + life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind + and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the + family. +
+ +
+
+ +
+ The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through + Michael's life the nature of the family business becomes clear. The business of the family is just like the head + of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands + against the good of the family. + The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's + life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind + and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the + family. +
+ +
+
+ +
+ The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through + Michael's life the nature of the family business becomes clear. The business of the family is just like the head + of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands + against the good of the family. + The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved + son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's + life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind + and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the + family. +
+ +
+
+
+
+ ) + } +} + +`} + + + +
+ ); + } +} \ No newline at end of file