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

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
import React, { useCallback, useMemo, useRef, useState, type VFC, MouseEvent } from 'react'
import classNames from 'classnames'
import { compose } from 'recompose'
import get from 'lodash/get'

import { Text } from '../../../../snippets/Text/Text'
import withCell from '../../withCell'
import withTooltip from '../../withTooltip'
import { DefaultCell } from '../DefaultCell'

import { View } from './VIew'
import { Control } from './Control'

// eslint-disable-next-line
const Cell: VFC = ({
    visible,
    control,
    editable,
    disabled,
    format,
    fieldKey,
    model,
    callAction,
}) => {
    const controlId = control.id
    const [isEditing, setIsEditing] = useState(false)
    const viewValue = useMemo(() => get(model, fieldKey), [model, fieldKey])
    const controlValue = useMemo(() => get(model, controlId), [model, controlId])
    const modelRef = useRef(model)

    modelRef.current = model

    const isEmpty = !viewValue

    const enableEditing = useCallback((event: MouseEvent) => {
        event.stopPropagation()
        setIsEditing(true)
    }, [])

    const disableEditing = useCallback(() => {
        setIsEditing(false)
    }, [])

    const handleChange = useCallback((value) => {
        if (model?.[controlId] === value) {
            return
        }

        callAction({ ...model, [controlId]: value })
    }, [callAction, controlId, model])

    if (!visible) {
        return null
    }

    return (
        
            {(isEditing && editable) ? (
                
            ) : (
                
                    
                
            )}
        
    )
}

Cell.defaultProps = {
    visible: true,
    disabled: false,
    model: {},
    editFieldId: null,
}

Cell.displayName = 'EditableCell'

export const EditableCell = compose(
    withCell,
    withTooltip,
)(Cell)