@bytedance/mona-client-web/dist/components/TabBar/index.js

web for mona

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 } from 'react';
import { useBadge, useSelectTab, useTabProps, useToggleDotShow, useToggleShow } from './utils';
import { createPortal } from 'react-dom';
import styles from './index.module.less';
var isAbsolute = function (path) { return /^https?/.test(path) || /^\/\//.test(path); };
function formatIconPath(path) {
    if (!path) {
        return path;
    }
    return isAbsolute(path) ? path : (window.__mona_public_path__ || '') + path;
}
function calcBorderStyle(color) {
    if (['black', 'white'].indexOf(color || '') === -1) {
        return 'tranparent';
    }
    return color;
}
var TabBar = function (_a) {
    var rawTab = _a.tab;
    var tab = useTabProps(rawTab).tab;
    var _b = useSelectTab(tab), currentIndex = _b.currentIndex, setCurrent = _b.setCurrent;
    var badges = useBadge().badges;
    var _c = useToggleShow(), show = _c.show, withAnimation = _c.withAnimation;
    var dotIndexs = useToggleDotShow().dotIndexs;
    var ref = useRef(null);
    useEffect(function () {
        var _a, _b;
        var el = document.getElementById('root');
        var originMarginBottom = el.style.marginBottom;
        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.marginBottom = "".concat(height, "px");
            el.style.height = "calc(".concat(originHeight, " - ").concat(height, "px)");
        }
        return function () {
            el.style.marginBottom = originMarginBottom;
            el.style.height = originHeight;
        };
    }, [ref]);
    if (!tab || tab.list.length <= 0) {
        return null;
    }
    return (React.createElement("div", { className: "".concat(styles.container, " ").concat(!show ? styles.hidden : ''), ref: ref, style: {
            transition: withAnimation ? 'transform .2s linear' : 'noset',
            backgroundColor: (tab === null || tab === void 0 ? void 0 : tab.backgroundColor) || '#fff',
            borderColor: calcBorderStyle(tab === null || tab === void 0 ? void 0 : tab.borderStyle),
        } }, tab.list.map(function (v, idx) { return (React.createElement("div", { key: idx, className: styles.item, onClick: function () { return setCurrent(v.pagePath); }, style: { color: (tab === null || tab === void 0 ? void 0 : tab.color) || 'black' } },
        React.createElement("div", { className: styles.badge },
            React.createElement("img", { className: styles.image, src: currentIndex === idx ? formatIconPath(v.selectedIconPath) : formatIconPath(v.iconPath) }),
            dotIndexs.indexOf(idx) !== -1 && React.createElement("span", { className: styles.redDot }),
            badges[idx] && React.createElement("span", { className: styles.text }, badges[idx].length > 3 ? '...' : badges[idx])),
        React.createElement("div", { style: { color: currentIndex === idx ? tab === null || tab === void 0 ? void 0 : tab.selectedColor : '' }, className: styles.desc }, v.text))); })));
};
export default (function (props) {
    return createPortal(React.createElement(TabBar, __assign({}, props)), document.body);
});
//# sourceMappingURL=index.js.map