src/views-components/project-properties/create-project-properties-list.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 { connect } from 'react-redux';
   7 import { Dispatch } from 'redux';
   8 import {
   9     withStyles,
  10     StyleRulesCallback,
  11     WithStyles,
  12 } from '@material-ui/core';
  13 import { RootState } from '~/store/store';
  14 import { removePropertyFromCreateProjectForm, PROJECT_CREATE_FORM_SELECTOR, ProjectProperties } from '~/store/projects/project-create-actions';
  15 import { ArvadosTheme } from '~/common/custom-theme';
  16 import { getPropertyChip } from '../resource-properties-form/property-chip';
  17
  18 type CssRules = 'tag';
  19
  20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  21     tag: {
  22         marginRight: theme.spacing.unit,
  23         marginBottom: theme.spacing.unit
  24     }
  25 });
  26
  27 interface CreateProjectPropertiesListDataProps {
  28     properties: ProjectProperties;
  29 }
  30
  31 interface CreateProjectPropertiesListActionProps {
  32     handleDelete: (key: string, value: string) => void;
  33 }
  34
  35 const mapStateToProps = (state: RootState): CreateProjectPropertiesListDataProps => {
  36     const properties = PROJECT_CREATE_FORM_SELECTOR(state, 'properties');
  37     return { properties };
  38 };
  39
  40 const mapDispatchToProps = (dispatch: Dispatch): CreateProjectPropertiesListActionProps => ({
  41     handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromCreateProjectForm(key, value))
  42 });
  43
  44 type CreateProjectPropertiesListProps = CreateProjectPropertiesListDataProps &
  45     CreateProjectPropertiesListActionProps & WithStyles<CssRules>;
  46
  47 const List = withStyles(styles)(
  48     ({ classes, handleDelete, properties }: CreateProjectPropertiesListProps) =>
  49         <div>
  50             {properties &&
  51                 Object.keys(properties).map(k =>
  52                     Array.isArray(properties[k])
  53                     ? (properties[k] as string[]).map((v: string) =>
  54                         getPropertyChip(
  55                             k, v,
  56                             () => handleDelete(k, v),
  57                             classes.tag))
  58                     : getPropertyChip(
  59                         k, (properties[k] as string),
  60                         () => handleDelete(k, (properties[k] as string)),
  61                         classes.tag))
  62                 }
  63         </div>
  64 );
  65
  66 export const CreateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);