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 { formValueSelector } from 'redux-form';
   9 import { withStyles, StyleRulesCallback, WithStyles, Chip } from '@material-ui/core';
  10 import { RootState } from '~/store/store';
  11 import { removePropertyFromCreateProjectForm, PROJECT_CREATE_FORM_NAME } from '~/store/projects/project-create-actions';
  12 import { ArvadosTheme } from '~/common/custom-theme';
  13
  14 type CssRules = 'tag';
  15
  16 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  17     tag: {
  18         marginRight: theme.spacing.unit,
  19         marginBottom: theme.spacing.unit
  20     }
  21 });
  22
  23 interface CreateProjectPropertiesListDataProps {
  24     properties: any;
  25 }
  26
  27 interface CreateProjectPropertiesListActionProps {
  28     handleDelete: (key: string) => void;
  29 }
  30
  31 const selector = formValueSelector(PROJECT_CREATE_FORM_NAME);
  32 const mapStateToProps = (state: RootState): CreateProjectPropertiesListDataProps => {
  33     const properties = selector(state, 'properties');
  34     return { properties };
  35 };
  36
  37 const mapDispatchToProps = (dispatch: Dispatch): CreateProjectPropertiesListActionProps => ({
  38     handleDelete: (key: string) => dispatch<any>(removePropertyFromCreateProjectForm(key))
  39 });
  40
  41 type CreateProjectPropertiesListProps = CreateProjectPropertiesListDataProps &
  42     CreateProjectPropertiesListActionProps & WithStyles<CssRules>;
  43
  44 export const CreateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(
  45     withStyles(styles)(
  46         ({ classes, handleDelete, properties }: CreateProjectPropertiesListProps) =>
  47             <div>
  48                 { properties &&
  49                     Object.keys(properties).map(k => {
  50                         return <Chip key={k} className={classes.tag}
  51                             onDelete={() => handleDelete(k)}
  52                             label={`${k}: ${properties[k]}`} />;
  53                 })}
  54             </div>
  55         ));