principles-ui-components
Version:
Supporting UI controller for Tizen TV web application, which developed base on React Framework.
226 lines (202 loc) • 8.15 kB
JavaScript
/**
* @author Song Zhang (song8.zhang@samsung.com) and Haipeng Zhang(hp.zhang@samsung.com)
* @fileoverview This module manages scroll control.
* @date 2017/05/18 (last modified date)
*
* Copyright 2017 by Samsung Electronics, Inc.,
*
* This software is the confidential and proprietary information
* of Samsung Electronics, Inc. ("Confidential Information"). You
* shall not disclose such Confidential Information and shall use
* it only in accordance with the terms of the license agreement
* you entered into with Samsung.
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { is, Map, fromJS } from 'immutable';
import { AnimationEffect } from './common/CommonDefine';
export default class ScrollBar extends React.Component {
constructor(props) {
super(props);
this.state = {
allOpacity: 1, //allOpacity controls the ScrollBar shown or not
};
this.hideTimer = null;
if (props.barType === 'v') {
this.barHeight = Math.floor(props.barPercent * props.bgHeight);
this.barWidth = props.bgWidth;
} else if (props.barType === 'h') {
this.barWidth = Math.floor(props.barPercent * props.bgWidth);
this.barHeight = props.bgHeight;
}
// bind function
this.setTimer = this.setTimer.bind(this);
this.clearTimer = this.clearTimer.bind(this);
this.showBar = this.showBar.bind(this);
}
componentDidMount() {
this.clearTimer();
this.setTimer();
}
componentWillReceiveProps(nextProps) {
const { bgWidth, bgHeight, scrollPercent } = this.props;
if (nextProps.barType === 'v') {
this.barHeight = Math.floor(nextProps.barPercent * nextProps.bgHeight);
this.barWidth = bgWidth;
} else if (nextProps.barType === 'h') {
this.barWidth = Math.floor(nextProps.barPercent * nextProps.bgWidth);
this.barHeight = bgHeight;
}
this.showBar();
}
shouldComponentUpdate(nextProps, nextState) {
return (JSON.stringify(nextProps) !== JSON.stringify(this.props)) || (JSON.stringify(nextState) !== JSON.stringify(this.state));
}
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount() {
this.clearTimer();
}
/**
* set timer of scroll bar
* @name setTimer
* @method
* @memberof
* @param
*/
setTimer() {
const { duration } = this.props;
this.hideTimer = setTimeout(() => {
this.setState({ allOpacity: 0 });
}, duration);// The timeout applies as 1 sec.
}
/**
* show scroll bar
* @name showBar
* @method
* @memberof
* @param
*/
showBar() {
this.setState({ allOpacity: 1 });
this.clearTimer();
this.setTimer();
}
/**
* clear timer of scroll bar
* @name clearTimer
* @method
* @memberof
* @param
*/
clearTimer() {
if (this.hideTimer) {
clearTimeout(this.hideTimer);
this.hideTimer = null;
}
}
render() {
const { left, top, bgWidth, bgHeight, bgColor, bgOpacity, barColor, barOpacity,
scrollPercent, barType, highContarstValue, highContarstBgColor, highContarstBarColor, transAnimation } = this.props;
// Normal style,highContarstValue=false
const bgStyle = {
position: 'absolute',
width: bgWidth,
height: bgHeight,
backgroundColor: bgColor,
opacity: bgOpacity,
zIndex: 10,
};
const barStyle = {
position: 'absolute',
width: this.barWidth,
height: this.barHeight,
backgroundColor: barColor,
opacity: barOpacity,
transition: transAnimation,
zIndex: 20,
};
// HighContrast style, highContarstValue=true
const highContrastBgStyle = {
position: 'absolute',
width: bgWidth,
height: bgHeight,
backgroundColor: highContarstBgColor,
opacity: bgOpacity,
zIndex: 10,
};
const highContrastBarStyle = {
position: 'absolute',
width: this.barWidth,
height: this.barHeight,
backgroundColor: highContarstBarColor,
opacity: barOpacity,
transition: transAnimation,
zIndex: 20,
};
// calculate the transform value
if (barType === 'v') {
let transPy = (bgHeight - this.barHeight) * scrollPercent;
if ((transPy + this.barHeight) > bgHeight) {
transPy = bgHeight - this.barHeight;
}
barStyle.transform = `translateY(${transPy}px)`;
highContrastBarStyle.transform = `translateY(${transPy}px)`;
} else if (barType === 'h') {
let transPx = (bgWidth - this.barWidth) * scrollPercent;
if ((transPx + this.barWidth) > bgWidth) {
transPx = bgWidth - this.barWidth;
}
barStyle.transform = `translateX(${transPx}px)`;
highContrastBarStyle.transform = `translateX(${transPx}px)`;
}
const style = {
opacity: this.state.allOpacity,
position: 'absolute',
left,
top,
};
return (
<div style={style}>
<div style={(highContarstValue) ? highContrastBgStyle : bgStyle} />
<div style={(highContarstValue) ? highContrastBarStyle : barStyle} />
</div>
);
}
}
ScrollBar.propTypes = {
barType: PropTypes.string.isRequired,
left: PropTypes.number,
top: PropTypes.number,
bgWidth: PropTypes.number.isRequired,
bgHeight: PropTypes.number.isRequired,
bgColor: PropTypes.string,
bgOpacity: PropTypes.string,
barColor: PropTypes.string,
barOpacity: PropTypes.string,
barPercent: PropTypes.number.isRequired,
scrollPercent: PropTypes.number.isRequired,
highContarstValue: PropTypes.bool,
highContarstBgColor: PropTypes.string,
highContarstBarColor: PropTypes.string,
duration: PropTypes.number,
transAnimation: PropTypes.string,
};
ScrollBar.defaultProps = {
barType: 'v', // The direction of scroll control, "h" means horizontal scroll control, "v" means vertical scroll control
left: 0, // layout position left
top: 0, // layout position top
bgWidth: 3, // Background width of scroll control
bgHeight: 958, // Background height of scroll control
bgColor: '#60696e', // Background color of scroll control
bgOpacity: '0.6', // Background opacity of scroll control
barColor: '#0d0d0d', // Color of scroll bar
barOpacity: '1', // Opacity of scroll bar
barPercent: 0, // The scroll bar percent of the list
scrollPercent: 0, // The scroll percent of the list,It will change according to user operation.
highContarstValue: false, // HighContarst flag,it should be true or false
highContarstBgColor: '#ffffff', // HighContarst background color
highContarstBarColor: '#ffff00', // HighContarst background color of scroll bar
duration: 1000, // Timeout value of scroll bar
transAnimation: `0.7s ${AnimationEffect.Basic}`, //Transition value
};