#2724: FavoriteNameInput.jsx

Codestruktur

Verwendete Hooks: State

Importe von: ../../../components/design, @fortawesome/free-solid-svg-icons, prop-types, react

Hat PropTypes für: FavoriteNameInput

Quellcode (gekürzt)

import { faFolderPlus, faCheckSquare } from '@fortawesome/free-solid-svg-icons';
import PropTypes from 'prop-types';
import React from 'react';
import { Input } from '../../../components/design';

function FavoriteNameInput(
    {
        defaultValue = '',
        id,
        label,
        onSave,
        tooltip,
        rename = false,
        ...props
    },
) {
    const [filterName, setFilterName] = React.useState(defaultValue);

    const handleInputChange = ({ target }) => setFilterName(target.value);

    const handleCreateClick = () => onSave(filterName);

    const handleKeyDown = ({ key }) => {
        if (key === 'Enter') {
            onSave(filterName);
        }
    };
    let icon = faFolderPlus;
    if (rename === true) {
        icon = faCheckSquare;
    }

    return (
        <Input
            label={label}
            icon={icon}
            iconProps={{
                size: 'lg',
                onClick: handleCreateClick,
            }}
            id={id}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
            value={filterName}
            tooltip={tooltip}
            {...props}
        />
    );
}

FavoriteNameInput.propTypes = {
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onSave: PropTypes.func.isRequired,
    rename: PropTypes.bool,
    className: PropTypes.string,
    defaultValue: PropTypes.string,
    tooltip: PropTypes.string,
};

export default FavoriteNameInput;

Git-Verlauf

3685edd6c Umstellung auf React 18 WIP
312b6f07f FavoriteNameInput/Entry: Icon für Bearbeitungsmodus geändert.
38329872e Favoriten verbessert (Tooltips hinzugefügt, Icons verbessert, ...)
253b9f38b Einige Abhängigkeiten aktualisiert und ESLint-Fehler behoben
d321a9dcb Große Vorlagenliste korrigiert