setHasError(true)}
/>
);
}
function TalentLevelPicker({
value,
onChange,
}: {
value?: string;
onChange: (value?: string) => void;
}) {
const selected = talentLevelOptions.find((level) => level === value) ?? null;
return (
onChange(next ?? undefined)}
>
ไม่พบระดับ
{(level) => (
ระดับ {level}
)}
);
}
function SortableTalentCard({
talent,
catalogTalent,
onLevelChange,
}: {
talent: TalentPriority;
catalogTalent?: CatalogTalent;
onLevelChange: (level?: string) => void;
}) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: talent.type });
return (
{catalogTalent?.iconUrl ? (
) : null}
{talent.type}. {catalogTalent?.name ?? talent.type}
ระดับเป้าหมาย
);
}
function SortableWeaponCard({
id,
children,
}: {
id: string;
children: (dragHandle: ReactNode) => ReactNode;
}) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id });
return (
{children(
,
)}
);
}
function SortableArtifactRow({
id,
children,
}: {
id: string;
children: (dragHandle: ReactNode) => ReactNode;
}) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id });
return (
{children(
,
)}
);
}
function SortableTeamItem({
id,
children,
}: {
id: string;
children: (dragHandle: ReactNode) => ReactNode;
}) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id });
return (
{children(
,
)}
);
}
function SortableTeamMember({
id,
children,
}: {
id: string;
children: (dragHandle: ReactNode) => ReactNode;
}) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id });
return (
{children(
,
)}
);
}
function SortableExtraItem({
id,
label,
children,
}: {
id: string;
label: string;
children: (dragHandle: ReactNode) => ReactNode;
}) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id });
return (
{children(
,
)}
);
}
type ConditionNavItem = {
clientId: string;
name: string;
};
function SortableConditionTab({
item,
index,
active,
onSelect,
onRename,
}: {
item: ConditionNavItem;
index: number;
active: boolean;
onSelect: () => void;
onRename: () => void;
}) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: item.clientId });
const label = item.name.trim() || `Condition ${index + 1}`;
return (
{label}
{index === 0 ? Default : null}
);
}
function SortableConditionSwitcher({
ariaLabel,
items,
activeIndex,
onActiveIndexChange,
onReorder,
onRename,
}: {
ariaLabel: string;
items: ConditionNavItem[];
activeIndex: number;
onActiveIndexChange: (index: number) => void;
onReorder: (from: number, to: number) => void;
onRename: (index: number) => void;
}) {
const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
);
const activeId = items[activeIndex]?.clientId;
return (
{
if (!over || active.id === over.id) return;
const from = items.findIndex((item) => item.clientId === active.id);
const to = items.findIndex((item) => item.clientId === over.id);
if (from !== -1 && to !== -1) onReorder(from, to);
}}
>
item.clientId)} strategy={rectSortingStrategy}>
{
const index = items.findIndex((item) => item.clientId === values[0]);
if (index !== -1) onActiveIndexChange(index);
}}
>
{items.map((item, index) => (
onActiveIndexChange(index)}
onRename={() => onRename(index)}
/>
))}
);
}
function ConditionControls({
onAdd,
onDuplicate,
onDelete,
...switcherProps
}: ComponentProps & {
onAdd: () => void;
onDuplicate?: () => void;
onDelete: () => void;
}) {
const { items, activeIndex } = switcherProps;
const atLimit = items.length >= 20;
return (
{onDuplicate ? (
) : null}
{items.length > 1 ? (
}
onConfirm={onDelete}
iconOnly
/>
) : null}
);
}
function reorderConditions(
items: T[],
activeIndex: number,
from: number,
to: number,
) {
const activeId = items[activeIndex]?.clientId;
const reordered = arrayMove(items, from, to);
return {
items: reordered,
activeIndex: Math.max(0, reordered.findIndex((item) => item.clientId === activeId)),
};
}
export function GuideSectionEditor(props: GuideSectionEditorProps) {
return (
{props.section === "weapon" ?
: null}
{props.section === "artifact" ?
: null}
{props.section === "constellations" ? (
) : null}
{props.section === "team" ?
: null}
{props.section === "extra" ?
: null}