rmwc/Select/index.js

A thin React wrapper for Material Design (Web) Components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Select = exports.SelectNativeControl = exports.SelectBottomLine = exports.SelectSelectedText = exports.SelectSurface = exports.SelectRoot = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _mdc = require('@material/select/dist/mdc.select');

var _Base = require('../Base');

var _FloatingLabel = require('../FloatingLabel');

var _LineRipple = require('../LineRipple');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var SelectRoot = exports.SelectRoot = (0, _Base.simpleTag)({
  displayName: 'SelectRoot',
  classNames: function classNames(props) {
    return ['mdc-select', {
      'mdc-select--box': props.box
    }];
  },
  consumeProps: ['box'],
  defaultProps: {
    role: 'listbox'
  }
});

var SelectSurface = exports.SelectSurface = (0, _Base.simpleTag)({
  displayName: 'SelectSurface',
  classNames: 'mdc-select__surface'
});

var SelectSelectedText = exports.SelectSelectedText = (0, _Base.simpleTag)({
  displayName: 'SelectSelectedText',
  classNames: 'mdc-select__selected-text'
});

var SelectBottomLine = exports.SelectBottomLine = (0, _Base.simpleTag)({
  displayName: 'SelectBottomLine',
  classNames: 'mdc-select__bottom-line'
});

var SelectNativeControl = exports.SelectNativeControl = (0, _Base.simpleTag)({
  displayName: 'SelectNativeControl',
  tag: 'select',
  classNames: 'mdc-select__native-control'
});

/**
 * Takes multiple structures for options and returns [{label: 'label', value: 'value', ...rest}]
 */
var createSelectOptions = function createSelectOptions(options) {
  // preformatted array
  if (Array.isArray(options) && options[0] && _typeof(options[0]) === 'object') {
    return options.map(function (opt) {
      if ((typeof opt === 'undefined' ? 'undefined' : _typeof(opt)) !== 'object') {
        throw new Error('Encountered non object for Select ' + opt);
      }
      return Object.assign({}, opt, { options: createSelectOptions(opt.options) });
    });
  }

  // simple array
  if (Array.isArray(options)) {
    return options.map(function (value) {
      return { value: value, label: value };
    });
  }

  // value => label objects
  if ((typeof options === 'undefined' ? 'undefined' : _typeof(options)) === 'object') {
    return Object.keys(options).map(function (value) {
      return {
        value: value,
        label: options[value]
      };
    });
  }

  // default, just return
  return options;
};

var Select = exports.Select = function (_withFoundation) {
  _inherits(Select, _withFoundation);

  function Select() {
    _classCallCheck(this, Select);

    return _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).apply(this, arguments));
  }

  _createClass(Select, [{
    key: 'syncWithProps',
    value: function syncWithProps(nextProps) {
      var _this2 = this;

      //disabled
      (0, _Base.syncFoundationProp)(nextProps.disabled, this.disabled, function () {
        return _this2.disabled = !!nextProps.disabled;
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          placeholder = _props.placeholder,
          children = _props.children,
          value = _props.value,
          _props$label = _props.label,
          label = _props$label === undefined ? '' : _props$label,
          _props$options = _props.options,
          options = _props$options === undefined ? [] : _props$options,
          box = _props.box,
          className = _props.className,
          _props$rootProps = _props.rootProps,
          rootProps = _props$rootProps === undefined ? {} : _props$rootProps,
          apiRef = _props.apiRef,
          rest = _objectWithoutProperties(_props, ['placeholder', 'children', 'value', 'label', 'options', 'box', 'className', 'rootProps', 'apiRef']);

      var root_ = this.foundationRefs.root_;

      var selectOptions = createSelectOptions(options);

      return React.createElement(
        SelectRoot,
        Object.assign({}, rootProps, {
          box: box,
          elementRef: root_,
          className: className
        }),
        React.createElement(
          SelectNativeControl,
          Object.assign({}, rest, {
            value: value,
            defaultValue: value ? undefined : ''
          }),
          (!!placeholder || placeholder === '') && React.createElement(
            'option',
            { value: '', disabled: placeholder === '' },
            placeholder
          ),
          selectOptions && selectOptions.map(function (_ref, i) {
            var label = _ref.label,
                options = _ref.options,
                option = _objectWithoutProperties(_ref, ['label', 'options']);

            if (options) {
              return React.createElement(
                'optgroup',
                { label: label, key: label },
                options.map(function (_ref2, i) {
                  var label = _ref2.label,
                      option = _objectWithoutProperties(_ref2, ['label']);

                  return React.createElement(
                    'option',
                    Object.assign({ key: label }, option, { value: option.value }),
                    label
                  );
                })
              );
            }

            return React.createElement(
              'option',
              Object.assign({ key: label }, option, { value: option.value }),
              label
            );
          }),
          children
        ),
        React.createElement(
          _FloatingLabel.FloatingLabel,
          null,
          label
        ),
        React.createElement(_LineRipple.LineRipple, null)
      );
    }
  }]);

  return Select;
}((0, _Base.withFoundation)({
  constructor: _mdc.MDCSelect,
  adapter: {
    getValue: function getValue() {
      var value = this.nativeControl_.value;
      return value === '' && this.props.placeholder ? ' ' : value;
    }
  }
}));

Object.defineProperty(Select, 'displayName', {
  enumerable: true,
  writable: true,
  value: 'Select'
});
exports.default = Select;