@bytedance/mona-client-web
Version:
web for mona
64 lines • 3.43 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useEffect, useRef, useState } from 'react';
import { useNavBarTitle } from './utils';
import styles from './index.module.less';
import { createPortal } from 'react-dom';
var MONA_STATUS_BAR_HEIGHT = '__MONA_STATUS_BAR_HEIGHT__';
var isAndroid = navigator.userAgent.includes('com.ss.android.merchant');
// @ts-ignore
var statusBarHeight = window[MONA_STATUS_BAR_HEIGHT];
var NavBar = function (props) {
var _a = useState(history._pos > 0), canBack = _a[0], setCanBack = _a[1];
var ref = useRef(null);
useEffect(function () {
var h = history;
if (h.onChange) {
history.onChange(function () {
setCanBack(h._pos > 0);
});
}
}, [setCanBack]);
useEffect(function () {
var _a, _b;
var el = document.getElementById('root');
var originMarginTop = el.style.marginTop;
var originHeight = el.style.height || '100vh';
if (ref.current) {
var height = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
el.style.marginTop = "".concat(height, "px");
el.style.height = "calc(".concat(originHeight, " - ").concat(height, "px)");
}
return function () {
el.style.marginTop = originMarginTop;
el.style.height = originHeight;
};
}, [ref]);
var _b = useNavBarTitle(props), title = _b.title, frontColor = _b.frontColor, backgroundColor = _b.backgroundColor;
var navBarStyle = {
backgroundColor: backgroundColor,
color: frontColor,
};
if (!props.navigationBarTitleText) {
return null;
}
return (React.createElement("div", { ref: ref, className: styles['mona-web-navbar'], style: __assign(__assign({}, navBarStyle), (isAndroid ? { paddingTop: statusBarHeight } : {})) },
canBack ? (React.createElement("div", { className: styles['mona-web-navbar-left'], onClick: function () { return history.go(-1); } },
React.createElement("svg", { viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "p-id": "3402", width: "16", height: "16" },
React.createElement("path", { d: "M395.21518 513.604544l323.135538-312.373427c19.052938-18.416442 19.052938-48.273447 0-66.660212-19.053961-18.416442-49.910737-18.416442-68.964698 0L291.75176 480.290811c-19.052938 18.416442-19.052938 48.273447 0 66.660212l357.633237 345.688183c9.525957 9.207709 22.01234 13.796214 34.497699 13.796214 12.485359 0 24.971741-4.588505 34.466999-13.82896 19.052938-18.416442 19.052938-48.242747 0-66.660212L395.21518 513.604544z", fill: "currentColor", "p-id": "3403" })))) : null,
React.createElement("div", { className: styles['mona-web-navbar-title'], style: { color: frontColor } }, title),
React.createElement("div", null)));
};
export default (function (props) {
return createPortal(React.createElement(NavBar, __assign({}, props)), document.body);
});
//# sourceMappingURL=index.js.map