#2675: AdvancedPopperInput.jsx

Codestruktur

Importiert von: ../index, ./Popper.module.scss, classnames, prop-types, react

Enthält PropTypes für: AdvancedPopperInput

Verwendet CSS-Module für das Styling.

Quellcode (gekürzt)

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' extrahieren, damit es nicht an das Input-Tag übergeben wird
        // 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-Verlauf

3685edd6c Lift auf React 18 WIP
033629f77 TypeScript-ESLint-Fehler behoben
d217c9aff Autovervollständigungsdesign auf neue Materialize-Inputs umgestellt
8667f1f6c Neues Input-Materialize-Design
031c85102 Erweiterter Advanced-Popper-Input