wix-style-react/dist/stories/MultiSelectCheckbox/ExampleStandard.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.valueParser = exports.options = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _MultiSelectCheckbox = require('wix-style-react/MultiSelectCheckbox');

var _MultiSelectCheckbox2 = _interopRequireDefault(_MultiSelectCheckbox);

var _ExampleStandard = require('./ExampleStandard.scss');

var _ExampleStandard2 = _interopRequireDefault(_ExampleStandard);

var _Facebook = require('wix-style-react/new-icons/Facebook');

var _Facebook2 = _interopRequireDefault(_Facebook);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var options = exports.options = [{ value: 'Alabama', id: 'Alabama' }, { value: 'Alaska', id: 'Alaska' }, {
  value: _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(_Facebook2.default, null),
    'Arizona'
  ),
  id: 'Arizona',
  label: 'Arizona Label'
}, { value: 'Arkansas', id: 'Arkansas' }, { value: 'California', id: 'California' }, { value: 'California2', id: 'California2', disabled: true }, { value: 'California3', id: 'California3' }, { value: 'California4', id: 'California4' }, { value: 'California5', id: 'California5' }, { value: 'California6', id: 'California6' }, { value: 'California7', id: 'California7' }, { value: 'Two words', id: 'Two words' }];

var valueParser = exports.valueParser = function valueParser(option) {
  return option.label ? option.label : option.value;
};

var ExampleStandard = function (_React$Component) {
  _inherits(ExampleStandard, _React$Component);

  function ExampleStandard(props) {
    _classCallCheck(this, ExampleStandard);

    var _this = _possibleConstructorReturn(this, (ExampleStandard.__proto__ || Object.getPrototypeOf(ExampleStandard)).call(this, props));

    _this.handleOnSelect = function (selectedOption) {
      _this.setState({
        selectedOptions: [].concat(_toConsumableArray(_this.state.selectedOptions), [selectedOption])
      });
    };

    _this.handleOnDeselect = function (selectedOption) {
      _this.setState({
        selectedOptions: _this.state.selectedOptions.filter(function (val) {
          return val !== selectedOption;
        })
      });
    };

    _this.state = {
      selectedOptions: ['Alabama', 'California'],
      options: options
    };
    return _this;
  }

  _createClass(ExampleStandard, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: _ExampleStandard2.default.main },
        _react2.default.createElement(_MultiSelectCheckbox2.default, {
          options: this.state.options,
          selectedOptions: this.state.selectedOptions,
          onSelect: this.handleOnSelect,
          onDeselect: this.handleOnDeselect,
          valueParser: valueParser
        })
      );
    }
  }]);

  return ExampleStandard;
}(_react2.default.Component);

exports.default = ExampleStandard;