@ovine/editor/lib/components/layout/index.js

Ovine json editor.

import { pick } from 'lodash';
import { observer, inject } from 'mobx-react';
import React from 'react';
// import { app } from '@core/app'
import { Amis } from "../../../../core/lib/components/amis/schema";
// import { changeAppTheme } from '@core/styled/theme'
import { editorStore } from "../../stores/editor";
import Editor from "../editor";
import Header from "../header";
import * as S from "./styled";
// hack 方式给 Editor 注入 env
const placeholder = {
    type: 'html',
    className: 'd-none',
    html: 'placeholder',
};
export default inject('store')(observer((props) => {
    const { isPreview, option, isMobile } = props.store;
    const previewProps = pick(option, ['data']);
    const renderProps = {
        affixOffsetTop: isMobile ? 125 : 53,
    };
    // TODO: 使用 iframe 模拟 浏览 移动端效果
    return (React.createElement(S.StyledLayout, null,
        React.createElement(Amis, { schema: placeholder, props: previewProps }),
        React.createElement(Header, null),
        React.createElement(S.StyledBody, null,
            isPreview && (React.createElement(S.StyledPreview, { className: `ae-Preview ${isMobile ? 'is-mobile' : 'in-pc'}` },
                React.createElement("div", { className: "ae-Preview-inner" },
                    React.createElement(Amis, { schema: editorStore.schema, props: renderProps })))),
            React.createElement(Editor, { editorStore: editorStore }))));
}));