redux-modal-tabs
Version:
Redux modal tabs
39 lines (38 loc) • 1.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_redux_1 = require("react-redux");
const actions_1 = require("../actions");
class ModalTabComponent extends React.Component {
onToggleOpen() {
const { modalTab, activeModalTabId, dispatch } = this.props;
if (modalTab.id === activeModalTabId) {
dispatch(actions_1.closeModalTab(modalTab.id));
}
else {
dispatch(actions_1.openModalTab(modalTab.id));
}
}
onRemove(event) {
event.stopPropagation();
const { modalTab, dispatch } = this.props;
dispatch(actions_1.removeModalTab(modalTab.id));
}
render() {
const { modalTab, activeModalTabId } = this.props;
const isActive = modalTab.id === activeModalTabId;
return (React.createElement("li", { className: 'modalTab' + (isActive ? ' modalTabActive' : '') },
React.createElement("header", { className: "modalTabHeader", onClick: this.onToggleOpen.bind(this) },
React.createElement("div", { className: "modalTabTitle" }, modalTab.title),
React.createElement("div", { className: "modalTabButtons" },
React.createElement("button", { className: "modalTabButton modalTabToggleOpen" },
React.createElement("span", { className: "modalTabArrow" })),
React.createElement("button", { className: "modalTabButton modalTabRemove", onClick: this.onRemove.bind(this) },
React.createElement("span", { className: "modalTabCross" }, "\u2A2F")))),
isActive && (React.createElement("main", { className: "modalTabContent" }, modalTab.content))));
}
}
const select = (state, ownProps) => ({
activeModalTabId: state.reduxModalTabs.activeModalTabId
});
exports.default = react_redux_1.connect(select)(ModalTabComponent);