Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A real-world example of the prop getters pattern
function Cell({
value,
row: {values: user},
column: {id: propertyName},
}: {
value: string
row: {values: User}
column: {id: string}
}) {
const [isEditing, setIsEditing] = React.useState(false)
const dc = useDoubleCheck()
return isEditing ? (
propertyName === 'id' ? (
<Form
method="delete"
onSubmit={() => setIsEditing(false)}
onBlur={() => setIsEditing(false)}
onKeyUp={e => {
if (e.key === 'Escape') setIsEditing(false)
}}
>
<input type="hidden" name="id" value={user.id} />
<Button
type="submit"
variant="danger"
autoFocus
{...dc.getButtonProps()}
>
{dc.doubleCheck ? 'You sure?' : 'Delete'}
</Button>
</Form>
) : (
<Form
method="post"
onSubmit={() => setIsEditing(false)}
onBlur={() => setIsEditing(false)}
onKeyUp={e => {
if (e.key === 'Escape') setIsEditing(false)
}}
>
<input type="hidden" name="id" value={user.id} />
<input type="text" defaultValue={value} name={propertyName} autoFocus />
</Form>
)
) : (
<button className="border-none" onClick={() => setIsEditing(true)}>
{value || 'NO_VALUE'}
</button>
)
}
function useDoubleCheck() {
const [doubleCheck, setDoubleCheck] = React.useState(false)
function getButtonProps(props?: JSX.IntrinsicElements['button']) {
const onBlur: JSX.IntrinsicElements['button']['onBlur'] = () =>
setDoubleCheck(false)
const onClick: JSX.IntrinsicElements['button']['onClick'] = doubleCheck
? undefined
: e => {
e.preventDefault()
setDoubleCheck(true)
}
return {
...props,
onBlur: callAll(onBlur, props?.onBlur),
onClick: callAll(onClick, props?.onClick),
}
}
return {doubleCheck, getButtonProps}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment