react-collection-helpers/lib/components/Filter/Filter.stories.js

React Collection Helpers Component

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _storybook = require('@kadira/storybook');

var _Filter = require('../Filter');

var _Filter2 = _interopRequireDefault(_Filter);

var _Sort = require('../Sort');

var _Sort2 = _interopRequireDefault(_Sort);

var _FilterController = require('../../helpers/story/FilterController');

var _FilterController2 = _interopRequireDefault(_FilterController);

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

(0, _storybook.storiesOf)('Filter', module).add('Filtering a few items', function () {
  return _react2.default.createElement(
    _Filter2.default,
    {
      collection: [{ id: 'a', name: 'apple', inStock: false }, { id: 'b', name: 'banana', inStock: true }, { id: 'c', name: 'carrot', inStock: false }],
      predicate: function predicate(item) {
        return item.inStock;
      }
    },
    function (item) {
      return _react2.default.createElement(
        'div',
        { key: item.id },
        item.name
      );
    }
  );
}).add('With filter controller', function () {
  var ShopItem = function ShopItem(_ref) {
    var name = _ref.name,
        inStock = _ref.inStock,
        taxFree = _ref.taxFree,
        onSale = _ref.onSale;
    return _react2.default.createElement(
      'div',
      { style: { padding: 10, borderBottom: '1px solid #DDD' } },
      _react2.default.createElement(
        'strong',
        { style: { display: 'inline-block', width: 100 } },
        name
      ),
      _react2.default.createElement(
        'span',
        { style: { padding: 10 } },
        'In stock: ',
        inStock ? '✓' : '×'
      ),
      _react2.default.createElement(
        'span',
        { style: { padding: 10 } },
        'Tax free: ',
        taxFree ? '✓' : '×'
      ),
      _react2.default.createElement(
        'span',
        { style: { padding: 10 } },
        'On sale: ',
        onSale ? '✓' : '×'
      )
    );
  };

  return _react2.default.createElement(_FilterController2.default, {
    collection: [{ id: 'a', name: 'Apple', inStock: true, taxFree: true, onSale: false }, { id: 'b', name: 'Basketball', inStock: false, taxFree: true, onSale: true }, { id: 'c', name: 'Carrot', inStock: false, taxFree: false, onSale: true }, { id: 'd', name: 'Domino', inStock: true, taxFree: false, onSale: true }, { id: 'e', name: 'Egg', inStock: true, taxFree: false, onSale: true }, { id: 'f', name: 'Fries', inStock: true, taxFree: true, onSale: true }],
    filterControls: ['inStock', 'taxFree', 'onSale'],
    elementType: ShopItem
  });
}).add('with nested Sort', function () {
  var collection = [{ id: 'a', name: 'Apple', price: 5 }, { id: 'b', name: 'Banana', price: 10.25 }, { id: 'c', name: 'Carrot', price: 4.50 }, { id: 'd', name: 'Dragonfruit', price: 7.50 }, { id: 'e', name: 'Eggplant', price: 12.75 }];

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'h3',
      null,
      'Original collection:'
    ),
    collection.map(function (item) {
      return _react2.default.createElement(
        'div',
        null,
        item.name,
        ', $',
        item.price
      );
    }),
    _react2.default.createElement(
      'h3',
      null,
      'Filter out items over $10, sort by price'
    ),
    _react2.default.createElement(
      _Filter2.default,
      { collection: collection, predicate: function predicate(item) {
          return item.price < 10;
        } },
      _react2.default.createElement(
        _Sort2.default,
        { comparator: 'price' },
        function (item) {
          return _react2.default.createElement(
            'div',
            null,
            item.name,
            ', $',
            item.price
          );
        }
      )
    )
  );
}); /* eslint-disable react/prop-types */