Clean up: Remove component files
This commit is contained in:
parent
a22416031d
commit
603be6cbd8
@ -1,110 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { format, isBefore, parseISO, startOfToday } from 'date-fns';
|
|
||||||
import {
|
|
||||||
PRIORITY_LABELS,
|
|
||||||
STATUS_LABELS,
|
|
||||||
TASK_STATUSES,
|
|
||||||
TaskPriority,
|
|
||||||
TaskStatus,
|
|
||||||
User,
|
|
||||||
} from '../../types';
|
|
||||||
|
|
||||||
/** Initials avatar. Falls back to a neutral glyph when a task is unassigned. */
|
|
||||||
export const UserAvatar: React.FC<{ user?: User; size?: 'sm' | 'md' | 'lg' }> = ({
|
|
||||||
user,
|
|
||||||
size = 'md',
|
|
||||||
}) => {
|
|
||||||
const initials = user
|
|
||||||
? user.full_name
|
|
||||||
.split(' ')
|
|
||||||
.filter(Boolean)
|
|
||||||
.map((part) => part[0])
|
|
||||||
.join('')
|
|
||||||
.slice(0, 2)
|
|
||||||
.toUpperCase()
|
|
||||||
: '?';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span className={`user-avatar ${size}`} aria-hidden="true">
|
|
||||||
{initials}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Coloured dot plus label, matching the priority column in the approved mockup. */
|
|
||||||
export const PriorityIndicator: React.FC<{ priority: TaskPriority }> = ({ priority }) => (
|
|
||||||
<span className={`priority-indicator ${priority}`}>
|
|
||||||
<span className="priority-dot" aria-hidden="true" />
|
|
||||||
{PRIORITY_LABELS[priority]}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Status pill that is also the control for changing status. A native select keeps
|
|
||||||
* keyboard and screen reader behaviour correct for free.
|
|
||||||
*/
|
|
||||||
export const StatusSelect: React.FC<{
|
|
||||||
status: TaskStatus;
|
|
||||||
taskTitle: string;
|
|
||||||
disabled?: boolean;
|
|
||||||
onChange: (status: TaskStatus) => void;
|
|
||||||
}> = ({ status, taskTitle, disabled = false, onChange }) => (
|
|
||||||
<span className={`status-select-wrap ${status}`}>
|
|
||||||
<select
|
|
||||||
className={`status-select ${status}`}
|
|
||||||
value={status}
|
|
||||||
disabled={disabled}
|
|
||||||
aria-label={`Status for ${taskTitle}`}
|
|
||||||
onChange={(event) => onChange(event.target.value as TaskStatus)}
|
|
||||||
>
|
|
||||||
{TASK_STATUSES.map((value) => (
|
|
||||||
<option key={value} value={value}>
|
|
||||||
{STATUS_LABELS[value]}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
|
|
||||||
/** Assignee cell: avatar plus shortened name, or an explicit unassigned state. */
|
|
||||||
export const AssigneeLabel: React.FC<{ user?: User }> = ({ user }) => {
|
|
||||||
if (!user) {
|
|
||||||
return <span className="unassigned">Unassigned</span>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const [first, ...rest] = user.full_name.split(' ');
|
|
||||||
const last = rest.length > 0 ? `${rest[rest.length - 1][0]}.` : '';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span className="assignee-info">
|
|
||||||
<UserAvatar user={user} size="sm" />
|
|
||||||
<span className="assignee-name">{`${first} ${last}`.trim()}</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const parseDue = (value?: string): Date | null => {
|
|
||||||
if (!value) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const parsed = parseISO(value);
|
|
||||||
return Number.isNaN(parsed.getTime()) ? null : parsed;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Due date in the mockup's "Oct 15, 2023" format, flagged when overdue. */
|
|
||||||
export const DueDate: React.FC<{ value?: string }> = ({ value }) => {
|
|
||||||
const date = parseDue(value);
|
|
||||||
|
|
||||||
if (!date) {
|
|
||||||
return <span className="due-date none">No due date</span>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const overdue = isBefore(date, startOfToday());
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span className={`due-date${overdue ? ' overdue' : ''}`}>
|
|
||||||
<time dateTime={value}>{format(date, 'MMM d, yyyy')}</time>
|
|
||||||
{overdue && <span className="sr-only"> (overdue)</span>}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue
Block a user