lucid-ui/lib/components/Tag/examples/04.interactive.js

A UI component library from AppNexus.

import _get from "lodash/get";
import _map from "lodash/map";
import _set from "lodash/set";

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; 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; }

import React from 'react';
import createClass from 'create-react-class';
import { Tag } from '../../../index';
var groups = [['Last Man on Earth', ['Phil']], ['Last Woman on Earth', ['Carol']], ['Star Wars', ['Ask Aak', 'Admiral Gial Ackbar', 'Acros-Krik', 'Ak-Rev', 'Stass Allie', 'Almec', 'Mas Amedda', 'Amee', 'Padmé Amidala', 'Cassian Andor', 'Bail Antilles', 'Raymus Antilles', 'Wedge Antilles', 'Queen Apailana', 'Commander Appo', 'Passel Argente', 'Faro Argyus', 'Seti Ashgad', 'AZI-3']], ['Lord of the Rings', ['Adrahil', 'Adrahil II', 'Aegnor', 'Aerandir', 'Aghan', 'Aglahad', 'Ailinel', 'Alatar', 'Aldamir', 'Aldor', 'Almarian', 'Almiel', 'Amandil', 'Amdír', 'Amlaith', 'Amrod', 'Amroth', 'Anardil', 'Anborn', 'Ancalagon The Black', 'Andróg', 'Angbor', 'Angelimar', 'Angelimir', 'Angrod', 'Anárion', 'Ar-Adûnakhôr', 'Ar-Gimilzôr', 'Ar-Pharazôn', 'Ar-Sakalthôr', 'Ar-Zimrathôn', 'Arador', 'Araglas', 'Aragorn I', 'Aragorn II Elessar']], ['Star Trek', ['Jonathan Archer', 'Ayala', 'Azan', 'Reginald Barclay', 'Lieutenant, JG (TNG,FCT)', 'Engineering Officer (TNG,Movies)', 'Bareil Antos', 'Julian Bashir', 'Season 6 (TNG)', 'Lieutenant, JG (S1-3)']]];
export default createClass({
  getInitialState: function getInitialState() {
    return {
      removedItems: {}
    };
  },
  handleRemove: function handleRemove(_ref) {
    var callbackId = _ref.props.callbackId;
    this.setState({
      removedItems: _set(this.state.removedItems, callbackId, true)
    });
  },
  render: function render() {
    var _this = this;

    var removedItems = this.state.removedItems;
    return /*#__PURE__*/React.createElement("div", null, _map(groups, function (_ref2, groupIndex) {
      var _ref3 = _slicedToArray(_ref2, 2),
          group = _ref3[0],
          names = _ref3[1];

      var groupCallbackId = "".concat(groupIndex);

      if (_get(removedItems, groupCallbackId) === true) {
        return null;
      }

      return /*#__PURE__*/React.createElement(Tag, {
        key: groupCallbackId,
        isRemovable: true,
        onRemove: _this.handleRemove,
        callbackId: groupCallbackId
      }, group, _map(names, function (name, nameIndex) {
        var nameCallbackId = "".concat(groupIndex, ".").concat(nameIndex);

        if (_get(removedItems, nameCallbackId) === true) {
          return null;
        }

        return /*#__PURE__*/React.createElement(Tag, {
          key: nameCallbackId,
          isRemovable: true,
          onRemove: _this.handleRemove,
          callbackId: nameCallbackId
        }, name);
      }));
    }));
  }
}); // begin-hide-from-docs

export var notes = "\nUse interactive tags to allow users to remove a selection.\n"; // end-hide-from-docs