react-trello/src/components/Card.js at 36b7ffaf753f6564cdba2e599f64dd9852d082c4 · rcdexta/react-trello · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React, {Component} from 'react'
import PropTypes from 'prop-types'

import {MovableCardWrapper, CardHeader, CardRightContent, CardTitle, Detail, Footer} from 'rt/styles/Base'
import InlineInput from 'rt/widgets/InlineInput'
import Tag from './Card/Tag'
import DeleteButton from 'rt/widgets/DeleteButton'

class Card extends Component {
  onDelete = e => {
    this.props.onDelete()
    e.stopPropagation()
  }

  render() {
    const {
      showDeleteButton,
      style,
      tagStyle,
      onClick,
      onDelete,
      onChange,
      className,
      id,
      title,
      label,
      description,
      tags,
      cardDraggable,
      editable,
      t
    } = this.props

    const updateCard = card => {
      onChange({...card, id})
    }

    return (
      <MovableCardWrapper data-id={id} onClick={onClick} style={style} className={className}>
        <CardHeader>
          <CardTitle draggable={cardDraggable}>
            {editable ? (
              <InlineInput
                value={title}
                border
                placeholder={t('placeholder.title')}
                resize="vertical"
                onSave={value => updateCard({title: value})}
              />
            ) : (
              title
            )}
          </CardTitle>
          <CardRightContent>
            {editable ? (
              <InlineInput
                value={label}
                border
                placeholder={t('placeholder.label')}
                resize="vertical"
                onSave={value => updateCard({label: value})}
              />
            ) : (
              label
            )}
          </CardRightContent>
          {showDeleteButton && <DeleteButton onClick={this.onDelete} />}
        </CardHeader>
        <Detail>
          {editable ? (
            <InlineInput
              value={description}
              border
              placeholder={t('placeholder.description')}
              resize="vertical"
              onSave={value => updateCard({description: value})}
            />
          ) : (
            description
          )}
        </Detail>
        {tags &&
          tags.length > 0 && (
            <Footer>
              {tags.map(tag => (
                <Tag key={tag.title} {...tag} tagStyle={tagStyle} />
              ))}
            </Footer>
          )}
      </MovableCardWrapper>
    )
  }
}

Card.propTypes = {
  showDeleteButton: PropTypes.bool,
  onDelete: PropTypes.func,
  onClick: PropTypes.func,
  style: PropTypes.object,
  tagStyle: PropTypes.object,
  className: PropTypes.string,
  id: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  label: PropTypes.string,
  description: PropTypes.string,
  tags: PropTypes.array
}

Card.defaultProps = {
  showDeleteButton: true,
  onDelete: () => {},
  onClick: () => {},
  style: {},
  tagStyle: {},
  title: 'no title',
  description: '',
  label: '',
  tags: [],
  className: ''
}

export default Card