Button that sets some field null

#interface#forms#binding
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: ReactNode
	field: string | SugarableRelativeSingleField
	immediatePersist?: boolean
} & ButtonProps


export 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>
...