Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Don't render table options modal content when it's closed

This commit is contained in:
Mark McDowall 2019-04-06 23:22:35 -07:00
parent 82b35f095e
commit 439870a546
1 changed files with 94 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
frontend/src/Components/Table/TableOptions/TableOptionsModal.js
View File

@ -131,105 +131,111 @@ class TableOptionsModal extends Component {
isOpen={isOpen} isOpen={isOpen}
onModalClose={onModalClose} onModalClose={onModalClose}
> >
<ModalContent onModalClose={onModalClose}> {
<ModalHeader> isOpen ?
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
Table Options Table Options
</ModalHeader> </ModalHeader>
<ModalBody> <ModalBody>
<Form> <Form>
{ {
hasPageSize && hasPageSize ?
<FormGroup> <FormGroup>
<FormLabel>Page Size</FormLabel> <FormLabel>Page Size</FormLabel>
<FormInputGroup <FormInputGroup
type={inputTypes.NUMBER} type={inputTypes.NUMBER}
name="pageSize" name="pageSize"
value={pageSize || 0} value={pageSize || 0}
helpText="Number of items to show on each page" helpText="Number of items to show on each page"
errors={pageSizeError ? [{ message: pageSizeError }] : undefined} errors={pageSizeError ? [{ message: pageSizeError }] : undefined}
onChange={this.onPageSizeChange} onChange={this.onPageSizeChange}
/> />
</FormGroup> </FormGroup> :
} null
}
{ {
!!OptionsComponent && OptionsComponent ?
<OptionsComponent <OptionsComponent
onTableOptionChange={onTableOptionChange} onTableOptionChange={onTableOptionChange}
/> /> : null
} }
{ {
canModifyColumns && canModifyColumns ?
<FormGroup> <FormGroup>
<FormLabel>Columns</FormLabel> <FormLabel>Columns</FormLabel>
<div> <div>
<FormInputHelpText <FormInputHelpText
text="Choose which columns are visible and which order they appear in" text="Choose which columns are visible and which order they appear in"
/> />
<div className={styles.columns}> <div className={styles.columns}>
{ {
columns.map((column, index) => { columns.map((column, index) => {
const { const {
name, name,
label, label,
columnLabel, columnLabel,
isVisible, isVisible,
isModifiable isModifiable
} = column; } = column;
if (isModifiable !== false) { if (isModifiable !== false) {
return ( return (
<TableOptionsColumnDragSource <TableOptionsColumnDragSource
key={name} key={name}
name={name} name={name}
label={label || columnLabel} label={label || columnLabel}
isVisible={isVisible} isVisible={isVisible}
isModifiable={true} isModifiable={true}
index={index} index={index}
isDragging={isDragging} isDragging={isDragging}
isDraggingUp={isDraggingUp} isDraggingUp={isDraggingUp}
isDraggingDown={isDraggingDown} isDraggingDown={isDraggingDown}
onVisibleChange={this.onVisibleChange} onVisibleChange={this.onVisibleChange}
onColumnDragMove={this.onColumnDragMove} onColumnDragMove={this.onColumnDragMove}
onColumnDragEnd={this.onColumnDragEnd} onColumnDragEnd={this.onColumnDragEnd}
/> />
); );
}
return (
<TableOptionsColumn
key={name}
name={name}
label={label || columnLabel}
isVisible={isVisible}
index={index}
isModifiable={false}
onVisibleChange={this.onVisibleChange}
/>
);
})
} }
return ( <TableOptionsColumnDragPreview />
<TableOptionsColumn </div>
key={name} </div>
name={name} </FormGroup> :
label={label || columnLabel} null
isVisible={isVisible} }
index={index} </Form>
isModifiable={false} </ModalBody>
onVisibleChange={this.onVisibleChange} <ModalFooter>
/> <Button
); onPress={onModalClose}
}) >
}
<TableOptionsColumnDragPreview />
</div>
</div>
</FormGroup>
}
</Form>
</ModalBody>
<ModalFooter>
<Button
onPress={onModalClose}
>
Close Close
</Button> </Button>
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent> :
null
}
</Modal> </Modal>
); );
} }