redux-modal-tabs
Version:
Redux modal tabs
58 lines (57 loc) • 2.6 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 ModalTabsHorizontal extends React.Component {
constructor() {
super(...arguments);
this.state = {
expanded: true
};
}
onToggleExpanded() {
const { expanded } = this.state;
this.setState({
expanded: !expanded
});
}
componentDidUpdate(prevProps) {
const { modalTabs } = this.props;
if (prevProps.modalTabs.length < modalTabs.length) {
this.setState({
expanded: true
});
}
}
onOpen(modalTab) {
const { dispatch } = this.props;
dispatch(actions_1.openModalTab(modalTab.id));
}
onRemove(modalTab) {
const { dispatch } = this.props;
dispatch(actions_1.removeModalTab(modalTab.id));
}
render() {
const { modalTabs, activeModalTabId } = this.props;
const { expanded } = this.state;
if (modalTabs.length === 0) {
return null;
}
const active = modalTabs.find(modalTab => modalTab.id === activeModalTabId);
return (React.createElement("div", { className: 'modalTabsHorizontal ' + (expanded ? 'modalTabsExpanded' : ' modalTabsCollapsed') },
React.createElement("header", { className: "modalTabsTop" },
React.createElement("ul", { className: "modalTabsList" }, modalTabs.map(modalTab => React.createElement("li", { key: modalTab.id, className: 'modalTabItem' + (modalTab.id === activeModalTabId ? ' modalTabItemActive' : ''), onClick: () => this.onOpen(modalTab) },
React.createElement("span", null, modalTab.title),
React.createElement("button", { className: "closeModalTab", onClick: () => this.onRemove(modalTab) },
React.createElement("span", { className: "modalTabCross" }, "\u2A2F"))))),
React.createElement("button", { className: "toggleModalTabsExpanded", onClick: this.onToggleExpanded.bind(this) },
React.createElement("span", { className: "modalTabArrow" }))),
(active && expanded) && (React.createElement("main", { className: "modalTabContent" }, active.content))));
}
}
const select = (state) => ({
modalTabs: state.reduxModalTabs.modalTabs,
activeModalTabId: state.reduxModalTabs.activeModalTabId
});
exports.default = react_redux_1.connect(select)(ModalTabsHorizontal);