wix-style-react/dist/stories/ModalSelectorLayout.story.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _times = require('../src/utils/operators/times');

var _times2 = _interopRequireDefault(_times);

var _ModalSelectorLayout = require('wix-style-react/ModalSelectorLayout');

var _ModalSelectorLayout2 = _interopRequireDefault(_ModalSelectorLayout);

var _Button = require('wix-style-react/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Text = require('../src/Text');

var _Text2 = _interopRequireDefault(_Text);

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

var ITEMS = (0, _times2.default)(50, function (i) {
  return {
    id: i,
    title: 'Title ' + i,
    subtitle: 'Subtitle ' + i,
    extraText: 'Extra Text ' + i,
    disabled: !(i % 2),
    image: _react2.default.createElement('img', { width: '100%', height: '100%', src: 'http://via.placeholder.com/100x100' })
  };
});

exports.default = {
  category: '11. Pickers and Selectors',
  storyName: '11.3 ModalSelectorLayout',
  component: _ModalSelectorLayout2.default,
  componentPath: '../src/ModalSelectorLayout',

  componentProps: function componentProps(setState) {
    return {
      dataHook: 'storybook-modal-selector-layout',
      height: '540px',
      onClose: function onClose() {
        return setState({ isOpen: false });
      },
      onCancel: function onCancel() {
        return setState({ isOpen: false });
      },
      itemsPerPage: 4,
      imageSize: 'large',
      withSearch: true,

      dataSource: function dataSource(searchQuery, offset, limit) {
        return new Promise(function (resolve) {
          return setTimeout(function () {
            var filtered = ITEMS.filter(function (_ref) {
              var title = _ref.title;
              return title.toLowerCase().startsWith(searchQuery.toLowerCase());
            });

            resolve({
              items: filtered.slice(offset, offset + limit),
              totalCount: filtered.length
            });
          }, 2000);
        });
      }
    };
  },

  exampleProps: {
    onOk: function onOk(data) {
      var isArray = Array.isArray(data);
      var view = function view(i) {
        return { id: i.id, title: i.title, subtitle: i.substitle };
      };

      return JSON.stringify(isArray ? data.map(view) : view(data));
    },

    onCancel: function onCancel() {
      return 'canceled';
    },

    title: [{
      label: 'default title',
      value: _ModalSelectorLayout2.default.defaultProps.title
    }, {
      label: 'BOLD title',
      value: _react2.default.createElement(
        _Text2.default,
        { key: 0, bold: true },
        'BOLD title'
      )
    }],

    subtitle: [{ label: 'simple text', value: 'A list of items go below' }, {
      label: 'component with button',
      value: _react2.default.createElement(
        'span',
        { key: 0 },
        'Some text and a ',
        _react2.default.createElement(
          _Button2.default,
          null,
          'button'
        )
      )
    }]
  }
};