@beisen-platform/dropdown-button/src/index.js

import React, { Component } from 'react';
import './styles/all.scss';
import DropButtonMain from './DropButtonMain/DropButtonMain';
import CommonMount from '@beisen-platform/common-mount';
import DropdownDisabledIcon from '@beisen-platform/react-icons/lib/icons/DropdownminDisabled.js';
import DropdownNormalIcon from './icon/DropdownNormalIcon';
//ci

export default class DropDownButton extends Component {
	static defaultProps = {
		deviationLeft: 0,
		panelWidth: 170
	};

	constructor(props) {
		super(props);
		let defaultState = {
			btnStyle: '',
			btnSize: '',
			iconName: '',
			maxWidth: 'none',
			listShow: false,
			ulHide: false,
			shadowHide: true,
			btnDisabled: false,
			btnDirection: {},
			scrollHeight: 0,
			notBtnIcon: props.iconName,
			listViewDirection: 'right-down'
		};

		this.CommonMount = new CommonMount({
			containerId: 'common-mount-list', // 容器ID
			follow: true, // 是否滚动跟随，默认true
			fixed: true // 定位：fixed，false时为absolute
		});
		this.state = Object.assign({}, defaultState, props);
		this.onClose = this.onClose.bind(this);
		this.btnMouseMove = this.btnMouseMove.bind(this);
		this.btnMouseOut = this.btnMouseOut.bind(this);
		this.itemClick = this.itemClick.bind(this);
		this.scrollUl = this.scrollUl.bind(this);
		this.onClick = this.onClick.bind(this);
		this.renderDOM = this.renderDOM.bind(this);
	}

	componentWillReceiveProps(nextProps) {
		this.state = Object.assign({}, this.state, nextProps);
		this.setState(this.state);
	}

	scrollUl(height) {
		this.setState({ scrollHeight: height });
	}

	onClick(e) {
		let self = this;
		if (this.state.btnActive) {
			this.CommonMount.unmountBox();
			this.setState({ btnActive: false });
			return false;
		}
		if (this.props.onDropDownIconClick) {
			this.props.onDropDownIconClick(e);
		}
		let allFun = function() {
			self.renderDOM(e.target);
			document.removeEventListener('mousedown', self.onClose);
			document.addEventListener('mousedown', self.onClose);
			self.setState({ btnActive: true });
		};
		let retFun = function(children) {
			if (children) {
				self.state.children = children;
			}
			allFun();
		};
		if (!this.props.itemClick) {
			allFun();
		}
		if (!self.state.children || self.state.children.length == 0) {
			this.props.itemClick && this.props.itemClick(retFun);
		} else {
			allFun();
		}
	}

	renderDOM(tar) {
		const { autoDirection, direction, children, sideTip, hiddenTip } = this.state;
		const { panelWidth, deviationLeft, rightAlign, disabledShowTips } = this.props;
		let self = this;
		let target = this.refs.dropDownView.getBoundingClientRect();
		let length = this.state.children.length >= 10 ? 260 : this.state.children.length * 26;
		let winHeight = window.innerHeight;
		let winWidth = window.innerWidth;
		let horizontal = winWidth - target.left > panelWidth ? 'right' : 'left';
		var vertical =
			winHeight - target.bottom > length
				? '-down'
				: winHeight - target.top > length ? '-top' : winHeight - target.bottom > target.top ? '-down' : '-top';
		if (this.state.disabled) {
			return false;
		}
		let tempList = this.state.listShow == false ? true : false;
		const showAutoUl = (
			<DropButtonMain
				data={children}
				disabledShowTips={disabledShowTips}
				sideTip={sideTip}
				hiddenTip={hiddenTip}
				panelWidth={panelWidth}
				itemClick={this.itemClick}
				ulHide={!tempList}
				scrollUl={this.scrollUl}
				direction={autoDirection || autoDirection == undefined ? horizontal + vertical : direction}
				listShow={tempList}
				dataUdcList={this.props.dataUdcList}
				dataUdtList={this.props.dataUdtList}
			/>
		);
		this.CommonMount.renderDom(
			'drop-down-list-not-active', // wrap's classname & id
			showAutoUl, // content dom
			self.refs.dropDownView, // 跟随目标
			[
				self.refs.dropDownView, //挂载目标节点
				{
					// 挂载元素宽高 {width: '', height: ''}
					width: panelWidth, // 挂载宽度
					height: length
				},
				40
			],
			true,
			deviationLeft,
			rightAlign
		);

		let parent = document.getElementById('drop-down-list-ul');
		setTimeout(function() {
			parent.className = parent.className + ' drop-down-list-active';
		}, 10);
	}

	onClose(event) {
		let area = document.getElementById('common-mount-list');
		if (area && !area.contains(event.target) && !this.refs.dropBtnComponent.contains(event.target)) {
			this.CommonMount.unmountBox();
			this.setState({ btnActive: false });
			document.removeEventListener('mousedown', this.onClose);
		}
	}

	itemClick(e, val) {
		let self = this;
		let stateData = this.state;
		stateData.children.map((item) => {
			if (item.value == val.value) item.active = true;
		});

		//背景效果展现，隐藏ul列表
		this.setState({
			shadowHide: false,
			children: stateData.children,
			ulHide: true,
			iconName: this.props.iconName || ''
		});

		setTimeout(function() {
			//延迟消失ul列表
			let stateData = self.state;
			stateData.children.map((item) => {
				if (item.active) item.active = false;
			});
			self.CommonMount.unmountBox();
			self.setState({ btnActive: false });
		}, 300);
		// 关闭之前先将弹层的zIndex调低，处理common-pop zIndex是999的情况导致的遮不住dropdown
		if (this.CommonMount.containerStyleUpdater) {
			this.CommonMount.containerStyleUpdater('zIndex', '998');
		}
		this.props.onClick && this.props.onClick(val, e, true, this.state, this.refs.dropdownbtn);
		this.state.listShow = false;
		document.removeEventListener('mousedown', this.onClose);
	}

