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

Basic UX components

'use strict';

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

var _range3 = _interopRequireDefault(_range2);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* eslint-disable react/no-multi-comp */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _default = require('part:@lyra/components/lists/default');

var _sortable = require('part:@lyra/components/lists/sortable');

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 }; }

const chance = new _chance2.default();

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

const defaultItems = (0, _range3.default)(100).map((item, i) => {
  return {
    key: `${i}`,
    title: chance.name()
  };
});

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

    this.handleOnSort = event => {
      const items = this.state.items;
      const oldIndex = event.oldIndex,
            newIndex = event.newIndex;

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

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

  render() {
    const items = this.state.items;


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

(0, _storybook.storiesOf)('List').addDecorator(_knobs.withKnobs).add('Default', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/lists/default',
      propTables: [_default.List]
    },
    _react2.default.createElement(
      'div',
      { style: containerStyle },
      _react2.default.createElement(
        _default.List,
        null,
        defaultItems.map((item, index) => {
          return _react2.default.createElement(
            _default.Item,
            { key: index },
            item.title
          );
        })
      )
    )
  );
}).add('Sortable', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/lists/sortable',
      propTables: [_sortable.List]
    },
    _react2.default.createElement(
      'div',
      { style: containerStyle },
      _react2.default.createElement(SortableTester, { items: defaultItems })
    )
  );
});