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