codogo-react-widgets/lib/components/dropdown.js

Provides a unified way to access the styling of commonly used widgets across different apps

import _extends from "babel-runtime/helpers/extends";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _desc, _value, _class, _class2, _desc2, _value2, _class3;

var _templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\tline-height: 1;\n\t// max-height: ", "em;\n\tdisplay: inline-block;\n\toverflow: visible;\n\tcursor: pointer;\n\twidth: 10em;\n\tflex: 7;\n"], ["\n\tposition: relative;\n\tline-height: 1;\n\t// max-height: ", "em;\n\tdisplay: inline-block;\n\toverflow: visible;\n\tcursor: pointer;\n\twidth: 10em;\n\tflex: 7;\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n\tbackground: ", ";\n\tborder-radius: ", ";\n\tborder: 1px solid ", ";\n\tpadding: ", ";\n\tposition: relative;\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n\n\t&:before {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\ttop: ", "em;\n\t\tright: ", "em;\n\t\tborder: ", "em solid transparent;\n\t\tborder-top-width: ", "em;\n\t\tborder-bottom-width: 0;\n\t\tborder-top-color: ", ";\n\t\theight: ", "em;\n\t\twidth: ", "em;\n\t}\n"], ["\n\tbackground: ", ";\n\tborder-radius: ", ";\n\tborder: 1px solid ", ";\n\tpadding: ", ";\n\tposition: relative;\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n\n\t&:before {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\ttop: ", "em;\n\t\tright: ", "em;\n\t\tborder: ", "em solid transparent;\n\t\tborder-top-width: ", "em;\n\t\tborder-bottom-width: 0;\n\t\tborder-top-color: ", ";\n\t\theight: ", "em;\n\t\twidth: ", "em;\n\t}\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\tbackground: ", ";\n\tborder-radius: ", ";\n\tborder: 1px solid ", ";\n\tbox-shadow: inset 0 -2em 2em -2em ", ";\n\tdisplay: ", ";\n\tleft: 0;\n\tmax-height: 60vh;\n\toverflow-y: scroll;\n\tpadding: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 100%;\n\tz-index: 10;\n\n\t", ";\n"], ["\n\tbackground: ", ";\n\tborder-radius: ", ";\n\tborder: 1px solid ", ";\n\tbox-shadow: inset 0 -2em 2em -2em ", ";\n\tdisplay: ", ";\n\tleft: 0;\n\tmax-height: 60vh;\n\toverflow-y: scroll;\n\tpadding: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 100%;\n\tz-index: 10;\n\n\t", ";\n"]),
    _templateObject4 = _taggedTemplateLiteral(["\n\t", " overflow: hidden;\n\tpadding: ", "em ", "em;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n"], ["\n\t", " overflow: hidden;\n\tpadding: ", "em ", "em;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n"]),
    _templateObject5 = _taggedTemplateLiteral(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: ", ";\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: ", ";\n"]),
    _templateObject6 = _taggedTemplateLiteral(["\n\tpadding: ", ";\n\tflex: 3;\n\ttext-align: right;\n\tborder: 1px transparent;\n"], ["\n\tpadding: ", ";\n\tflex: 3;\n\ttext-align: right;\n\tborder: 1px transparent;\n"]);

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
	var desc = {};
	Object['ke' + 'ys'](descriptor).forEach(function (key) {
		desc[key] = descriptor[key];
	});
	desc.enumerable = !!desc.enumerable;
	desc.configurable = !!desc.configurable;

	if ('value' in desc || desc.initializer) {
		desc.writable = true;
	}

	desc = decorators.slice().reverse().reduce(function (desc, decorator) {
		return decorator(target, property, desc) || desc;
	}, desc);

	if (context && desc.initializer !== void 0) {
		desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
		desc.initializer = undefined;
	}

	if (desc.initializer === void 0) {
		Object['define' + 'Property'](target, property, desc);
		desc = null;
	}

	return desc;
}

import React from "react";
import * as R from "ramda";
import styled from "styled-components";
import autobind from "autobind-decorator";
import clickOutside from "react-onclickoutside";
import ReactDOM from "react-dom";

