import { ProjectsTreePicker } from 'views-components/projects-tree-picker/projects-tree-picker';
import { connect, DispatchProp } from 'react-redux';
import { initProjectsTreePicker, getSelectedNodes, treePickerActions, getProjectsTreePickerIds } from 'store/tree-picker/tree-picker-actions';
-import { ProjectsTreePickerItem } from 'views-components/projects-tree-picker/generic-projects-tree-picker';
+import { ProjectsTreePickerItem } from 'store/tree-picker/tree-picker-middleware';
import { CollectionFile, CollectionFileType } from 'models/collection-file';
import { createSelector, createStructuredSelector } from 'reselect';
import { ChipsInput } from 'components/chips-input/chips-input';
onKeyPress={!this.props.commandInput.disabled ? this.openDialog : undefined}
onBlur={this.props.input.onBlur} />
- dialog = () =>
- <Dialog
- open={this.state.open}
- onClose={this.closeDialog}
- fullWidth
- maxWidth='md' >
- <DialogTitle>Choose files</DialogTitle>
- <DialogContent>
- <this.dialogContent />
- </DialogContent>
- <DialogActions>
- <Button onClick={this.closeDialog}>Cancel</Button>
- <Button
- data-cy='ok-button'
- variant='contained'
- color='primary'
- onClick={this.submit}>Ok</Button>
- </DialogActions>
- </Dialog>
-
dialogContentStyles: StyleRulesCallback<DialogContentCssRules> = ({ spacing }) => ({
root: {
display: 'flex',
flexDirection: 'column',
- height: `${spacing.unit * 8}vh`,
+ },
+ pickerWrapper: {
+ display: 'flex',
+ flexDirection: 'column',
+ flexBasis: `${spacing.unit * 8}vh`,
+ flexShrink: 1,
+ minHeight: 0,
},
tree: {
flex: 3,
},
})
- dialogContent = withStyles(this.dialogContentStyles)(
+
+ dialog = withStyles(this.dialogContentStyles)(
({ classes }: WithStyles<DialogContentCssRules>) =>
- <div className={classes.root}>
- <div className={classes.tree}>
- <ProjectsTreePicker
- pickerId={this.props.commandInput.id}
- includeCollections
- includeFiles
- showSelection
- options={this.props.options}
- toggleItemSelection={this.refreshFiles} />
- </div>
- <Divider />
- <div className={classes.chips}>
- <Typography variant='subtitle1'>Selected files ({this.state.files.length}):</Typography>
- <Chips
- orderable
- deletable
- values={this.state.files}
- onChange={this.setFiles}
- getLabel={(file: CollectionFile) => file.name} />
- </div>
- </div>
+ <Dialog
+ open={this.state.open}
+ onClose={this.closeDialog}
+ fullWidth
+ maxWidth='md' >
+ <DialogTitle>Choose files</DialogTitle>
+ <DialogContent className={classes.root}>
+ <div className={classes.pickerWrapper}>
+ <div className={classes.tree}>
+ <ProjectsTreePicker
+ pickerId={this.props.commandInput.id}
+ includeCollections
+ includeFiles
+ showSelection
+ options={this.props.options}
+ toggleItemSelection={this.refreshFiles} />
+ </div>
+ <Divider />
+ <div className={classes.chips}>
+ <Typography variant='subtitle1'>Selected files ({this.state.files.length}):</Typography>
+ <Chips
+ orderable
+ deletable
+ values={this.state.files}
+ onChange={this.setFiles}
+ getLabel={(file: CollectionFile) => file.name} />
+ </div>
+ </div>
+
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={this.closeDialog}>Cancel</Button>
+ <Button
+ data-cy='ok-button'
+ variant='contained'
+ color='primary'
+ onClick={this.submit}>Ok</Button>
+ </DialogActions>
+ </Dialog>
);
});
-type DialogContentCssRules = 'root' | 'tree' | 'divider' | 'chips';
+type DialogContentCssRules = 'root' | 'pickerWrapper' | 'tree' | 'divider' | 'chips';