@doreamonjs/gate/lib/kind/console/index.js

gate for doreamonjs

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PageTransition = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const dva_1 = require("dva");
const antd_1 = require("antd");
const react_router_dom_1 = require("react-router-dom");
const doreamon_1 = tslib_1.__importDefault(require("@zodash/doreamon"));
const react_transition_group_1 = require("react-transition-group");
const components_1 = require("@doreamonjs/components");
const sider_1 = tslib_1.__importDefault(require("../../common/layout/sider"));
const header_1 = tslib_1.__importDefault(require("../../common/layout/header"));
const content_1 = tslib_1.__importDefault(require("../../common/layout/content"));
const navbar_1 = tslib_1.__importDefault(require("../../common/layout/navbar"));
const alert_1 = tslib_1.__importDefault(require("../../common/layout/alert"));
const global_1 = tslib_1.__importDefault(require("../../common/global"));
const constants_1 = require("../../common/constants");
require("./index.less");
const componentName = 'doreamonjs-design-gate-kind-console';
const onScroll = doreamon_1.default.func.debounce(function (element, options) {
    const { scrollTop, scrollHeight, offsetHeight } = element;
    const { isTop, isBottom, threshold = 0, onScrollTop, onScrollBottom, onScrollIdle, } = options;
    const isIdle = !isTop && !isBottom;
    if (onScrollBottom &&
        scrollTop + offsetHeight + threshold >= scrollHeight) {
        onScrollBottom();
    }
    else if (onScrollTop && scrollTop === 0) {
        onScrollTop();
    }
    else if (onScrollIdle && !isIdle) {
        onScrollIdle();
    }
}, 100);
class ConsoleLayout extends react_1.PureComponent {
    constructor() {
        super(...arguments);
        this.scrollContainer = null;
        this.onScroll = () => {
            onScroll(this.scrollContainer, {
                isTop: this.props.isTop,
                isBottom: this.props.isBottom,
                threshold: this.props.threshold,
                onScrollTop: this.props.onScrollTop,
                onScrollBottom: this.props.onScrollBottom,
                onScrollIdle: this.props.onScrollIdle,
            });
        };
    }
    componentDidMount() {
        this.scrollContainer = document.querySelector(`.${constants_1.scrollContainerClassName}`);
    }
    render() {
        const { isForbidden, children } = this.props;
        if (isForbidden) {
            return react_1.default.createElement(components_1.Exception.NotAllowed, null);
        }
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(antd_1.Layout, { className: `${componentName} normal`, onScroll: this.onScroll },
                react_1.default.createElement(global_1.default, null),
                react_1.default.createElement(sider_1.default, null),
                react_1.default.createElement(antd_1.Layout, { className: `scrollContainer ${constants_1.scrollContainerClassName}` },
                    react_1.default.createElement(header_1.default, null),
                    react_1.default.createElement(alert_1.default, null),
                    react_1.default.createElement(navbar_1.default, null),
                    react_1.default.createElement(content_1.default, null, children)))));
    }
}
const mapState = ({ loading, applications, menus, scrolls, }) => {
    // 加载完成
    const isLoaded = applications.loaded;
    // 没有菜单
    const noMenus = menus.data.length === 0;
    const isForbidden = isLoaded && noMenus;
    return {
        // loading: loading.models.applications,
        isForbidden,
        threshold: scrolls.threshold,
        isTop: scrolls.isTop,
        isBottom: scrolls.isBottom,
    };
};
const mapActions = (dispatch) => ({
    onScrollTop: () => dispatch({ type: 'scrolls/at/top' }),
    onScrollBottom: () => dispatch({ type: 'scrolls/at/bottom' }),
    onScrollIdle: () => dispatch({ type: 'scrolls/idle' }),
});
exports.default = react_router_dom_1.withRouter(dva_1.connect(mapState, mapActions)(ConsoleLayout));
// @TODO cannot handle react transition group, should make it
const PageTransition = ({ children }) => (react_1.default.createElement(react_transition_group_1.TransitionGroup, null,
    react_1.default.createElement(react_transition_group_1.CSSTransition, { key: location.pathname, classNames: "fade", timeout: 300, appear: true, exit: false }, children)));
exports.PageTransition = PageTransition;
//# sourceMappingURL=index.js.map