wix-style-react/dist/es/stories/components/MultiSelect/MultiSelectPlaygroundConfig.js

wix-style-react

var _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; };

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

import { storySettings } from './storySettings';
import { AutoExampleWrapper } from '../../AutoExampleWrapper';

var countries = [{ name: 'Alabama', code: 'AL' }, { name: 'Alaska', code: 'AK' }, { name: 'Arizona', code: 'AZ' }, { name: 'Arkansas', code: 'AR' }, { name: 'California', code: 'CA' }, { name: 'North Carolina', code: 'NC' }, { name: 'Colorado', code: 'CO' }, { name: 'Connecticut', code: 'CT' }, { name: 'Delaware', code: 'DL' }, { name: 'Florida', code: 'FL' }, { name: 'Georgia', code: 'GA' }, { name: 'Hawaii', code: 'HI' }, { name: 'Idaho', code: 'IL' }, { name: 'Illinois', code: 'IN' }, { name: 'Indiana', code: 'IA' }];

export var options = countries.map(function (country) {
  return _extends({}, country, {
    value: country.name, // This can be any ReactNode
    id: country.code
  });
});

var nextTagId = 1;

function createTag(_ref) {
  var countryName = _ref.countryName,
      countryCode = _ref.countryCode;

  return {
    id: countryCode || String(nextTagId++), // When tag ids correspond to option ids, then MultiSelect will show only unselected options.
    label: countryName + ' (' + (countryCode || '?') + ')'
  };
}

export default {
  componentWrapper: AutoExampleWrapper,
  componentProps: function componentProps(setState, getState) {
    return {
      dataHook: storySettings.dataHook,
      value: '',
      tags: [],
      options: options,

      predicate: function predicate(option) {
        return option.name.toLowerCase().includes(getState().value.toLowerCase());
      },

      onChange: function onChange(e) {
        return setState({ value: e.target.value });
      },

      onSelect: function onSelect(option) {
        setState({
          tags: [].concat(_toConsumableArray(getState().tags), [createTag({ countryName: option.name, countryCode: option.code })])
        });
      },
      onManuallyInput: function onManuallyInput(values) {
        var tags = values.map(function (value) {
          return createTag({
            countryName: value
          });
        });
        var currentTags = getState().tags;
        var newTags = currentTags.concat(tags);
        // FIXME: This doesn't seem to work )-:
        setState({ tags: newTags });
      },
      onRemoveTag: function onRemoveTag(tagId) {
        return setState({
          tags: getState().tags.filter(function (currTag) {
            return currTag.id !== tagId;
          })
        });
      },
      upgrade: true
    };
  }
};