@ovine/craft/lib/components/aside/index.js

Ovine json editor.

/**
 * 编辑器 侧边栏
 *
 * 主要用于导航
 *
 */
import { Tab, Tabs } from 'amis';
import _ from 'lodash';
import { observer } from 'mobx-react';
import React, { useEffect } from 'react';
import { app } from '@core/app';
import { useRootStore } from "../../stores";
import { tabs, AsideProvider, asideStore, useAsideStore } from "./store";
import { StyledAside } from "./styled";
import allTab from "./tab";
const Aside = observer(() => {
    const { isStageMode } = useRootStore();
    const { tab: activeTab, setTab } = useAsideStore();
    const theme = app.theme.getName();
    useEffect(() => {
        const $tabs = $('.craft-aside-tab');
        // 添加悬浮提示提示
        $tabs
            .find('li')
            .each((index, item) => {
            const info = Object.values(tabs)[index] || {};
            const $item = $(item);
            $item.attr({
                'data-toggle': 'tooltip',
                'data-placement': 'right',
                title: $item.attr('title') || info.title,
            });
        })
            .tooltip();
    }, []);
    return (React.createElement(StyledAside, { className: isStageMode ? 'd-none' : 'd-flex' },
        React.createElement(Tabs, { className: "craft-aside-tab", mode: "vertical", theme: theme, activeKey: activeTab, onSelect: setTab, toolbar: React.createElement("li", { className: "item-code", title: "\u9875\u9762\u914D\u7F6E" },
                React.createElement("i", { className: " fa fa-code" })) }, _.map(tabs, (info, tab) => {
            const TabContent = allTab[_.upperFirst(tab)];
            return (React.createElement(Tab, { key: tab, theme: theme, icon: info.icon, eventKey: tab }, TabContent && React.createElement(TabContent, null)));
        }))));
});
export default () => {
    return (React.createElement(AsideProvider, { value: asideStore },
        React.createElement(Aside, null)));
};