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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getVisibleSuffixCount = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _CloseButton = require('../CloseButton');

var _CloseButton2 = _interopRequireDefault(_CloseButton);

var _DropDownArrow = require('../new-icons/system/DropDownArrow');

var _DropDownArrow2 = _interopRequireDefault(_DropDownArrow);

var _Search = require('../new-icons/Search');

var _Search2 = _interopRequireDefault(_Search);

var _ThemedInputErrorSuffix = require('./ThemedInputErrorSuffix');

var _ThemedInputErrorSuffix2 = _interopRequireDefault(_ThemedInputErrorSuffix);

var _ThemedInputHelpSuffix = require('./ThemedInputHelpSuffix');

var _ThemedInputHelpSuffix2 = _interopRequireDefault(_ThemedInputHelpSuffix);

var _InputLoaderSuffix = require('./InputLoaderSuffix');

var _InputLoaderSuffix2 = _interopRequireDefault(_InputLoaderSuffix);

var _Input = require('./Input');

var _Input2 = _interopRequireDefault(_Input);

var _Input3 = require('./Input.scss');

var _Input4 = _interopRequireDefault(_Input3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

var suffixRules = {
  inputLoaderSuffix: function inputLoaderSuffix(_ref) {
    var status = _ref.status,
        disabled = _ref.disabled;
    return status === _Input2.default.StatusLoading && !disabled;
  },
  inputErrorSuffix: function inputErrorSuffix(_ref2) {
    var status = _ref2.status,
        disabled = _ref2.disabled;
    return status === _Input2.default.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 === _Input2.default.StatusError;

  var suffixes = [{
    component: function component() {
      return _react2.default.createElement(_ThemedInputErrorSuffix2.default, {
        theme: theme,
        focused: focused,
        narrow: menuArrow,
        errorMessage: statusMessage,
        tooltipPlacement: tooltipPlacement,
        onTooltipShow: onTooltipShow
      });
    },
    isVisible: suffixRules.inputErrorSuffix({ status: status, disabled: disabled })
  }, {
    component: function component() {
      return _react2.default.createElement(_InputLoaderSuffix2.default, {
        tooltipMessage: statusMessage,
        tooltipPlacement: tooltipPlacement,
        onTooltipShow: onTooltipShow
      });
    },
    isVisible: suffixRules.inputLoaderSuffix({ status: status, disabled: disabled })
  }, {
    component: function component() {
      return _react2.default.createElement(_ThemedInputHelpSuffix2.default, {
        theme: theme,
        help: help,
        helpMessage: helpMessage,
        tooltipPlacement: tooltipPlacement,
        onTooltipShow: onTooltipShow
      });
    },
    isVisible: suffixRules.inputHelpSuffix({ help: help, disabled: disabled })
  }, {
    component: function component() {
      return _react2.default.createElement(
        'div',
        {
          className: _Input4.default.magnifyingGlass,
          disabled: disabled,
          onClick: onIconClicked
        },
        _react2.default.createElement(_Search2.default, null)
      );
    },
    isVisible: suffixRules.magnifyingGlass({
      magnifyingGlass: magnifyingGlass,
      isClearButtonVisible: isClearButtonVisible,
      error: error
    })
  }, {
    component: function component() {
      return _react2.default.createElement(
        'div',
        { className: _Input4.default.clearButton },
        _react2.default.createElement(_CloseButton2.default, {
          dataHook: 'input-clear-button',
          size: 'medium',
          onClick: onClear
        })
      );
    },
    isVisible: suffixRules.clearButton({ isClearButtonVisible: isClearButtonVisible })
  }, {
    component: function component() {
      return _react2.default.createElement('div', { className: _Input4.default.unitSeparator });
    },
    isVisible: suffixRules.unitSeparator({ unit: unit })
  }, {
    component: function component() {
      return _react2.default.createElement(
        'div',
        { className: _Input4.default.unit, onClick: onIconClicked },
        unit
      );
    },
    isVisible: suffixRules.unit({ unit: unit })
  }, {
    component: function component() {
      return suffix;
    },
    isVisible: suffixRules.customSuffix({ suffix: suffix })
  }, {
    component: function component() {
      return _react2.default.createElement(
        'div',
        {
          className: _Input4.default.menuArrow,
          disabled: disabled,
          onClick: onIconClicked
        },
        _react2.default.createElement(_DropDownArrow2.default, null)
      );
    },
    isVisible: suffixRules.menuArrow({
      menuArrow: menuArrow,
      isClearButtonVisible: isClearButtonVisible,
      magnifyingGlass: magnifyingGlass
    })
  }].filter(isFixVisible);

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

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

exports.default = InputSuffix;
exports.getVisibleSuffixCount = getVisibleSuffixCount;