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

yylib-quick-mobile

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _FunctionUtil = require('../../utils/FunctionUtil');

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

require('./YYLocateSteps.css');

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _YYIcon = require('./../icon/YYIcon');

var _YYIcon2 = _interopRequireDefault(_YYIcon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var YYLocateSteps = function (_React$Component) {
	_inherits(YYLocateSteps, _React$Component);

	function YYLocateSteps(props) {
		_classCallCheck(this, YYLocateSteps);

		var _this = _possibleConstructorReturn(this, (YYLocateSteps.__proto__ || Object.getPrototypeOf(YYLocateSteps)).call(this, props));

		_this.onOff = false;

		_this.onChange = function (index, item, e) {
			e.preventDefault();
			e.stopPropagation();
			var curDom = document.getElementById(item["id"]) || item['uiId'] && _this.props.findUI(item['uiId']) && _reactDom2.default.findDOMNode(_this.props.findUI(item['uiId']).api);
			var scrollDom = document.getElementById(_this.props.scrollId) || _this.props.scrollId;
			window.clearInterval(_this.timer);
			_this.timer = null;
			var target = curDom && curDom.offsetTop - _this.props.defaultHeight,
			    currentScroll = scrollDom.scrollTop;
			var differScroll = target - currentScroll;

			var step = differScroll / Math.abs(differScroll) * 10;
			_this.timer = window.setInterval(function () {
				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 ((0, _FunctionUtil.isFunction)(_this.props.onChange)) _this.props.onChange(index, item);
		};

		_this.showSteps = function (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;
			}
		};

		_this.hideSteps = function () {
			window.clearInterval(_this.timer);
			_this.timer = null;
			_this.setState({
				right: -62
			});
			_this.onOff = false;
		};

		_this.state = {
			activeIndex: 0,
			right: -62,
			data: []
		};
		return _this;
	}

	_createClass(YYLocateSteps, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			var _this2 = this;

			var _props = this.props,
			    RunInDesign = _props.RunInDesign,
			    data = _props.data;

			if (RunInDesign) {
				this.createDesignData();
			}
			if (data && data.length > 0) {
				this.setState({
					data: data
				});
			}
			var scrollDom = document.getElementById(this.props.scrollId) || this.props.scrollId;
			var eleTop = [],
			    plpData = this.state.data;
			plpData.map(function (item, index) {
				var iHeight = document.getElementById(item["id"]).offsetTop || item['uiId'] && _this2.props.findUI(item['uiId']) && _reactDom2.default.findDOMNode(_this2.props.findUI(item['uiId']).api).offsetTop;
				eleTop.push(iHeight);
			});
			var scrollDomHeight = scrollDom.offsetHeight;
			var scrollTimer = void 0;
			var scrollTop = void 0;
			var timeout = 400;

			scrollDom.addEventListener("scroll", function (e) {
				scrollTop = e.srcElement.scrollTop;
				clearTimeout(scrollTimer);
				scrollTimer = setTimeout(_this2.handler, timeout);
			});
			this.handler = function () {
				var length = eleTop.length;
				for (var i = 0; i < length; i++) {
					var leHeight = eleTop[i] - scrollTop;
					if (0 <= leHeight && leHeight <= scrollDomHeight) {
						_this2.setState({
							activeIndex: i
						});
						return;
					}
				}
			};
		}
	}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextprops) {
			if (nextprops.data && nextprops.data.length > 0) {
				this.setState({
					data: nextprops.data
				});
			}
			if (nextprops.RunInDesign) {
				this.createDesignData();
			}
		}
	}, {
		key: 'createDesignData',
		value: function createDesignData() {
			var data = Array.from(new Array(3)).map(function (_val, i) {
				return {
					id: 'test' + (i + 1),
					uiId: 'YYList' + (i + 1),
					icon: _react2.default.createElement(_YYIcon2.default, { type: 'check' }),
					title: '\u6D4B\u8BD5' + (i + 1)
				};
			});
			this.setState({
				data: data
			});
		}
	}, {
		key: 'setData',
		value: function setData(data) {
			this.setState({
				data: data
			});
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			window.clearInterval(this.timer);
			this.timer = null;
		}
	}, {
		key: 'render',
		value: function render() {
			var _this3 = this;

			var _props2 = this.props,
			    defaultHeight = _props2.defaultHeight,
			    scrollId = _props2.scrollId,
			    onChange = _props2.onChange,
			    children = _props2.children,
			    className = _props2.className,
			    visible = _props2.visible,
			    findUI = _props2.findUI,
			    offline = _props2.offline,
			    parentType = _props2.parentType,
			    uiorigin = _props2.uiorigin,
			    RunInDesign = _props2.RunInDesign,
			    uititle = _props2.uititle,
			    uitype = _props2.uitype,
			    uikey = _props2.uikey,
			    nid = _props2.nid,
			    control_event = _props2.control_event,
			    restProps = _objectWithoutProperties(_props2, ['defaultHeight', 'scrollId', 'onChange', 'children', 'className', 'visible', 'findUI', 'offline', 'parentType', 'uiorigin', 'RunInDesign', 'uititle', 'uitype', 'uikey', 'nid', 'control_event']);

			var _state = this.state,
			    activeIndex = _state.activeIndex,
			    data = _state.data;

			var wrapClz = (0, _classnames2.default)('yy-locate-steps', !visible && 'hidden', className);
			var wrapStepClz = function wrapStepClz(index) {
				return (0, _classnames2.default)('yy-locate-step', activeIndex === index ? 'active' : null);
			};
			return _react2.default.createElement(
				'div',
				_extends({ className: wrapClz }, restProps),
				_react2.default.createElement(
					'div',
					{ onClick: this.showSteps },
					_react2.default.createElement(
						'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" } },
						_react2.default.createElement(_YYIcon2.default, { type: 'check' })
					)
				),
				_react2.default.createElement(
					'div',
					{ className: 'yy-locate-steps-body', style: { right: this.state.right + 'px' } },
					data && data.length > 0 ? data.map(function (item, index) {
						return _react2.default.createElement(
							'div',
							{ className: wrapStepClz(index), key: item.id,
								onClick: _this3.onChange.bind(_this3, index, item) },
							_react2.default.createElement(
								'div',
								{ className: 'yy-locate-step-icon' },
								item.icon
							),
							_react2.default.createElement(
								'div',
								{ className: 'yy-locate-step-title' },
								item.title
							),
							_react2.default.createElement('div', { className: 'yy-locate-step-tail' })
						);
					}) : null
				),
				this.state.right === 0 ? _react2.default.createElement('div', { className: 'yy-locate-steps-mask', onTouchStart: this.hideSteps,
					onClick: this.hideSteps }) : null
			);
		}
	}]);

	return YYLocateSteps;
}(_react2.default.Component);

YYLocateSteps.defaultProps = {
	data: [],
	defaultHeight: 0,
	scrollId: document.documentElement,
	visible: true,

	findUI: '',
	offline: false,
	parentType: '',
	uiorigin: '',
	RunInDesign: false,
	uititle: '',
	uitype: '',
	uikey: '',
	nid: '',
	control_event: {}
};
module.exports = YYLocateSteps;