SparePartSubTypesModal

Modal for viewing and adding spare part subtypes per part type. Presents a part-type tab strip, a table of existing subtypes for the active type, and an inli…

Modal for viewing and adding spare part subtypes per part type. Presents a part-type tab strip, a table of existing subtypes for the active type, and an inline add form. Receives the active part type, subtype list, and add handler as props.

import { SparePartSubTypesModal } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`isOpen`	Required	`boolean`	—	—
`onClose`	Required	`VoidFunction`	—	—
`partTypes`	Required	`SparePartSubTypesModalPartType[]`	—	—
`activePartTypeId`	Required	`string`	—	—
`onPartTypeChange`	Required	`(id: string) => void`	—	—
`subTypes`	Required	`string[]`	—	—
`onAddSubType`	Required	`(name: string) => Promise<void \| { error?: string \| undefined; }>`	—	—
`isLoading`	Optional	`boolean \| undefined`	—	—

Usage

Modal for viewing and adding spare part subtypes (part models) per part type. Presents a part-type tab strip, a table of existing subtypes for the active type, and an inline add form.

When to use

Use this to manage the list of allowed part models for each part type. It can be opened standalone or embedded from AddSparePartModal's "View Subtypes" button so users can add a missing model without losing their in-progress form.

Notes

The active part type is controlled by the parent: change activePartTypeId and supply the matching subTypes in onPartTypeChange.
The add form validates a non-empty name and clears on successful add.

Example

import { useState } from "react";import { Button, SparePartSubTypesModal } from "@tetherto/mdk-react-devkit";const PART_TYPES = [  { value: "inventory-miner_part-controller", label: "Controller" },  { value: "inventory-miner_part-psu", label: "PSU" },  { value: "inventory-miner_part-hashboard", label: "Hashboard" },];const INITIAL_SUB_TYPES: Record<string, string[]> = {  "inventory-miner_part-controller": ["CT-S19", "CT-S19j"],  "inventory-miner_part-psu": ["PSU-3000W"],  "inventory-miner_part-hashboard": ["HB-S19", "HB-S19j", "HB-S19XP"],};export const SparePartSubTypesModalExample = () => {  const [isOpen, setIsOpen] = useState(false);  const [activeId, setActiveId] = useState(PART_TYPES[0]?.value ?? "");  const [subTypesMap, setSubTypesMap] = useState(INITIAL_SUB_TYPES);  const handleAddSubType = async (name: string): Promise<{ error: string } | void> => {    const existing = subTypesMap[activeId] ?? [];    if (existing.includes(name)) return { error: "Subtype already exists" };    setSubTypesMap((prev) => ({ ...prev, [activeId]: [...existing, name] }));  };  return (    <div>      <Button variant="outline" onClick={() => setIsOpen(true)}>        View Subtypes      </Button>      <SparePartSubTypesModal        isOpen={isOpen}        onClose={() => setIsOpen(false)}        partTypes={PART_TYPES}        activePartTypeId={activeId}        onPartTypeChange={setActiveId}        subTypes={subTypesMap[activeId] ?? []}        onAddSubType={handleAddSubType}      />    </div>  );};