lucid-ui/lib/components/Selection/examples/3.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 { Selection, Resizer } 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']], ['Lord of the Rings', ['Adrahil', 'Adrahil II', 'Araglas', 'Aragorn I', 'Aragorn II Elessar']], ['Star Trek', ['Jonathan Archer', 'Ayala', 'Azan', '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(Resizer, null, function (width) {
      var responsiveMode = width >= 400 ? 'large' : 'small';
      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(Selection, {
          responsiveMode: responsiveMode,
          key: groupCallbackId,
          isRemovable: true,
          isBold: true,
          hasBackground: true,
          kind: "container",
          onRemove: _this.handleRemove,
          callbackId: groupCallbackId,
          Label: group
        }, _map(names, function (name, nameIndex) {
          var nameCallbackId = "".concat(groupIndex, ".").concat(nameIndex);

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

          return /*#__PURE__*/React.createElement(Selection, {
            responsiveMode: responsiveMode,
            key: nameCallbackId,
            isRemovable: true,
            onRemove: _this.handleRemove,
            callbackId: nameCallbackId,
            Label: name
          });
        }));
      }));
    });
  }
});