d2-ui/lib/form-fields/drop-down.js

d2-ui

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactTapEventPlugin = require('react-tap-event-plugin');

var _reactTapEventPlugin2 = _interopRequireDefault(_reactTapEventPlugin);

var _selectField = require('material-ui/lib/select-field');

var _selectField2 = _interopRequireDefault(_selectField);

var _menuItem = require('material-ui/lib/menus/menu-item');

var _menuItem2 = _interopRequireDefault(_menuItem);

var _muiTheme = require('./mui-theme.mixin');

var _muiTheme2 = _interopRequireDefault(_muiTheme);

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

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; }

(0, _reactTapEventPlugin2.default)();

exports.default = _react2.default.createClass({
    displayName: 'drop-down',

    propTypes: {
        defaultValue: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number, _react2.default.PropTypes.bool]),
        value: _react2.default.PropTypes.string.isRequired,
        onFocus: _react2.default.PropTypes.func,
        onBlur: _react2.default.PropTypes.func,
        onChange: _react2.default.PropTypes.func,
        menuItems: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.array, _react2.default.PropTypes.object]),
        includeEmpty: _react2.default.PropTypes.bool,
        emptyLabel: _react2.default.PropTypes.string,
        noOptionsLabel: _react2.default.PropTypes.string
    },

    mixins: [_muiTheme2.default],

    getDefaultProps: function getDefaultProps() {
        return {
            includeEmpty: false,
            emptyLabel: ''
        };
    },
    renderMenuItems: function renderMenuItems(menuItems) {
        if (this.props.includeEmpty) {
            menuItems.unshift({ id: 'null', displayName: this.props.emptyLabel });
        }

        return menuItems.map(function (item) {
            return _react2.default.createElement(_menuItem2.default, { key: item.id, value: item.id, primaryText: item.displayName });
        });
    },
    renderEmptyItem: function renderEmptyItem() {
        if (this.props.includeEmpty) {
            return _react2.default.createElement(_menuItem2.default, { value: 'null', primaryText: this.props.emptyLabel });
        }
    },
    render: function render() {
        var _props = this.props;
        var onFocus = _props.onFocus;
        var onBlur = _props.onBlur;
        var onChange = _props.onChange;
        var value = _props.value;
        var disabled = _props.disabled;
        var menuItems = _props.menuItems;

        var other = _objectWithoutProperties(_props, ['onFocus', 'onBlur', 'onChange', 'value', 'disabled', 'menuItems']);

        var menuItemArray = Array.isArray(menuItems) && menuItems || menuItems.toArray();
        var hasOptions = menuItemArray.length > 0;

        return _react2.default.createElement(
            _selectField2.default,
            _extends({
                value: hasOptions ? this.props.value : 1,
                onChange: this.handleChange,
                disabled: !hasOptions
            }, other),
            hasOptions ? this.renderMenuItems(menuItemArray) : _react2.default.createElement(_menuItem2.default, { value: 1, primaryText: this.props.noOptionsLabel || '-' })
        );
    },
    handleChange: function handleChange(event, index, value) {
        this.props.onChange({ target: { value: value } });
    }
});