@decisiv/ui-components 2.0.1-alpha.20 → 2.0.1-alpha.201

package/lib/components/TagInput/index.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TagInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _styles = require("./styles");
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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 TagInput(_ref) {
+  var _ref$defaultTags = _ref.defaultTags,
+      defaultTags = _ref$defaultTags === void 0 ? [] : _ref$defaultTags,
+      tags = _ref.tags,
+      onChange = _ref.onChange,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
+      label = _ref.label,
+      hiddenLabel = _ref.hiddenLabel,
+      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel"]);
+
+  var clearButtonRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputVisible = _useState2[0],
+      setInputVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(defaultTags),
+      _useState4 = _slicedToArray(_useState3, 2),
+      innerTags = _useState4[0],
+      setInnerTags = _useState4[1];
+
+  var translate = (0, _useTranslations.default)();
+  var isControlled = (0, _react.useMemo)(function () {
+    return !!tags;
+  }, [tags]);
+  var tagsToRender = (0, _react.useMemo)(function () {
+    return tags || innerTags;
+  }, [tags, innerTags]);
+  var isDisabled = disabled || readOnly;
+  var handleNotifyChange = (0, _react.useCallback)(function (value) {
+    if (!onChange) return;
+    onChange(value);
+  }, [onChange]);
+  var handleAddTag = (0, _react.useCallback)(function (rawString) {
+    var text = rawString.replace(/\s+/g, ' ').trim();
+    if (!text || tagsToRender.includes(text)) return;
+
+    if (isControlled) {
+      handleNotifyChange([].concat(_toConsumableArray(tags), [text]));
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = [].concat(_toConsumableArray(oldState), [text]);
+      handleNotifyChange(newState);
+      return newState;
+    });
+  }, [handleNotifyChange, tags, tagsToRender, isControlled]);
+  var handleRemoveOnBackspace = (0, _react.useCallback)(function () {
+    if (isControlled) {
+      handleNotifyChange(_toConsumableArray(tags.slice(0, -1)));
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = _toConsumableArray(oldState.slice(0, -1));
+
+      handleNotifyChange(newState);
+      return newState;
+    });
+  }, [isControlled, handleNotifyChange, tags]);
+  var handleRemoveTag = (0, _react.useCallback)(function (text) {
+    if (isControlled) {
+      handleNotifyChange(tags.filter(function (tag) {
+        return tag !== text;
+      }));
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = oldState.filter(function (tag) {
+        return tag !== text;
+      });
+      handleNotifyChange(newState);
+      return newState;
+    });
+  }, [isControlled, handleNotifyChange, tags]);
+  var handleOnKeyUp = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    var text = e.target.value;
+
+    if (!text && e.key === 'Backspace') {
+      handleRemoveOnBackspace();
+    }
+
+    if (text && e.key === 'Enter') {
+      e.preventDefault();
+      handleAddTag(text);
+      e.target.value = '';
+    }
+  }, [handleAddTag, handleRemoveOnBackspace]);
+  var handleFocus = (0, _react.useCallback)(function () {
+    setInputVisible(true);
+  }, []);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    // Suppress event if clicking in the X button
+    if (e.relatedTarget === clearButtonRef.current) {
+      return;
+    }
+
+    var text = e.target.value;
+    handleAddTag(text);
+    e.target.value = '';
+    setInputVisible(false);
+  }, [handleAddTag]);
+  var handleOnClearButtonClick = (0, _react.useCallback)(function () {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }, []);
+  return _react.default.createElement(_styles.Wrapper, null, _react.default.createElement(_InputField.default, _extends({
+    ref: inputRef,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    disabled: disabled,
+    readOnly: readOnly,
+    label: label,
+    hideLabel: hiddenLabel
+  }, props), function (innerProps) {
+    return _react.default.createElement(_styles.Container, null, tagsToRender.map(function (tag) {
+      return _react.default.createElement(_Tag.default, {
+        key: tag,
+        size: "small",
+        text: tag,
+        palette: "pastel",
+        color: isDisabled ? 'licoriceMousse' : 'information',
+        action: isDisabled ? undefined : function () {
+          return handleRemoveTag(tag);
+        },
+        actionIntent: "danger",
+        actionAttributes: {
+          'aria-label': translate(undefined, 'tagInput.tagAriaLabel', {
+            tagName: tag
+          })
+        },
+        actionIcon: isDisabled ? undefined : _Times.default
+      });
+    }), _react.default.createElement(_styles.InputWrapper, null, _react.default.createElement(_styles.Input, _extends({}, innerProps, {
+      isVisible: inputVisible,
+      onKeyUp: handleOnKeyUp,
+      placeholder: " "
+    })), _react.default.createElement(_Button.default, {
+      ref: clearButtonRef,
+      style: {
+        display: 'none',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        paddingRight: (0, _rem.default)(_spacing.default.base * 0.8),
+        paddingLeft: (0, _rem.default)(_spacing.default.base * 0.8)
+      },
+      "aria-label": translate(undefined, 'tagInput.clearButton', {
+        inputLabel: label
+      }),
+      intent: "danger",
+      icon: _Times.default,
+      size: "small",
+      variant: "ghost",
+      onClick: handleOnClearButtonClick
+    })));
+  }));
+}