components.widgets.Table.cells.EditableCell.Control.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of n2o-react

There is a newer version: 7.28.3

import React, { createElement, useCallback, type FC, useState, useRef, useMemo } from 'react'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { HotKeys } from 'react-hotkeys/cjs'

type ControlProps = {
    control: {
        component: FC
    },
    value: Value
    onChange(value: OnChangeValue): void
    onBlur?(): void
}

const eventsMap = { events: 'enter' }

export const Control = ({ control, value, onBlur, onChange }: ControlProps) => {
    const { component, ...otherProps } = control
    const [innerValue, setInnerValue] = useState(value)
    const refSendValue = useRef(null)

    refSendValue.current = innerValue

    const handleBlur = useCallback(() => {
        onChange(refSendValue.current)
        onBlur?.()
    }, [onBlur, onChange])

    const handleChange = useCallback((value) => {
        refSendValue.current = value
        setInnerValue(value)
    }, [])

    const handlersMap = useMemo(() => ({
        events: handleBlur,
    }), [handleBlur])

    return (
         event.stopPropagation()}>
            
                {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                {createElement(component, {
                    ...otherProps,
                    className: 'n2o-advanced-table-edit-control',
                    onChange: handleChange,
                    onBlur: handleBlur,
                    value: innerValue,
                    autoFocus: true,
                    openOnFocus: true,
                    showButtons: false,
                    resetOnNotValid: false,
                    strategy: 'fixed',
                })}
            
        
    )
}