yylib-quick-mobile/dist/yylib/locate-steps/YYLocateSteps.js

yylib-quick-mobile

/**
 * Created By whh 2018/1/29
 * */
import React from 'react';
import {isFunction} from '../../utils/FunctionUtil';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './YYLocateSteps.css';
import ReactDOM from 'react-dom';
import YYIcon from './../icon/YYIcon';

class YYLocateSteps extends React.Component {
	onOff = false;
	constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0,
		  right: -62,
		  data: [],
    }
  }
	componentDidMount() {
		let {RunInDesign,data}=this.props;
    if(RunInDesign){
      this.createDesignData();
    }
		if (data&&data.length>0) {
        this.setState({
            data: data
        })
    }
		let scrollDom = document.getElementById(this.props.scrollId)||this.props.scrollId;
		let eleTop = [],
		plpData = this.state.data;
		plpData.map((item, index) => {
			let iHeight = document.getElementById(item["id"]).offsetTop||(item['uiId']&&this.props.findUI(item['uiId'])&&ReactDOM.findDOMNode(this.props.findUI(item['uiId']).api).offsetTop);
			eleTop.push(iHeight);
		});
		let scrollDomHeight = scrollDom.offsetHeight;
		let scrollTimer;
		let scrollTop;
		const timeout = 400;
		/*滚动触发相应的楼梯颜色变化*/
		scrollDom.addEventListener("scroll", (e) => {
			scrollTop = e.srcElement.scrollTop;
			clearTimeout(scrollTimer);
			scrollTimer = setTimeout(this.handler, timeout)
		});
		this.handler = () => {
			let length = eleTop.length;
			for (let i = 0; i < length; i++) {
				let leHeight = eleTop[i] - scrollTop;
				if (0 <= leHeight && leHeight <= scrollDomHeight) {
					this.setState({
						activeIndex: i
					});
					return;
				}
			}
		};

	}
	componentWillReceiveProps(nextprops) {
    if (nextprops.data&&nextprops.data.length>0) {
        this.setState({
            data: nextprops.data
        })
    }
    if(nextprops.RunInDesign){
      this.createDesignData();
    }
  }
  createDesignData() {
    const data = Array.from(new Array(3)).map((_val, i) => ({
      id: `test${i+1}`,
      uiId: `YYList${i+1}`,
      icon: <YYIcon type="check"/>,
      title: `测试${i+1}`,
    }));
    this.setState({
      data: data
    });
  }

	onChange = (index, item, e) => {
		e.preventDefault();
		e.stopPropagation();
		let curDom = document.getElementById(item["id"])||(item['uiId']&&this.props.findUI(item['uiId'])&&ReactDOM.findDOMNode(this.props.findUI(item['uiId']).api));//获取点击代表元素
		let scrollDom = document.getElementById(this.props.scrollId)||this.props.scrollId;//获取点击代表元素
		//let sbody = document.getElementsByTagName("body")[0];
		//scrollDom.scrollTop = curDom.offsetTop - curDom.parentNode.parentNode.offsetTop;
		//TODO 添加滚动效果
		window.clearInterval(this.timer);
		this.timer = null;
		let target = curDom&&curDom.offsetTop - this.props.defaultHeight,
			currentScroll = scrollDom.scrollTop;
		let differScroll = target - currentScroll;
		//let duration = 500, interval = 10;
		let step = differScroll / Math.abs(differScroll) * 10;
		this.timer = window.setInterval(() => {
			currentScroll = scrollDom.scrollTop;
			if (currentScroll >= target - 10 && currentScroll <= target + 10) {
				window.clearInterval(this.timer);
				this.timer = null;
				scrollDom.scrollTop = target;
				return;
			}
			scrollDom.scrollTop += step;
		}, 1);

		this.setState({
			activeIndex: index
		});
		if (isFunction(this.props.onChange)) this.props.onChange(index, item)
	}
	showSteps = (e) => {
		e.preventDefault();
		e.stopPropagation();
		if (!this.onOff) {
			this.setState({
				right: 0
			});
			this.onOff = !this.onOff;
		} else {
			this.setState({
				right: -62
			});
			this.onOff = !this.onOff;
		}
	}
	hideSteps = () => {
		window.clearInterval(this.timer);
		this.timer = null;
		this.setState({
			right: -62
		});
		this.onOff = false;
	}
  setData(data) {
  	this.setState({
      data: data
  	});
  }
  componentWillUnmount() {
		window.clearInterval(this.timer);
		this.timer = null;
	}
	render() {
		let {defaultHeight, scrollId, onChange, children, className,visible,findUI, offline,parentType, uiorigin, RunInDesign, uititle, uitype, uikey, nid, control_event, ...restProps} = this.props;
		const {activeIndex,data} = this.state;
		let wrapClz = classnames('yy-locate-steps',(!visible&&'hidden'), className);
		let wrapStepClz = (index) => classnames('yy-locate-step', activeIndex === index ? 'active' : null);
		return (
			<div className={wrapClz} {...restProps}>
				<div onClick={this.showSteps}>
					<div style={{padding:"6px", border:"1px solid #ece0e0e3", borderRadius: "4px",
					position: "fixed", bottom: "60px", right: "60px", zIndex:100, backgroundColor: "#fff",
					boxShadow: "#c3aeae 0 0 10px"}} >
					  <YYIcon type="check"/>
					</div>
				</div>
				<div className="yy-locate-steps-body" style={{right: this.state.right + 'px'}}>
					{data && data.length > 0 ? data.map((item, index) => {
						return <div className={wrapStepClz(index)} key={item.id}
						            onClick={this.onChange.bind(this, index, item)}>
							<div className="yy-locate-step-icon">{item.icon}</div>
							<div className="yy-locate-step-title">{item.title}</div>
							<div className="yy-locate-step-tail"></div>
						</div>
					}) : null}
				</div>
				{this.state.right === 0 ?
					<div className="yy-locate-steps-mask" onTouchStart={this.hideSteps}
					     onClick={this.hideSteps}></div> : null}
			</div>
		)
	};
}
YYLocateSteps.defaultProps={
    data: [],
		defaultHeight: 0,
		scrollId: document.documentElement,
    visible: true,
    //设计器需要的props,不添加会warning
    findUI:'',
    offline:false,
    parentType:'',
    uiorigin:'',
    RunInDesign:false,
    uititle:'',
    uitype:'',
    uikey:'',
    nid:'',
    control_event:{}
}
module.exports = YYLocateSteps;