feat: 优化 CallbackURL.tsx

Author: coding-hui

src/pages/IdentityProvider/Create/CallbackURL.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { Typography } from 'antd';
+import React, { useEffect } from 'react';
+import { Form } from 'antd';
 import { useIntl } from '@umijs/max';
 import { getRedirectURL } from '@/services/system/oauth';
-import { ProFormDependency, ProFormText } from '@ant-design/pro-components';
+import { ProFormText } from '@ant-design/pro-components';
 
-const { Paragraph } = Typography;
+import { FormProps } from './_hooks';
 
 const INTL = {
   NAME: {
@@ -15,38 +15,27 @@ const INTL = {
   },
 };
 
-export const CallbackURL = () => {
+export const CallbackURL = (props: FormProps) => {
   const intl = useIntl();
+  const { form } = props;
+  const name = Form.useWatch('name', form);
+  const redirectURL = getRedirectURL(`${name ? name : `{${intl.formatMessage(INTL.NAME)}}`}`);
+
+  useEffect(() => {
+    const oldVal = form?.getFieldValue(['config', 'redirectURL']);
+    if (oldVal && oldVal.endsWith('}')) {
+      form?.setFieldValue(['config', 'redirectURL'], redirectURL);
+    }
+  }, [name]);
 
   return (
-    <ProFormDependency name={['name']}>
-      {({ name }) => {
-        const redirectURL = getRedirectURL(`${name ? name : `{${intl.formatMessage(INTL.NAME)}}`}`);
-        return (
-          <ProFormText
-            width={300}
-            label={intl.formatMessage(INTL.AUTH_URL)}
-            name={['config', 'redirectURL']}
-            readonly
-            fieldProps={{ autoComplete: 'off' }}
-            initialValue={redirectURL}
-            proFieldProps={{
-              render: () => {
-                return (
-                  <Paragraph copyable={{ text: redirectURL }} style={{ marginBottom: '0' }}>
-                    <span
-                      dangerouslySetInnerHTML={{
-                        __html: `<span>${redirectURL}</span>`,
-                      }}
-                    />
-                  </Paragraph>
-                );
-              },
-            }}
-          ></ProFormText>
-        );
-      }}
-    </ProFormDependency>
+    <ProFormText
+      width="lg"
+      label={intl.formatMessage(INTL.AUTH_URL)}
+      name={['config', 'redirectURL']}
+      fieldProps={{ autoComplete: 'off' }}
+      initialValue={redirectURL}
+    ></ProFormText>
   );
 };
 

src/pages/IdentityProvider/Create/Coding.tsx

@@ -4,6 +4,7 @@ import { Checkbox, Col, Row } from 'antd';
 import { ProForm, ProFormText } from '@ant-design/pro-components';
 
 import CallbackURL from './CallbackURL';
+import { FormProps } from './_hooks';
 
 const INTL = {
   CLIENT_ID: {
@@ -35,7 +36,7 @@ const INTL = {
   },
 };
 
-export const Coding: React.FC = () => {
+export const Coding: React.FC<FormProps> = (props: FormProps) => {
   const intl = useIntl();
 
   const scopes = [
@@ -110,7 +111,7 @@ export const Coding: React.FC = () => {
         </ProForm.Item>
       </ProForm.Group>
       <ProForm.Group align="center">
-        <CallbackURL />
+        <CallbackURL form={props.form} />
       </ProForm.Group>
     </>
   );

src/pages/IdentityProvider/Create/GitHub.tsx

@@ -3,6 +3,7 @@ import { useIntl } from '@umijs/max';
 import { ProForm, ProFormText } from '@ant-design/pro-components';
 
 import CallbackURL from './CallbackURL';
+import { FormProps } from './_hooks';
 
 const INTL = {
   CLIENT_ID: {
@@ -25,7 +26,7 @@ const INTL = {
   },
 };
 
-export const GitHub = () => {
+export const GitHub: React.FC<FormProps> = (props: FormProps) => {
   const intl = useIntl();
 
   return (
@@ -59,7 +60,7 @@ export const GitHub = () => {
         />
       </ProForm.Group>
       <ProForm.Group align="center">
-        <CallbackURL />
+        <CallbackURL form={props.form} />
       </ProForm.Group>
     </>
   );

src/pages/IdentityProvider/Create/Gitee.tsx

@@ -4,6 +4,7 @@ import { Checkbox, Col, Row } from 'antd';
 import { ProForm, ProFormText } from '@ant-design/pro-components';
 
 import CallbackURL from './CallbackURL';
+import { FormProps } from './_hooks';
 
 const INTL = {
   CLIENT_ID: {
@@ -29,7 +30,7 @@ const INTL = {
   },
 };
 
-export const Gitee = () => {
+export const Gitee: React.FC<FormProps> = (props: FormProps) => {
   const intl = useIntl();
 
   const giteeScopes = [
@@ -95,7 +96,7 @@ export const Gitee = () => {
         </ProForm.Item>
       </ProForm.Group>
       <ProForm.Group align="center">
-        <CallbackURL />
+        <CallbackURL form={props.form} />
       </ProForm.Group>
     </>
   );

src/pages/IdentityProvider/Create/_hooks.ts

@@ -12,10 +12,13 @@ import {
   UpdateIdentityProviderRequest,
 } from '@/services/idp';
 import { IdentityProviderType, ProviderCategory } from '@/enums';
-import { getRedirectURL } from '@/services/system/oauth';
 
 export type FormType = UpdateIdentityProviderRequest & CreateIdentityProviderRequest;
 
+export type FormProps = {
+  form?: ProFormInstance<FormType>;
+};
+
 export default function useIdentityProviderHook() {
   const intl = useIntl();
   const { message } = App.useApp();
@@ -82,9 +85,6 @@ export default function useIdentityProviderHook() {
   const handleSubmit = async () => {
     const values = await formRef.current?.validateFieldsReturnFormatValue?.();
     if (values) {
-      if (values.config.redirectURL) {
-        values.config.redirectURL = getRedirectURL(values.name);
-      }
       return isEdit ? doUpdateIdp(instanceId, values) : doCreateIdp(values);
     }
   };

src/pages/IdentityProvider/Create/index.tsx

@@ -142,16 +142,16 @@ const CreatePolicy: React.FC = () => {
           <ProFormDependency name={['type']}>
             {({ type }) => {
               if (type === IdentityProviderType.Gitee) {
-                return <Gitee key={type} />;
+                return <Gitee key={type} form={formRef.current} />;
               }
               if (type === IdentityProviderType.GitHub) {
-                return <GitHub key={type} />;
+                return <GitHub key={type} form={formRef.current} />;
               }
               if (type === IdentityProviderType.WeChatMiniProgram) {
                 return <WeChatMiniProgram key={type} />;
               }
               if (type === IdentityProviderType.Coding) {
-                return <Coding key={type} />;
+                return <Coding key={type} form={formRef.current} />;
               }
               return null;
             }}