@doreamonjs/gate
Version:
gate for doreamonjs
81 lines • 3.69 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Help = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const doreamon_1 = tslib_1.__importDefault(require("@zodash/doreamon"));
const components_1 = require("@doreamonjs/components");
require("./index.less");
const componentName = 'doreamonjs-design-gate-layout-help';
const scrollContainerClassName = 'doreamonjs-design-scroll-container';
const Help = (props) => {
const [dialogVisible, setDialogVisible] = react_1.useState(false);
const [isScrollToBottom, setIsScrollToBottom] = react_1.useState(false);
const cls = doreamon_1.default.classnames(componentName, 'help', props.className);
react_1.useEffect(() => {
const element = document.querySelector(`.${scrollContainerClassName}`);
const threshold = 0;
const onScroll = () => {
const { scrollTop, scrollHeight, offsetHeight } = element;
// @TODO antd backtop visibilityHeight
if (scrollTop < 400) {
if (isScrollToBottom) {
setIsScrollToBottom(false);
}
return;
}
if (scrollTop + offsetHeight + threshold >= scrollHeight) {
if (!isScrollToBottom) {
setIsScrollToBottom(true);
}
}
else {
if (isScrollToBottom) {
setIsScrollToBottom(false);
}
}
};
element.addEventListener('scroll', onScroll);
return () => {
element.removeEventListener('scroll', onScroll);
};
}, [isScrollToBottom]);
if (dialogVisible) {
return (react_1.default.createElement("div", { style: props.style, className: cls },
react_1.default.createElement("div", { key: 'dialog', className: 'dialog' },
react_1.default.createElement("div", { className: 'close', onClick: () => setDialogVisible(false) },
react_1.default.createElement(components_1.Icon, { type: 'close' })),
props.hideHeader ? null : (react_1.default.createElement("div", { className: 'header' },
react_1.default.createElement("div", { className: 'title' }, props.title))),
props.url ? (react_1.default.createElement(components_1.Frame, { className: 'body', src: props.url })) : (react_1.default.createElement("div", { className: 'body' }, "WARNING: Help Center URL is not set.")))));
}
return (react_1.default.createElement("div", {
// style={props.style}
className: cls, style: {
...props.style,
bottom: !isScrollToBottom ? 20 : 68,
} },
react_1.default.createElement("div", { key: 'question-btn', className: 'question-btn', onClick: () => setDialogVisible(true) },
react_1.default.createElement("div", { className: 'text' },
react_1.default.createElement(components_1.Icon, { type: 'question-circle' })))));
};
exports.Help = Help;
function HelpContainer(props) {
const [cfg, setCfg] = react_1.useState({});
react_1.useEffect(() => {
try {
const config = JSON.parse(props.config);
setCfg(config);
}
catch (error) {
//
}
}, [props.config]);
return (react_1.default.createElement(exports.Help, { ...cfg }));
}
exports.default = HelpContainer;
// const mapState = ({ scrolls }: any) => ({
// isPageScrollToBottom: scrolls?.isBottom,
// });
// export default connect(mapState)(HelpContainer);
//# sourceMappingURL=index.js.map