feat(pagination): add server-side pagination support and controls
- Implement pagination control UI with page navigation and size selector - Enable server-side callbacks for page changes and size adjustments - Integrate pagination into Griddy component with data count handling
This commit is contained in:
43
src/Griddy/editors/CheckboxEditor.tsx
Normal file
43
src/Griddy/editors/CheckboxEditor.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Checkbox } from '@mantine/core'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import type { BaseEditorProps } from './types'
|
||||
|
||||
export function CheckboxEditor({ autoFocus = true, onCancel, onCommit, onMoveNext, onMovePrev, value }: BaseEditorProps<boolean>) {
|
||||
const [checked, setChecked] = useState(Boolean(value))
|
||||
|
||||
useEffect(() => {
|
||||
setChecked(Boolean(value))
|
||||
}, [value])
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
onCommit(checked)
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
onCancel()
|
||||
} else if (e.key === 'Tab') {
|
||||
e.preventDefault()
|
||||
onCommit(checked)
|
||||
if (e.shiftKey) {
|
||||
onMovePrev?.()
|
||||
} else {
|
||||
onMoveNext?.()
|
||||
}
|
||||
} else if (e.key === ' ') {
|
||||
e.preventDefault()
|
||||
setChecked(!checked)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
autoFocus={autoFocus}
|
||||
checked={checked}
|
||||
onChange={(e) => setChecked(e.currentTarget.checked)}
|
||||
onKeyDown={handleKeyDown}
|
||||
size="xs"
|
||||
/>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user