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