material-components
Version:
Stateless UI components for react that follow material design
178 lines (153 loc) • 6.62 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _input = require('./input');
var _input2 = _interopRequireDefault(_input);
var _menu = require('./menu');
var _menu2 = _interopRequireDefault(_menu);
var Select = (function (_Component) {
_inherits(Select, _Component);
function Select() {
_classCallCheck(this, Select);
_get(Object.getPrototypeOf(Select.prototype), 'constructor', this).apply(this, arguments);
}
_createClass(Select, [{
key: 'render',
value: function render() {
var _props = this.props;
var className = _props.className;
var isError = _props.isError;
var isOpen = _props.isOpen;
var isSuccess = _props.isSuccess;
var label = _props.label;
var message = _props.message;
var onChange = _props.onChange;
var onClose = _props.onClose;
var onOpen = _props.onOpen;
var options = _props.options;
var readOnly = _props.readOnly;
var selected = _props.selected;
var style = _props.style;
var value = _props.value;
var selectedIndex = 0;
var displayValue = '';
var menuItems = options.map(function (option, index) {
var isSelected = selected && option.label === selected.label || value !== null && option.value === value;
if (!selectedIndex && isSelected) {
selectedIndex = index;
displayValue = option.label;
}
return _react2['default'].createElement(
_menu2['default'].Item,
{
className: (0, _classnames2['default'])({ selected: isSelected }),
key: option.key || option.label,
onClick: function () {
return onChange({ target: option });
} },
option.label
);
});
var top = 10 - selectedIndex * 32;
return _react2['default'].createElement(
'div',
{
className: className,
style: Object.assign({
position: 'relative'
}, style) },
_react2['default'].createElement(
_menu2['default'],
{
style: {
position: 'relative',
top: top + 'px',
width: '100%'
},
isOpen: isOpen && !readOnly && !!menuItems,
onClose: onClose },
menuItems
),
_react2['default'].createElement(
'svg',
{
style: {
position: 'absolute',
right: '0px',
top: '28px'
},
fill: '#aaa',
height: '24',
viewBox: '0 0 24 24',
width: '24' },
_react2['default'].createElement('path', { d: 'M7 10l5 5 5-5z' }),
_react2['default'].createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' })
),
_react2['default'].createElement(_input2['default'], {
inputStyle: { cursor: 'pointer' },
isError: isError,
isSuccess: isSuccess,
label: label,
message: message,
onClick: onOpen,
readOnly: true,
value: '' + displayValue
})
);
}
}], [{
key: 'displayName',
value: 'Select',
enumerable: true
}, {
key: 'propTypes',
value: {
className: _propTypes2['default'].string,
isError: _propTypes2['default'].bool,
isOpen: _propTypes2['default'].bool,
isSuccess: _propTypes2['default'].bool,
label: _propTypes2['default'].string,
message: _propTypes2['default'].node,
onChange: _propTypes2['default'].func,
onClose: _propTypes2['default'].func,
onOpen: _propTypes2['default'].func,
options: _propTypes2['default'].array,
readOnly: _propTypes2['default'].bool,
selected: _propTypes2['default'].object,
style: _propTypes2['default'].object,
value: _propTypes2['default'].any
},
enumerable: true
}, {
key: 'defaultProps',
value: {
className: '',
isError: false,
isOpen: false,
isSuccess: false,
label: '',
message: '',
options: [],
readOnly: false,
selected: null,
style: {},
value: null
},
enumerable: true
}]);
return Select;
})(_react.Component);
exports['default'] = Select;
module.exports = exports['default'];