react-icons/bs#BsTrash JavaScript Examples
The following examples show how to use
react-icons/bs#BsTrash.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: TaskCard.js From fokus with GNU General Public License v3.0 | 4 votes |
|
export default function TaskCard({ task, taskIndex, focussedTaskGlobalKey, forwardRBDProvided, isFocussed, focussedTaskIndex }) {
const dispatch = useDispatch();
const [taskUnderEdit, setTaskUnderEdit] = useState(false);
const [updatedTaskContent, setUpdatedTaskContent] = useState(task.content);
const [timeUnderEdit, setTimeUnderEdit] = useState(false);
const [updatedTime, setUpdatedTime] = useState(Math.floor(task.time / 1000 / 60));
const [labelUnderEdit, setLabelUnderEdit] = useState(false);
const [showDragIcon, setShowDragIcon] = useState(false);
const labels = useSelector((s) => s.tasks.labels);
let isOldTask = false && !task.isCompleted && new Date() - new Date(task.createdAt) > ONE_DAY;
function submitUpdatedTaskContent(e) {
if (e.key === "Enter" && updatedTaskContent.trim().length >= 3) {
dispatch(updateTaskContent({ id: task.id, updatedTaskContent }));
setTaskUnderEdit(false);
}
}
function submitUpdatedTime(e) {
if (e.key === "Enter") {
dispatch(updateTaskTime({ id: task.id, updatedTime }));
setTimeUnderEdit(false);
}
}
function markTaskAsDoneHandler() {
if (taskIndex < focussedTaskIndex) dispatch(focusOnTask(focussedTaskIndex - 1));
if (task.isRunning) dispatch(toggleIsRunning({ idx: taskIndex }));
if (isFocussed) {
updatePageTitle("Fokus");
dispatch(resetFocussedTask());
}
dispatch(toggleIsCompleted(task.id));
dispatch(rearrange({ id: task.id, markedAsComplete: true }));
if (taskIndex === focussedTaskIndex) dispatch(toggleSoundscapeState(false));
}
function markTaskAsUndoneHandler() {
if (focussedTaskIndex !== -1 && focussedTaskGlobalKey < task.globalKey) {
dispatch(focusOnTask(focussedTaskIndex + 1));
}
dispatch(toggleIsCompleted(task.id));
dispatch(rearrange({ id: task.id, markedAsComplete: false }));
}
function recreateOldTask(task) {
let newTask = { ...task };
newTask.createdAt = new Date().toISOString();
newTask.isRunning = false;
newTask.isCompleted = false;
dispatch(updateTaskObject(newTask));
}
function labelSelectOnBlurHandler(taskId, taskLabel, updatedLabel) {
setLabelUnderEdit(false);
updatedLabel = updatedLabel === "none" ? null : updatedLabel;
dispatch(updateTaskLabel({ id: taskId, label: updatedLabel }));
if (taskLabel !== updatedLabel) dispatch(updateLabelCount({ oldLabel: taskLabel, newLabel: updatedLabel }));
}
return (
<Flipped flipId={`${task.id}`}>
<TaskCardContainer
ref={forwardRBDProvided.innerRef}
{...forwardRBDProvided.draggableProps}
{...forwardRBDProvided.dragHandleProps}
onMouseEnter={() => setShowDragIcon(!task.isCompleted && true)}
onMouseLeave={() => setShowDragIcon(!task.isCompleted && false)}
>
<TaskCardDragIcon>{showDragIcon && <DragIcon />}</TaskCardDragIcon>
<TaskCardDiv isFocussed={isFocussed} labelColor={task.label !== null ? labels[task.label].color : null}>
{isOldTask && (
<OldTaskStatus data-tip="" data-for="oldtask">
<BsExclamationCircleFill />
<ReactTooltip id="oldtask" getContent={() => "Task more than 24 hrs old"} />
</OldTaskStatus>
)}
<TaskStatusDiv isFocussed={isFocussed} isCompleted={task.isCompleted}>
{task.isCompleted ? (
<img src={tickmark} alt="Done" />
) : isFocussed ? (
<img src={glowBulb} alt="Focussed" />
) : (
<img src={bulb} alt="Unfocussed" />
)}
{!task.isCompleted &&
(timeUnderEdit ? (
<TimeEditInput
type="number"
autoFocus
value={updatedTime}
onBlur={() => {
dispatch(updateTaskTime({ id: task.id, updatedTime }));
setTimeUnderEdit(false);
}}
onKeyDown={submitUpdatedTime}
onChange={(e) => setUpdatedTime(e.target.value)}
/>
) : (
<p onDoubleClick={() => setTimeUnderEdit(true)}>{formattedTimeString(task.remainingTime)}</p>
))}
</TaskStatusDiv>
<TaskDetailsDiv>
<TaskContentDiv>
{taskUnderEdit ? (
<TaskEditInput
type="text"
autoFocus
value={updatedTaskContent}
onBlur={() => {
dispatch(updateTaskContent({ id: task.id, updatedTaskContent }));
setTaskUnderEdit(false);
}}
onKeyDown={submitUpdatedTaskContent}
onChange={(e) => setUpdatedTaskContent(e.target.value)}
/>
) : (
<p onDoubleClick={() => setTaskUnderEdit(true)}>{previewTask(task.content)}</p>
)}
</TaskContentDiv>
{isOldTask ? (
<OldTaskControllerDiv>
<TaskActionButton
onClick={(e) => {
recreateOldTask(task);
e.stopPropagation();
}}
>
<p>Create</p>
</TaskActionButton>
<TaskActionButton
onClick={(e) => {
if (taskIndex < focussedTaskIndex) dispatch(focusOnTask(focussedTaskIndex - 1));
dispatch(remove(task.id));
if (task.label !== null) dispatch(updateLabelCount({ oldLabel: task.label, newLabel: null }));
e.stopPropagation();
}}
>
<p>Delete</p>
</TaskActionButton>
</OldTaskControllerDiv>
) : (
<TaskControllerDiv>
{!task.isCompleted && (
<TaskActionButton
onClick={
isFocussed
? () => {
if (task.isRunning) dispatch(toggleIsRunning({ idx: focussedTaskIndex }));
updatePageTitle("Fokus");
dispatch(resetFocussedTask());
dispatch(toggleSoundscapeState(false));
}
: () => {
if (focussedTaskIndex !== -1) dispatch(toggleIsRunning({ idx: focussedTaskIndex, val: false }));
dispatch(toggleSoundscapeState(false));
dispatch(focusOnTask(taskIndex));
}
}
>
<p>{isFocussed ? "Unfocus" : "Focus"}</p>
</TaskActionButton>
)}
<TaskActionButton
onClick={(e) => {
if (task.isCompleted) markTaskAsUndoneHandler();
else markTaskAsDoneHandler();
e.stopPropagation();
}}
>
<p>{task.isCompleted ? "Undone" : "Done"}</p>
</TaskActionButton>
<TaskLabelContainer onClick={() => setLabelUnderEdit(true)} labelColor={task.label !== null ? labels[task.label].color : null}>
{labelUnderEdit ? (
<TaskLabelSelect onBlur={labelSelectOnBlurHandler} taskId={task.id} taskLabel={task.label} />
) : task.label !== null ? (
<p>#{task.label}</p>
) : (
<p>Add label</p>
)}
</TaskLabelContainer>
{!isFocussed && (
<TaskDeleteButton
onClick={(e) => {
if (taskIndex < focussedTaskIndex) dispatch(focusOnTask(focussedTaskIndex - 1));
dispatch(remove(task.id));
if (task.label !== null) dispatch(updateLabelCount({ oldLabel: task.label, newLabel: null }));
e.stopPropagation();
}}
>
<BsTrash />
</TaskDeleteButton>
)}
</TaskControllerDiv>
)}
</TaskDetailsDiv>
</TaskCardDiv>
</TaskCardContainer>
</Flipped>
);
}
