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
  13 export const ProjectTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
  14     <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
  15         <div style={{ flexBasis: '200px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
  16             <ProjectsTreePicker
  17                 pickerId={props.pickerId}
  18                 toggleItemActive={handleChange(props)}
  19                 options={{ showOnlyOwned: false, showOnlyWritable: true }} />
  20             {props.meta.dirty && props.meta.error &&
  21                 <Typography variant='caption' color='error'>
  22                     {props.meta.error}
  23                 </Typography>}
  24         </div>
  25     </div>;
  26
  27 const handleChange = (props: WrappedFieldProps) =>
  28     (_: any, { id }: TreeItem<ProjectsTreePickerItem>) =>
  29         props.input.onChange(id);
  30
  31 export const CollectionTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
  32     <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
  33         <div style={{ flexBasis: '200px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
  34             <ProjectsTreePicker
  35                 pickerId={props.pickerId}
  36                 toggleItemActive={handleChange(props)}
  37                 options={{ showOnlyOwned: false, showOnlyWritable: true }}
  38                 includeCollections />
  39             {props.meta.dirty && props.meta.error &&
  40                 <Typography variant='caption' color='error'>
  41                     {props.meta.error}
  42                 </Typography>}
  43         </div>
  44     </div>;