mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-27 08:39:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #161 from webzard-io/editor-ex

Browse Source 
export Editor component and improve editor style
This commit is contained in:
tanbowensg 2021-12-09 09:59:11 +08:00 committed by GitHub
commit c3aba3d2e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/editor/src/components/Editor.tsx
View File

@ -87,11 +87,12 @@ export const Editor: React.FC<Props> = observer(({ App, registry, stateStore })
const renderMain = () => {
const appBox = (
<Box flex="1" background="gray.50" p={4}>
<Box flex="1" background="gray.50" p={4} overflow="hidden">
<Box
width="100%"
height="100%"
background="white"
overflow="auto"
transform={`scale(${scale / 100})`}
>
<Box id={DIALOG_CONTAINER_ID} width="full" height="full" position="absolute" />
@ -112,7 +113,7 @@ export const Editor: React.FC<Props> = observer(({ App, registry, stateStore })
}
return (
<>
<Box width="280px" borderRightWidth="1px" borderColor="gray.200">
<Box width="280px" minWidth="280px" borderRightWidth="1px" borderColor="gray.200">
<Tabs
align="center"
height="100%"
@ -145,7 +146,13 @@ export const Editor: React.FC<Props> = observer(({ App, registry, stateStore })
</Tabs>
</Box>
{appBox}
<Box width="320px" borderLeftWidth="1px" borderColor="gray.200" overflow="auto">
<Box
width="320px"
minWidth="320px"
borderLeftWidth="1px"
borderColor="gray.200"
overflow="auto"
>
<Tabs
align="center"
textAlign="left"

15
packages/editor/src/main.tsx
View File

@ -6,7 +6,7 @@ import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import { Editor } from './components/Editor';
import { App, registry, stateManager } from './setup';
import { App as _App, registry, stateManager, ui } from './setup';
type Options = Partial<{
components: Parameters<Registry['registerComponent']>[0][];
@ -15,6 +15,15 @@ type Options = Partial<{
container: Element;
}>;
export const App: React.FC = () => {
return (
<ChakraProvider>
<Editor App={_App} registry={registry} stateStore={stateManager.store} />
</ChakraProvider>
);
};
export { registry, ui };
export default function renderApp(options: Options = {}) {
const {
components = [],
@ -28,9 +37,7 @@ export default function renderApp(options: Options = {}) {
ReactDOM.render(
<StrictMode>
<ChakraProvider>
<Editor App={App} registry={registry} stateStore={stateManager.store} />
</ChakraProvider>
<App />
</StrictMode>,
container
);