Save

http://localhost:3000

Live previews only work with the latest documentation.

const { default: routerProvider } = RefineReactRouterV6
const { default: simpleRest } = RefineSimpleRest
setRefineProps({
  routerProvider,
  dataProvider: simpleRest('https://api.fake-rest.refine.dev'),
  notificationProvider: RefineMantine.notificationProvider,
  Layout: RefineMantine.Layout,
  Sider: () => null,
  catchAll: <RefineMantine.ErrorComponent />,
})

const Wrapper = ({ children }) => {
  return (
    <RefineMantine.MantineProvider
      theme={RefineMantine.LightTheme}
      withNormalizeCSS
      withGlobalStyles
    >
      <RefineMantine.Global
        styles={{ body: { WebkitFontSmoothing: 'auto' } }}
      />
      <RefineMantine.NotificationsProvider position="top-right">
        {children}
      </RefineMantine.NotificationsProvider>
    </RefineMantine.MantineProvider>
  )
}

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

Swizzle

You can swizzle this component to customize it with the refine CLI

Usage

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

http://localhost:3000

Live previews only work with the latest documentation.

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

Live previews only work with the latest documentation.

import { SaveButton } from '@pankod/refine-mantine'

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

API Reference

Properties