Button that sets some field null
For example you have a datetime field when you want to contact someone. And want to mark it as done. Easiest way is to just set this field to null. So here's a code to do just that.
SetNullButton.tsx
Put into /components
import { ReactNode } from 'react'import { Button, ButtonProps, SugarableRelativeSingleField, useField, usePersistWithFeedback } from '@contember/admin'export type SetNullButtonProps = {children: ReactNodefield: string | SugarableRelativeSingleFieldimmediatePersist?: boolean} & ButtonPropsexport const SetNullButton = ({ children, field, immediatePersist, ...buttonProps }: SetNullButtonProps) => {const fieldAccessor = useField(field)const triggerPersist = usePersistWithFeedback()if (fieldAccessor.value === null) {return null}return <><Button {...buttonProps} onClick={e => {e.preventDefault()e.stopPropagation()fieldAccessor.getAccessor().updateValue(null)if (immediatePersist) {triggerPersist().catch(() => { })}}}>{children}</Button></>}
AnyFile.tsx
Usage of the component above
...<SetNullButton field="nextContactDate" immediatePersist>Mark done</SetNullButton>...