kubric/dist/bars/BottomBar.js

Android's co-ordinator layout ported to work on react native (iOS and Android)

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_native_1 = require("react-native");
var AppBar_1 = require("./AppBar");
var BarStyles_1 = require("./BarStyles");
var Constants_1 = require("../resources/Constants");
var Behaviours_1 = require("../Behaviours");
var CLBottomBar = /** @class */ (function (_super) {
    __extends(CLBottomBar, _super);
    function CLBottomBar() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.containerStyle = function () { return ({ top: Constants_1.SEPARATOR_HEIGHT }); };
        _this.shadowImageSource = function () { return require('../resources/assets/shadow-bottom.png'); };
        _this.separatorStyle = function () { return BarStyles_1.styles.topShadow; };
        /**
         * V4TODO: There is a bug in bottom bar.
         * Item placement should be controlled with 'bottom' position instead of 'top' position.
         */
        _this.renderItems = function (scrollBehaviourOffset) {
            var children = [];
            var index = 0;
            var topPosition = (_this.props.safeAreaInsets && _this.props.safeAreaInsets.top) || 0;
            for (var _i = 0, _a = _this.props.scrollBehaviours; _i < _a.length; _i++) {
                var scrollBehaviour = _a[_i];
                var content = _this.props.contentRenderer(index, scrollBehaviourOffset);
                var itemMinHeight = _this.props.scrollBehaviours[index].minHeight ? _this.props.scrollBehaviours[index].minHeight : 0;
                var itemMaxHeight = _this.props.scrollBehaviours[index].maxHeight;
                var alpha = scrollBehaviour.scrollEffect & Behaviours_1.CLScrollEffect.FADE
                    ? scrollBehaviourOffset.interpolate({
                        inputRange: [0, 0.5, 0.75],
                        outputRange: [1, 0.25, 0],
                        extrapolate: 'clamp'
                    })
                    : new react_native_1.Animated.Value(1);
                var height = scrollBehaviour.scrollEffect & Behaviours_1.CLScrollEffect.COLLAPSE
                    ? scrollBehaviourOffset.interpolate({
                        inputRange: [0, 1],
                        outputRange: [itemMaxHeight, itemMinHeight],
                        extrapolate: 'clamp'
                    })
                    : new react_native_1.Animated.Value(itemMaxHeight);
                var item = (<react_native_1.Animated.View key={index} style={[
                    BarStyles_1.styles.barItemContainer,
                    {
                        top: topPosition,
                        opacity: alpha,
                        height: height,
                        zIndex: index
                    }
                ]}>
            {content}
          </react_native_1.Animated.View>);
                children.push(item);
                topPosition += itemMaxHeight;
                index++;
            }
            return children;
        };
        return _this;
    }
    return CLBottomBar;
}(AppBar_1.CLAppBar));
exports.CLBottomBar = CLBottomBar;
//# sourceMappingURL=BottomBar.js.map