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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';

import CloseButton from '../CloseButton';
import DropDownArrow from '../new-icons/system/DropDownArrow';
import Search from '../new-icons/Search';
import ThemedInputErrorSuffix from './ThemedInputErrorSuffix';
import ThemedInputHelpSuffix from './ThemedInputHelpSuffix';
import InputLoaderSuffix from './InputLoaderSuffix';
import Input from './Input';

import styles from './Input.scss';

var isFixVisible = function isFixVisible(fix) {
  return fix.isVisible;
};

var suffixRules = {
  inputLoaderSuffix: function inputLoaderSuffix(_ref) {
    var status = _ref.status,
        disabled = _ref.disabled;
    return status === Input.StatusLoading && !disabled;
  },
  inputErrorSuffix: function inputErrorSuffix(_ref2) {
    var status = _ref2.status,
        disabled = _ref2.disabled;
    return status === Input.StatusError && !disabled;
  },
  inputHelpSuffix: function inputHelpSuffix(_ref3) {
    var help = _ref3.help,
        disabled = _ref3.disabled;
    return help && !disabled;
  },
  magnifyingGlass: function magnifyingGlass(_ref4) {
    var _magnifyingGlass = _ref4.magnifyingGlass,
        isClearButtonVisible = _ref4.isClearButtonVisible,
        error = _ref4.error;
    return _magnifyingGlass && !isClearButtonVisible && !error;
  },
  clearButton: function clearButton(_ref5) {
    var isClearButtonVisible = _ref5.isClearButtonVisible;
    return isClearButtonVisible;
  },
  menuArrow: function menuArrow(_ref6) {
    var _menuArrow = _ref6.menuArrow,
        isClearButtonVisible = _ref6.isClearButtonVisible,
        magnifyingGlass = _ref6.magnifyingGlass;
    return _menuArrow && !isClearButtonVisible && !magnifyingGlass;
  },
  unitSeparator: function unitSeparator(_ref7) {
    var unit = _ref7.unit;
    return !!unit;
  },
  unit: function unit(_ref8) {
    var _unit = _ref8.unit;
    return !!_unit;
  },
  customSuffix: function customSuffix(_ref9) {
    var suffix = _ref9.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(_ref10) {
  var theme = _ref10.theme,
      statusMessage = _ref10.statusMessage,
      status = _ref10.status,
      disabled = _ref10.disabled,
      help = _ref10.help,
      helpMessage = _ref10.helpMessage,
      onIconClicked = _ref10.onIconClicked,
      magnifyingGlass = _ref10.magnifyingGlass,
      isClearButtonVisible = _ref10.isClearButtonVisible,
      onClear = _ref10.onClear,
      menuArrow = _ref10.menuArrow,
      unit = _ref10.unit,
      suffix = _ref10.suffix,
      focused = _ref10.focused,
      tooltipPlacement = _ref10.tooltipPlacement,
      onTooltipShow = _ref10.onTooltipShow;

  var error = status === Input.StatusError;

  var suffixes = [{
    component: function component() {
      return React.createElement(ThemedInputErrorSuffix, {
        theme: theme,
        focused: focused,
        narrow: menuArrow,
        errorMessage: statusMessage,
        tooltipPlacement: tooltipPlacement,
        onTooltipShow: onTooltipShow
      });
    },
    isVisible: suffixRules.inputErrorSuffix({ status: status, disabled: disabled })
  }, {
    component: function component() {
      return React.createElement(InputLoaderSuffix, {
        tooltipMessage: statusMessage,
        tooltipPlacement: tooltipPlacement,
        onTooltipShow: onTooltipShow
      });
    },
    isVisible: suffixRules.inputLoaderSuffix({ status: status, disabled: disabled })
  }, {
    component: function component() {
      return React.createElement(ThemedInputHelpSuffix, {
        theme: theme,
        help: help,
        helpMessage: helpMessage,
        tooltipPlacement: tooltipPlacement,
        onTooltipShow: onTooltipShow
      });
    },
    isVisible: suffixRules.inputHelpSuffix({ help: help, disabled: disabled })
  }, {
    component: function component() {
      return React.createElement(
        'div',
        {
          className: styles.magnifyingGlass,
          disabled: disabled,
          onClick: onIconClicked
        },
        React.createElement(Search, null)
      );
    },
    isVisible: suffixRules.magnifyingGlass({
      magnifyingGlass: magnifyingGlass,
      isClearButtonVisible: isClearButtonVisible,
      error: error
    })
  }, {
    component: function component() {
      return React.createElement(
        'div',
        { className: styles.clearButton },
        React.createElement(CloseButton, {
          dataHook: 'input-clear-button',
          size: 'medium',
          onClick: onClear
        })
      );
    },
    isVisible: suffixRules.clearButton({ isClearButtonVisible: isClearButtonVisible })
  }, {
    component: function component() {
      return React.createElement('div', { className: styles.unitSeparator });
    },
    isVisible: suffixRules.unitSeparator({ unit: unit })
  }, {
    component: function component() {
      return React.createElement(
        'div',
        { className: styles.unit, onClick: onIconClicked },
        unit
      );
    },
    isVisible: suffixRules.unit({ unit: unit })
  }, {
    component: function component() {
      return suffix;
    },
    isVisible: suffixRules.customSuffix({ suffix: suffix })
  }, {
    component: function component() {
      return React.createElement(
        'div',
        {
          className: styles.menuArrow,
          disabled: disabled,
          onClick: onIconClicked
        },
        React.createElement(DropDownArrow, null)
      );
    },
    isVisible: suffixRules.menuArrow({
      menuArrow: menuArrow,
      isClearButtonVisible: isClearButtonVisible,
      magnifyingGlass: magnifyingGlass
    })
  }].filter(isFixVisible);

  return React.createElement(
    'div',
    { className: styles.suffixes },
    suffixes.map(function (s, i) {
      return React.createElement(
        'div',
        { key: i, className: styles.suffix },
        s.component()
      );
    })
  );
};

InputSuffix.propTypes = {
  suffixes: PropTypes.arrayOf(PropTypes.shape({
    component: PropTypes.func.isRequired,
    isVisible: PropTypes.bool.isRequired
  })),
  theme: PropTypes.oneOf(['normal', 'tags', 'paneltitle', 'material', 'amaterial', 'flat', 'flatdark']),
  statusMessage: PropTypes.node,
  status: PropTypes.oneOf(['loading', 'error']),
  disabled: PropTypes.bool,
  help: PropTypes.bool,
  helpMessage: PropTypes.node,
  onIconClicked: PropTypes.func,
  magnifyingGlass: PropTypes.bool,
  isClearButtonVisible: PropTypes.bool,
  onClear: PropTypes.func,
  menuArrow: PropTypes.bool,
  unit: PropTypes.string,
  suffix: PropTypes.node,
  focused: PropTypes.bool,
  tooltipPlacement: PropTypes.string,
  onTooltipShow: PropTypes.func
};

export default InputSuffix;
export { getVisibleSuffixCount };