src/views-components/projects-tree-picker/tree-picker-field.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   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 { getFileOperationLocation } from "store/tree-picker/tree-picker-actions";
  13
  14 export const ProjectTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
  15     <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
  16         <div style={{ flexBasis: '275px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
  17             <ProjectsTreePicker
  18                 pickerId={props.pickerId}
  19                 toggleItemActive={handleChange(props)}
  20                 options={{ showOnlyOwned: false, showOnlyWritable: true }} />
  21             {props.meta.dirty && props.meta.error &&
  22                 <Typography variant='caption' color='error'>
  23                     {props.meta.error}
  24                 </Typography>}
  25         </div>
  26     </div>;
  27
  28 const handleChange = (props: WrappedFieldProps) =>
  29     (_: any, { id }: TreeItem<ProjectsTreePickerItem>) =>
  30         props.input.onChange(id);
  31
  32 export const CollectionTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
  33     <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
  34         <div style={{ flexBasis: '275px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
  35             <ProjectsTreePicker
  36                 pickerId={props.pickerId}
  37                 toggleItemActive={handleChange(props)}
  38                 options={{ showOnlyOwned: false, showOnlyWritable: true }}
  39                 includeCollections />
  40             {props.meta.dirty && props.meta.error &&
  41                 <Typography variant='caption' color='error'>
  42                     {props.meta.error}
  43                 </Typography>}
  44         </div>
  45     </div>;
  46
  47 const handleDirectoryChange = (props: WrappedFieldProps) =>
  48     (_: any, { data }: TreeItem<ProjectsTreePickerItem>) => {
  49         props.input.onChange(getFileOperationLocation(data) || '');
  50     }
  51
  52 export const DirectoryTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
  53     <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
  54         <div style={{ flexBasis: '275px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
  55             <ProjectsTreePicker
  56                 pickerId={props.pickerId}
  57                 toggleItemActive={handleDirectoryChange(props)}
  58                 options={{ showOnlyOwned: false, showOnlyWritable: true }}
  59                 includeCollections
  60                 includeDirectories />
  61             {props.meta.dirty && props.meta.error &&
  62                 <Typography variant='caption' color='error'>
  63                     {props.meta.error}
  64                 </Typography>}
  65         </div>
  66     </div>;