react-admin-component/lib/tab-bar/index.js

react library

import * as tslib_1 from "tslib";
import React, { useState, useLayoutEffect, useRef } from 'react';
import classNames from 'classnames';
import { TabInkbar } from '..';
var prefix = 'rac_tab_bar';
var TabBar = function (props) {
    var panels = props.panels;
    var _a = useState(props.activeKey), activeKey = _a[0], setActiveKey = _a[1];
    var _b = useState(null), target = _b[0], setTarget = _b[1];
    var barRef = useRef({});
    function onBarClick(event, key) {
        setTarget(event.target);
        setActiveKey(key);
        props.onChange && props.onChange(key);
    }
    useLayoutEffect(function () {
        if (props.activeKey) {
            setTarget(barRef.current[props.activeKey]);
            setActiveKey(props.activeKey);
        }
    }, [props.activeKey]);
    return (React.createElement("div", { style: tslib_1.__assign({ position: 'relative' }, props.style), className: props.className },
        panels &&
            panels.map(function (panel) {
                var _a;
                return panel &&
                    panel.props && (React.createElement("div", { ref: function (dom) { return (barRef.current[panel.key] = dom); }, className: classNames(prefix, (_a = {},
                        _a[prefix + "-active"] = activeKey === panel.key,
                        _a), props.barClassName), key: panel.key, onClick: function (e) { return onBarClick(e, panel.key); }, style: tslib_1.__assign({}, props.barStyle, panel.style) }, panel.props.tab));
            }),
        target && (React.createElement(TabInkbar, { offsetLeft: target.offsetLeft, targetWidth: target.offsetWidth, className: props.inkBarClassName, style: props.inkBarStyle }))));
};
export default TabBar;
//# sourceMappingURL=index.js.map