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

gate for doreamonjs

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PageTransition = void 0;
const react_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 = __importDefault(require("@zodash/doreamon"));
const react_transition_group_1 = require("react-transition-group");
const global_1 = __importDefault(require("../../common/global"));
const content_1 = __importDefault(require("../../common/layout/content"));
const header_1 = __importDefault(require("./components/header"));
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 HeaderLayout 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 { children } = this.props;
        return (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(antd_1.Layout, { className: `scrollContainer ${constants_1.scrollContainerClassName}` },
                react_1.default.createElement(header_1.default, null),
                react_1.default.createElement(content_1.default, null, children))));
    }
}
const mapState = ({ loading, scrolls }) => ({
    loading: loading.models.app,
    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)(HeaderLayout));
// @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;