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

React Collection Helpers Component

/* eslint-disable react/prop-types */
import React from 'react';
import { storiesOf } from '@kadira/storybook';

import Filter from '../Filter';
import Sort from '../Sort';
import FilterController from '../../helpers/story/FilterController';

storiesOf('Filter', module).add('Filtering a few items', function () {
  return React.createElement(
    Filter,
    {
      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 React.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 React.createElement(
      'div',
      { style: { padding: 10, borderBottom: '1px solid #DDD' } },
      React.createElement(
        'strong',
        { style: { display: 'inline-block', width: 100 } },
        name
      ),
      React.createElement(
        'span',
        { style: { padding: 10 } },
        'In stock: ',
        inStock ? '✓' : '×'
      ),
      React.createElement(
        'span',
        { style: { padding: 10 } },
        'Tax free: ',
        taxFree ? '✓' : '×'
      ),
      React.createElement(
        'span',
        { style: { padding: 10 } },
        'On sale: ',
        onSale ? '✓' : '×'
      )
    );
  };

  return React.createElement(FilterController, {
    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 React.createElement(
    'div',
    null,
    React.createElement(
      'h3',
      null,
      'Original collection:'
    ),
    collection.map(function (item) {
      return React.createElement(
        'div',
        null,
        item.name,
        ', $',
        item.price
      );
    }),
    React.createElement(
      'h3',
      null,
      'Filter out items over $10, sort by price'
    ),
    React.createElement(
      Filter,
      { collection: collection, predicate: function predicate(item) {
          return item.price < 10;
        } },
      React.createElement(
        Sort,
        { comparator: 'price' },
        function (item) {
          return React.createElement(
            'div',
            null,
            item.name,
            ', $',
            item.price
          );
        }
      )
    )
  );
});