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

pull/6/head
Qstick 6 years ago
parent 909140988f
commit 9002dd67e1

@ -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 ?
onTableOptionChange={onTableOptionChange} <OptionsComponent
/> onTableOptionChange={onTableOptionChange}
} /> : null
}
{
canModifyColumns && {
<FormGroup> canModifyColumns ?
<FormLabel>Columns</FormLabel> <FormGroup>
<FormLabel>Columns</FormLabel>
<div>
<FormInputHelpText <div>
text="Choose which columns are visible and which order they appear in" <FormInputHelpText
/> text="Choose which columns are visible and which order they appear in"
/>
<div className={styles.columns}>
{ <div className={styles.columns}>
columns.map((column, index) => { {
const { columns.map((column, index) => {
name, const {
label, name,
columnLabel, label,
isVisible, columnLabel,
isModifiable isVisible,
} = column; isModifiable
} = column;
if (isModifiable !== false) {
return ( if (isModifiable !== false) {
<TableOptionsColumnDragSource return (
key={name} <TableOptionsColumnDragSource
name={name} key={name}
label={label || columnLabel} name={name}
isVisible={isVisible} label={label || columnLabel}
isModifiable={true} isVisible={isVisible}
index={index} isModifiable={true}
isDragging={isDragging} index={index}
isDraggingUp={isDraggingUp} isDragging={isDragging}
isDraggingDown={isDraggingDown} isDraggingUp={isDraggingUp}
onVisibleChange={this.onVisibleChange} isDraggingDown={isDraggingDown}
onColumnDragMove={this.onColumnDragMove} onVisibleChange={this.onVisibleChange}
onColumnDragEnd={this.onColumnDragEnd} onColumnDragMove={this.onColumnDragMove}
/> 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>
); );
} }

Loading…
Cancel
Save