@ozen-ui/kit
Version:
React component library
51 lines (50 loc) • 4.54 kB
JavaScript
import { __assign, __rest } from "tslib";
import './Input.css';
import React, { forwardRef, useRef } from 'react';
import { useEventListener } from '../../hooks/useEventListener';
import { useMultiRef } from '../../hooks/useMultiRef';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { FieldControl } from '../FieldControl';
import { FieldHint } from '../FieldHint';
import { FieldIcon } from '../FieldIcon';
import { FieldInput } from '../FieldInput';
import { FieldLabel } from '../FieldLabel';
import { Fieldset } from '../Fieldset';
import { INPUT_DEFAULT_SIZE } from './constants';
export var cnInput = cn('Input');
export var Input = forwardRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'Input',
});
var _a = props.size, size = _a === void 0 ? INPUT_DEFAULT_SIZE : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, inputProps = props.inputProps, bodyProps = props.bodyProps, labelProps = props.labelProps, hintProps = props.hintProps, maxLength = props.maxLength, minLength = props.minLength, inputRef = props.inputRef, labelRef = props.labelRef, other = __rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "fullWidth", "disabled", "hint", "required", "className", "value", "defaultValue", "onChange", "inputProps", "bodyProps", "labelProps", "hintProps", "maxLength", "minLength", "inputRef", "labelRef"]);
var bodyInnerRef = useRef(null);
var fieldInnerRef = useRef(null);
/* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
* внутри HTML-элемента label — фокус не переходил на body или на цель нажатия кнопки мыши.
* Если же нажатие кнопки происходит на самом HTML-элементе input, то мы ничего не делаем,
* так как в противном случае мы сломаем возможность выделять текст для копирования.
*/
useEventListener({
element: bodyInnerRef,
eventName: 'mousedown',
handler: function (e) {
var _a;
if (e.target !== fieldInnerRef.current) {
e.preventDefault();
(_a = fieldInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}
},
});
return (React.createElement(FieldControl, __assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: cnInput({}, [className]) }),
React.createElement("label", __assign({}, bodyProps, { className: cnInput('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]), ref: useMultiRef([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
React.createElement(FieldIcon, { icon: renderLeft }),
React.createElement("div", { className: cnInput('FieldContainer') },
React.createElement(FieldLabel, __assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),
React.createElement(FieldInput, __assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange, maxLength: maxLength, minLength: minLength }, inputProps, { className: cnInput('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: useMultiRef([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
React.createElement(FieldIcon, { icon: renderRight }),
React.createElement(Fieldset, null)),
React.createElement(FieldHint, __assign({}, hintProps), hint)));
});
Input.displayName = 'Input';