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

wix-style-react

import React from 'react';
import times from '../src/utils/operators/times';

import ModalSelectorLayout from 'wix-style-react/ModalSelectorLayout';
import Button from 'wix-style-react/Button';
import Text from '../src/Text';

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

export default {
  category: '11. Pickers and Selectors',
  storyName: '11.3 ModalSelectorLayout',
  component: ModalSelectorLayout,
  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: ModalSelectorLayout.defaultProps.title
    }, {
      label: 'BOLD title',
      value: React.createElement(
        Text,
        { key: 0, bold: true },
        'BOLD title'
      )
    }],

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