@wix/design-system/dist/cjs/InputShell/InputShell.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _system = require("@wix/wix-ui-icons-common/system");
var _InputShell = require("./InputShell.constants");
var _InputShellSt = require("./InputShell.st.css.js");
var _Box = _interopRequireDefault(require("../Box"));
var _excluded = ["as", "children", "menuArrow", "dataHook", "focused", "onClick", "placeholder", "size"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/InputShell/InputShell.tsx";
/** A wrapper component that has a style of an input component */
var InputShell = props => {
  var {
      as: Component = 'div',
      children,
      menuArrow,
      dataHook,
      focused = 'auto',
      onClick,
      placeholder,
      size = _InputShell.SIZE.medium
    } = props,
    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
  var shouldApplyPlaceholderClass = !children && !!placeholder;
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
    "data-hook": dataHook,
    className: (0, _InputShellSt.st)(_InputShellSt.classes.root, {
      menuArrow: props.menuArrow,
      disabled: props.as === 'button' ? props.disabled : false,
      focused: String(focused),
      size,
      placeholder: shouldApplyPlaceholderClass
    }),
    onClick: onClick,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 30,
      columnNumber: 5
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _InputShellSt.st)(_InputShellSt.classes.content),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42,
      columnNumber: 7
    }
  }, children ? children : /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": _InputShell.DATA_HOOK.placeholder,
    className: (0, _InputShellSt.st)({
      placeholder
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 11
    }
  }, placeholder), menuArrow && /*#__PURE__*/_react.default.createElement(_Box.default, {
    dataHook: _InputShell.DATA_HOOK.menuArrow,
    className: (0, _InputShellSt.st)(_InputShellSt.classes.suffix),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 54,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_system.DropDownArrow, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55,
      columnNumber: 13
    }
  }))));
};
InputShell.displayName = 'InputShell';
InputShell.propTypes = {
  dataHook: _propTypes.default.string,
  as: _propTypes.default.oneOf(['div', 'button']),
  menuArrow: _propTypes.default.bool,
  children: _propTypes.default.node,
  focused: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOf(['auto'])]),
  disabled: _propTypes.default.bool,
  tabIndex: _propTypes.default.number,
  'aria-haspopup': _propTypes.default.oneOf(['menu', 'listbox', 'tree', 'grid', 'dialog', 'true', 'false', _propTypes.default.bool]),
  'aria-controls': _propTypes.default.string,
  onClick: _propTypes.default.func,
  placeholder: _propTypes.default.node,
  size: _propTypes.default.oneOf(['tiny', 'small', 'medium', 'large'])
};
var _default = exports.default = InputShell;
//# sourceMappingURL=InputShell.js.map