@astralservices/react-chip/dist/react-chip.esm.js

Manage a list of chips based on a strings list.

import React, { useState } from 'react';

function ReactChip(_ref) {
  var _ref$inputClass = _ref.inputClass,
      inputClass = _ref$inputClass === void 0 ? "" : _ref$inputClass,
      _ref$chipClass = _ref.chipClass,
      chipClass = _ref$chipClass === void 0 ? "" : _ref$chipClass,
      _ref$labelClass = _ref.labelClass,
      labelClass = _ref$labelClass === void 0 ? "" : _ref$labelClass,
      _ref$focusClass = _ref.focusClass,
      focusClass = _ref$focusClass === void 0 ? "" : _ref$focusClass,
      _ref$regex = _ref.regex,
      regex = _ref$regex === void 0 ? /^[0-9a-zA-Z,]+$/ : _ref$regex,
      _ref$maxChipLength = _ref.maxChipLength,
      maxChipLength = _ref$maxChipLength === void 0 ? 9999 : _ref$maxChipLength,
      _ref$defaultChips = _ref.defaultChips,
      defaultChips = _ref$defaultChips === void 0 ? [] : _ref$defaultChips,
      _ref$defaultValue = _ref.defaultValue,
      defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
      _ref$id = _ref.id,
      id = _ref$id === void 0 ? "" : _ref$id,
      _ref$name = _ref.name,
      name = _ref$name === void 0 ? "" : _ref$name,
      _ref$maxLength = _ref.maxLength,
      maxLength = _ref$maxLength === void 0 ? 9999 : _ref$maxLength,
      _ref$onChange = _ref.onChange,
      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
      _ref$style = _ref.style,
      style = _ref$style === void 0 ? {} : _ref$style;

  var _useState = useState(defaultChips),
      chips = _useState[0],
      setChips = _useState[1];

  var _useState2 = useState(defaultValue),
      input = _useState2[0],
      setInput = _useState2[1];

  function handleAddition(chip) {
    if ((chips == null ? void 0 : chips.length) >= maxLength || chips != null && chips.includes(chip) || !chip.match(regex)) return;
    var updateChips = [].concat(chips, [chip == null ? void 0 : chip.trim()]);
    onChange(updateChips);
    setChips(updateChips);
    setInput("");
  }

  function handleDelete(value) {
    if ((chips == null ? void 0 : chips.length) <= 0) return;
    var updateChips = chips == null ? void 0 : chips.filter(function (chip) {
      return chip !== value;
    });
    onChange(updateChips);
    setChips(updateChips);
  }

  function handleChange(event) {
    event == null ? void 0 : event.preventDefault();
    event == null ? void 0 : event.stopPropagation();
    var value = event.currentTarget.value;
    if (value === "") setInput("");
    if (value[0] === "," || (value == null ? void 0 : value.length) > maxChipLength) return;
    if (value != null && value.match(/,/g)) handleAddition(value == null ? void 0 : value.split(",")[0]);else setInput(value);
  }

  function handleClick(event, chip) {
    event == null ? void 0 : event.preventDefault();
    event == null ? void 0 : event.stopPropagation();
    handleDelete(chip);
  }

  function handleKeyDown(event) {
    var _previousSibling$clas3;

    event == null ? void 0 : event.stopPropagation();
    var _event$currentTarget = event.currentTarget,
        value = _event$currentTarget.value,
        previousSibling = _event$currentTarget.previousSibling,
        key = event.key,
        keyCode = event.keyCode;

    if (!value && chips != null && chips.length && (key === "Backspace" || key === "Delete")) {
      var _previousSibling$clas;

      event == null ? void 0 : event.preventDefault();

      if (previousSibling != null && (_previousSibling$clas = previousSibling.classList) != null && _previousSibling$clas.contains(focusClass)) {
        handleDelete(chips == null ? void 0 : chips[(chips == null ? void 0 : chips.length) - 1]);
      } else {
        var _previousSibling$clas2;

        previousSibling == null ? void 0 : (_previousSibling$clas2 = previousSibling.classList) == null ? void 0 : _previousSibling$clas2.add(focusClass);
      }
    }

    if (value && chips && previousSibling != null && (_previousSibling$clas3 = previousSibling.classList) != null && _previousSibling$clas3.contains(focusClass)) {
      var _previousSibling$clas4;

      previousSibling == null ? void 0 : (_previousSibling$clas4 = previousSibling.classLis) == null ? void 0 : _previousSibling$clas4.pxove(focusClass);
    }

    if (value && (key === "Enter" || keyCode === 32)) {
      event == null ? void 0 : event.preventDefault();
      handleAddition(value);
    }
  }

  return React.createElement("label", {
    className: labelClass,
    id: id,
    style: style
  }, Array.isArray(chips) ? chips == null ? void 0 : chips.map(function (chip) {
    return React.createElement("span", {
      className: chipClass,
      key: chip,
      onClick: function onClick(event) {
        return handleClick(event, chip);
      }
    }, React.createElement("input", {
      type: "hidden",
      name: name,
      value: chip,
      readOnly: true
    }), chip);
  }) : null, React.createElement("input", {
    name: name + "-input",
    className: inputClass,
    type: "text",
    onChange: handleChange,
    onKeyDown: handleKeyDown,
    value: input
  }));
}

export default ReactChip;
//# sourceMappingURL=react-chip.esm.js.map