ssc-grid/es/libs/Picker.js

React grid component for SSC 3.0

import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
/* eslint react/no-multi-comp: 0 */
// Copy from https://github.com/hnordt/react-picker/blob/master/index.babel.js

import React from 'react';
import PropTypes from 'prop-types';
import chunk from 'lodash.chunk';

export default function Picker(_ref) {
  var className = _ref.className,
      options = _ref.options,
      optionsPerRow = _ref.optionsPerRow,
      currentValue = _ref.value,
      renderHeader = _ref.renderHeader,
      renderOption = _ref.renderOption,
      onChange = _ref.onChange,
      other = _objectWithoutProperties(_ref, ['className', 'options', 'optionsPerRow', 'value', 'renderHeader', 'renderOption', 'onChange']);

  var header = renderHeader && renderHeader(currentValue);
  var chunks = chunk(options, optionsPerRow);
  // Error: Warning: Unknown prop `yearFormat` on <table> tag.
  delete other.yearFormat;
  return React.createElement(
    'table',
    _extends({}, other, { className: className }),
    header && React.createElement(
      'thead',
      null,
      React.createElement(
        'tr',
        null,
        React.createElement(
          'td',
          { colSpan: optionsPerRow },
          header
        )
      )
    ),
    React.createElement(
      'tbody',
      null,
      chunks.map(function (opts, chunkIndex) {
        return React.createElement(
          'tr',
          { key: chunkIndex },
          opts.map(function (option) {
            if (option.readOnly || !onChange) {
              return React.createElement(
                'td',
                { key: option.value },
                renderOption(option, currentValue)
              );
            }
            return React.createElement(
              'td',
              {
                key: option.value,
                style: { cursor: 'pointer' },
                onClick: function onClick() {
                  return onChange(option.value);
                }
              },
              renderOption(option, currentValue)
            );
          }),
          opts.length < optionsPerRow && React.createElement('td', { colSpan: optionsPerRow - opts.length })
        );
      })
    )
  );
}

Picker.propTypes = {
  className: PropTypes.string,
  options: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    readOnly: PropTypes.bool
  })).isRequired,
  optionsPerRow: PropTypes.number,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  renderHeader: PropTypes.func,
  renderOption: PropTypes.func,
  onChange: PropTypes.func
};

Picker.defaultProps = {
  className: 'smalldots-react-picker table table-condensed table-striped text-center',
  optionsPerRow: 5,
  renderOption: function renderOption(option, currentValue) {
    if (option.value === currentValue) {
      return React.createElement(
        'span',
        { className: 'badge' },
        option.label
      );
    }
    return option.label;
  }
};