@beisen/ethos/lib/checkbox-list/index.js

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _toolTip = require('../tool-tip');

var _toolTip2 = _interopRequireDefault(_toolTip);

require('./checkbox.scss');

var _CheckboxItem = require('./CheckboxItem.js');

var _CheckboxItem2 = _interopRequireDefault(_CheckboxItem);

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

// import dataAnalysis from './helper/analysis';
//var React = require("react");
var CheckboxList = function (_Component) {
	(0, _inherits3.default)(CheckboxList, _Component);

	function CheckboxList(props) {
		(0, _classCallCheck3.default)(this, CheckboxList);

		var _this = (0, _possibleConstructorReturn3.default)(this, (CheckboxList.__proto__ || (0, _getPrototypeOf2.default)(CheckboxList)).call(this, props));

		var defaults = {
			checkboxItems: [{
				bsStyle: true,
				isChecked: false
			}]
		};
		_this.state = (0, _extends3.default)({}, defaults, props);
		_this.handleClick = _this.handleClick.bind(_this);
		_this.handleHover = _this.handleHover.bind(_this);
		_this.handleMouseOut = _this.handleMouseOut.bind(_this);
		_this.picClick = _this.picClick.bind(_this);
		return _this;
	}
	//处理点击事件 改变当前点击checkbox的isChecked值


	(0, _createClass3.default)(CheckboxList, [{
		key: 'handleClick',
		value: function handleClick(value, text, event, item) {
			if (this.props.disabled) return false;

			var checkboxItems = this.state.checkboxItems;
			checkboxItems.forEach(function (elem, index) {
				if (elem.value == value && elem.bsStyle == true) {
					elem.isChecked = !elem.isChecked;
				}
			});
			// this.userClickUxPmsLog(event)
			this.setState({ checkboxItems: checkboxItems });
			var data = checkboxItems.filter(function (item) {
				return item.isChecked;
			});
			this.props.onClick(event.target, data);
		}
	}, {
		key: 'picClick',
		value: function picClick(value) {
			var checkboxItems = this.state.checkboxItems;
			var data = checkboxItems.filter(function (item) {
				return item.value == value;
			});
			this.props.picClick(data[0]);
		}

		// userClickUxPmsLog(e){
		//   var className = e.target.getAttribute('class');
		//   if(className == 'check-title'){
		//     dataAnalysis._up('[CheckBoxList-text]',this.props.cmp_id);
		//   }else if(className.indexOf('table-item-check') > -1){
		//     dataAnalysis._up('[CheckBoxList-icon]',this.props.cmp_id);
		//   }
		// }

	}, {
		key: 'handleHover',
		value: function handleHover(event) {
			var hoverName = event.target.className;
			if (hoverName.indexOf('pc-sys-Checkbox-hover-svg') == -1) {
				event.target.className = hoverName.replace(/nomal/, 'hover');
			}
		}
	}, {
		key: 'handleMouseOut',
		value: function handleMouseOut(event) {
			var hoverName = event.target.className;
			if (hoverName.indexOf('pc-sys-Checkbox-hover-svg') !== -1) {
				event.target.className = hoverName.replace(/hover/, 'nomal');
			}
		}
	}, {
		key: 'shouldComponentUpdate',
		value: function shouldComponentUpdate(nextProps) {
			return this.props.hasRender ? true : false;
		}
	}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
			if (nextProps.checkboxItems != this.props.checkboxItems) {
				this.state.checkboxItems = nextProps.checkboxItems;
				this.setState(this.state);
			}
		}
	}, {
		key: 'render',
		value: function render() {
			var _this2 = this;

			var checkboxItems = this.state.checkboxItems;
			var _props = this.props,
			    name = _props.name,
			    hidden = _props.hidden,
			    disabled = _props.disabled,
			    required = _props.required,
			    errorStatus = _props.errorStatus,
			    helpMsg = _props.helpMsg,
			    sideTip = _props.sideTip,
			    hiddenTip = _props.hiddenTip,
			    lablePos = _props.lablePos,
			    lableTxt = _props.lableTxt,
			    hasNoTitle = _props.hasNoTitle;

			var errorMsg = '请填写正确信息',
			    errorContent = void 0,
			    checkboxList = void 0;

			if (this.props.errorStatus) {
				errorMsg = this.props.errorMsg.length > 0 ? this.props.errorMsg : errorMsg;
				errorContent = _react2.default.createElement(
					'span',
					{ className: 'form-item__explain' },
					errorMsg
				);
			}

			var lableStyle = void 0,
			    textStyle = void 0;
			if (lablePos) {
				lableStyle = lableTxt ? { float: 'left', textAlign: 'left' } : { float: 'left', textAlign: 'right' };
				textStyle = { paddingTop: '6px' };
			} else {
				lableStyle = {};
				textStyle = {};
			}

			//win10的ie下取消转动的动画
			var isWin10 = navigator.userAgent.indexOf('Windows NT 10.0') > -1 && !!window.ActiveXObject || 'ActiveXObject' in window;

			if (hidden) {
				return _react2.default.createElement(
					'div',
					{ className: 'field checkboxlist' },
					' '
				);
			} else {
				return _react2.default.createElement(
					'div',
					{ className: 'form-item checkboxlist ' + (helpMsg ? 'form-item__help' : '') },
					hasNoTitle ? _react2.default.createElement('div', null) : _react2.default.createElement(
						'div',
						{ className: 'form-item__title', style: lableStyle },
						required && !disabled ? _react2.default.createElement(
							'a',
							{ className: 'form-item__required' },
							_react2.default.createElement('i', { className: 'u-icon pc-sys-cus-bitian-svg' })
						) : '',
						_react2.default.createElement(
							_toolTip2.default,
							{ title: name, side: sideTip, hidden: hiddenTip },
							_react2.default.createElement(
								'label',
								{ htmlFor: '', className: 'form-item__text', style: textStyle },
								name,
								lablePos ? _react2.default.createElement('div', { className: 'fade-out' }) : ''
							)
						),
						helpMsg ? _react2.default.createElement(
							_toolTip2.default,
							{ title: helpMsg, side: sideTip, hidden: hiddenTip },
							_react2.default.createElement('i', { className: 'u-icon sys-icon-cus-bangzhu' })
						) : ''
					),
					_react2.default.createElement(
						'div',
						{ className: 'form-item__control ' + (errorStatus ? 'form-item__control_has-error' : '') },
						_react2.default.createElement(
							'div',
							{ style: { marginLeft: '5px' } },
							checkboxItems.map(function (item, index) {
								var isChecked = void 0;
								if (disabled || item.itemReadonly) {
									isChecked = item.isChecked ? isWin10 ? 'table-item-check pc-sys-Checkbox-active-disabled-svg' : 'table-item-check table-item-check-go pc-sys-Checkbox-active-disabled-svg' : isWin10 ? 'table-item-check pc-sys-Checkbox-disabled-svg' : 'table-item-check table-item-check-back pc-sys-Checkbox-disabled-svg';
								} else {
									isChecked = item.isChecked ? isWin10 ? 'table-item-check pc-sys-Checkbox-active-svg' : 'table-item-check table-item-check-go pc-sys-Checkbox-active-svg' : isWin10 ? 'table-item-check pc-sys-Checkbox-nomal-svg' : 'table-item-check table-item-check-back pc-sys-Checkbox-nomal-svg';
								}
								return _react2.default.createElement(_CheckboxItem2.default, {
									key: index,
									item: item,
									isChecked: isChecked,
									readOnly: disabled,
									text: item.text,
									hasPic: item.hasPic,
									bsStyle: item.bsStyle,
									itemReadonly: item.itemReadonly,
									toolTipMsg: item.toolTipMsg,
									value: item.value,
									handleClick: _this2.handleClick,
									handleHover: _this2.handleHover,
									handleMouseOut: _this2.handleMouseOut,
									picClick: _this2.picClick,
									iconStyle: item.iconStyle
								});
							})
						),
						errorContent
					)
				);
			}
		}
	}]);
	return CheckboxList;
}(_react.Component);

module.exports = CheckboxList;