@doreamonjs/gate/lib/kind/header/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 global_1 = tslib_1.__importDefault(require("../../common/global"));
const content_1 = tslib_1.__importDefault(require("../../common/layout/content"));
const header_1 = tslib_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;
//# sourceMappingURL=index.js.map