@lyra/components/lib/selects/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/selects/default');

var _default2 = _interopRequireDefault(_default);

var _searchable = require('part:@lyra/components/selects/searchable');

var _searchable2 = _interopRequireDefault(_searchable);

var _style = require('part:@lyra/components/selects/style');

var _style2 = _interopRequireDefault(_style);

var _radio = require('part:@lyra/components/selects/radio');

var _radio2 = _interopRequireDefault(_radio);

var _fuse = require('fuse.js');

var _fuse2 = _interopRequireDefault(_fuse);

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 items = (0, _range3.default)(20).map((item, i) => {
  return {
    title: chance.name(),
    key: `${i}`
  };
});

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

const styleItems = [{
  title: 'Paragraph',
  key: 'style-paragraph'
}, {
  title: 'Heading 1',
  key: 'style-heading1'
}, {
  title: 'Heading 2',
  key: 'style-heading2'
}, {
  title: 'Heading 3',
  key: 'style-heading3'
}, {
  title: 'Heading 4',
  key: 'style-heading4'
}, {
  title: 'Heading 5',
  key: 'style-heading5'
}];

const renderStyleItem = function renderStyleItem(item) {
  switch (item.key) {
    case 'style-paragraph':
      return _react2.default.createElement(
        'div',
        { style: { fontSize: '1em', fontWeight: 'normal' } },
        item.title
      );
    case 'style-heading1':
      return _react2.default.createElement(
        'div',
        { style: { fontSize: '2em', fontWeight: 'bold' } },
        item.title
      );
    case 'style-heading2':
      return _react2.default.createElement(
        'div',
        { style: { fontSize: '1.5em', fontWeight: 'bold' } },
        item.title
      );
    case 'style-heading3':
      return _react2.default.createElement(
        'div',
        { style: { fontSize: '1.2em', fontWeight: 'bold' } },
        item.title
      );
    default:
      return _react2.default.createElement(
        'div',
        null,
        'Style: ',
        item.title
      );
  }
};

class SearchableTest extends _react2.default.Component {
  constructor(...args) {
    super(...args);

    this.handleChange = value => {
      this.setState({
        value: value
      });
    };

    this.handleSearch = query => {
      console.log('query2', query); // eslint-disable-line
      const result = this.fuse.search(query);
      this.setState({
        loading: true
      });

      setTimeout(() => {
        this.setState({
          searchResult: result,
          loading: false
        });
      }, 500);
    };

    const fuseOptions = {
      keys: ['title']
    };

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

    this.fuse = new _fuse2.default(this.searchAbleItems, fuseOptions);

    this.state = {
      searchResult: [],
      value: null
    };
  }

  handleFocus() {
    console.log('handleFocus'); // eslint-disable-line
  }

  renderItem(item) {
    return _react2.default.createElement(
      'div',
      null,
      item.title
    );
  }

  renderValue(item) {
    console.log('Value to string:', item, item.title); // eslint-disable-line
    if (item) {
      return item.title;
    }

    return '';
  }

  render() {
    return _react2.default.createElement(_searchable2.default, {
      label: 'This is the label',
      placeholder: 'This is the placeholder',
      onSearch: this.handleSearch,
      onChange: this.handleChange,
      onFocus: this.handleFocus,
      onOpen: (0, _storybook.action)('onOpen'),
      isLoading: this.state.loading,
      items: this.state.searchResult,
      value: this.state.value,
      renderItem: this.renderItem,
      valueToString: this.renderValue
    });
  }
}

