#2664: index.jsx

Code-Struktur

Verwendete Hooks: Ref, Ref, State, LayoutEffect

Importe von: ../../../utilities/propTypes, ../TooltipIcon, ./Input.module.scss, @fortawesome/react-fontawesome, classnames, prop-types, react, reactstrap/lib/UncontrolledTooltip

Hat PropTypes für: Input

Verwendet CSS-Module für das Styling.

Quellcode (gekürzt)

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import UncontrolledTooltip from 'reactstrap/lib/UncontrolledTooltip';
import { colorPropType } from '../../../utilities/propTypes';
import TooltipIcon from '../TooltipIcon';
import styles from './Input.module.scss';

const Input = React.forwardRef((
    {
        additionalLabel,
        autoFocus = false,
        className,
        color,
        icon,
        iconProps,
        id,
        label,
        onBlur,
        onFocus,
        noStyle = false,
        selectOnFocus = false,
        tooltip,
        value,
        ...props
    },
    ref,
) => {
    // Initialisiere inputRef
    let inputRef = React.useRef(null);
    const labelRef = React.useRef(null);

    // Überschreibe ref mit weitergeleitetem ref
    if (ref) {
        inputRef = ref;
    }

    const [isActive, setIsActive] = React.useState(false);

    const handleBlur = (event) => {
        if (onBlur) {
            onBlur(event);
        }

        setIsActive(false);
    };

    const handleFocus = (event) => {
        if (onFocus) {
            onFocus(event);
        }

        if (selectOnFocus) {
            setTimeout(() => {
                if (inputRef.current) {
                    inputRef.current.select();
                }
            }, 100);
        }

        setIsActive(true);
    };

    React.useLayoutEffect(() => {
        if (autoFocus && inputRef.current) {
            inputRef.current.focus();
        }
    }, [autoFocus]);

    return (
        <div
            className={classNames(
                styles.inputField,
                className,
                { [styles.noLabel]: !label },
            )}
        >
            <label
                className={classNames(
                    styles.inputContainer,
                    {
                        [styles.isActive]: value !== undefined || isActive,
                        [styles.withMargin]: !noStyle,
                        [styles.noStyle]: noStyle,
                    },
                    styles[color],
                )}
                htmlFor={id}
            >
                {icon && (
                    <FontAwesomeIcon
                        icon={icon}
                        {...iconProps}
                        className={classNames(styles.icon, iconProps && iconProps.className)}
                    />
                )}
                <input
                    ref={inputRef}
                    id={id}
                    {...props}
                    onBlur={handleBlur}
                    onFocus={handleFocus}
                    value={value}
                />
                <span
                    ref={labelRef}
                    className={styles.labelText}
                    id={`input-label-${String.idify(id)}`}
                >
                    {label}
                    {tooltip && <TooltipIcon />}
                </span>
            </label>
            {additionalLabel && (
                <span className={styles.additionalLabel}>{additionalLabel}</span>
            )}
            {tooltip && (
                <UncontrolledTooltip placement="auto" target={`input-label-${String.idify(id)}`}>
                    {tooltip}
// ... (gekürzt, insgesamt 146 Zeilen)

Git-Verlauf

3685edd6c lift to react 18 wip
5f2fb5f29 React: Strange: if value is 0, then the expression value || xxx not work, because 0 === false!
e454662ce input/index.jsx: uses now String.idify for tooltip (needed by AttachmentPagesRest: attachment.password).
36bfe1dbe New react version, eslint reviewed by Fin.
c23bfbdf5 es-lint: review with Fin required.