feat: add canyon-ui

canyon-project · Jun 12, 2024 · 6502ec9 · 6502ec9
1 parent 794f34c
commit 6502ec9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/packages/canyon-platform/package.json b/packages/canyon-platform/package.json
@@ -22,6 +22,7 @@
     "ahooks": "^3.7.10",
     "antd": "^5.14.1",
     "axios": "^1.6.7",
+    "canyon-ui": "^0.0.6",
     "canyon-ui-old": "workspace:^",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",

diff --git a/packages/canyon-platform/src/pages/index/projects/[id]/configure/helper/BasicForms.tsx b/packages/canyon-platform/src/pages/index/projects/[id]/configure/helper/BasicForms.tsx
@@ -1,10 +1,12 @@
 import { useMutation } from '@apollo/client';
+import { useForm } from 'antd/es/form/Form';
+import { FC } from 'react';
 
 import { UpdateProjectDocument } from '../../../../../../helpers/backend/gen/graphql.ts';
 
 const { TextArea } = Input;
 
-const BasicForms: FC<{ data: any }> = ({ data }) => {
+const BasicForms: FC<{ data: any }> = ({ data }, ref) => {
   const [updateProject] = useMutation(UpdateProjectDocument);
   const prm: any = useParams();
   const { t } = useTranslation();
@@ -21,9 +23,18 @@ const BasicForms: FC<{ data: any }> = ({ data }) => {
       message.success('成功');
     });
   };
+  const [form] = useForm();
+  const onSubmit = () => {
+    form.submit();
+  };
+  useImperativeHandle(ref, () => ({
+    submit: onSubmit,
+  }));
+  // use
   if (data) {
     return (
       <Form
+        form={form}
         className={'w-[850px]'}
         name='basic'
         layout={'vertical'}
@@ -69,16 +80,11 @@ const BasicForms: FC<{ data: any }> = ({ data }) => {
         >
           <Input placeholder={'/source/coverage/path=>/replace/path'} />
         </Form.Item>
-        <Form.Item>
-          <Button type='primary' htmlType='submit'>
-            {t('projects.config.save.changes')}
-          </Button>
-        </Form.Item>
       </Form>
     );
   } else {
     return <div>loading</div>;
   }
 };
 
-export default BasicForms;
+export default forwardRef(BasicForms);
diff --git a/packages/canyon-platform/src/pages/index/projects/[id]/configure/index.tsx b/packages/canyon-platform/src/pages/index/projects/[id]/configure/index.tsx
@@ -1,6 +1,7 @@
 import Icon, { AppstoreOutlined, ExperimentOutlined } from '@ant-design/icons';
 import { useMutation, useQuery } from '@apollo/client';
 import { Editor } from '@monaco-editor/react';
+import { FormRegion } from 'canyon-ui';
 
 import {
   GetProjectByIdDocument,
@@ -10,7 +11,6 @@ import BasicForms from './helper/BasicForms.tsx';
 import { SolarUserIdLinear } from './helper/icons/SolarUserIdLinear.tsx';
 import MemberTable from './helper/MemberTable.tsx';
 import TagTable from './helper/TagTable.tsx';
-
 const gridStyle: any = {
   width: '100%',
 };
@@ -34,26 +34,24 @@ const ProjectConfigure = () => {
 
   const [defaultBranch, setDefaultBranch] = useState<string>('');
 
+  const basicFormsRef = useRef<any>(null);
   return (
     <div className={''}>
       <Title level={2} className={'flex items-center gap-3 pb-8'}>
         <AppstoreOutlined className={'text-[#687076] text-[32px]'} />
         <span>{t('projects.config.title')}</span>
       </Title>
-      <Card
-        title={
-          <div className={'flex items-center'}>
-            <Icon component={SolarUserIdLinear} className={'text-[#687076] mr-2 text-[18px]'} />
-            <span>{t('projects.config.basic.information')}</span>
-          </div>
-        }
+      <FormRegion
+        title={t('projects.config.basic.information')}
+        icon={<Icon component={SolarUserIdLinear} />}
+        onSave={() => {
+          basicFormsRef.current?.submit();
+        }}
       >
-        <Card.Grid hoverable={false} style={gridStyle}>
-          <BasicForms data={GetProjectByIdDocumentData?.getProjectByID} />
-        </Card.Grid>
-      </Card>
+        <BasicForms ref={basicFormsRef} data={GetProjectByIdDocumentData?.getProjectByID} />
+      </FormRegion>
       <div className={'h-5'}></div>
-      <MemberTable members={GetProjectByIdDocumentData?.getProjectByID.members}/>
+      <MemberTable members={GetProjectByIdDocumentData?.getProjectByID.members} />
       <div className={'h-5'}></div>
       <TagTable tags={GetProjectByIdDocumentData?.getProjectByID.tags} />
       <div className={'h-5'}></div>