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:
49
src/Griddy/editors/NumericEditor.tsx
Normal file
49
src/Griddy/editors/NumericEditor.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { NumberInput } from '@mantine/core'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import type { BaseEditorProps } from './types'
|
||||
|
||||
interface NumericEditorProps extends BaseEditorProps<number> {
|
||||
max?: number
|
||||
min?: number
|
||||
step?: number
|
||||
}
|
||||
|
||||
export function NumericEditor({ autoFocus = true, max, min, onCancel, onCommit, onMoveNext, onMovePrev, step = 1, value }: NumericEditorProps) {
|
||||
const [inputValue, setInputValue] = useState<number | string>(value ?? '')
|
||||
|
||||
useEffect(() => {
|
||||
setInputValue(value ?? '')
|
||||
}, [value])
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
onCommit(typeof inputValue === 'number' ? inputValue : Number(inputValue))
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
onCancel()
|
||||
} else if (e.key === 'Tab') {
|
||||
e.preventDefault()
|
||||
onCommit(typeof inputValue === 'number' ? inputValue : Number(inputValue))
|
||||
if (e.shiftKey) {
|
||||
onMovePrev?.()
|
||||
} else {
|
||||
onMoveNext?.()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<NumberInput
|
||||
autoFocus={autoFocus}
|
||||
max={max}
|
||||
min={min}
|
||||
onChange={(val) => setInputValue(val ?? '')}
|
||||
onKeyDown={handleKeyDown}
|
||||
size="xs"
|
||||
step={step}
|
||||
value={inputValue}
|
||||
/>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user