wix-style-react/dist/stories/MultiSelectCheckbox/index.story.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _CodeExample = require('wix-storybook-utils/CodeExample');

var _CodeExample2 = _interopRequireDefault(_CodeExample);

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

var _ExampleStandard2 = _interopRequireDefault(_ExampleStandard);

var _ExampleStandard3 = require('!raw-loader!./ExampleStandard');

var _ExampleStandard4 = _interopRequireDefault(_ExampleStandard3);

var _MultiSelectCheckbox = require('../../src/MultiSelectCheckbox');

var _MultiSelectCheckbox2 = _interopRequireDefault(_MultiSelectCheckbox);

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

var options = [{ value: 'Alabama', id: 'Alabama' }, { value: 'Alaska', id: 'Alaska' }, { value: 'Arkansas', id: 'Arkansas' }, { value: 'California', id: 'California' }, { value: 'California2', id: 'California2' }, { 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' }];

exports.default = {
  category: '4. Selection',
  storyName: '4.1 + MultiSelectCheckbox',
  component: _MultiSelectCheckbox2.default,
  componentPath: '../../src/MultiSelectCheckbox',

  componentProps: function componentProps(setState, getState) {
    return {
      options: options,
      selectedOptions: [],
      onDeselect: function onDeselect(selectedOption) {
        setState({
          selectedOptions: getState().selectedOptions.filter(function (val) {
            return val !== selectedOption;
          })
        });
      },
      onSelect: function onSelect(selectedOption) {
        setState({
          selectedOptions: [].concat(_toConsumableArray(getState().selectedOptions), [selectedOption])
        });
      },
      dataHook: 'multi-select-checkbox'
    };
  },

  exampleProps: {
    options: [{ label: 'One option', value: [{ id: 0, value: 'Just me here' }] }, { label: options.length + ' options', value: options }]
  },

  examples: _react2.default.createElement(
    _CodeExample2.default,
    { title: 'Standard', code: _ExampleStandard4.default },
    _react2.default.createElement(_ExampleStandard2.default, null)
  )
};