@lyra/components/lib/lists/story_grid.js

Basic UX components

'use strict';

var _random2 = require('lodash/random');

var _random3 = _interopRequireDefault(_random2);

var _range2 = require('lodash/range');

var _range3 = _interopRequireDefault(_range2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _storybook = require('part:@lyra/storybook');

var _grid = require('part:@lyra/components/lists/grid');

var _sortableGrid = require('part:@lyra/components/lists/sortable-grid');

var _card = require('part:@lyra/components/previews/card');

var _card2 = _interopRequireDefault(_card);

var _media = require('part:@lyra/components/previews/media');

var _media2 = _interopRequireDefault(_media);

var _reactSortableHoc = require('react-sortable-hoc');

var _chance = require('chance');

var _chance2 = _interopRequireDefault(_chance);

var _knobs = require('part:@lyra/storybook/addons/knobs');

var _lyra = require('part:@lyra/storybook/addons/lyra');

var _lyra2 = _interopRequireDefault(_lyra);

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

/* eslint-disable react/no-multi-comp */
const chance = new _chance2.default();

const containerStyle = {
  width: '90%',
  height: '90%',
  boxShadow: '0 0 10px #999',
  overflow: 'auto',
  position: 'fixed',
  top: '50%',
  left: '50%',
  transform: 'translateX(-50%) translateY(-50%)'
};

class SortableGridTester extends _react2.default.Component {
  constructor(props, args) {
    super(props, args);

    this.handleOnSort = ({ oldIndex, newIndex }) => {
      const items = this.state.items;

      this.setState({
        items: (0, _reactSortableHoc.arrayMove)(items, oldIndex, newIndex)
      });
      this.props.onSort();
    };

    this.state = {
      items: this.props.items.slice()
    };
  }

  render() {
    const items = this.state.items;
    const Preview = this.props.renderWith;


    return _react2.default.createElement(
      _sortableGrid.List,
      { onSort: this.handleOnSort },
      items.map((item, index) => _react2.default.createElement(
        _sortableGrid.Item,
        { key: item.key, index: index },
        _react2.default.createElement(_sortableGrid.DragHandle, null),
        _react2.default.createElement(Preview, { item: item })
      ))
    );
  }
}

(0, _storybook.storiesOf)('List (grid)').addDecorator(_knobs.withKnobs).add('MediaPreview', () => {
  const items = (0, _range3.default)(50).map((item, i) => {
    const width = (0, _random3.default)(10, 80) * 10;
    const height = (0, _random3.default)(10, 50) * 10;
    const randomImage = `http://placekitten.com/${width}/${height}`;
    return {
      key: `${i}`,
      title: chance.name(),
      imageUrl: randomImage,
      aspect: width / height
    };
  });
  return _react2.default.createElement(
    _lyra2.default,
    { part: 'part:@lyra/components/lists/grid', propTables: [_grid.List] },
    _react2.default.createElement(
      _grid.List,
      null,
      items.map(item => _react2.default.createElement(
        _grid.Item,
        { key: item.key },
        _react2.default.createElement(_media2.default, { item: item })
      ))
    )
  );
}).add('MediaPreview (sortable)', () => {
  const items = (0, _range3.default)(50).map((item, i) => {
    const width = (0, _random3.default)(10, 80) * 10;
    const height = (0, _random3.default)(10, 50) * 10;
    const randomImage = `http://placekitten.com/${width}/${height}`;
    return {
      key: `${i}`,
      title: chance.name(),
      imageUrl: randomImage,
      aspect: width / height
    };
  });
  return _react2.default.createElement(
    _lyra2.default,
    { part: 'part:@lyra/components/lists/grid', propTables: [_grid.List] },
    _react2.default.createElement(
      'div',
      { style: containerStyle },
      _react2.default.createElement(SortableGridTester, { items: items, renderWith: _media2.default })
    )
  );
}, {
  propTables: [_grid.List],
  role: 'part:@lyra/components/lists/grid'
}).add('Cards', () => {
  const items = (0, _range3.default)(50).map((item, i) => {
    const width = 300;
    const height = 120;
    const randomImage = `http://placekitten.com/${width}/${height}`;
    return {
      key: `${i}`,
      title: chance.name(),
      subtitle: chance.sentence(),
      description: chance.sentence(1),
      media: _react2.default.createElement('img', { src: randomImage, height: height, width: width })
    };
  });

  return _react2.default.createElement(
    _lyra2.default,
    { part: 'part:@lyra/components/lists/grid', propTables: [_grid.List] },
    _react2.default.createElement(
      _grid.List,
      null,
      items.map(item => _react2.default.createElement(
        _grid.Item,
        { key: item.key },
        _react2.default.createElement(_card2.default, { item: item })
      ))
    )
  );
});