@decisiv/ui-components 2.0.1-alpha.99 → 2.0.1

package/lib/components/SearchInput/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SearchInput;
+Object.defineProperty(exports, "SearchInputProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.SearchInputProps;
+  }
+});
+Object.defineProperty(exports, "SearchItem", {
+  enumerable: true,
+  get: function get() {
+    return _types.SearchItem;
+  }
+});
+Object.defineProperty(exports, "StyledFlexProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.StyledFlexProps;
+  }
+});
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
+
+var _Search = _interopRequireDefault(require("@decisiv/iconix/lib/components/Search"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
+
+var _HelpMessage = _interopRequireDefault(require("../../atoms/InputField/HelpMessage"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _types = require("./types");
+
+var _styles = require("./styles");
+
+var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
+
+var _Select = _interopRequireDefault(require("../Select"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function SearchInput(_ref) {
+  var onSearch = _ref.onSearch,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      searchDisabled = _ref.searchDisabled,
+      _ref$searchOn = _ref.searchOn,
+      searchOn = _ref$searchOn === void 0 ? 'submit' : _ref$searchOn,
+      _ref$searchByOptions = _ref.searchByOptions,
+      searchByOptions = _ref$searchByOptions === void 0 ? [] : _ref$searchByOptions,
+      _ref$searchByLabel = _ref.searchByLabel,
+      searchByLabel = _ref$searchByLabel === void 0 ? '' : _ref$searchByLabel,
+      searchByValue = _ref.searchByValue,
+      _ref$searchByName = _ref.searchByName,
+      searchByName = _ref$searchByName === void 0 ? '' : _ref$searchByName,
+      searchByDefaultValue = _ref.searchByDefaultValue,
+      searchByWidth = _ref.searchByWidth,
+      searchInputRef = _ref.searchInputRef,
+      onSearchByChange = _ref.onSearchByChange,
+      warningMessage = _ref.warningMessage,
+      helpMessage = _ref.helpMessage,
+      zIndex = _ref.zIndex,
+      tooltipZIndex = _ref.tooltipZIndex,
+      props = _objectWithoutProperties(_ref, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn", "searchByOptions", "searchByLabel", "searchByValue", "searchByName", "searchByDefaultValue", "searchByWidth", "searchInputRef", "onSearchByChange", "warningMessage", "helpMessage", "zIndex", "tooltipZIndex"]);
+
+  var translate = (0, _useTranslations.default)();
+  var handleSearch = (0, _react.useCallback)(function () {
+    !disabled && !searchDisabled && onSearch && onSearch(value);
+  }, [disabled, searchDisabled, onSearch, value]);
+  var mediumSized = size === 'medium';
+  var hasText = !!value && !!value.length;
+  var showSearchBy = !(0, _isEmpty.default)(searchByOptions);
+  var handleClear = (0, _react.useCallback)(function () {
+    !disabled && onChange && onChange({
+      target: {
+        value: ''
+      }
+    });
+  }, [disabled, onChange]);
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter') handleSearch();
+  }, [handleSearch]);
+  (0, _useUpdateEffect.default)(function () {
+    if (searchOn === 'change') {
+      handleSearch();
+    }
+  }, [searchOn, value]);
+  var renderLeftIcon = searchOn === 'change' || searchOn === 'submit' && mediumSized;
+  return _react.default.createElement(_styles.SearchInputContainer, null, _react.default.createElement(_styles.StyledFlex, {
+    flex: 1,
+    mediumSized: mediumSized,
+    "data-testid": "search-container"
+  }, showSearchBy && _react.default.createElement(_styles.SelectWrapper, {
+    width: searchByWidth
+  }, _react.default.createElement(_Select.default, {
+    "aria-label": translate(undefined, 'searchInput.searchBy'),
+    disabled: disabled,
+    hideClearButton: true,
+    hideLabel: !mediumSized,
+    label: searchByLabel,
+    name: searchByName,
+    options: searchByOptions,
+    value: searchByValue,
+    withWarningIntent: !!warningMessage,
+    onChange: onSearchByChange,
+    defaultValue: searchByDefaultValue,
+    zIndex: zIndex
+  })), _react.default.createElement(_InputField.default, _extends({
+    label: "",
+    ref: searchInputRef,
+    hideLabel: true,
+    disabled: disabled,
+    value: value,
+    withWarningIntent: !!warningMessage
+  }, props), function (p) {
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styles.StyledBody, null, renderLeftIcon && _react.default.createElement(_styles.SearchIconWrapper, {
+      inputSize: size
+    }, _react.default.createElement(_Search.default, {
+      size: "medium",
+      "data-testid": "search-icon"
+    })), _react.default.createElement(_styles.StyledInput, _extends({}, p, {
+      onChange: onChange,
+      onKeyPress: handleKeyPress
+    })), _react.default.createElement(_styles.ButtonGroup, {
+      mediumSized: mediumSized
+    }, !disabled && _react.default.createElement(_Tooltip.default, {
+      zIndex: tooltipZIndex,
+      placement: "top",
+      target: // eslint-disable-next-line react/jsx-wrap-multilines
+      _react.default.createElement(_styles.TimesIconWrapper, {
+        tabIndex: 0,
+        "aria-label": translate(undefined, 'searchInput.clearSearch'),
+        onClick: handleClear,
+        visible: hasText
+      }, _react.default.createElement(_Times.default, {
+        size: "small"
+      }))
+    }, translate(undefined, 'searchInput.clear')), searchOn === 'submit' && _react.default.createElement(_Button.default, {
+      "aria-label": "Search",
+      tabIndex: 0,
+      disabled: disabled || searchDisabled || !hasText,
+      text: mediumSized ? translate(undefined, 'searchInput.search') : '',
+      icon: mediumSized ? undefined : _Search.default,
+      size: size,
+      onClick: handleSearch
+    }))));
+  })), !(0, _isEmpty.default)(warningMessage) && _react.default.createElement(_styles.WarningMessage, {
+    intent: "warning"
+  }, warningMessage), _react.default.createElement(_HelpMessage.default, {
+    helpMessage: helpMessage,
+    contentLength: value.length
+  }));
+}
+
+SearchInput.defaultProps = {
+  size: 'medium'
+};