d2-ui/lib/form-fields/MultiToggle.js

d2-ui

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

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

import React, { Component } from 'react';
import PropTypes from 'prop-types';

// Material UI
import Checkbox from 'material-ui/Checkbox';

var MultiToggle = function (_Component) {
    _inherits(MultiToggle, _Component);

    function MultiToggle() {
        var _ref;

        var _temp, _this, _ret;

        _classCallCheck(this, MultiToggle);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MultiToggle.__proto__ || Object.getPrototypeOf(MultiToggle)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
            values: _this.props.items.reduce(function (prev, curr) {
                if (curr.value) {
                    prev.push(curr.name);
                }
                return prev;
            }, [])
        }, _temp), _possibleConstructorReturn(_this, _ret);
    }

    _createClass(MultiToggle, [{
        key: 'handleToggle',
        value: function handleToggle(value, event, checked) {
            var _this2 = this;

            this.setState(function (oldState) {
                if (checked) {
                    if (oldState.values.indexOf(value) === -1) {
                        oldState.values.push(value);
                    }
                } else if (oldState.values.indexOf(value) !== -1) {
                    oldState.values.splice(oldState.values.indexOf(value), 1);
                }
                return oldState;
            }, function () {
                _this2.props.onChange({ target: { value: _this2.state.values } });
            });
        }
    }, {
        key: 'render',
        value: function render() {
            var _this3 = this;

            var style = Object.assign({}, this.context.muiTheme.forms, this.props.style);

            return React.createElement(
                'div',
                null,
                React.createElement(
                    'div',
                    { style: { marginTop: 16, marginBottom: 8 } },
                    this.props.label
                ),
                this.props.items.map(function (item) {
                    var togglor = _this3.handleToggle.bind(_this3, item.name);

                    return React.createElement(Checkbox, {
                        key: item.name,
                        name: item.name,
                        value: 'true',
                        defaultChecked: item.value === true,
                        label: item.text,
                        onCheck: togglor,
                        style: style,
                        labelPosition: 'right'
                    });
                })
            );
        }
    }]);

    return MultiToggle;
}(Component);

MultiToggle.propTypes = {
    label: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    items: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string.isRequired,
        value: PropTypes.bool,
        text: PropTypes.string.isRequired
    })),
    style: PropTypes.object
};

MultiToggle.contextTypes = {
    muiTheme: PropTypes.object
};

export default MultiToggle;