1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from "react";
6 import { Typography } from "@material-ui/core";
7 import { TreeItem } from "components/tree/tree";
8 import { WrappedFieldProps } from 'redux-form';
9 import { ProjectsTreePicker } from 'views-components/projects-tree-picker/projects-tree-picker';
10 import { ProjectsTreePickerItem } from 'store/tree-picker/tree-picker-middleware';
11 import { PickerIdProp } from 'store/tree-picker/picker-id';
12 import { FileOperationLocation, getFileOperationLocation } from "store/tree-picker/tree-picker-actions";
13 import { connect } from "react-redux";
14 import { Dispatch } from "redux";
16 export const ProjectTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
17 <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
18 <div style={{ flexBasis: '275px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
20 pickerId={props.pickerId}
21 toggleItemActive={handleChange(props)}
22 options={{ showOnlyOwned: false, showOnlyWritable: true }} />
23 {props.meta.dirty && props.meta.error &&
24 <Typography variant='caption' color='error'>
30 const handleChange = (props: WrappedFieldProps) =>
31 (_: any, { id }: TreeItem<ProjectsTreePickerItem>) =>
32 props.input.onChange(id);
34 export const CollectionTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
35 <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
36 <div style={{ flexBasis: '275px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
38 pickerId={props.pickerId}
39 toggleItemActive={handleChange(props)}
40 options={{ showOnlyOwned: false, showOnlyWritable: true }}
42 {props.meta.dirty && props.meta.error &&
43 <Typography variant='caption' color='error'>
49 type ProjectsTreePickerActionProps = {
50 getFileOperationLocation: (item: ProjectsTreePickerItem) => Promise<FileOperationLocation | undefined>;
53 const projectsTreePickerMapDispatchToProps = (dispatch: Dispatch): ProjectsTreePickerActionProps => ({
54 getFileOperationLocation: (item: ProjectsTreePickerItem) => dispatch<any>(getFileOperationLocation(item)),
57 type ProjectsTreePickerCombinedProps = ProjectsTreePickerActionProps & WrappedFieldProps & PickerIdProp;
59 export const DirectoryTreePickerField = connect(null, projectsTreePickerMapDispatchToProps)(
60 class DirectoryTreePickerFieldComponent extends React.Component<ProjectsTreePickerCombinedProps> {
62 handleDirectoryChange = (props: WrappedFieldProps) =>
63 async (_: any, { data }: TreeItem<ProjectsTreePickerItem>) => {
64 const location = await this.props.getFileOperationLocation(data);
65 props.input.onChange(location || '');
69 return <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
70 <div style={{ flexBasis: '275px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
72 currentUuid={this.props.input.value.uuid}
73 pickerId={this.props.pickerId}
74 toggleItemActive={this.handleDirectoryChange(this.props)}
75 options={{ showOnlyOwned: false, showOnlyWritable: true }}
78 {this.props.meta.dirty && this.props.meta.error &&
79 <Typography variant='caption' color='error'>
80 {this.props.meta.error}