focus-components-v3/select-checkbox/index.js

Focus web components to build applications (based on Material Design)

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _inputCheckbox = require('../input-checkbox');

var _inputCheckbox2 = _interopRequireDefault(_inputCheckbox);

var _i18next = require('i18next');

var _i18next2 = _interopRequireDefault(_i18next);

var _pull = require('lodash/pull');

var _pull2 = _interopRequireDefault(_pull);

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

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

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) : _defaults(subClass, superClass); }

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

    function SelectCheckbox(props) {
        _classCallCheck(this, SelectCheckbox);

        var _this = _possibleConstructorReturn(this, _Component.call(this, props));

        _this.state = {
            selectedValues: _this.props.rawInputValue
        };
        return _this;
    }

    SelectCheckbox.prototype.componentWillReceiveProps = function componentWillReceiveProps(newProps) {
        if (newProps) {
            this.setState({ selectedValues: newProps.rawInputValue });
        }
    };

    /**
    * Get the value from the select in the DOM.
    * @return {string} value
    */


    SelectCheckbox.prototype.getValue = function getValue() {
        return this.state.selectedValues;
    };

    /**
     * Handle a change of value.
     * @param  {[type]} key       the key
     * @param  {[type]} newStatus the new status
     */


    SelectCheckbox.prototype._handleCheckboxChange = function _handleCheckboxChange(key, newStatus) {
        if (this.props.onChange) {
            this.props.onChange(key, newStatus);
            return;
        }
        var selectedValues = this.state.selectedValues;
        if (newStatus) {
            selectedValues.push(key);
        } else {
            (0, _pull2.default)(selectedValues, key);
        }
        this.setState({ value: selectedValues });
    };

    /**
     * Closure to capture key and checbox status.
     * @param  {[type]} key the key of checkbox
     * @return {[type]} status closure
     */


    SelectCheckbox.prototype._getCheckboxChangeHandler = function _getCheckboxChangeHandler(key) {
        var _this2 = this;

        return function (status) {
            _this2._handleCheckboxChange(key, status);
        };
    };

    /**
     * Render all selection checkbox.
     * @return {ReactDOMNode} list of ReactDomNode
     */


    SelectCheckbox.prototype.renderCheckboxes = function renderCheckboxes() {
        var _this3 = this;

        return this.props.values.map(function (val, idx) {
            var value = val[_this3.props.valueKey];
            var label = val[_this3.props.labelKey];
            var isChecked = 0 <= _this3.state.selectedValues.indexOf(value);
            return _react2.default.createElement(_inputCheckbox2.default, { key: idx, label: _i18next2.default.t(label), onChange: _this3._getCheckboxChangeHandler(value), rawInputValue: isChecked });
        });
    };

    SelectCheckbox.prototype.render = function render() {
        return _react2.default.createElement(
            'div',
            { 'data-focus': 'select-checkbox' },
            this.renderCheckboxes()
        );
    };

    return SelectCheckbox;
}(_react.Component);

