97 lines
No EOL
4.3 KiB
TypeScript
97 lines
No EOL
4.3 KiB
TypeScript
import Button from "../basics/Button.tsx";
|
|
import {X} from "lucide-react";
|
|
import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
|
|
import type {InstructionStepModel} from "../../models/InstructionStepModel.ts";
|
|
import {MoveButtonControl} from "../basics/MoveButtonControl.tsx";
|
|
import {NumberCircle} from "../basics/NumberCircle.tsx";
|
|
|
|
type InstructionStepEditorMobileListItemProps = {
|
|
/** Index of the instruction step */
|
|
index: number;
|
|
/** Model holding the instruction step data, e.g., instruction text */
|
|
stepModel: InstructionStepModel;
|
|
/**
|
|
* Method to call on moving the instruction step.
|
|
* @param index Current index of the step to move
|
|
* @param direction Direction to move the step in (either "up" or "down")
|
|
*/
|
|
onMove(index: number, direction: "up" | "down"): void;
|
|
/**
|
|
* Method to call on updating the instruction step.
|
|
* @param index Index of the step to be updated.
|
|
* @param instructionText new instruction text
|
|
*/
|
|
onUpdate: (index: number, instructionText: string) => void;
|
|
/**
|
|
* Method to call on removing the instruction step.
|
|
* @param index Index of the instruction step to be removed.
|
|
*/
|
|
onRemove: (index: number) => void;
|
|
/** Indicates whether this is the first instruction step. Used to restrict movement. */
|
|
isFirst: boolean;
|
|
/** Indicates whether this is the last instruction step. Used to restrict movement. */
|
|
isLast: boolean;
|
|
};
|
|
|
|
/**
|
|
* Numbered list item for instructions step list editor for mobile devices.
|
|
*
|
|
* Describes a single instruction step of a recipe. As drag & drop usually is a bit clumsy on
|
|
* mobile devices, the steps can be reordered with small up and down buttons below the step number.
|
|
* @param index Index of this instruction step
|
|
* @param stepModel Model containing the data for the current instruction step, e.g., instruction text.
|
|
* @param onMove Method to call on moving the instruction step.
|
|
* @param onUpdate Method to call on updating the instruction step.
|
|
* @param onRemove Method to call on removing the instruction step.
|
|
* @param isFirst Indicates whether this is the first instruction step. In this case, the step cannot be moved up.
|
|
* @param isLast Indicates whether this is the last instruction step. In this case, the step cannot be moved down.
|
|
*/
|
|
export function InstructionStepEditorMobileListItem({
|
|
index,
|
|
stepModel,
|
|
onMove,
|
|
onUpdate,
|
|
onRemove,
|
|
isFirst,
|
|
isLast
|
|
}: InstructionStepEditorMobileListItemProps) {
|
|
return (
|
|
<div
|
|
key={stepModel.id}
|
|
className="flex items-start gap-3 bg-gray-50 rounded-xl p-3 shadow-sm"
|
|
>
|
|
{/* Left column: Number of the instruction step and move controls */}
|
|
<div className="flex flex-col items-center pt-1">
|
|
<NumberCircle
|
|
number={index + 1}
|
|
/>
|
|
<MoveButtonControl
|
|
isUpDisabled={isFirst}
|
|
isDownDisabled={isLast}
|
|
onMoveUp={() => onMove(index, "up")}
|
|
onMoveDown={() => onMove(index, "down")}
|
|
/>
|
|
</div>
|
|
|
|
{/* Center column: Instruction step */}
|
|
<textarea
|
|
className="w-full min-h-[120px] resize-none overflow-hidden"
|
|
placeholder={`Schritt ${index + 1}`}
|
|
value={stepModel.text}
|
|
onChange={(e) => onUpdate(index, e.target.value)}
|
|
onInput={(e) => {
|
|
const el = e.target as HTMLTextAreaElement;
|
|
el.style.height = "auto";
|
|
el.style.height = `${el.scrollHeight}px`;
|
|
}}
|
|
/>
|
|
|
|
{/* Right column: Remove step button */}
|
|
<Button
|
|
onClick={() => onRemove(index)}
|
|
icon={X}
|
|
buttonType={ButtonType.DarkButton}
|
|
/>
|
|
</div>
|
|
);
|
|
} |