Clone

<CloneButton> uses Mantine's <Button> component. It uses the clone method from useNavigation under the hood. It can be useful when redirecting the app to the create page with the record id route of resource.

Usage

http://localhost:3000

import { List, Table, Pagination, CloneButton } from "@pankod/refine-mantine";
import { useTable, ColumnDef, flexRender } from "@pankod/refine-react-table";

const PostList: React.FC = () => {
    const columns = React.useMemo<ColumnDef<IPost>[]>(
        () => [
            {
                id: "id",
                header: "ID",
                accessorKey: "id",
            },
            {
                id: "title",
                header: "Title",
                accessorKey: "title",
            },
            {
                id: "actions",
                header: "Actions",
                accessorKey: "id",
                cell: function render({ getValue }) {
                    return (
                        <CloneButton
                            size="xs"
                            recordItemId={getValue() as number}
                        />
                    );
                },
            },
        ],
        [],
    );

    const {
        getHeaderGroups,
        getRowModel,
        refineCore: { setCurrent, pageCount, current },
    } = useTable({
        columns,
    });

    List.defaultProps = {
        headerButtons: <></>,
    };

    return (
        <List>
            <Table>
                <thead>
                    {getHeaderGroups().map((headerGroup) => (
                        <tr key={headerGroup.id}>
                            {headerGroup.headers.map((header) => (
                                <th key={header.id}>
                                    {header.isPlaceholder
                                        ? null
                                        : flexRender(
                                              header.column.columnDef.header,
                                              header.getContext(),
                                          )}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody>
                    {getRowModel().rows.map((row) => (
                        <tr key={row.id}>
                            {row.getVisibleCells().map((cell) => (
                                <td key={cell.id}>
                                    {flexRender(
                                        cell.column.columnDef.cell,
                                        cell.getContext(),
                                    )}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </Table>
            <br />
            <Pagination
                position="right"
                total={pageCount}
                page={current}
                onChange={setCurrent}
            />
        </List>
    );
};

interface IPost {
    id: number;
    title: string;
}

Properties

recordItemId

recordItemId is used to append the record id to the end of the route path.

http://localhost:3000

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

const MyCloneComponent = () => {
    return <CloneButton recordItemId="123" />;
};

Clicking the button will trigger the clone method of useNavigation and then redirect the app to /posts/clone/123.

note

<CloneButton> component reads the id information from the route by default.

resourceNameOrRouteName

It is used to redirect the app to the /clone endpoint of the given resource name. By default, the app redirects to a URL with /clone defined by the name property of the resource object.

http://localhost:3000

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

const MyCloneComponent = () => {
    return (
        <CloneButton resourceNameOrRouteName="categories" recordItemId="2" />
    );
};

Clicking the button will trigger the clone method of useNavigation and then redirect the app to /categories/clone/2.

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 { CloneButton } from "@pankod/refine-mantine";

const MyCloneComponent = () => {
    return <CloneButton hideText />;
};

ignoreAccessControlProvider

It is used to skip access control for the button so that it doesn't check for access control. This is relevant only when an accessControlProvider is provided to <Refine/>

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

export const MyListComponent = () => {
    return <CloneButton ignoreAccessControlProvider />;
};

API Reference

Properties