feat: split main conten

web/app/(commonLayout)/datasets/Container.tsx

@@ -20,7 +20,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
-import CreateModal from '@/app/components/datasets/metadata/create-modal'
+import CreateModal from '@/app/components/datasets/metadata/create-metadata-modal'
 // Services
 import { fetchDatasetApiBaseUrl } from '@/service/datasets'
 
@@ -83,7 +83,9 @@ const Container = () => {
 
   return (
     <div ref={containerRef} className='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
-      <CreateModal hasBack onSave={(data) => { console.log(data) }} />
+      <div className='ml-[600px] mt-[300px]'>
+        <CreateModal trigger={<Button className='w-[200px]'>open</Button>} hasBack onSave={(data) => { console.log(data) }} />
+      </div>
       <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
         <TabSliderNew
           value={activeTab}

web/app/components/datasets/metadata/create-content.tsx

@@ -1,29 +1,30 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
-import ModalLikeWrap from '../../base/modal-like-wrap'
-import { useTranslation } from 'react-i18next'
 import { DataType } from './types'
+import ModalLikeWrap from '../../base/modal-like-wrap'
 import Field from './field'
 import OptionCard from '../../workflow/nodes/_base/components/option-card'
 import Input from '@/app/components/base/input'
 import { RiArrowLeftLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'dataset.metadata.createMetadata'
 
-type Props = {
+export type Props = {
   onSave: (data: any) => void
   hasBack?: boolean
   onBack?: () => void
 }
 
-const CreateModal: FC<Props> = ({
-  onSave,
+const CreateContent: FC<Props> = ({
   hasBack,
   onBack,
+  onSave,
 }) => {
   const { t } = useTranslation()
   const [type, setType] = useState(DataType.string)
+
   const handleTypeChange = useCallback((newType: DataType) => {
     return () => setType(newType)
   }, [setType])
@@ -38,6 +39,7 @@ const CreateModal: FC<Props> = ({
       name,
     })
   }, [onSave, type, name])
+
   return (
     <ModalLikeWrap
       title={t(`${i18nPrefix}.title`)}
@@ -82,4 +84,4 @@ const CreateModal: FC<Props> = ({
     </ModalLikeWrap>
   )
 }
-export default React.memo(CreateModal)
+export default React.memo(CreateContent)

web/app/components/datasets/metadata/create-metadata-modal.tsx

@@ -0,0 +1,43 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import type { Props as CreateContentProps } from './create-content'
+import CreateContent from './create-content'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
+
+type Props = {
+  onSave: (data: any) => void
+  trigger: React.ReactNode
+  popupLeft?: number
+} & CreateContentProps
+
+const CreateMetadataModal: FC<Props> = ({
+  trigger,
+  popupLeft = 20,
+  ...createContentProps
+}) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='left-start'
+      offset={{
+        mainAxis: popupLeft,
+        crossAxis: -38,
+      }}
+    >
+      <PortalToFollowElemTrigger
+        onClick={() => setOpen(!open)}
+      >
+        {trigger}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1000]'>
+        <CreateContent {...createContentProps} />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem >
+
+  )
+}
+export default React.memo(CreateMetadataModal)