oranguru/src/Griddy/editors/NumericEditor.tsx

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}
    />
  )
}