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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getVisibleSuffixCount = exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _DropDownArrow = _interopRequireDefault(require("wix-ui-icons-common/system/DropDownArrow"));

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 isFixVisible = function isFixVisible(fix) {
  return fix.isVisible;
};

var suffixRules = {
  inputStatusSuffix: function inputStatusSuffix(_ref) {
    var status = _ref.status,
        disabled = _ref.disabled;
    return status && !disabled;
  },
  clearButton: function clearButton(_ref2) {
    var isClearButtonVisible = _ref2.isClearButtonVisible;
    return isClearButtonVisible;
  },
  menuArrow: function menuArrow(_ref3) {
    var _menuArrow = _ref3.menuArrow;
    return _menuArrow;
  },
  customSuffix: function customSuffix(_ref4) {
    var suffix = _ref4.suffix;
    return !!suffix;
  }
};

var getVisibleSuffixCount = function getVisibleSuffixCount(args) {
  return Object.keys(suffixRules).map(function (key) {
    return suffixRules[key];
  }).map(function (fn) {
    return fn(args);
  }).filter(function (x) {
    return x;
  }).length;
};

exports.getVisibleSuffixCount = getVisibleSuffixCount;

var InputSuffix = function InputSuffix(_ref5) {
  var statusMessage = _ref5.statusMessage,
      status = _ref5.status,
      disabled = _ref5.disabled,
      onIconClicked = _ref5.onIconClicked,
      isClearButtonVisible = _ref5.isClearButtonVisible,
      onClear = _ref5.onClear,
      clearButtonSize = _ref5.clearButtonSize,
      menuArrow = _ref5.menuArrow,
      suffix = _ref5.suffix,
      tooltipPlacement = _ref5.tooltipPlacement;
  var suffixes = [{
    // Close Button
    component: function component(key) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: key,
        className: _InputSt.classes.clearButtonWrapper
      }, /*#__PURE__*/_react["default"].createElement(_CloseButton["default"], {
        dataHook: "input-clear-button",
        skin: "standardFilled",
        size: clearButtonSize,
        onClick: onClear,
        className: _InputSt.classes.clearButton
      }));
    },
    isVisible: suffixRules.clearButton({
      isClearButtonVisible: isClearButtonVisible
    })
  }, {
    // Status Indicator
    component: function component(key) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: key,
        className: _InputSt.classes.statusWrapper
      }, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
        dataHook: _constants.dataHooks.status,
        status: status,
        message: statusMessage,
        tooltipPlacement: tooltipPlacement
      }));
    },
    isVisible: suffixRules.inputStatusSuffix({
      status: status,
      disabled: disabled
    })
  }, {
    // Custom Suffix
    component: function component(key) {
      return /*#__PURE__*/_react["default"].isValidElement(suffix) ? /*#__PURE__*/_react["default"].cloneElement(suffix, {
        key: key
      }) : /*#__PURE__*/_react["default"].createElement("div", {
        className: _InputSt.classes.suffix,
        key: key
      }, suffix);
    },
    isVisible: suffixRules.customSuffix({
      suffix: suffix
    })
  }, {
    // Dropdown Arrow
    component: function component(key) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: key,
        "data-hook": _constants.dataHooks.menuArrow,
        className: _InputSt.classes.menuArrow,
        disabled: disabled,
        onClick: onIconClicked
      }, /*#__PURE__*/_react["default"].createElement(_DropDownArrow["default"], null));
    },
    isVisible: suffixRules.menuArrow({
      menuArrow: menuArrow
    })
  }].filter(isFixVisible);
  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    dataHook: _constants.dataHooks.suffixes,
    className: _InputSt.classes.suffixes
  }, suffixes.map(function (s, key) {
    return 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
};
var _default = InputSuffix;
exports["default"] = _default;