focus-components-v3/input-radio/index.js

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

'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 _dec, _class;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _i18next = require('i18next');

var _i18next2 = _interopRequireDefault(_i18next);

var _grid = require('../behaviours/grid');

var _grid2 = _interopRequireDefault(_grid);

var _material = require('../behaviours/material');

var _material2 = _interopRequireDefault(_material);

var _inputComponent = require('../behaviours/input-component');

var _isUndefined = require('lodash/isUndefined');

var _isUndefined2 = _interopRequireDefault(_isUndefined);

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 Radio = (_dec = (0, _material2.default)('inputMdl'), (0, _grid2.default)(_class = _dec(_class = (0, _inputComponent.InputBehaviour)(_class = function (_Component) {
    _inherits(Radio, _Component);

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

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

        _this.state = {
            isChecked: (0, _isUndefined2.default)(_this.props.rawInputValue) ? false : _this.props.rawInputValue
        };
        _this._handleonChange = _this._handleonChange.bind(_this);
        return _this;
    }

    Radio.prototype.componentWillReceiveProps = function componentWillReceiveProps(newProps) {
        this.setState({ isChecked: newProps.rawInputValue });
    };

    Radio.prototype.componentDidUpdate = function componentDidUpdate() {
        var inputMdl = this.refs.inputMdl;
        var isChecked = this.state.isChecked;

        if (inputMdl) {
            var classList = inputMdl.classList;

            if (isChecked === true) classList.add('is-checked');
            if (isChecked === false) classList.remove('is-checked');
        }
    };

    /**
    * Executed actions on change event.
    * @param  {event} event
    */


    Radio.prototype._handleonChange = function _handleonChange() {
        var _this2 = this;

        this.setState({ isChecked: !this.state.isChecked }, function () {
            if (_this2.props.onChange) {
                _this2.props.onChange(_this2.state.isChecked);
            }
        });
    };

    /**
    * Get the value from the input in  the DOM.
    * @returns The DOM node value.
    */


    Radio.prototype.getValue = function getValue() {
        return this.state.isChecked;
    };

    /**
    * Render the Checkbox HTML.
    * @return {VirtualDOM} - The virtual DOM of the checkbox.
    */


    Radio.prototype.render = function render() {
        var isChecked = this.state.isChecked;


        var validInputProps = this._checkProps(this.props);

        var _props = this.props,
            label = _props.label,
            onChange = _props.onChange,
            rawInputValue = _props.rawInputValue;

        // we use inputProps to be able to display 'checked' property. it is required to be able to use MDL.

        validInputProps.checked = isChecked ? 'checked' : undefined;

        return _react2.default.createElement(
            'label',
            { className: 'mdl-radio mdl-js-radio mdl-js-ripple-effect', 'data-focus': 'input-radio', ref: 'inputMdl' },
            _react2.default.createElement('input', _extends({ className: 'mdl-radio__button', type: 'radio', ref: 'inputRadio' }, validInputProps)),
            _react2.default.createElement(
                'span',
                { className: 'mdl-radio__label' },
                _i18next2.default.t(label)
            )
        );
    };

    return Radio;
}(_react.Component)) || _class) || _class) || _class);


