@wix/design-system
Version:
@wix/design-system
48 lines • 2.1 kB
JavaScript
import PropTypes from 'prop-types';
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';
/** A wrapper component that has a style of an input component */
const InputShell = props => {
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(DropDownArrow, null))))));
};
InputShell.displayName = 'InputShell';
InputShell.propTypes = {
dataHook: PropTypes.string,
as: PropTypes.oneOf(['div', 'button']),
menuArrow: PropTypes.bool,
children: PropTypes.node,
focused: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['auto'])]),
disabled: PropTypes.bool,
tabIndex: PropTypes.number,
'aria-haspopup': PropTypes.oneOf([
'menu',
'listbox',
'tree',
'grid',
'dialog',
'true',
'false',
PropTypes.bool,
]),
'aria-controls': PropTypes.string,
onClick: PropTypes.func,
placeholder: PropTypes.node,
size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
};
export default InputShell;
//# sourceMappingURL=InputShell.js.map