@eureca/eureca-ui/src/components/Board/task.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { Draggable } from 'react-beautiful-dnd';

import { colors } from '../../theme/colors';

import { Card } from './card';

const cardStyle = {
  position: 'relative',
  background: colors.white,
  border: '1px solid rgba(204, 206, 210, 0.2)',
  boxShadow: '0px 6px 16px rgba(0, 0, 0, 0.05)',
  borderRadius: 4,
  padding: 16,
  paddingRight: 24,
  height: 72,
  boxSizing: 'border-box',
};

function Task({ task, icon, index, onClickCard, onClickCardAction, columnId }) {
  return (
    <Draggable draggableId={task.id} index={index}>
      {provided => (
        <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
          <Card
            showAction
            id={task.id}
            columnId={columnId}
            title={task.title}
            subtitle={task.subtitle}
            icon={icon}
            style={cardStyle}
            onClick={onClickCard}
            onClickCardAction={onClickCardAction}
          />
        </div>
      )}
    </Draggable>
  );
}

Task.propTypes = {
  task: PropTypes.shape({
    id: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
  }).isRequired,
  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
  index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  onClickCard: PropTypes.func,
  onClickCardAction: PropTypes.func,
};

Task.defaultProps = {
  task: {
    id: 0,
    title: '',
    subtitle: '',
    type: '',
  },
  icon: null,
  index: 0,
  onClickCard: PropTypes.func,
  onClickCardAction: PropTypes.func,
};

export { Task };