cpui-components/lib/components/Dropdown/Dropdown.js

"use strict";

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.Dropdown = undefined;

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 _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _Transition = require("react-transition-group/Transition");

var _Transition2 = _interopRequireDefault(_Transition);

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

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 Dropdown = exports.Dropdown = function (_Component) {
	_inherits(Dropdown, _Component);

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

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

		_initialiseProps.call(_this);

		var dropdownLabel = _this.props.startValue;
		if (_this.props.children) {
			var optionWithValue = _this.props.children.find(function (child) {
				return child.props.value === _this.props.startValue;
			}) || { props: {} };
			dropdownLabel = optionWithValue.props.text || optionWithValue.props.value || _this.props.startValue;
		}
		_this.state = {
			dropdownLabel: dropdownLabel,
			isOpen: false,
			selectedOption: ""
		};

		_this.handleClickOutside = _this.handleClickOutside.bind(_this);
		_this.setWrapperRef = _this.setWrapperRef.bind(_this);
		return _this;
	}

	_createClass(Dropdown, [{
		key: "componentDidMount",
		value: function componentDidMount() {
			document.addEventListener("mousedown", this.handleClickOutside);
		}
	}, {
		key: "componentWillUnmount",
		value: function componentWillUnmount() {
			document.removeEventListener("mousedown", this.handleClickOutside);
		}
	}, {
		key: "setWrapperRef",
		value: function setWrapperRef(node) {
			this.wrapperRef = node;
		}
	}, {
		key: "handleClickOutside",
		value: function handleClickOutside(event) {
			if (this.state.isOpen && this.wrapperRef && !this.wrapperRef.contains(event.target)) {
				this.setState({ isOpen: false });
			}
		}
	}], [{
		key: "getDerivedStateFromProps",
		value: function getDerivedStateFromProps(nextProps) {
			var dropdownLabel = nextProps.startValue;
			if (nextProps.children) {
				var optionWithValue = nextProps.children.find(function (child) {
					return child.props.value === nextProps.startValue;
				}) || { props: {} };
				dropdownLabel = optionWithValue.props.text || optionWithValue.props.value || nextProps.startValue;
			}
			return {
				dropdownLabel: dropdownLabel
			};
		}
	}]);

	return Dropdown;
}(_react.Component);

Dropdown.propTypes = {
	className: _propTypes2.default.string,
	id: _propTypes2.default.string.isRequired,
	onChange: _propTypes2.default.func,
	size: _propTypes2.default.oneOf(["small"]),
	slim: _propTypes2.default.bool,
	options: _propTypes2.default.array,
	transitionTimeout: _propTypes2.default.oneOfType([_propTypes2.default.shape({
		enter: _propTypes2.default.number,
		exit: _propTypes2.default.number
	}), _propTypes2.default.number])
};
Dropdown.defaultProps = {
	startValue: "Select an option",
	transitionTimeout: 240,
	onChange: function onChange(e) {}
};

var _initialiseProps = function _initialiseProps() {
	var _this2 = this;

	this.handleOpen = function () {
		_this2.setState({ isOpen: !_this2.state.isOpen });
	};

	this.handleSelection = function (selectionEvent, optionId, index, value) {
		// We need to persist the event here so it can be used in the async callback setState does
		// Otherwise, the selectionEvent will be full of null values
		selectionEvent.persist();
		_this2.setState({
			dropdownLabel: selectionEvent.target.getAttribute("data-label"),
			isOpen: false,
			selectedOption: selectionEvent.target.value
		}, function () {
			_this2.props.onChange(selectionEvent, optionId, index, value);
		});
	};

	this.render = function () {
		var id = _this2.props.id;
		var _state = _this2.state,
		    isOpen = _state.isOpen,
		    dropdownLabel = _state.dropdownLabel;


		return _react2.default.createElement(
			"div",
			{
				id: id,
				ref: _this2.setWrapperRef,
				tabIndex: "0",
				className: _this2.props.className + " cp-DropdownMenu " + (isOpen ? "is-open" : "") + " " + (_this2.props.size === "small" ? "cp-DropdownMenu--small" : "") + " " + (_this2.props.slim ? "cp-DropdownMenu--slim" : ""),
				"data-label": dropdownLabel,
				onClick: _this2.handleOpen,
				disabled: _this2.props.disabled != null ? _this2.props.disabled : false
			},
			_react2.default.createElement(
				"svg",
				{ className: "cp-DropdownMenu-arrow--down" },
				_react2.default.createElement("use", { xlinkHref: "#iconArrow--down" })
			),
			_this2.renderMenu(_this2.handleSelection)
		);
	};

	this.renderMenu = function (handleSelection) {
		var _props = _this2.props,
		    id = _props.id,
		    options = _props.options,
		    transitionTimeout = _props.transitionTimeout;
		var _state2 = _this2.state,
		    selectedOption = _state2.selectedOption,
		    isOpen = _state2.isOpen;

		var transitionProps = { in: isOpen, timeout: transitionTimeout };

		var optionDivs = null;
		if (_this2.props.children) {
			optionDivs = _this2.props.children.map(function (node, index) {
				var optionId = node.props.id || id + "Option" + index;
				return _react2.default.createElement(
					"div",
					{ key: index },
					_react2.default.createElement("input", {
						id: optionId,
						value: node.props.value,
						name: id + "Options",
						"data-label": node.props.text,
						type: "radio",
						className: "cp-RadioButton-input " + (node.props.className || ""),
						checked: _this2.props.selectedValue === node.props.value || selectedOption === optionId && !node.props.value,
						onChange: function onChange(e) {
							handleSelection(e, optionId, index, node.props.value);
						}
					}),
					_react2.default.createElement(
						"label",
						{
							htmlFor: optionId,
							className: "cp-RadioButton-label cp-DropdownMenu-option"
						},
						node.props.children || node.props.text || node.props.value
					)
				);
			});
		} else {
			optionDivs = options.map(function (optionName, index) {
				var optionId = id + "Option" + index;
				return _react2.default.createElement(
					"div",
					{ key: index },
					_react2.default.createElement("input", {
						id: optionId,
						value: optionId,
						name: id + "Options",
						"data-label": optionName,
						type: "radio",
						className: "cp-RadioButton-input",
						checked: selectedOption === optionId,
						onChange: handleSelection
					}),
					_react2.default.createElement(
						"label",
						{
							htmlFor: optionId,
							className: "cp-RadioButton-label cp-DropdownMenu-option"
						},
						optionName
					)
				);
			});
		}
		return _react2.default.createElement(
			_Transition2.default,
			transitionProps,
			function (state) {
				return _react2.default.createElement(
					"div",
					{
						className: "cp-DropdownMenu-menu Dropdown-fade-" + state
					},
					optionDivs
				);
			}
		);
	};
};

exports.default = Dropdown;