import { lighten } from "polished";

import { getArrowWidth, getBorderRadius, getColor, getMarginLeft, getMarginRight, getMarginVertical, getPaddingHorizontal, getPaddingVertical, getPadding2 } from "../getters";

// --------------------------------------------------

var getWrapperMaxHeight = R.pipe(getPaddingVertical, R.multiply(2), R.add(1));

var getWrapperMaxWidth = R.pipe(getPaddingHorizontal, R.multiply(2), R.add(1));

// --------------------------------------------------

var Wrapper = styled.div(_templateObject, getWrapperMaxHeight);

var getTriggerPadding = function getTriggerPadding(props) {
	return [getPaddingVertical(props), getWrapperMaxWidth(props), getPaddingVertical(props), getPaddingHorizontal(props)].join("em ") + "em";
};

var Trigger = styled.div(_templateObject2, getColor("lightgray"), getBorderRadius, getColor("gray"), getTriggerPadding, getColor("midgray"), function (props) {
	return getPaddingVertical(props) + (1 - getArrowWidth(props)) / 2;
}, getPaddingHorizontal, function (props) {
	return getArrowWidth(props) / 2;
}, getArrowWidth, getColor("darkgray"), getArrowWidth, getArrowWidth);

var getContentBorderRadius = function getContentBorderRadius(props) {
	return ["0", "0", getBorderRadius(props), getBorderRadius(props)].join(" ");
};

var Content = styled.div(_templateObject3, getColor("lightgray"), getContentBorderRadius, getColor("gray"), R.path(["theme", "colors", "darkgray"]), function (p) {
	return p.active ? "block" : "none";
}, function (_ref) {
	var scrolled = _ref.scrolled;
	return scrolled ? "\n\t\tbox-shadow: none;\n\t" : "";
});

var getOptionBackgroundColor = function getOptionBackgroundColor(props) {
	return props.active ? "background-color: " + lighten(0.4, getColor("primary")(props)) + ";" : "";
};

var Option = styled.div(_templateObject4, getOptionBackgroundColor, getPaddingVertical, getPaddingHorizontal, getColor("midgray"));

var getOuterWrapperMargin = function getOuterWrapperMargin(props) {
	return [getMarginVertical(props), getMarginRight(props), getMarginVertical(props), getMarginLeft(props)].join("em ") + "em";
};

var OuterWrapper = styled.div(_templateObject5, getOuterWrapperMargin);

var Label = styled.div(_templateObject6, getPadding2);

// --------------------------------------------------

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

	function DropdownOption() {
		_classCallCheck(this, DropdownOption);

		return _possibleConstructorReturn(this, (DropdownOption.__proto__ || Object.getPrototypeOf(DropdownOption)).apply(this, arguments));
	}

	_createClass(DropdownOption, [{
		key: "onClick",
		value: function onClick() {
			this.props.onClick({
				value: this.props.value || this.props.children,
				target: {
					value: this.props.value || this.props.children
				}
			});
		}
	}, {
		key: "render",
		value: function render() {
			return React.createElement(Option, _extends({}, this.props, { onClick: this.onClick }));
		}
	}]);

	return DropdownOption;
}(React.Component), (_applyDecoratedDescriptor(_class.prototype, "onClick", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "onClick"), _class.prototype)), _class);

