cosmo-ui
Version:
Common React components
86 lines • 4.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_redux_1 = require("react-redux");
var utils_1 = require("../utils");
var actions_1 = require("../actions");
var selectors_1 = require("../selectors");
var _1 = require(".");
var openable_component_1 = require("./openable-component");
var styles = require('../../src/styles/components/dropdown.scss');
var _Dropdown = (function (_super) {
tslib_1.__extends(_Dropdown, _super);
function _Dropdown() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleListItemClick = function () {
if (_this.props.closeOnClick) {
_this.handleClose();
}
};
_this.handleMouseOver = function () {
if (_this.props.openOnHover)
_this.props.openDropdown(_this.props.name);
};
_this.handleMouseLeave = function () {
if (_this.props.openOnHover)
_this.props.closeDropdown(_this.props.name);
};
return _this;
}
_Dropdown.prototype.isActive = function () {
return this.props.isToggled;
};
_Dropdown.prototype.handleClose = function () {
this.props.closeDropdown(this.props.name);
};
_Dropdown.prototype.renderChildren = function () {
var key = 0;
var _a = this.props, closeDropdown = _a.closeDropdown, name = _a.name, position = _a.position, id = _a.id, children = _a.children;
var childStyles = { width: this.props.listWidth };
switch (position) {
case 'left':
childStyles.left = '0px';
break;
case 'right':
childStyles.right = '0px';
break;
case 'center':
childStyles.left = '50%'; // @todo - figure out why the hell this is true
break;
default:
childStyles.left = position; // specify a custom position starting from the left
}
return (React.createElement("ul", { id: id || name + "-list", className: styles.list, style: childStyles, onClick: this.handleListItemClick }, children));
};
_Dropdown.prototype.render = function () {
var _this = this;
var _a = this.props, toggleDropdown = _a.toggleDropdown, openDropdown = _a.openDropdown, name = _a.name, isToggled = _a.isToggled, toggleIcon = _a.toggleIcon;
/* tslint:disable:jsx-no-lambda */
return (React.createElement("div", { className: styles.container, ref: this.setContainerRef, onMouseLeave: this.handleMouseLeave },
React.createElement("button", { "data-tooltip": this.props.tooltip || null, id: name + "-button", ref: function (e) { return _this.button = e; }, onClick: utils_1.mkNonPropagatingClick(function () { return toggleDropdown(name); }), onMouseOver: this.handleMouseOver }, isToggled
? (toggleIcon ? this.props.toggleIcon : this.props.icon)
: this.props.icon),
isToggled ? this.renderChildren() : null));
/* tslint:enable:jsx-no-lambda */
};
return _Dropdown;
}(openable_component_1.OpenableComponent));
var mapStateToProps = function (state, ownProps) { return ({
name: ownProps.name,
isToggled: selectors_1.getDropdownByKey(state, ownProps.name),
tooltip: ownProps.tooltip || null,
closeOnClick: ownProps.closeOnClick === undefined ? true : ownProps.closeOnClick,
openOnHover: ownProps.openOnHover || false,
position: ownProps.position || 'left',
icon: ownProps.icon || (React.createElement(_1.Icon, { icon: "down-arrow", stroke: "white", size: 18 })),
toggleIcon: ownProps.toggleIcon || null,
listWidth: ownProps.listWidth || 180,
}); };
var mapDispatchToProps = {
openDropdown: actions_1.openDropdown,
closeDropdown: actions_1.closeDropdown,
toggleDropdown: actions_1.toggleDropdown,
};
exports.Dropdown = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(_Dropdown);
//# sourceMappingURL=dropdown.js.map