Sheets Multi

import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets'
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core'
import sheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN'
import { useEffect } from 'react'
import { Mosaic, MosaicWindow } from 'react-mosaic-component'
import 'react-mosaic-component/react-mosaic-component.css'
import './style.css'
import '@univerjs/presets/lib/styles/preset-sheets-core.css'

type ViewId = 'a' | 'b' | 'c'

const TITLE_MAP: Record<ViewId, string> = {
  a: 'Sheet 1',
  b: 'Sheet 2',
  c: 'Sheet 3',
}

function factory(id: string) {
  return function createUniverOnContainer() {
    const { univerAPI } = createUniver({
      locale: LocaleType.ZH_CN,
      locales: {
        [LocaleType.ZH_CN]: merge(
          {},
          sheetsCoreZhCN,
        ),
      },
      theme: defaultTheme,
      presets: [
        UniverSheetsCorePreset({
          container: id,
        }),
      ],
    })

    univerAPI.createUniverSheet({})
  }
}

export default function App() {
  useEffect(() => {
    factory('app-a')()
    factory('app-b')()
    factory('app-c')()
  }, [])

  return (
    <div id="app">
      <Mosaic
        renderTile={(id, path) => (
          <MosaicWindow
            path={path}
            title={TITLE_MAP[id]}
            toolbarControls={<div />}
          >
            <div id={`app-${id}`} style={{ height: '100%' }}>
              {TITLE_MAP[id]}
            </div>
          </MosaicWindow>
        )}
        initialValue={{
          direction: 'row',
          first: 'a',
          second: {
            direction: 'column',
            first: 'b',
            second: 'c',
          },
        }}
      />
    </div>
  )
}