var Dropdown = clickOutside(_class2 = (_class3 = function (_React$Component2) {
	_inherits(Dropdown, _React$Component2);

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

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

		_this2.state = {
			active: false,
			scrolled: false
		};
		return _this2;
	}

	_createClass(Dropdown, [{
		key: "calculateScrollState",
		value: function calculateScrollState() {
			if (this.dropdownContentRef.scrollHeight - this.dropdownContentRef.clientHeight - this.dropdownContentRef.scrollTop === 0) {
				this.setState({ scrolled: true });
			}
		}
	}, {
		key: "toggle",
		value: function toggle() {
			this.setState(function (pState) {
				return { active: !pState.active };
			}, this.calculateScrollState);
		}
	}, {
		key: "show",
		value: function show() {
			this.setState({ active: true });
		}
	}, {
		key: "hide",
		value: function hide() {
			this.setState({ active: false });
		}
	}, {
		key: "onClickOption",
		value: function onClickOption(e) {
			this.hide();
			this.props.onChange(e);
		}
	}, {
		key: "handleClickOutside",
		value: function handleClickOutside() {
			this.hide();
		}

		//Scrolling

	}, {
		key: "onWrapperScroll",
		value: function onWrapperScroll(e) {
			if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop === 0) {
				this.setState({ scrolled: true });
			} else {
				this.state.scrolled && this.setState({ scrolled: false });
			}
		}
	}, {
		key: "componentDidMount",
		value: function componentDidMount() {
			var dropdownContent = ReactDOM.findDOMNode(this.dropdownContentRef);
			dropdownContent.addEventListener("scroll", this.onWrapperScroll);
		}
	}, {
		key: "componentWillUnmount",
		value: function componentWillUnmount() {
			var dropdownContent = ReactDOM.findDOMNode(this.dropdownContentRef);
			dropdownContent.removeEventListener("scroll", this.onWrapperScroll);
		}
	}, {
		key: "onDropdownContentRef",
		value: function onDropdownContentRef(ref) {
			this.dropdownContentRef = ref || this.dropdownContentRef;
		}
	}, {
		key: "render",
		value: function render() {
			var _this3 = this;

			var _props = this.props,
			    label = _props.label,
			    value = _props.value,
			    children = _props.children;


			return React.createElement(
				OuterWrapper,
				null,
				label && React.createElement(
					Label,
					null,
					label
				),
				React.createElement(
					Wrapper,
					null,
					React.createElement(
						Trigger,
						{ onClick: this.toggle },
						!!value ? (children.find(function (o) {
							return value === o.props.value || value === o.props.children;
						}) || children[0]).props.children : this.props.default || "Choose..."
					),
					React.createElement(
						Content,
						_extends({
							innerRef: this.onDropdownContentRef
						}, this.state),
						this.props.children && this.props.children.length > 0 ? React.Children.map(children, function (_ref2, i) {
							var optionProps = _ref2.props;
							return React.createElement(DropdownOption, _extends({
								key: i
							}, optionProps, {
								onClick: _this3.onClickOption,
								active: value === optionProps.value
							}));
						}) : React.createElement(
							Option,
							{ onClick: this.hide },
							"No options supplied"
						)
					)
				)
			);
		}
	}]);

	return Dropdown;
}(React.Component), (_applyDecoratedDescriptor(_class3.prototype, "calculateScrollState", [autobind], Object.getOwnPropertyDescriptor(_class3.prototype, "calculateScrollState"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "toggle", [autobind], Object.getOwnPropertyDescriptor(_class3.prototype, "toggle"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "show", [autobind], Object.getOwnPropertyDescriptor(_class3.prototype, "show"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "hide", [autobind], Object.getOwnPropertyDescriptor(_class3.prototype, "hide"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "onClickOption", [autobind], Object.getOwnPropertyDescriptor(_class3.prototype, "onClickOption"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "handleClickOutside", [autobind], Object.getOwnPropertyDescriptor(_class3.prototype, "handleClickOutside"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "onWrapperScroll", [autobind], Object.getOwnPropertyDescriptor(_class3.prototype, "onWrapperScroll"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "onDropdownContentRef", [autobind], Object.getOwnPropertyDescriptor(_class3.prototype, "onDropdownContentRef"), _class3.prototype)), _class3)) || _class2;

var Blank = function Blank(props) {
	return React.createElement("div", props);
};

Dropdown.Option = Blank;

Dropdown.Trigger = function (props) {
	return React.createElement(Option, _extends({}, props, { trigger: true }));
};

// --------------------------------------------------

Dropdown.Old = function (props) {
	return React.createElement(
		"form",
		null,
		React.createElement(
			"select",
			{ value: props.value, onChange: props.onChange },
			props.children
		)
	);
};

Dropdown.Old.Option = function (props) {
	return React.createElement(
		"option",
		{ value: props.value },
		props.children
	);
};

// --------------------------------------------------

export default Dropdown;