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 * as 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         {props.meta.dirty && props.meta.error &&
  19             <Typography variant='caption' color='error'>
  20                 {props.meta.error}
  21             </Typography>}
  22     </div>;
  23
  24 const handleChange = (props: WrappedFieldProps) =>
  25     (_: any, { id }: TreeItem<ProjectsTreePickerItem>) =>
  26         props.input.onChange(id);
  27
  28 export const CollectionTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
  29     <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
  30         <ProjectsTreePicker
  31             pickerId={props.pickerId}
  32             toggleItemActive={handleChange(props)}
  33             includeCollections />
  34         {props.meta.dirty && props.meta.error &&
  35             <Typography variant='caption' color='error'>
  36                 {props.meta.error}
  37             </Typography>}
  38     </div>;