react-native-navigation-drilldown/dist/DrilldownList.js

Drilldown screens to use with react-navigation

"use strict";
var __extends = (this && this.__extends) || (function () {
    var 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 function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_native_1 = require("react-native");
var react_native_portal_1 = require("react-native-portal");
var includesItem_1 = require("./includesItem");
var includesSelected_1 = require("./includesSelected");
var ItemView_1 = require("./ItemView");
var toggleSubtree_1 = require("./toggleSubtree");
var types_1 = require("./types");
var updateSelection_1 = require("./updateSelection");
var ITEM_HEIGHT = 48;
var KEY_EXTRACTOR = function (item) { return item.id.toString(); };
var DrilldownList = (function (_super) {
    __extends(DrilldownList, _super);
    function DrilldownList() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = { drilledItem: null };
        _this.getItemLayout = function (data, index) { return ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index: index }); };
        _this.onItemSelected = function (item) {
            var _a = _this.props, onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? null : _b, multi = _a.multi, goBack = _a.goBack, rootOptions = _a.rootOptions;
            if (onChange) {
                onChange(updateSelection_1.default(rootOptions, item, value, !!multi));
            }
            if (!multi) {
                goBack(_this.props.rootDrilldownScreenKey);
            }
        };
        _this.onItemDrilled = function (drilledItem) {
            var _a = _this.props, multi = _a.multi, navigate = _a.navigate, rootDrilldownScreenKey = _a.rootDrilldownScreenKey, _b = _a.routeName, routeName = _b === void 0 ? types_1.DEFAULT_ROUTE_NAME : _b;
            _this.setState({ drilledItem: drilledItem }, function () { return navigate({
                routeName: routeName,
                key: rootDrilldownScreenKey + "_" + drilledItem.id,
                params: { drilldownItemId: drilledItem.id, rootDrilldownScreenKey: rootDrilldownScreenKey, multi: multi },
            }); });
        };
        _this.onHeaderPress = function (item) {
            var _a = _this.props, onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? null : _b;
            if (onChange) {
                var newSelection = toggleSubtree_1.default(item, value);
                onChange(newSelection);
            }
        };
        _this.renderHeader = function () {
            var _a = _this.props, itemView = _a.itemView, itemViewProps = _a.itemViewProps, options = _a.options, multi = _a.multi, displayCategoryToggles = _a.displayCategoryToggles, _b = _a.value, value = _b === void 0 ? null : _b;
            var ItemViewComponent = itemView || ItemView_1.default;
            var selfSelected = includesItem_1.default(options, value);
            if (!multi || !displayCategoryToggles) {
                return null;
            }
            return (<ItemViewComponent {...itemViewProps} isLeaf item={options} selfSelected={selfSelected} subtreeSelected={false} onPress={_this.onHeaderPress}/>);
        };
        _this.renderListItem = function (_a) {
            var item = _a.item;
            var _b = _this.props, itemView = _b.itemView, itemViewProps = _b.itemViewProps, options = _b.options, _c = _b.value, value = _c === void 0 ? null : _c;
            var isSelf = item.id === options.id;
            var isLeaf = isSelf || !item.children;
            var ItemViewComponent = itemView || ItemView_1.default;
            var subtreeSelected = includesSelected_1.default(item, value);
            var selfSelected = Array.isArray(value) ? value.some(function (i) { return i.id === item.id; }) : (!!value && value.id === item.id);
            return (<ItemViewComponent {...itemViewProps} key={item.id} item={item} isLeaf={isLeaf} selfSelected={selfSelected} subtreeSelected={subtreeSelected} onPress={isLeaf ? _this.onItemSelected : _this.onItemDrilled}/>);
        };
        return _this;
    }
    DrilldownList.prototype.render = function () {
        var drilledItem = this.state.drilledItem;
        return (<react_native_1.View>
        <react_native_1.FlatList ListHeaderComponent={this.renderHeader} data={this.props.options.children} extraData={this.props.value} getItemLayout={this.getItemLayout} renderItem={this.renderListItem} keyExtractor={KEY_EXTRACTOR}/>
        {drilledItem &&
            <react_native_portal_1.BlackPortal name={"drilldownPortal_" + drilledItem.id}>
            <DrilldownList {...this.props} options={drilledItem}/>
          </react_native_portal_1.BlackPortal>}
      </react_native_1.View>);
    };
    DrilldownList.defaultProps = {
        value: null,
    };
    return DrilldownList;
}(React.PureComponent));
exports.default = DrilldownList;
//# sourceMappingURL=DrilldownList.js.map