import { PickerIdProp } from 'store/tree-picker/picker-id';
export const ProjectTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
- <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
- <ProjectsTreePicker
- pickerId={props.pickerId}
- toggleItemActive={handleChange(props)}
- options={{ showOnlyOwned: false, showOnlyWritable: true }} />
- {props.meta.dirty && props.meta.error &&
- <Typography variant='caption' color='error'>
- {props.meta.error}
- </Typography>}
+ <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
+ <div style={{ flexBasis: '200px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+ <ProjectsTreePicker
+ pickerId={props.pickerId}
+ toggleItemActive={handleChange(props)}
+ options={{ showOnlyOwned: false, showOnlyWritable: true }} />
+ {props.meta.dirty && props.meta.error &&
+ <Typography variant='caption' color='error'>
+ {props.meta.error}
+ </Typography>}
+ </div>
</div>;
const handleChange = (props: WrappedFieldProps) =>
props.input.onChange(id);
export const CollectionTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
- <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
- <ProjectsTreePicker
- pickerId={props.pickerId}
- toggleItemActive={handleChange(props)}
- options={{ showOnlyOwned: false, showOnlyWritable: true }}
- includeCollections />
- {props.meta.dirty && props.meta.error &&
- <Typography variant='caption' color='error'>
- {props.meta.error}
- </Typography>}
+ <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
+ <div style={{ flexBasis: '200px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+ <ProjectsTreePicker
+ pickerId={props.pickerId}
+ toggleItemActive={handleChange(props)}
+ options={{ showOnlyOwned: false, showOnlyWritable: true }}
+ includeCollections />
+ {props.meta.dirty && props.meta.error &&
+ <Typography variant='caption' color='error'>
+ {props.meta.error}
+ </Typography>}
+ </div>
</div>;