baseTextEditor.tsx

TLDR

The baseTextEditor.tsx file is a React component that provides a base text editor functionality. It includes methods for saving text properties, handling the cancel action, and rendering the editable text field.

Methods

onCancel

This method is a callback function that is invoked when the cancel action is triggered. It sets the editor's value to the original property value.

saveTextProperty

This method is a callback function that is invoked when the text property needs to be saved. It compares the current value with the original property value and uses the mutator.changePropertyValue() function to update the property value.

Classes

BaseTextEditor

This class is a React component that renders a base text editor. It receives PropertyProps and an additional validator prop. It manages the internal state of the text value and provides methods for saving the text property, handling cancel, and rendering the editable text field.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React, {useCallback, useState, useRef, useEffect} from 'react'

import {useIntl} from 'react-intl'

import mutator from '../mutator'
import Editable from '../widgets/editable'

import {PropertyProps} from './types'

const BaseTextEditor = (props: PropertyProps & {validator: () => boolean, spellCheck?: boolean}): JSX.Element => {
    const [value, setValue] = useState(props.card.fields.properties[props.propertyTemplate.id || ''] || '')
    const onCancel = useCallback(() => setValue(props.propertyValue || ''), [props.propertyValue])

    const saveTextProperty = useCallback(() => {
        if (value !== (props.card.fields.properties[props.propertyTemplate?.id || ''] || '')) {
            mutator.changePropertyValue(props.board.id, props.card, props.propertyTemplate?.id || '', value)
        }
    }, [props.board.id, props.card, props.propertyTemplate?.id, value])

    const saveTextPropertyRef = useRef<() => void>(saveTextProperty)
    if (props.readOnly) {
        saveTextPropertyRef.current = () => null
    } else {
        saveTextPropertyRef.current = saveTextProperty
    }

    const intl = useIntl()
    const emptyDisplayValue = props.showEmptyPlaceholder ? intl.formatMessage({id: 'PropertyValueElement.empty', defaultMessage: 'Empty'}) : ''

    useEffect(() => {
        return () => {
            saveTextPropertyRef.current && saveTextPropertyRef.current()
        }
    }, [])

    if (!props.readOnly) {
        return (
            <Editable
                className={props.property.valueClassName(props.readOnly)}
                placeholderText={emptyDisplayValue}
                value={value.toString()}
                autoExpand={true}
                onChange={setValue}
                onSave={saveTextProperty}
                onCancel={onCancel}
                validator={props.validator}
                spellCheck={props.spellCheck}
            />
        )
    }
    return <div className={props.property.valueClassName(true)}>{props.propertyValue}</div>
}

export default BaseTextEditor