@doreamonjs/gate
Version:
gate for doreamonjs
102 lines (101 loc) • 4.61 kB
JavaScript
;
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.Help = void 0;
const react_1 = __importStar(require("react"));
const doreamon_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);