- Implementation
- EditCard Props
Common Examples
import { EditCard, EditCardState } from "@servicetitan/anvil2";
const ExampleComponent = () => {
const [state, setState] = useState<EditCardState>("not started");
const onChange = (change: EditCardChange) => {
if (change === "edit") {
setState("in progress");
}
if (change === "save") {
setState("complete");
}
if (change === "cancel") {
setState("not started");
}
};
return <EditCard state={state} headerText="Header" />;
};
Validation
Saving can be disabled while the contents of the component fail validation.import { EditCard } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<EditCard
headerText="Header"
state="not started"
disableEdit={false}
disableSave={false}
editButtonText="Edit"
saveButtonText="Save"
/>
); }
EditCard Props
string | { "not started": string; "in progress": string; error: string; complete: string }
required
Pass an object in order to change the header text based on the current state.
This property is required.
"not started" | "in progress" | "error" | "complete"
required
boolean
default:"false"
boolean
default:"false"
string
default:"Edit"
Called when a button is pressed intended to change state (edit, save, or
cancel).
string
default:"Save"
The text displayed on the save button.