@wix/design-system
Version:
@wix/design-system
37 lines • 1.91 kB
JavaScript
import React, { useState } from 'react';
import Text from '../Text';
import { st, classes } from './LabelledElement.st.css.js';
import { DATA_HOOKS } from './LabelledElement.constants';
import { generateID } from '../utils/generateId';
const LabelledElement = ({ dataHook, label, value, topLabelGray, disabled, children, }) => {
const [hasFocus, setHasFocus] = useState(false);
const [inputValue, setInputValue] = useState();
const inputId = `labelled-element-${generateID()}`;
const isInputControlled = typeof value !== 'undefined';
const isInputEmpty = isInputControlled ? !value : !inputValue;
const hasTopLabel = hasFocus || !isInputEmpty;
const handleOnChange = (event) => {
if (!isInputControlled) {
setInputValue(event.target.value);
}
};
return (React.createElement("div", { className: classes.root, "data-hook": dataHook },
React.createElement("label", { "data-hook": DATA_HOOKS.label, "data-top": hasTopLabel, htmlFor: inputId, className: st(classes.label, {
labelTop: hasTopLabel,
topLabelGray,
disabled,
}) },
React.createElement(Text, { size: "medium", light: !hasTopLabel, secondary: !hasTopLabel, weight: "thin", className: classes.labelText }, label)),
children && (React.createElement("div", { "data-hook": DATA_HOOKS.childrenWrapper }, children({
id: inputId,
onFocus: () => setHasFocus(true),
onBlur: () => setHasFocus(false),
onChange: handleOnChange,
/** should have a different height than regular large input */
className: classes.inputContainer,
getPlaceholder: (placeholder) => hasTopLabel ? placeholder : '',
})))));
};
LabelledElement.displayName = 'LabelledElement';
export default LabelledElement;
//# sourceMappingURL=LabelledElement.js.map