(0, _storybook.storiesOf)('Selects').addDecorator(_knobs.withKnobs).add('Default', () => {
  const options = {
    range: true,
    min: 0,
    max: items.length,
    step: 1
  };
  const valueIndex = (0, _knobs.number)('Selected item', -1, options);
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/selects/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(_default2.default, {
      label: (0, _knobs.text)('label (prop)', 'This is the label'),
      placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
      onChange: (0, _storybook.action)('onChange'),
      onFocus: (0, _storybook.action)('onFocus'),
      onBlur: (0, _storybook.action)('onBlur'),
      items: items,
      value: items[valueIndex],
      disabled: (0, _knobs.boolean)('disabled (default prop)', false)
    })
  );
}).add('Default with value', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/selects/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(_default2.default, {
      label: (0, _knobs.text)('label (prop)', 'This is the label'),
      placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
      onChange: (0, _storybook.action)('onChange'),
      onFocus: (0, _storybook.action)('onFocus'),
      onBlur: (0, _storybook.action)('onBlur'),
      value: items[10],
      items: items,
      disabled: (0, _knobs.boolean)('disabled (default prop)', false)
    })
  );
}).add('Searchable',
// `
//   When provided with items, the component searches inside these when no onInputChange is provided
// `,
() => {
  const renderItem = function renderItem(item) {
    return _react2.default.createElement(
      'div',
      null,
      item.title
    );
  };
  const hasOnclear = (0, _knobs.boolean)('has onClear');
  const selected = (0, _knobs.number)('Selected item (value)', -1, {
    range: true,
    min: -1,
    max: items.length,
    step: 1
  });
  const selectedItem = items[selected];
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/selects/searchable',
      propTables: [_searchable2.default]
    },
    _react2.default.createElement(_searchable2.default, {
      label: (0, _knobs.text)('label (prop)', 'This is the label'),
      placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
      onChange: (0, _storybook.action)('onChange'),
      onFocus: (0, _storybook.action)('onFocus'),
      onBlur: (0, _storybook.action)('onBlur'),
      onOpen: (0, _storybook.action)('onOpen'),
      value: selectedItem,
      inputValue: (0, _knobs.text)('Inputvalue (prop)', selectedItem && selectedItem.title),
      renderItem: renderItem,
      items: items,
      isLoading: (0, _knobs.boolean)('isLoading (prop)', false),
      disabled: (0, _knobs.boolean)('disabled (prop)', false),
      onClear: hasOnclear ? (0, _storybook.action)('onClear') : undefined
    })
  );
}).add('Style select', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/selects/style',
      propTables: [_style2.default]
    },
    _react2.default.createElement(
      'div',
      { style: { padding: '2em', backgroundColor: '#eee' } },
      _react2.default.createElement(_style2.default, {
        label: (0, _knobs.text)('label (prop)', 'This is the label'),
        placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
        transparent: (0, _knobs.boolean)('transparent (prop)', false),
        disabled: (0, _knobs.boolean)('disabled (prop)', false),
        onChange: (0, _storybook.action)('onChange'),
        onFocus: (0, _storybook.action)('onFocus'),
        onOpen: (0, _storybook.action)('onOpen'),
        renderItem: renderStyleItem,
        items: styleItems
      })
    )
  );
}).add('Style select (one style)', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/selects/style',
      propTables: [_style2.default]
    },
    _react2.default.createElement(
      'div',
      { style: { padding: '2em', backgroundColor: '#eee' } },
      _react2.default.createElement(_style2.default, {
        label: (0, _knobs.text)('label (prop)', 'This is the label'),
        placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
        transparent: (0, _knobs.boolean)('transparent (prop)', false),
        disabled: (0, _knobs.boolean)('disabled (prop)', false),
        onChange: (0, _storybook.action)('onChange'),
        onFocus: (0, _storybook.action)('onFocus'),
        onOpen: (0, _storybook.action)('onOpen'),
        renderItem: renderStyleItem,
        value: [styleItems[0]],
        items: styleItems
      })
    )
  );
}).add('Style select (multiple)', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/selects/style',
      propTables: [_style2.default]
    },
    _react2.default.createElement(
      'div',
      { style: { padding: '2em', backgroundColor: '#eee' } },
      _react2.default.createElement(_style2.default, {
        label: (0, _knobs.text)('label (prop)', 'This is the label'),
        placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
        transparent: (0, _knobs.boolean)('transparent (prop)', false),
        disabled: (0, _knobs.boolean)('disabled (prop)', false),
        onChange: (0, _storybook.action)('onChange'),
        onFocus: (0, _storybook.action)('onFocus'),
        onOpen: (0, _storybook.action)('onOpen'),
        renderItem: renderStyleItem,
        value: [styleItems[0], styleItems[2]],
        items: styleItems
      })
    )
  );
}).add('Searchable example', () => {
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(SearchableTest, null),
    'This text should be behind the dropdown'
  );
}).add('Radiobuttons',
// `
//   When an onInputChange is provided. Populate the items, and remember to set _loading prop_ when waiting for server.
// `,
() => {
  const value = radioItems[(0, _knobs.number)('value', 0, { range: true, min: 0, max: radioItems.length - 1 })];

  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/selects/radio',
      propTables: [_radio2.default]
    },
    _react2.default.createElement(_radio2.default, {
      items: radioItems,
      value: value,
      onChange: (0, _storybook.action)('onChange'),
      legend: (0, _knobs.text)('legend (prop)', 'Radio button select'),
      direction: (0, _knobs.select)('direction (prop)', [false, 'vertical', 'vertical'])
    })
  );
});