#2675: AdvancedPopperInput.jsx

Estructura del código

Importaciones de: ../index, ./Popper.module.scss, classnames, prop-types, react

Tiene PropTypes para: AdvancedPopperInput

Utiliza Módulos CSS para el estilo.

Código fuente (resumido)

import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { Input } from '../index';
import styles from './Popper.module.scss';

function AdvancedPopperInput(
    {
        children,
        dark = false,
        // Extraer 'dispatch' para que no se pase a la etiqueta input
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        dispatch,
        forwardRef,
        icon,
        onCancel,
        onKeyDown,
        ...props
    },
) {
    const handleKeyDown = (event) => {
        if (onCancel && event.key === 'Escape') {
            onCancel();
        }

        if (onKeyDown) {
            onKeyDown(event);
        }
    };

    return (
        <div className={classNames(styles.input, { [styles.dark]: dark })}>
            <Input
                ref={forwardRef}
                icon={icon}
                className={styles.container}
                autoComplete="off"
                {...props}
                onKeyDown={handleKeyDown}
            />
            {children}
        </div>
    );
}

AdvancedPopperInput.propTypes = {
    id: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    children: PropTypes.node,
    dark: PropTypes.bool,
    dispatch: PropTypes.func,
    forwardRef: PropTypes.shape({}),
    icon: PropTypes.shape({}),
    onCancel: PropTypes.func,
    onKeyDown: PropTypes.func,
    placeholder: PropTypes.string,
    value: PropTypes.string,
};

export default AdvancedPopperInput;

Historial de Git

3685edd6c actualización a react 18 wip
033629f77 corrección de errores de typescript eslint
d217c9aff rediseño de autocompletado a nuevos inputs materialize
8667f1f6c nuevo diseño de input materialize
031c85102 extensión de advanced popper input