@wix/design-system
Version:
@wix/design-system
28 lines • 1.55 kB
JavaScript
import React from 'react';
import { DropDownArrow } from '@wix/wix-ui-icons-common/system';
import { DATA_HOOK, SIZE } from './InputShell.constants';
import { st, classes } from './InputShell.st.css.js';
import Box from '../Box';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
/** A wrapper component that has a style of an input component */
const InputShell = props => {
const icons = useIcons('InputShell', {
DropDownArrow,
});
const { as: Component = 'div', children, menuArrow, dataHook, focused = 'auto', onClick, placeholder, size = SIZE.medium, ...rest } = props;
const shouldApplyPlaceholderClass = !children && !!placeholder;
return (React.createElement(Component, { ...rest, "data-hook": dataHook, className: st(classes.root, {
menuArrow: props.menuArrow,
disabled: props.as === 'button' ? props.disabled : false,
focused: String(focused),
size,
placeholder: shouldApplyPlaceholderClass,
}), onClick: onClick },
React.createElement("div", { className: st(classes.content) },
children ? (children) : (React.createElement("div", { "data-hook": DATA_HOOK.placeholder, className: st({ placeholder }) }, placeholder)),
menuArrow && (React.createElement(Box, { dataHook: DATA_HOOK.menuArrow, className: st(classes.suffix) },
React.createElement(icons.DropDownArrow, null))))));
};
InputShell.displayName = 'InputShell';
export default InputShell;
//# sourceMappingURL=InputShell.js.map