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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import DropDownArrow from 'wix-ui-icons-common/system/DropDownArrow';
import CloseButton from '../CloseButton';
import StatusIndicator from '../StatusIndicator';
import { classes } from './Input.st.css';
import Box from '../Box';
import { dataHooks } from './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;
};

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.createElement("div", {
        key: key,
        className: classes.clearButtonWrapper
      }, /*#__PURE__*/React.createElement(CloseButton, {
        dataHook: "input-clear-button",
        skin: "standardFilled",
        size: clearButtonSize,
        onClick: onClear,
        className: classes.clearButton
      }));
    },
    isVisible: suffixRules.clearButton({
      isClearButtonVisible: isClearButtonVisible
    })
  }, {
    // Status Indicator
    component: function component(key) {
      return /*#__PURE__*/React.createElement("div", {
        key: key,
        className: classes.statusWrapper
      }, /*#__PURE__*/React.createElement(StatusIndicator, {
        dataHook: dataHooks.status,
        status: status,
        message: statusMessage,
        tooltipPlacement: tooltipPlacement
      }));
    },
    isVisible: suffixRules.inputStatusSuffix({
      status: status,
      disabled: disabled
    })
  }, {
    // Custom Suffix
    component: function component(key) {
      return /*#__PURE__*/React.isValidElement(suffix) ? /*#__PURE__*/React.cloneElement(suffix, {
        key: key
      }) : /*#__PURE__*/React.createElement("div", {
        className: classes.suffix,
        key: key
      }, suffix);
    },
    isVisible: suffixRules.customSuffix({
      suffix: suffix
    })
  }, {
    // Dropdown Arrow
    component: function component(key) {
      return /*#__PURE__*/React.createElement("div", {
        key: key,
        "data-hook": dataHooks.menuArrow,
        className: classes.menuArrow,
        disabled: disabled,
        onClick: onIconClicked
      }, /*#__PURE__*/React.createElement(DropDownArrow, null));
    },
    isVisible: suffixRules.menuArrow({
      menuArrow: menuArrow
    })
  }].filter(isFixVisible);
  return /*#__PURE__*/React.createElement(Box, {
    dataHook: dataHooks.suffixes,
    className: classes.suffixes
  }, suffixes.map(function (s, key) {
    return s.component(key);
  }));
};

InputSuffix.propTypes = {
  suffixes: PropTypes.arrayOf(PropTypes.shape({
    component: PropTypes.func.isRequired,
    isVisible: PropTypes.bool.isRequired
  })),
  statusMessage: PropTypes.node,
  status: PropTypes.oneOf(['loading', 'error', 'warning']),
  disabled: PropTypes.bool,
  onIconClicked: PropTypes.func,
  isClearButtonVisible: PropTypes.bool,
  onClear: PropTypes.func,
  clearButtonSize: PropTypes.oneOf(['small', 'medium']),
  menuArrow: PropTypes.bool,
  suffix: PropTypes.node,
  tooltipPlacement: PropTypes.string
};
export default InputSuffix;
export { getVisibleSuffixCount };