SelectCheckbox.displayName = 'SelectCheckbox';
SelectCheckbox.defaultProps = {
    values: [], // all values
    rawInputValue: [], // selected values list
    valueKey: 'value', // key for the displayed value
    labelKey: 'label' // key for the displayed label
};
SelectCheckbox.propTypes = {
    values: _react.PropTypes.array,
    rawInputValue: _react.PropTypes.array,
    valueKey: _react.PropTypes.string,
    labelKey: _react.PropTypes.string,
    onChange: _react.PropTypes.func
};
exports.default = SelectCheckbox;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZyLUZSLmpzIl0sIm5hbWVzIjpbIlNlbGVjdENoZWNrYm94IiwicHJvcHMiLCJzdGF0ZSIsInNlbGVjdGVkVmFsdWVzIiwicmF3SW5wdXRWYWx1ZSIsImNvbXBvbmVudFdpbGxSZWNlaXZlUHJvcHMiLCJuZXdQcm9wcyIsInNldFN0YXRlIiwiZ2V0VmFsdWUiLCJfaGFuZGxlQ2hlY2tib3hDaGFuZ2UiLCJrZXkiLCJuZXdTdGF0dXMiLCJvbkNoYW5nZSIsInB1c2giLCJ2YWx1ZSIsIl9nZXRDaGVja2JveENoYW5nZUhhbmRsZXIiLCJzdGF0dXMiLCJyZW5kZXJDaGVja2JveGVzIiwidmFsdWVzIiwibWFwIiwidmFsIiwiaWR4IiwidmFsdWVLZXkiLCJsYWJlbCIsImxhYmVsS2V5IiwiaXNDaGVja2VkIiwiaW5kZXhPZiIsInQiLCJyZW5kZXIiLCJkaXNwbGF5TmFtZSIsImRlZmF1bHRQcm9wcyIsInByb3BUeXBlcyIsImFycmF5Iiwic3RyaW5nIiwiZnVuYyJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUE7Ozs7QUFDQTs7OztBQUNBOzs7O0FBQ0E7Ozs7Ozs7Ozs7Ozs7O0lBRU1BLGM7Y0FBQUEsYzs7QUFDRixhQURFQSxjQUNGLENBQVlDLEtBQVosRUFBbUI7QUFBQSw4QkFEakJELGNBQ2lCOztBQUFBLHFEQUNmLHNCQUFNQyxLQUFOLENBRGU7O0FBRWYsY0FBS0MsS0FBTCxHQUFhO0FBQ1RDLDRCQUFnQixNQUFLRixLQUFMLENBQVdHO0FBRGxCLFNBQWI7QUFGZTtBQUtsQjs7QUFOQ0osa0IsV0FRRksseUIsc0NBQTBCQyxRLEVBQVU7QUFDaEMsWUFBR0EsUUFBSCxFQUFhO0FBQ1QsaUJBQUtDLFFBQUwsQ0FBYyxFQUFDSixnQkFBZ0JHLFNBQVNGLGFBQTFCLEVBQWQ7QUFDSDtBQUNKLEs7O0FBRUQ7Ozs7OztBQWRFSixrQixXQWtCRlEsUSx1QkFBVztBQUNQLGVBQU8sS0FBS04sS0FBTCxDQUFXQyxjQUFsQjtBQUNILEs7O0FBRUQ7Ozs7Ozs7QUF0QkVILGtCLFdBMkJGUyxxQixrQ0FBc0JDLEcsRUFBS0MsUyxFQUFXO0FBQ2xDLFlBQUcsS0FBS1YsS0FBTCxDQUFXVyxRQUFkLEVBQXdCO0FBQ3BCLGlCQUFLWCxLQUFMLENBQVdXLFFBQVgsQ0FBb0JGLEdBQXBCLEVBQXlCQyxTQUF6QjtBQUNBO0FBQ0g7QUFDRCxZQUFNUixpQkFBaUIsS0FBS0QsS0FBTCxDQUFXQyxjQUFsQztBQUNBLFlBQUdRLFNBQUgsRUFBYztBQUNWUiwyQkFBZVUsSUFBZixDQUFvQkgsR0FBcEI7QUFDSCxTQUZELE1BRU87QUFDSCxnQ0FBS1AsY0FBTCxFQUFxQk8sR0FBckI7QUFDSDtBQUNELGFBQUtILFFBQUwsQ0FBYyxFQUFDTyxPQUFPWCxjQUFSLEVBQWQ7QUFDSCxLOztBQUVEOzs7Ozs7O0FBekNFSCxrQixXQThDRmUseUIsc0NBQTBCTCxHLEVBQUs7QUFBQTs7QUFDM0IsZUFBTyxVQUFDTSxNQUFELEVBQVk7QUFDZixtQkFBS1AscUJBQUwsQ0FBMkJDLEdBQTNCLEVBQWdDTSxNQUFoQztBQUNILFNBRkQ7QUFHSCxLOztBQUVEOzs7Ozs7QUFwREVoQixrQixXQXdERmlCLGdCLCtCQUFtQjtBQUFBOztBQUNmLGVBQU8sS0FBS2hCLEtBQUwsQ0FBV2lCLE1BQVgsQ0FBa0JDLEdBQWxCLENBQXNCLFVBQUNDLEdBQUQsRUFBTUMsR0FBTixFQUFjO0FBQ3ZDLGdCQUFNUCxRQUFRTSxJQUFJLE9BQUtuQixLQUFMLENBQVdxQixRQUFmLENBQWQ7QUFDQSxnQkFBTUMsUUFBUUgsSUFBSSxPQUFLbkIsS0FBTCxDQUFXdUIsUUFBZixDQUFkO0FBQ0EsZ0JBQU1DLFlBQVksS0FBSyxPQUFLdkIsS0FBTCxDQUFXQyxjQUFYLENBQTBCdUIsT0FBMUIsQ0FBa0NaLEtBQWxDLENBQXZCO0FBQ0EsbUJBQ0kseURBQVUsS0FBS08sR0FBZixFQUFvQixPQUFPLGtCQUFRTSxDQUFSLENBQVVKLEtBQVYsQ0FBM0IsRUFBNkMsVUFBVSxPQUFLUix5QkFBTCxDQUErQkQsS0FBL0IsQ0FBdkQsRUFBOEYsZUFBZVcsU0FBN0csR0FESjtBQUdILFNBUE0sQ0FBUDtBQVFILEs7O0FBakVDekIsa0IsV0FtRUY0QixNLHFCQUFTO0FBQ0wsZUFDSTtBQUFBO0FBQUEsY0FBSyxjQUFXLGlCQUFoQjtBQUNLLGlCQUFLWCxnQkFBTDtBQURMLFNBREo7QUFLSCxLOztXQXpFQ2pCLGM7OztBQTRFTkEsZUFBZTZCLFdBQWYsR0FBNkIsZ0JBQTdCO0FBQ0E3QixlQUFlOEIsWUFBZixHQUE4QjtBQUMxQlosWUFBUSxFQURrQixFQUNkO0FBQ1pkLG1CQUFlLEVBRlcsRUFFUDtBQUNuQmtCLGNBQVUsT0FIZ0IsRUFHUDtBQUNuQkUsY0FBVSxPQUpnQixDQUlSO0FBSlEsQ0FBOUI7QUFNQXhCLGVBQWUrQixTQUFmLEdBQTJCO0FBQ3ZCYixZQUFRLGlCQUFVYyxLQURLO0FBRXZCNUIsbUJBQWUsaUJBQVU0QixLQUZGO0FBR3ZCVixjQUFVLGlCQUFVVyxNQUhHO0FBSXZCVCxjQUFVLGlCQUFVUyxNQUpHO0FBS3ZCckIsY0FBVSxpQkFBVXNCO0FBTEcsQ0FBM0I7a0JBT2VsQyxjIiwiZmlsZSI6ImZyLUZSLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7Q29tcG9uZW50LCBQcm9wVHlwZXN9IGZyb20gJ3JlYWN0JztcclxuaW1wb3J0IENoZWNrYm94IGZyb20gJy4uL2lucHV0LWNoZWNrYm94JztcclxuaW1wb3J0IGkxOG5leHQgZnJvbSAnaTE4bmV4dCc7XHJcbmltcG9ydCBwdWxsIGZyb20gJ2xvZGFzaC9wdWxsJztcclxuXHJcbmNsYXNzIFNlbGVjdENoZWNrYm94IGV4dGVuZHMgQ29tcG9uZW50IHtcclxuICAgIGNvbnN0cnVjdG9yKHByb3BzKSB7XHJcbiAgICAgICAgc3VwZXIocHJvcHMpO1xyXG4gICAgICAgIHRoaXMuc3RhdGUgPSB7XHJcbiAgICAgICAgICAgIHNlbGVjdGVkVmFsdWVzOiB0aGlzLnByb3BzLnJhd0lucHV0VmFsdWVcclxuICAgICAgICB9O1xyXG4gICAgfVxyXG5cclxuICAgIGNvbXBvbmVudFdpbGxSZWNlaXZlUHJvcHMobmV3UHJvcHMpIHtcclxuICAgICAgICBpZihuZXdQcm9wcykge1xyXG4gICAgICAgICAgICB0aGlzLnNldFN0YXRlKHtzZWxlY3RlZFZhbHVlczogbmV3UHJvcHMucmF3SW5wdXRWYWx1ZX0pO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICAvKipcclxuICAgICogR2V0IHRoZSB2YWx1ZSBmcm9tIHRoZSBzZWxlY3QgaW4gdGhlIERPTS5cclxuICAgICogQHJldHVybiB7c3RyaW5nfSB2YWx1ZVxyXG4gICAgKi9cclxuICAgIGdldFZhbHVlKCkge1xyXG4gICAgICAgIHJldHVybiB0aGlzLnN0YXRlLnNlbGVjdGVkVmFsdWVzO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogSGFuZGxlIGEgY2hhbmdlIG9mIHZhbHVlLlxyXG4gICAgICogQHBhcmFtICB7W3R5cGVdfSBrZXkgICAgICAgdGhlIGtleVxyXG4gICAgICogQHBhcmFtICB7W3R5cGVdfSBuZXdTdGF0dXMgdGhlIG5ldyBzdGF0dXNcclxuICAgICAqL1xyXG4gICAgX2hhbmRsZUNoZWNrYm94Q2hhbmdlKGtleSwgbmV3U3RhdHVzKSB7XHJcbiAgICAgICAgaWYodGhpcy5wcm9wcy5vbkNoYW5nZSkge1xyXG4gICAgICAgICAgICB0aGlzLnByb3BzLm9uQ2hhbmdlKGtleSwgbmV3U3RhdHVzKTtcclxuICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgIH1cclxuICAgICAgICBjb25zdCBzZWxlY3RlZFZhbHVlcyA9IHRoaXMuc3RhdGUuc2VsZWN0ZWRWYWx1ZXM7XHJcbiAgICAgICAgaWYobmV3U3RhdHVzKSB7XHJcbiAgICAgICAgICAgIHNlbGVjdGVkVmFsdWVzLnB1c2goa2V5KTtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICBwdWxsKHNlbGVjdGVkVmFsdWVzLCBrZXkpO1xyXG4gICAgICAgIH1cclxuICAgICAgICB0aGlzLnNldFN0YXRlKHt2YWx1ZTogc2VsZWN0ZWRWYWx1ZXN9KTtcclxuICAgIH1cclxuXHJcbiAgICAvKipcclxuICAgICAqIENsb3N1cmUgdG8gY2FwdHVyZSBrZXkgYW5kIGNoZWNib3ggc3RhdHVzLlxyXG4gICAgICogQHBhcmFtICB7W3R5cGVdfSBrZXkgdGhlIGtleSBvZiBjaGVja2JveFxyXG4gICAgICogQHJldHVybiB7W3R5cGVdfSBzdGF0dXMgY2xvc3VyZVxyXG4gICAgICovXHJcbiAgICBfZ2V0Q2hlY2tib3hDaGFuZ2VIYW5kbGVyKGtleSkge1xyXG4gICAgICAgIHJldHVybiAoc3RhdHVzKSA9PiB7XHJcbiAgICAgICAgICAgIHRoaXMuX2hhbmRsZUNoZWNrYm94Q2hhbmdlKGtleSwgc3RhdHVzKTtcclxuICAgICAgICB9O1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogUmVuZGVyIGFsbCBzZWxlY3Rpb24gY2hlY2tib3guXHJcbiAgICAgKiBAcmV0dXJuIHtSZWFjdERPTU5vZGV9IGxpc3Qgb2YgUmVhY3REb21Ob2RlXHJcbiAgICAgKi9cclxuICAgIHJlbmRlckNoZWNrYm94ZXMoKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMucHJvcHMudmFsdWVzLm1hcCgodmFsLCBpZHgpID0+IHtcclxuICAgICAgICAgICAgY29uc3QgdmFsdWUgPSB2YWxbdGhpcy5wcm9wcy52YWx1ZUtleV07XHJcbiAgICAgICAgICAgIGNvbnN0IGxhYmVsID0gdmFsW3RoaXMucHJvcHMubGFiZWxLZXldO1xyXG4gICAgICAgICAgICBjb25zdCBpc0NoZWNrZWQgPSAwIDw9IHRoaXMuc3RhdGUuc2VsZWN0ZWRWYWx1ZXMuaW5kZXhPZih2YWx1ZSk7XHJcbiAgICAgICAgICAgIHJldHVybiAoXHJcbiAgICAgICAgICAgICAgICA8Q2hlY2tib3gga2V5PXtpZHh9IGxhYmVsPXtpMThuZXh0LnQobGFiZWwpfSBvbkNoYW5nZT17dGhpcy5fZ2V0Q2hlY2tib3hDaGFuZ2VIYW5kbGVyKHZhbHVlKX0gcmF3SW5wdXRWYWx1ZT17aXNDaGVja2VkfSAvPlxyXG4gICAgICAgICAgICApO1xyXG4gICAgICAgIH0pO1xyXG4gICAgfVxyXG5cclxuICAgIHJlbmRlcigpIHtcclxuICAgICAgICByZXR1cm4gKFxyXG4gICAgICAgICAgICA8ZGl2IGRhdGEtZm9jdXM9J3NlbGVjdC1jaGVja2JveCc+XHJcbiAgICAgICAgICAgICAgICB7dGhpcy5yZW5kZXJDaGVja2JveGVzKCl9XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICk7XHJcbiAgICB9XHJcbn1cclxuXHJcblNlbGVjdENoZWNrYm94LmRpc3BsYXlOYW1lID0gJ1NlbGVjdENoZWNrYm94JztcclxuU2VsZWN0Q2hlY2tib3guZGVmYXVsdFByb3BzID0ge1xyXG4gICAgdmFsdWVzOiBbXSwgLy8gYWxsIHZhbHVlc1xyXG4gICAgcmF3SW5wdXRWYWx1ZTogW10sIC8vIHNlbGVjdGVkIHZhbHVlcyBsaXN0XHJcbiAgICB2YWx1ZUtleTogJ3ZhbHVlJywgLy8ga2V5IGZvciB0aGUgZGlzcGxheWVkIHZhbHVlXHJcbiAgICBsYWJlbEtleTogJ2xhYmVsJyAvLyBrZXkgZm9yIHRoZSBkaXNwbGF5ZWQgbGFiZWxcclxufTtcclxuU2VsZWN0Q2hlY2tib3gucHJvcFR5cGVzID0ge1xyXG4gICAgdmFsdWVzOiBQcm9wVHlwZXMuYXJyYXksXHJcbiAgICByYXdJbnB1dFZhbHVlOiBQcm9wVHlwZXMuYXJyYXksXHJcbiAgICB2YWx1ZUtleTogUHJvcFR5cGVzLnN0cmluZyxcclxuICAgIGxhYmVsS2V5OiBQcm9wVHlwZXMuc3RyaW5nLFxyXG4gICAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jXHJcbn07XHJcbmV4cG9ydCBkZWZhdWx0IFNlbGVjdENoZWNrYm94O1xyXG4iXX0=