yylib-quick-mobile/source/utils/ReactUtils.js

yylib-quick-mobile

'use strict';

var React = require('react');
var _ = require('lodash');

function getTheStyle(ele, rule) {
    if (ele.currentStyle) {
        return ele.currentStyle[rule];
    }
    return window.getComputedStyle(ele).getPropertyValue(rule);
}

function outerHeight(ele) {
    var height = ele.offsetHeight;
    var style = ele.currentStyle || getComputedStyle(ele);

    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
    return height;
}

function getNodeName(ele, name) {
    return ele.nodeName.toUpperCase();
}
function getChildrenlength(children) {
    var len = 1;
    if (Array.isArray(children)) {
        len = children.length;
    }
    return len;
}
function getSiblingPosition(index, len, siblingPosition) {
    if (len === 1) {
        siblingPosition.first = true;
        siblingPosition.last = true;
    } else {
        siblingPosition.first = index === 0;
        siblingPosition.last = index === len - 1;
    }
    return siblingPosition;
}
var ReactUtils = {
    loopAllChildren: function loopAllChildren(childs, callback, parent) {
        var loop = function loop(children, level, _parent) {
            var len = getChildrenlength(children);
            React.Children.forEach(children, function (item, index) {
                var pos = level + '-' + index;
                if (item.props.children) {
                    loop(item.props.children, pos, { node: item, pos: pos });
                }
                callback(item, index, pos, item.key || pos, getSiblingPosition(index, len, {}), _parent);
            });
        };
        loop(childs, 0, parent);
    },

    getChildrenText: function getChildrenText(elem, results) {
        var _results = results ? results : [];
        if (!React.isValidElement(elem) && (_.isString(elem) || !_.isNaN(elem))) {
            _results.push(elem === undefined ? "" : elem);
        } else {
            if (React.isValidElement(elem)) {
                var self = this;
                if (_.isArray(elem.props.children)) {
                    _.forEach(elem.props.children, function (item) {
                        self.getChildrenText(item, _results);
                    });
                } else {
                    self.getChildrenText(elem.props.children, _results);
                }
            }
        }
        return _results;
    },
    isArrayEqual: function isArrayEqual(arr1, arr2) {
        var result = _.isEqual(arr1, arr2);

        if (result == false && _.isArray(arr1) && _.isArray(arr2) && (arr1.length > 0 || arr2.length > 0)) {
            result = arr1.sort().toString() == arr2.sort().toString();
        }
        return result;
    },
    fillScreen: function fillScreen(elem, func) {
        var pageW = window.innerWidth,
            pageH = window.innerHeight;
        if (!_.isNumber(pageW) || !_.isNumber(pageH)) {
            if (document.compatMode == "CSS1Compat") {
                pageW = document.documentElement.clientWidth;
                pageH = document.documentElement.clientHeight;
            } else {
                pageW = document.body.clientWidth;
                pageH = document.body.clientHeight;
            }
        }
        if (_.isFunction(func)) {
            func.call(this, elem, pageW, pageH);
        } else {
            elem.style.width = pageW + 'px';
            elem.style.height = pageH + 'px';
        }
    },
    fillSpace: function fillSpace(element, target, func) {
        var _this = this;
        var parent = null;
        var isParent = false;
        if (target) {
            isParent = false;
        } else {
            parent = element.parentNode;
            isParent = true;
        }
        var overflow, maxHeight, maxWidth;

        if (getNodeName(parent) === 'FORM') {
            parent = parent.parentNode;
        }

        if (getNodeName(parent) === 'BODY') {
            parent.style.overflow = "hidden";
        } else {
            parent.style.overflow = "visible";
        }

        maxHeight = parent.clientHeight;
        maxWidth = parent.clientWidth;

        var siblings = Array.prototype.slice.call(element.parentNode.children);
        _.forEach(siblings, function (sibling) {
            if (getTheStyle(sibling, 'display') !== 'none') {
                var position = getTheStyle(sibling, 'position');
                if (position === "absolute" || position === "fixed") {
                    return;
                }
                maxHeight -= outerHeight(sibling);
            }
        });

        if (!isParent) {
            var children = Array.prototype.slice.call(parent.children);
            _.forEach(children, function (child) {
                maxHeight -= outerHeight(child);
            });
        }

        var elemW = parseInt(getTheStyle(element, 'width'));
        var elemH = parseInt(getTheStyle(element, 'height'));
        var noPaddingMaxW = Math.max(0, maxWidth - element.clientWidth + elemW);
        var noPaddingMaxH = Math.max(0, maxHeight - element.clientHeight + elemH);
        if (_.isFunction(func)) {
            func.call(this, element, parent, noPaddingMaxW, noPaddingMaxH);
        } else {
            if (getNodeName(parent) === "BODY") {
                if (parent.childNodes.length <= 1) {
                    this.fillScreen(element);
                } else {
                    var _otherH = 0;
                    var _children = Array.prototype.slice.call(parent.children);
                    _.forEach(_children, function (child) {
                        if (getTheStyle(child, 'display') !== 'none' && child != element) {
                            var position = getTheStyle(child, 'position');
                            if (position === "absolute") {} else {
                                _otherH += outerHeight(elem);
                            }
                        }
                    });

                    this.fillScreen(element, function (elem, pageW, pageH) {
                        elem.style.width = pageW + 'px';
                        elem.style.height = pageH - _otherH + 'px';
                    });
                }
                parent.style.overflow = "hidden";
            } else {
                element.style.width = noPaddingMaxW + 'px';
                element.style.height = noPaddingMaxH + 'px';
            }
        }
    }
};

module.exports = ReactUtils;