zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2025-12-20 14:15:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move torrent details to modal

Browse Source
This commit is contained in:
John Furrow
2016-05-07 22:14:29 -07:00
parent 2eac7fb035
commit 4eadd2180c
27 changed files with 559 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
client/source/scripts/components/modals/Modal.js
View File

@@ -38,13 +38,16 @@ export default class Modal extends React.Component {
}
render() {
let content = this.props.content;
let footer = null;
let contentClasses = classnames('modal__content__wrapper',
`modal--align-${this.props.alignment}`, {
'modal--orientation--horizontal': this.props.orientation === 'horizontal',
'modal--orientation--vertical': this.props.orientation === 'vertical'
`modal--align-${this.props.alignment}`, `modal--size-${this.props.size}`, {
'modal--horizontal': this.props.orientation === 'horizontal',
'modal--vertical': this.props.orientation === 'vertical',
'modal--tabs-in-header': !this.props.tabsInBody,
'modal--tabs-in-body': this.props.tabsInBody
}, this.props.classNames);
let modalBody = [this.props.content];
let modalHeader = [this.props.heading];
let headerClasses = classnames('modal__header', {
'has-tabs': this.props.tabs
});
@@ -52,31 +55,45 @@ export default class Modal extends React.Component {
if (this.props.tabs) {
let activeTabId = this.getActiveTabId();
let activeTab = this.props.tabs[activeTabId];
content = this.props.tabs[activeTabId].content;
tabs = (
<ModalTabs activeTabId={activeTabId} onTabChange={this.handleTabChange}
tabs={this.props.tabs} />
let ModalContentComponent = activeTab.content;
let modalContentData = activeTab.props;
let tabs = (
<ModalTabs activeTabId={activeTabId} key="modal-tabs"
onTabChange={this.handleTabChange} tabs={this.props.tabs} />
);
if (this.props.tabsInBody) {
modalBody = [tabs];
} else {
modalHeader.push(tabs);
}
modalBody.push(
<div className="modal__content" key="modal-content">
<ModalContentComponent {...modalContentData} />
</div>
);
}
if (this.props.actions) {
footer = (
<ModalActions actions={this.props.actions}
dismiss={this.props.dismiss} />
<div className="modal__footer">
<ModalActions actions={this.props.actions}
dismiss={this.props.dismiss} />
</div>
);
}
return (
<div className={contentClasses} onClick={this.handleMenuWrapperClick}>
<div className={headerClasses}>
{this.props.heading}
{tabs}
{modalHeader}
</div>
<div className="modal__content">
<div className="modal__body">
{content}
</div>
<div className="modal__body">
{modalBody}
{footer}
</div>
</div>
@@ -87,5 +104,7 @@ export default class Modal extends React.Component {
Modal.defaultProps = {
alignment: 'left',
classNames: null,
orientation: 'horizontal'
size: 'medium',
orientation: 'horizontal',
tabsInBody: false
};