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:
46
src/Griddy/editors/DateEditor.tsx
Normal file
46
src/Griddy/editors/DateEditor.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { DatePickerInput } from '@mantine/dates'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import type { BaseEditorProps } from './types'
|
||||
|
||||
export function DateEditor({ autoFocus = true, onCancel, onCommit, onMoveNext, onMovePrev, value }: BaseEditorProps<Date | string>) {
|
||||
const [dateValue, setDateValue] = useState<Date | null>(() =>
|
||||
value ? new Date(value) : null
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setDateValue(value ? new Date(value) : null)
|
||||
}, [value])
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
onCommit(dateValue ?? '')
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
onCancel()
|
||||
} else if (e.key === 'Tab') {
|
||||
e.preventDefault()
|
||||
onCommit(dateValue ?? '')
|
||||
if (e.shiftKey) {
|
||||
onMovePrev?.()
|
||||
} else {
|
||||
onMoveNext?.()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DatePickerInput
|
||||
autoFocus={autoFocus}
|
||||
clearable
|
||||
onChange={(date) => {
|
||||
const dateVal = date ? (typeof date === 'string' ? new Date(date) : date) : null
|
||||
setDateValue(dateVal)
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
size="xs"
|
||||
value={dateValue}
|
||||
/>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user