wix-style-react/dist/src/Input/InputSuffix.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.getVisibleSuffixCount = exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _system = require("@wix/wix-ui-icons-common/system");
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));
var _InputSt = require("./Input.st.css");
var _Box = _interopRequireDefault(require("../Box"));
var _constants = require("./constants");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Input/InputSuffix.js",
  _this = void 0;
var isFixVisible = fix => fix.isVisible;
var suffixRules = {
  inputStatusSuffix: _ref => {
    var {
      status,
      disabled
    } = _ref;
    return status && !disabled;
  },
  clearButton: _ref2 => {
    var {
      isClearButtonVisible
    } = _ref2;
    return isClearButtonVisible;
  },
  menuArrow: _ref3 => {
    var {
      menuArrow: _menuArrow
    } = _ref3;
    return _menuArrow;
  },
  customSuffix: _ref4 => {
    var {
      suffix
    } = _ref4;
    return !!suffix;
  }
};
var getVisibleSuffixCount = args => Object.keys(suffixRules).map(key => suffixRules[key]).map(fn => fn(args)).filter(x => x).length;
exports.getVisibleSuffixCount = getVisibleSuffixCount;
var getComponentWithTooltip = function getComponentWithTooltip(component, content) {
  for (var _len = arguments.length, tooltipProps = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
    tooltipProps[_key - 2] = arguments[_key];
  }
  return content ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({}, tooltipProps, {
    content: content,
    dataHook: _constants.dataHooks.tooltip,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28,
      columnNumber: 5
    }
  }), component) : component;
};
var InputSuffix = _ref5 => {
  var {
    statusMessage,
    status,
    disabled,
    onIconClicked,
    isClearButtonVisible,
    onClear,
    clearButtonSize,
    menuArrow,
    suffix,
    tooltipPlacement,
    clearButtonTooltipContent,
    clearButtonTooltipProps
  } = _ref5;
  var suffixes = [{
    // Close Button
    component: key => /*#__PURE__*/_react.default.createElement("div", {
      key: key,
      className: _InputSt.classes.clearButtonWrapper,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 53,
        columnNumber: 9
      }
    }, getComponentWithTooltip(/*#__PURE__*/_react.default.createElement(_CloseButton.default, {
      dataHook: "input-clear-button",
      skin: "standardFilled",
      size: clearButtonSize,
      onClick: onClear,
      className: _InputSt.classes.clearButton,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 55,
        columnNumber: 13
      }
    }), clearButtonTooltipContent, clearButtonTooltipProps)),
    isVisible: suffixRules.clearButton({
      isClearButtonVisible
    })
  }, {
    // Status Indicator
    component: key => /*#__PURE__*/_react.default.createElement("div", {
      key: key,
      className: _InputSt.classes.statusWrapper,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 72,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_StatusIndicator.default, {
      dataHook: _constants.dataHooks.status,
      status: status,
      message: statusMessage,
      tooltipPlacement: tooltipPlacement,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 73,
        columnNumber: 11
      }
    })),
    isVisible: suffixRules.inputStatusSuffix({
      status,
      disabled
    })
  }, {
    // Custom Suffix
    component: key => /*#__PURE__*/_react.default.isValidElement(suffix) ? (/*#__PURE__*/_react.default.cloneElement(suffix, {
      key
    })) : /*#__PURE__*/_react.default.createElement("div", {
      className: _InputSt.classes.suffix,
      key: key,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 89,
        columnNumber: 11
      }
    }, suffix),
    isVisible: suffixRules.customSuffix({
      suffix
    })
  }, {
    // Dropdown Arrow
    component: key => /*#__PURE__*/_react.default.createElement("div", {
      key: key,
      "data-hook": _constants.dataHooks.menuArrow,
      className: _InputSt.classes.menuArrow,
      disabled: disabled,
      onClick: onIconClicked,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 98,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_system.DropDownArrow, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 105,
        columnNumber: 11
      }
    })),
    isVisible: suffixRules.menuArrow({
      menuArrow
    })
  }].filter(isFixVisible);
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    dataHook: _constants.dataHooks.suffixes,
    className: _InputSt.classes.suffixes,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 113,
      columnNumber: 5
    }
  }, suffixes.map((s, key) => s.component(key)));
};
InputSuffix.propTypes = {
  suffixes: _propTypes.default.arrayOf(_propTypes.default.shape({
    component: _propTypes.default.func.isRequired,
    isVisible: _propTypes.default.bool.isRequired
  })),
  statusMessage: _propTypes.default.node,
  status: _propTypes.default.oneOf(['loading', 'error', 'warning']),
  disabled: _propTypes.default.bool,
  onIconClicked: _propTypes.default.func,
  isClearButtonVisible: _propTypes.default.bool,
  onClear: _propTypes.default.func,
  clearButtonSize: _propTypes.default.oneOf(['small', 'medium']),
  menuArrow: _propTypes.default.bool,
  suffix: _propTypes.default.node,
  tooltipPlacement: _propTypes.default.string,
  clearButtonTooltipContent: _propTypes.default.node,
  clearButtonTooltipProps: _propTypes.default.node
};
var _default = exports.default = InputSuffix;
//# sourceMappingURL=InputSuffix.js.map