Radio.displayName = 'InputRadio';
Radio.defaultProps = {
    rawInputValue: false
};
Radio.propTypes = {
    label: _react.PropTypes.string.isRequired,
    name: _react.PropTypes.string,
    rawInputValue: _react.PropTypes.bool,
    onChange: _react.PropTypes.func
};
exports.default = Radio;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZyLUZSLmpzIl0sIm5hbWVzIjpbIlJhZGlvIiwicHJvcHMiLCJzdGF0ZSIsImlzQ2hlY2tlZCIsInJhd0lucHV0VmFsdWUiLCJfaGFuZGxlb25DaGFuZ2UiLCJiaW5kIiwiY29tcG9uZW50V2lsbFJlY2VpdmVQcm9wcyIsIm5ld1Byb3BzIiwic2V0U3RhdGUiLCJjb21wb25lbnREaWRVcGRhdGUiLCJpbnB1dE1kbCIsInJlZnMiLCJjbGFzc0xpc3QiLCJhZGQiLCJyZW1vdmUiLCJvbkNoYW5nZSIsImdldFZhbHVlIiwicmVuZGVyIiwidmFsaWRJbnB1dFByb3BzIiwiX2NoZWNrUHJvcHMiLCJsYWJlbCIsImNoZWNrZWQiLCJ1bmRlZmluZWQiLCJ0IiwiZGlzcGxheU5hbWUiLCJkZWZhdWx0UHJvcHMiLCJwcm9wVHlwZXMiLCJzdHJpbmciLCJpc1JlcXVpcmVkIiwibmFtZSIsImJvb2wiLCJmdW5jIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7O0FBQUE7Ozs7QUFDQTs7OztBQUNBOzs7O0FBQ0E7Ozs7QUFDQTs7QUFDQTs7Ozs7Ozs7Ozs7Ozs7SUFLTUEsSyxXQUZMLHdCQUFrQixVQUFsQixDO2NBRUtBLEs7O0FBQ0YsYUFERUEsS0FDRixDQUFZQyxLQUFaLEVBQWtCO0FBQUEsOEJBRGhCRCxLQUNnQjs7QUFBQSxxREFDZCxzQkFBTUMsS0FBTixDQURjOztBQUVkLGNBQUtDLEtBQUwsR0FBYTtBQUNUQyx1QkFBVywyQkFBWSxNQUFLRixLQUFMLENBQVdHLGFBQXZCLElBQXdDLEtBQXhDLEdBQWdELE1BQUtILEtBQUwsQ0FBV0c7QUFEN0QsU0FBYjtBQUdBLGNBQUtDLGVBQUwsR0FBdUIsTUFBS0EsZUFBTCxDQUFxQkMsSUFBckIsT0FBdkI7QUFMYztBQU1qQjs7QUFQQ04sUyxXQVNGTyx5QixzQ0FBMEJDLFEsRUFBVTtBQUNoQyxhQUFLQyxRQUFMLENBQWMsRUFBQ04sV0FBV0ssU0FBU0osYUFBckIsRUFBZDtBQUNILEs7O0FBWENKLFMsV0FhRlUsa0IsaUNBQXFCO0FBQUEsWUFDVkMsUUFEVSxHQUNFLEtBQUtDLElBRFAsQ0FDVkQsUUFEVTtBQUFBLFlBRVZSLFNBRlUsR0FFRyxLQUFLRCxLQUZSLENBRVZDLFNBRlU7O0FBR2pCLFlBQUlRLFFBQUosRUFBYztBQUFBLGdCQUNIRSxTQURHLEdBQ1VGLFFBRFYsQ0FDSEUsU0FERzs7QUFFVixnQkFBSVYsY0FBYyxJQUFsQixFQUF3QlUsVUFBVUMsR0FBVixDQUFjLFlBQWQ7QUFDeEIsZ0JBQUlYLGNBQWMsS0FBbEIsRUFBeUJVLFVBQVVFLE1BQVYsQ0FBaUIsWUFBakI7QUFDNUI7QUFDSixLOztBQUVEOzs7Ozs7QUF2QkVmLFMsV0EyQkZLLGUsOEJBQWtCO0FBQUE7O0FBQ2QsYUFBS0ksUUFBTCxDQUFjLEVBQUNOLFdBQVcsQ0FBQyxLQUFLRCxLQUFMLENBQVdDLFNBQXhCLEVBQWQsRUFBa0QsWUFBTTtBQUNwRCxnQkFBRyxPQUFLRixLQUFMLENBQVdlLFFBQWQsRUFBd0I7QUFDcEIsdUJBQUtmLEtBQUwsQ0FBV2UsUUFBWCxDQUFvQixPQUFLZCxLQUFMLENBQVdDLFNBQS9CO0FBQ0g7QUFDSixTQUpEO0FBS0gsSzs7QUFFRDs7Ozs7O0FBbkNFSCxTLFdBdUNGaUIsUSx1QkFBVztBQUNQLGVBQU8sS0FBS2YsS0FBTCxDQUFXQyxTQUFsQjtBQUNILEs7O0FBRUQ7Ozs7OztBQTNDRUgsUyxXQStDRmtCLE0scUJBQVM7QUFBQSxZQUNFZixTQURGLEdBQ2UsS0FBS0QsS0FEcEIsQ0FDRUMsU0FERjs7O0FBR0wsWUFBTWdCLGtCQUFrQixLQUFLQyxXQUFMLENBQWlCLEtBQUtuQixLQUF0QixDQUF4Qjs7QUFISyxxQkFLb0MsS0FBS0EsS0FMekM7QUFBQSxZQUtFb0IsS0FMRixVQUtFQSxLQUxGO0FBQUEsWUFLU0wsUUFMVCxVQUtTQSxRQUxUO0FBQUEsWUFLbUJaLGFBTG5CLFVBS21CQSxhQUxuQjs7QUFPTDs7QUFDQWUsd0JBQWdCRyxPQUFoQixHQUEwQm5CLFlBQVksU0FBWixHQUF3Qm9CLFNBQWxEOztBQUVBLGVBQ0k7QUFBQTtBQUFBLGNBQU8sV0FBVSw2Q0FBakIsRUFBK0QsY0FBVyxhQUExRSxFQUF3RixLQUFJLFVBQTVGO0FBQ0ksOERBQU8sV0FBVSxtQkFBakIsRUFBcUMsTUFBSyxPQUExQyxFQUFrRCxLQUFJLFlBQXRELElBQXVFSixlQUF2RSxFQURKO0FBRUk7QUFBQTtBQUFBLGtCQUFNLFdBQVUsa0JBQWhCO0FBQW9DLGtDQUFRSyxDQUFSLENBQVVILEtBQVY7QUFBcEM7QUFGSixTQURKO0FBTUgsSzs7V0EvRENyQixLOzs7O0FBa0VOQSxNQUFNeUIsV0FBTixHQUFvQixZQUFwQjtBQUNBekIsTUFBTTBCLFlBQU4sR0FBcUI7QUFDakJ0QixtQkFBZTtBQURFLENBQXJCO0FBR0FKLE1BQU0yQixTQUFOLEdBQWtCO0FBQ2ROLFdBQU8saUJBQVVPLE1BQVYsQ0FBaUJDLFVBRFY7QUFFZEMsVUFBTSxpQkFBVUYsTUFGRjtBQUdkeEIsbUJBQWUsaUJBQVUyQixJQUhYO0FBSWRmLGNBQVUsaUJBQVVnQjtBQUpOLENBQWxCO2tCQU1laEMsSyIsImZpbGUiOiJmci1GUi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwge0NvbXBvbmVudCwgUHJvcFR5cGVzfSBmcm9tICdyZWFjdCc7XHJcbmltcG9ydCBpMThuZXh0IGZyb20gJ2kxOG5leHQnO1xyXG5pbXBvcnQgR3JpZEJlaGF2aW91ciBmcm9tICcuLi9iZWhhdmlvdXJzL2dyaWQnO1xyXG5pbXBvcnQgTWF0ZXJpYWxCZWhhdmlvdXIgZnJvbSAnLi4vYmVoYXZpb3Vycy9tYXRlcmlhbCc7XHJcbmltcG9ydCB7SW5wdXRCZWhhdmlvdXJ9IGZyb20gJy4uL2JlaGF2aW91cnMvaW5wdXQtY29tcG9uZW50JztcclxuaW1wb3J0IGlzVW5kZWZpbmVkIGZyb20gJ2xvZGFzaC9pc1VuZGVmaW5lZCc7XHJcblxyXG5AR3JpZEJlaGF2aW91clxyXG5ATWF0ZXJpYWxCZWhhdmlvdXIoJ2lucHV0TWRsJylcclxuQElucHV0QmVoYXZpb3VyXHJcbmNsYXNzIFJhZGlvIGV4dGVuZHMgQ29tcG9uZW50IHtcclxuICAgIGNvbnN0cnVjdG9yKHByb3BzKXtcclxuICAgICAgICBzdXBlcihwcm9wcylcclxuICAgICAgICB0aGlzLnN0YXRlID0ge1xyXG4gICAgICAgICAgICBpc0NoZWNrZWQ6IGlzVW5kZWZpbmVkKHRoaXMucHJvcHMucmF3SW5wdXRWYWx1ZSkgPyBmYWxzZSA6IHRoaXMucHJvcHMucmF3SW5wdXRWYWx1ZVxyXG4gICAgICAgIH07XHJcbiAgICAgICAgdGhpcy5faGFuZGxlb25DaGFuZ2UgPSB0aGlzLl9oYW5kbGVvbkNoYW5nZS5iaW5kKHRoaXMpO1xyXG4gICAgfVxyXG5cclxuICAgIGNvbXBvbmVudFdpbGxSZWNlaXZlUHJvcHMobmV3UHJvcHMpIHtcclxuICAgICAgICB0aGlzLnNldFN0YXRlKHtpc0NoZWNrZWQ6IG5ld1Byb3BzLnJhd0lucHV0VmFsdWV9KTtcclxuICAgIH1cclxuXHJcbiAgICBjb21wb25lbnREaWRVcGRhdGUoKSB7XHJcbiAgICAgICAgY29uc3Qge2lucHV0TWRsfSA9IHRoaXMucmVmcztcclxuICAgICAgICBjb25zdCB7aXNDaGVja2VkfSA9IHRoaXMuc3RhdGU7XHJcbiAgICAgICAgaWYgKGlucHV0TWRsKSB7XHJcbiAgICAgICAgICAgIGNvbnN0IHtjbGFzc0xpc3R9ID0gaW5wdXRNZGw7XHJcbiAgICAgICAgICAgIGlmIChpc0NoZWNrZWQgPT09IHRydWUpIGNsYXNzTGlzdC5hZGQoJ2lzLWNoZWNrZWQnKTtcclxuICAgICAgICAgICAgaWYgKGlzQ2hlY2tlZCA9PT0gZmFsc2UpIGNsYXNzTGlzdC5yZW1vdmUoJ2lzLWNoZWNrZWQnKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAqIEV4ZWN1dGVkIGFjdGlvbnMgb24gY2hhbmdlIGV2ZW50LlxyXG4gICAgKiBAcGFyYW0gIHtldmVudH0gZXZlbnRcclxuICAgICovXHJcbiAgICBfaGFuZGxlb25DaGFuZ2UoKSB7XHJcbiAgICAgICAgdGhpcy5zZXRTdGF0ZSh7aXNDaGVja2VkOiAhdGhpcy5zdGF0ZS5pc0NoZWNrZWR9LCAoKSA9PiB7XHJcbiAgICAgICAgICAgIGlmKHRoaXMucHJvcHMub25DaGFuZ2UpIHtcclxuICAgICAgICAgICAgICAgIHRoaXMucHJvcHMub25DaGFuZ2UodGhpcy5zdGF0ZS5pc0NoZWNrZWQpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAqIEdldCB0aGUgdmFsdWUgZnJvbSB0aGUgaW5wdXQgaW4gIHRoZSBET00uXHJcbiAgICAqIEByZXR1cm5zIFRoZSBET00gbm9kZSB2YWx1ZS5cclxuICAgICovXHJcbiAgICBnZXRWYWx1ZSgpIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5zdGF0ZS5pc0NoZWNrZWQ7XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAqIFJlbmRlciB0aGUgQ2hlY2tib3ggSFRNTC5cclxuICAgICogQHJldHVybiB7VmlydHVhbERPTX0gLSBUaGUgdmlydHVhbCBET00gb2YgdGhlIGNoZWNrYm94LlxyXG4gICAgKi9cclxuICAgIHJlbmRlcigpIHtcclxuICAgICAgICBjb25zdCB7aXNDaGVja2VkfSA9IHRoaXMuc3RhdGU7XHJcblxyXG4gICAgICAgIGNvbnN0IHZhbGlkSW5wdXRQcm9wcyA9IHRoaXMuX2NoZWNrUHJvcHModGhpcy5wcm9wcyk7XHJcblxyXG4gICAgICAgIGNvbnN0IHtsYWJlbCwgb25DaGFuZ2UsIHJhd0lucHV0VmFsdWV9ID0gdGhpcy5wcm9wcztcclxuXHJcbiAgICAgICAgLy8gd2UgdXNlIGlucHV0UHJvcHMgdG8gYmUgYWJsZSB0byBkaXNwbGF5ICdjaGVja2VkJyBwcm9wZXJ0eS4gaXQgaXMgcmVxdWlyZWQgdG8gYmUgYWJsZSB0byB1c2UgTURMLlxyXG4gICAgICAgIHZhbGlkSW5wdXRQcm9wcy5jaGVja2VkID0gaXNDaGVja2VkID8gJ2NoZWNrZWQnIDogdW5kZWZpbmVkO1xyXG5cclxuICAgICAgICByZXR1cm4gKFxyXG4gICAgICAgICAgICA8bGFiZWwgY2xhc3NOYW1lPSdtZGwtcmFkaW8gbWRsLWpzLXJhZGlvIG1kbC1qcy1yaXBwbGUtZWZmZWN0JyBkYXRhLWZvY3VzPVwiaW5wdXQtcmFkaW9cIiByZWY9J2lucHV0TWRsJz5cclxuICAgICAgICAgICAgICAgIDxpbnB1dCBjbGFzc05hbWU9J21kbC1yYWRpb19fYnV0dG9uJyB0eXBlPSdyYWRpbycgcmVmPSdpbnB1dFJhZGlvJyB7Li4udmFsaWRJbnB1dFByb3BzfS8+XHJcbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J21kbC1yYWRpb19fbGFiZWwnPntpMThuZXh0LnQobGFiZWwpfTwvc3Bhbj5cclxuICAgICAgICAgICAgPC9sYWJlbD5cclxuICAgICAgICApO1xyXG4gICAgfVxyXG59XHJcblxyXG5SYWRpby5kaXNwbGF5TmFtZSA9ICdJbnB1dFJhZGlvJztcclxuUmFkaW8uZGVmYXVsdFByb3BzID0ge1xyXG4gICAgcmF3SW5wdXRWYWx1ZTogZmFsc2VcclxufTtcclxuUmFkaW8ucHJvcFR5cGVzID0ge1xyXG4gICAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcclxuICAgIG5hbWU6IFByb3BUeXBlcy5zdHJpbmcsXHJcbiAgICByYXdJbnB1dFZhbHVlOiBQcm9wVHlwZXMuYm9vbCxcclxuICAgIG9uQ2hhbmdlOiBQcm9wVHlwZXMuZnVuY1xyXG59O1xyXG5leHBvcnQgZGVmYXVsdCBSYWRpbztcclxuIl19