mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-03-01 17:56:06 +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 renderMain = () => {
const appBox = ( const appBox = (
<Box flex="1" background="gray.50" p={4}> <Box flex="1" background="gray.50" p={4} overflow="hidden">
<Box <Box
width="100%" width="100%"
height="100%" height="100%"
background="white" background="white"
overflow="auto"
transform={`scale(${scale / 100})`} transform={`scale(${scale / 100})`}
> >
<Box id={DIALOG_CONTAINER_ID} width="full" height="full" position="absolute" /> <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 ( return (
<> <>
<Box width="280px" borderRightWidth="1px" borderColor="gray.200"> <Box width="280px" minWidth="280px" borderRightWidth="1px" borderColor="gray.200">
<Tabs <Tabs
align="center" align="center"
height="100%" height="100%"
@ -145,7 +146,13 @@ export const Editor: React.FC<Props> = observer(({ App, registry, stateStore })
</Tabs> </Tabs>
</Box> </Box>
{appBox} {appBox}
<Box width="320px" borderLeftWidth="1px" borderColor="gray.200" overflow="auto"> <Box
width="320px"
minWidth="320px"
borderLeftWidth="1px"
borderColor="gray.200"
overflow="auto"
>
<Tabs <Tabs
align="center" align="center"
textAlign="left" 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 'react-resizable/css/styles.css';
import { Editor } from './components/Editor'; import { Editor } from './components/Editor';
import { App, registry, stateManager } from './setup'; import { App as _App, registry, stateManager, ui } from './setup';
type Options = Partial<{ type Options = Partial<{
components: Parameters<Registry['registerComponent']>[0][]; components: Parameters<Registry['registerComponent']>[0][];
@ -15,6 +15,15 @@ type Options = Partial<{
container: Element; 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 = {}) { export default function renderApp(options: Options = {}) {
const { const {
components = [], components = [],
@ -28,9 +37,7 @@ export default function renderApp(options: Options = {}) {
ReactDOM.render( ReactDOM.render(
<StrictMode> <StrictMode>
<ChakraProvider> <App />
<Editor App={App} registry={registry} stateStore={stateManager.store} />
</ChakraProvider>
</StrictMode>, </StrictMode>,
container container
); );