ssc-grid/lib/libs/Picker.js

React grid component for SSC 3.0

'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

exports['default'] = Picker;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _lodash = require('lodash.chunk');

var _lodash2 = _interopRequireDefault(_lodash);

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

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 = (0, _objectWithoutProperties3['default'])(_ref, ['className', 'options', 'optionsPerRow', 'value', 'renderHeader', 'renderOption', 'onChange']);

  var header = renderHeader && renderHeader(currentValue);
  var chunks = (0, _lodash2['default'])(options, optionsPerRow);
  // Error: Warning: Unknown prop `yearFormat` on <table> tag.
  delete other.yearFormat;
  return _react2['default'].createElement(
    'table',
    (0, _extends3['default'])({}, other, { className: className }),
    header && _react2['default'].createElement(
      'thead',
      null,
      _react2['default'].createElement(
        'tr',
        null,
        _react2['default'].createElement(
          'td',
          { colSpan: optionsPerRow },
          header
        )
      )
    ),
    _react2['default'].createElement(
      'tbody',
      null,
      chunks.map(function (opts, chunkIndex) {
        return _react2['default'].createElement(
          'tr',
          { key: chunkIndex },
          opts.map(function (option) {
            if (option.readOnly || !onChange) {
              return _react2['default'].createElement(
                'td',
                { key: option.value },
                renderOption(option, currentValue)
              );
            }
            return _react2['default'].createElement(
              'td',
              {
                key: option.value,
                style: { cursor: 'pointer' },
                onClick: function onClick() {
                  return onChange(option.value);
                }
              },
              renderOption(option, currentValue)
            );
          }),
          opts.length < optionsPerRow && _react2['default'].createElement('td', { colSpan: optionsPerRow - opts.length })
        );
      })
    )
  );
} /* eslint react/no-multi-comp: 0 */
// Copy from https://github.com/hnordt/react-picker/blob/master/index.babel.js

Picker.propTypes = {
  className: _propTypes2['default'].string,
  options: _propTypes2['default'].arrayOf(_propTypes2['default'].shape({
    label: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]).isRequired,
    value: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]).isRequired,
    readOnly: _propTypes2['default'].bool
  })).isRequired,
  optionsPerRow: _propTypes2['default'].number,
  value: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]),
  renderHeader: _propTypes2['default'].func,
  renderOption: _propTypes2['default'].func,
  onChange: _propTypes2['default'].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 _react2['default'].createElement(
        'span',
        { className: 'badge' },
        option.label
      );
    }
    return option.label;
  }
};
module.exports = exports['default'];