react-toggle-pattern/lib/ToggleAndDisplayPattern.js

React Component that provide toggle pattern

"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 _matchProps = require("./utils/match-props");

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

var React = require("react");
var findDOMNode = require("react-dom").findDOMNode;

var ToggleAndDisplayPattern = function (_React$Component) {
    _inherits(ToggleAndDisplayPattern, _React$Component);

    function ToggleAndDisplayPattern() {
        var _Object$getPrototypeO;

        _classCallCheck(this, ToggleAndDisplayPattern);

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

        var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ToggleAndDisplayPattern)).call.apply(_Object$getPrototypeO, [this].concat(args)));

        _this.wrapper = null;
        _this._activeChildren = [];
        _this._hiddenChildren = [];
        return _this;
    }

    _createClass(ToggleAndDisplayPattern, [{
        key: "getFlagNames",
        value: function getFlagNames() {
            return Object.keys(this.props).filter(function (key) {
                return key !== "children";
            });
        }

        /**
         * get components from `children` that matches key and value with own props.
         * @returns {ReactComponent[]}
         */

    }, {
        key: "mapComponents",
        value: function mapComponents() {
            var _this2 = this;

            var children = [].concat(this.props.children);
            var flagKeyNames = this.getFlagNames();
            return children.map(function (child, index) {
                if (!child.props) {
                    return null;
                }
                // all match
                if ((0, _matchProps.matchAnd)(flagKeyNames, _this2.props, child.props)) {
                    var newProps = {
                        key: index
                    };
                    newProps.ref = function (c) {
                        if (typeof child.ref === 'function') {
                            child.ref(c);
                        }
                        if (c) {
                            _this2._activeChildren.push(c);
                        }
                    };
                    return React.cloneElement(child, newProps);
                } else {
                    var _newProps = {
                        key: index
                    };
                    _newProps.ref = function (c) {
                        if (typeof child.ref === 'function') {
                            child.ref(c);
                        }
                        if (c) {
                            _this2._hiddenChildren.push(c);
                        }
                    };
                    return React.cloneElement(child, _newProps);
                }
            });
        }
    }, {
        key: "componentWillUpdate",
        value: function componentWillUpdate() {
            this._activeChildren = [];
            this._hiddenChildren = [];
        }
    }, {
        key: "componentDidMount",
        value: function componentDidMount() {
            this._updatePattens();
        }
    }, {
        key: "componentDidUpdate",
        value: function componentDidUpdate() {
            this._updatePattens();
        }
    }, {
        key: "render",
        value: function render() {
            var _this3 = this;

            var components = this.mapComponents();
            if (components.length === 0) {
                return null;
            }
            return React.createElement(
                "span",
                {
                    className: "TogglePattern ToggleAndDisplayPattern",
                    ref: function ref(c) {
                        return _this3.wrapper = c;
                    } },
                components
            );
        }
    }, {
        key: "_updatePattens",
        value: function _updatePattens() {
            var wrapper = findDOMNode(this.wrapper);
            var isActiveWrapper = false;
            // include focus element?
            if (wrapper) {
                var activeElement = document.activeElement;
                isActiveWrapper = wrapper.contains(activeElement);
            }
            this._activeChildren.forEach(function (child) {
                var childDOM = findDOMNode(child);
                if (childDOM) {
                    childDOM.hidden = false;
                }
            });
            this._hiddenChildren.forEach(function (child) {
                var childDOM = findDOMNode(child);
                if (childDOM) {
                    childDOM.hidden = true;
                }
            });
            // move to focus
            if (isActiveWrapper && this._activeChildren.length === 1) {
                var activeDOM = findDOMNode(this._activeChildren[0]);
                if (activeDOM && !activeDOM.contains(document.activeElement)) {
                    activeDOM.focus();
                }
            }
        }
    }]);

    return ToggleAndDisplayPattern;
}(React.Component);

exports.default = ToggleAndDisplayPattern;
//# sourceMappingURL=ToggleAndDisplayPattern.js.map