wix-style-react
Version:
wix-style-react
81 lines • 5.48 kB
JavaScript
import React 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 PropTypes from 'prop-types';
import { classes, st } from './InputWithLabel.st.css';
import dataHooks from './dataHooks';
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 = React.forwardRef(({ label, suffix, value, dataHook, status, statusMessage = '', onChange, onFocus, onBlur, name, type, ariaLabel, autoFocus, autocomplete, disabled, className, maxLength, placeholder, customInput, border, ...rest }, ref) => {
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: dataHooks.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(e);
onFocus?.(e);
}, onBlur: e => {
inputOnBlur(e);
onBlur?.(e);
}, dataHook: dataHooks.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(StatusWarningSmall, null) : React.createElement(StatusAlertSmall, null)),
React.createElement("span", { "data-hook": dataHooks.errorMessage, className: classes.errorMessageContent }, statusMessage)))));
});
InputWithLabel.propTypes = {
...Input.propTypes,
/** Sets a default value for those who want to use this component uncontrolled */
dataHook: PropTypes.string,
/** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */
suffix: PropTypes.arrayOf(PropTypes.element),
/** Sets the field label */
label: PropTypes.string,
/** Sets input value */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Specifies the status of a field */
status: PropTypes.oneOf(['error', 'warning', 'loading']),
/** Defines the message displayed when you hover over the status icon. If not given or empty there will be no tooltip. */
statusMessage: PropTypes.node,
/** Defines a standard input onFocus callback */
onFocus: PropTypes.func,
/** Defines a standard input onBlur callback */
onBlur: PropTypes.func,
/** Defines a standard input onChange callback */
onChange: PropTypes.func,
/** Reference element data when a form is submitted */
name: PropTypes.string,
/** Specifies the type of `<input/>` element to display. Default is text string. */
type: PropTypes.string,
/** Define a string that labels the current element in case where a text label is not visible on the screen */
ariaLabel: PropTypes.string,
/** Focus the element on mount (standard React input autoFocus). */
autoFocus: PropTypes.bool,
/** Sets the value of native autocomplete attribute (consult the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values) */
autocomplete: PropTypes.string,
/** Specifies whether the input should be disabled or not */
disabled: PropTypes.bool,
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Sets the maximum number of characters that can be entered into a field */
maxLength: PropTypes.number,
/** Sets a placeholder message to display */
placeholder: PropTypes.string,
/** Render a custom input component instead of the default html input tag */
customInput: PropTypes.elementType
? PropTypes.oneOfType([
PropTypes.func,
PropTypes.node,
PropTypes.elementType,
])
: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
/** Sets the border type */
border: PropTypes.oneOf(['standard', 'bottomLine']),
};
export default InputWithLabel;
//# sourceMappingURL=InputWithLabel.js.map