EN · DE · RU · FR · ES

#2724: FavoriteNameInput.jsx

projectforge-webapp/src/containers/panel/favorite/FavoriteNameInput.jsx Tipo: JavaScript/React · Rol: Panel · Fuente: projectforge-webapp/src/containers/panel/favorite/FavoriteNameInput.jsx 61 líneas · 54 código · 0 comentarios · 7 en blanco
Componente React de gestión de favoritos para marcar entidades y navegación de acceso rápido.

Estructura del código

Hooks utilizados: State

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

Tiene PropTypes para: FavoriteNameInput

Código fuente (resumido)

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;

Historial Git

3685edd6c actualización a react 18 wip
312b6f07f FavoriteNameInput/Entry: icono cambiado para modo edición.
38329872e Favoritos mejorados (tooltips añadidos, iconos mejorados, ...)
253b9f38b actualización de algunas dependencias y corrección de errores de eslint
d321a9dcb corrección de lista de plantillas grandes