	btnMouseMove() {
		const { activeName, hoverName, isBtnStyle } = this.props;
		if (this.state.disabled) {
			return false;
		}
		if (isBtnStyle) {
			let iconName = this.state.iconName.replace('nomal', 'active');
			this.setState({
				iconName: iconName
			});
		} else {
			if (this.refs.dropDownIcon)
				this.refs.dropDownIcon.className = this.refs.dropDownIcon.className.replace(
					'nomal',
					hoverName ? 'hover' : 'active'
				);
			this.setState({ notBtnIcon: hoverName ? hoverName : activeName, hovering: true });
		}
	}

	btnMouseOut() {
		const { iconName, hoverName, isBtnStyle } = this.props;
		if (this.state.disabled) {
			return false;
		}
		if (isBtnStyle) {
			let iconName = this.state.iconName.replace('active', 'nomal');
			!this.state.listShow &&
				this.setState({
					iconName: iconName
				});
		} else {
			if (this.refs.dropDownIcon)
				this.refs.dropDownIcon.className = this.refs.dropDownIcon.className.replace(
					hoverName ? 'hover' : 'active',
					'nomal'
				);
			this.setState({ notBtnIcon: iconName, hovering: false }, this.forceUpdate());
		}
	}

	componentWillMount() {
		let initData = {
			bsSize: {
				small: 'drop-btns-bgc-small ',
				default: 'drop-btns-bgc-big '
			},
			bsStyle: {
				weaken: 'drop-btns-weaken ',
				default: ' ',
				link: ' '
			},
			btnDisabled: {
				weaken: 'drop-btns-bg-gray-weaken ',
				default: 'drop-btns-bg-gray-defalult '
			},
			btnDirection: {
				small: 'drop-down-btn-small',
				default: 'drop-down-btn-big'
			},
			btnIcon: {
				weaken: this.props.iconName ? this.props.iconName : 'pc-sys-arrowdown-nomal-svg',
				default: 'pc-sys-arrowdownM7-nomal-svg'
			}
		};
		const { bsStyle, bsSize, open, disabled, maxWidth, iconName } = this.props;
		//初始化数据，为按钮添加样式
		let btnActive = false;
		let btnStyle = initData.bsStyle[bsStyle],
			btnSize = initData.bsSize[bsSize],
			listShow = open ? true : false,
			btnDirection = initData.btnDirection[bsSize],
			btnDisabled = disabled ? initData.btnDisabled[bsStyle] : (this.state.btnDisabled = ' '),
			iconBtnName = disabled ? iconName.replace('nomal', 'disabled') : initData.btnIcon[bsStyle],
			maxBtnWidth = maxWidth && maxWidth.length > 0 ? maxWidth : 'none';
		this.setState({
			maxWidth: maxBtnWidth,
			btnActive: btnActive,
			btnStyle: btnStyle,
			btnSize: btnSize,
			listShow: listShow,
			btnDirection: btnDirection,
			btnDisabled: btnDisabled,
			iconName: iconBtnName
		});
	}

	componentWillUnmount() {
		this.CommonMount.unmountBox();
		document.removeEventListener('mousedown', this.onClose);
	}

	render() {
		const {
			type,
			btnSize,
			btnStyle,
			btnDisabled,
			iconName,
			hovering,
			btnDirection,
			maxWidth,
			listShow,
			notBtnIcon,
			btnActive
		} = this.state;
		const { title, hidden, isBtnStyle, hoverName, activeName } = this.props;
		let IconComponent = this.props.iconComponent;
		let dropLabel, labelType, iconLabel, maxBtnWidth;
		if (type == 'text') {
			maxBtnWidth = maxWidth;
			labelType = btnActive ? ' drop-down-btn-label drop-down-btn-actived ' : ' drop-down-btn-label ';
			if (title.length > 0) {
				dropLabel = (
					<div>
						<span className="drop-down-btn-title">{title}</span>
						<span className="drop-down-btn-svg">
							{/* { this.props.bsStyle=="default" ? <DropdownDisabledIcon width={6} height={5}/>:  <DropdownNormalIcon width={6} height={5} /> } */}
							<DropdownNormalIcon width={10} height={4} />
						</span>
					</div>
				);
			} else {
				dropLabel = '';
			}
		} else {
			labelType = ' drop-down-btn-icon ';
			let hoverClass = hoverName && btnActive ? activeName : hovering ? this.props.iconName : notBtnIcon;
			iconLabel = (
				<span
					ref="dropDownIcon"
					className={'drop-down-icon ' + (isBtnStyle || isBtnStyle == undefined ? iconName : hoverClass)}
				/>
			);
		}

		if (hidden) {
			return <div />;
		} else {
			return (
				<div ref="dropBtnComponent" className="feild drop-down-button">
					<div
						ref="dropDownView"
						className={
							'drop-down-btn-list ' +
							(isBtnStyle || isBtnStyle == undefined ? '' : 'is-not-btn-style') +
							(listShow ? 'drop-down-list-active ' : ' ') +
							btnDirection
						}
					>
						<div
							ref="dropdownbtn"
							style={{ maxWidth: maxBtnWidth }}
							className={btnSize + btnStyle + btnDisabled + labelType}
							onClick={this.onClick}
							onMouseOver={this.btnMouseMove}
							onMouseOut={this.btnMouseOut}
						>
							{dropLabel}
							{IconComponent ? <IconComponent /> : iconLabel}
						</div>
					</div>
				</div>
			);
		}
	}
}