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

React Collection Helpers Component

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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

import Sort from '../Sort';

storiesOf('Sort', module).add('With flippable sort order', 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 }];

  var FlippableSorter = function (_Component) {
    _inherits(FlippableSorter, _Component);

    function FlippableSorter(props) {
      _classCallCheck(this, FlippableSorter);

      var _this = _possibleConstructorReturn(this, _Component.call(this, props));

      _this.changeOrder = _this.changeOrder.bind(_this);

      _this.state = {
        order: 'asc'
      };
      return _this;
    }

    FlippableSorter.prototype.changeOrder = function changeOrder(ev) {
      this.setState({ order: ev.target.id });
    };

    FlippableSorter.prototype.render = function render() {
      var _this2 = this;

      return React.createElement(
        'div',
        { style: { fontFamily: 'sans-serif', lineHeight: 1.5 } },
        React.createElement(
          'div',
          { style: { padding: 20, borderBottom: '1px solid #CCC' } },
          React.createElement(
            'label',
            { htmlFor: 'asc', style: { marginRight: 30 } },
            React.createElement('input', {
              id: 'asc',
              type: 'radio',
              name: 'sort-order',
              onChange: this.changeOrder
            }),
            ' ',
            'Ascending'
          ),
          React.createElement(
            'label',
            { htmlFor: 'desc' },
            React.createElement('input', {
              id: 'desc',
              type: 'radio',
              name: 'sort-order',
              onChange: this.changeOrder
            }),
            ' ',
            'Descending'
          )
        ),
        React.createElement(
          Sort,
          {
            collection: this.props.collection,
            comparator: function comparator(a, b) {
              if (_this2.state.order === 'asc') {
                return a.price < b.price ? -1 : 1;
              }

              return a.price < b.price ? 1 : -1;
            },
            delegated: {
              style: { padding: 20 }
            }
          },
          function (item) {
            return React.createElement(
              'div',
              { key: item.id },
              item.name,
              ' - $',
              item.price
            );
          }
        )
      );
    };

    return FlippableSorter;
  }(Component);

  return React.createElement(FlippableSorter, { collection: collection });
});