#2675: AdvancedPopperInput.jsx

Структура кода

Импорты из: ../index, ./Popper.module.scss, classnames, prop-types, react

Содержит PropTypes для: AdvancedPopperInput

Использует CSS-модули для стилизации.

Исходный код (сокращённый)

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,
        // Извлекаем 'dispatch', чтобы он не передавался в тег 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;

История Git

3685edd6c переход на react 18 wip
033629f77 исправление ошибок typescript eslint
d217c9aff переработка дизайна автозаполнения под новые materialize-поля
8667f1f6c новый дизайн materialize для полей ввода
031c85102 расширение advanced popper input