Save

<SaveButton> uses Mantine <Button> component. It uses it for presantation purposes only. Some of the hooks that refine has adds features to this button.

Usage

For example, let's add logic to the <SaveButton> component with the saveButtonProps returned by the useForm hook.

http://localhost:3000/posts/edit/123

import {
    Edit,
    Select,
    TextInput,
    useForm,
    useSelect,
} from "@pankod/refine-mantine";

const PostEdit: React.FC = () => {
    const {
        saveButtonProps,
        getInputProps,
        refineCore: { queryResult },
    } = useForm<IPost>({
        initialValues: {
            title: "",
            status: "",
            category: {
                id: "",
            },
        },
        validate: {
            title: (value) => (value.length < 2 ? "Too short title" : null),
            status: (value) =>
                value.length <= 0 ? "Status is required" : null,
            category: {
                id: (value) =>
                    value.length <= 0 ? "Category is required" : null,
            },
        },
        refineCoreProps: {
            warnWhenUnsavedChanges: true,
        },
    });

    const postData = queryResult?.data?.data;
    const { selectProps } = useSelect<ICategory>({
        resource: "categories",
        defaultValue: postData?.category.id,
    });

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <form>
                <TextInput
                    mt={8}
                    label="Title"
                    placeholder="Title"
                    {...getInputProps("title")}
                />
                <Select
                    mt={8}
                    label="Status"
                    placeholder="Pick one"
                    {...getInputProps("status")}
                    data={[
                        { label: "Published", value: "published" },
                        { label: "Draft", value: "draft" },
                        { label: "Rejected", value: "rejected" },
                    ]}
                />
                <Select
                    mt={8}
                    label="Category"
                    placeholder="Pick one"
                    {...getInputProps("category.id")}
                    {...selectProps}
                />
            </form>
        </Edit>
    );
};

Properties

hideText

It is used to show and not show the text of the button. When true, only the button icon is visible.

http://localhost:3000

import { SaveButton } from "@pankod/refine-mantine";

const MySaveComponent = () => {
    return <SaveButton hideText />;
};

API Reference

Properties