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