@wix/design-system
Version:
@wix/design-system
37 lines • 3.21 kB
JavaScript
import React, { forwardRef } from 'react';
import { StatusAlertSmall, StatusWarningSmall } from '@wix/wix-ui-icons-common';
import LabelledElement from '../LabelledElement/LabelledElement';
import Input from '../Input';
import Text from '../Text';
import { classes, st } from './InputWithLabel.st.css.js';
import { DATA_HOOKS } from './InputWithLabel.constants';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
const getSuffixContainer = (suffix) => suffix.map((item, index) => {
return (React.createElement("div", { "data-hook": "suffix-container", key: `suffix-container-${index}`, className: classes.groupIcon }, item));
});
const InputWithLabel = forwardRef(({ label, suffix, value, dataHook, status, statusMessage = '', onChange, onFocus, onBlur, name, type, ariaLabel, autoFocus, autocomplete, disabled, className, maxLength, placeholder, customInput, border, ...rest }, ref) => {
const icons = useIcons('InputWithLabel', {
StatusAlertSmall,
StatusWarningSmall,
});
const isBottomLineBorder = border === 'bottomLine';
const isWarning = status === Input.StatusWarning;
const showStatusSection = (status === Input.StatusError || isWarning) && statusMessage;
return (React.createElement("div", { "data-hook": dataHook, className: status ? undefined : classes.statusMessagePlaceholder },
React.createElement(LabelledElement, { value: value, label: label, dataHook: DATA_HOOKS.labelledElement, topLabelGray: isBottomLineBorder, disabled: disabled }, ({ onChange: inputOnChange, onFocus: inputOnFocus, onBlur: inputOnBlur, className: inputClassName, getPlaceholder, ...restInputProps }) => (React.createElement(Input, { className: st(classes.root, inputClassName, className), ref: ref, name: name, type: type, ariaLabel: ariaLabel, autoFocus: autoFocus, autocomplete: autocomplete, disabled: disabled, maxLength: maxLength, placeholder: getPlaceholder(placeholder), onChange: e => {
inputOnChange(e);
onChange?.(e);
}, onFocus: e => {
inputOnFocus();
onFocus?.(e);
}, onBlur: e => {
inputOnBlur();
onBlur?.(e);
}, dataHook: DATA_HOOKS.input, size: "large", value: value, suffix: suffix && getSuffixContainer(suffix), status: status, statusMessage: React.createElement("span", { style: { color: '#fff' } }, statusMessage), customInput: customInput, border: border, hideStatusSuffix: true, ...rest, ...restInputProps }))),
showStatusSection && (React.createElement(Text, { skin: isWarning ? 'standard' : 'error', size: "small", weight: isWarning ? 'thin' : 'normal', className: classes.statusMessage },
React.createElement("span", { className: st(classes.statusMessageIcon, { warning: isWarning }) }, isWarning ? (React.createElement(icons.StatusWarningSmall, null)) : (React.createElement(icons.StatusAlertSmall, null))),
React.createElement("span", { "data-hook": DATA_HOOKS.errorMessage, className: classes.errorMessageContent }, statusMessage)))));
});
InputWithLabel.displayName = 'InputWithLabel';
export default InputWithLabel;
//# sourceMappingURL=InputWithLabel.js.map