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

Basic UX components

'use strict';

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

var _range3 = _interopRequireDefault(_range2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _default2 = _interopRequireDefault(_default);

var _chance = require('chance');

var _chance2 = _interopRequireDefault(_chance);

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

const chance = new _chance2.default();

const formStyle = { width: '30em', margin: '0 auto', paddingBottom: '20em' };

(0, _storybook.storiesOf)('Autocomplete').add('Default',
// `
//   Autocomplete is used to help user complete a normal text input. The input can be anything.
// `,
() => {
  return _react2.default.createElement(
    'form',
    { style: formStyle },
    _react2.default.createElement(_default2.default, {
      placeholder: 'Type to autocomplete\u2026',
      label: 'Autocomplete',
      onChange: (0, _storybook.action)('onChange'),
      suggestions: []
    })
  );
}, {
  propTables: [_default2.default],
  role: 'part:@lyra/components/autocomplete/default'
}).add('Default with suggestions',
// `
//   Default textfield
// `,
() => {
  const suggestions = (0, _range3.default)(10).map((item, i) => {
    return {
      id: `${i}`,
      title: chance.name()
    };
  });
  return _react2.default.createElement(
    'form',
    { style: formStyle },
    _react2.default.createElement(_default2.default, {
      value: 'One',
      suggestions: suggestions,
      isOpen: true,
      label: 'Autocomplete component',
      onChange: (0, _storybook.action)('onChange')
    })
  );
}, {
  propTables: [_default2.default],
  role: 'part:@lyra/components/autocomplete/default'
});