Hotfix/confirm loading (#87)

* fix: 增加loading * v1.24.5 * v1.24.6-beta.0 * v1.24.6-beta.1 * feat: 增加loading * v1.24.7-beta.0 * v1.24.7-beta.1 * v1.24.7-beta.2 * v1.24.7-beta.3 * v1.24.7-beta.4 * fix: 编辑loading * v1.24.7-beta.5 * v1.24.7-beta.6 * feat: dialog loading * v1.24.7-beta.7 * fix: form loading * v1.24.7-beta.8 * fix: 修改confirm 添加onOk 方法 * v1.24.7-beta.9 * fix: 修改confirm 添加onOk 方法 * v1.24.7-beta.10 * v1.24.7 --------- Co-authored-by: Yiiu <yu.gintoki@gmail.com>
gmfe · Sep 13, 2024 · 41c02ff · 41c02ff
1 parent b40c8a5
commit 41c02ff
Show file tree

Hide file tree

Showing 24 changed files with 145 additions and 74 deletions.
diff --git a/lerna.json b/lerna.json
@@ -6,5 +6,5 @@
       "graphType": "all"
     }
   },
-  "version": "1.24.4"
+  "version": "1.24.7"
 }
diff --git a/packages/business/package.json b/packages/business/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/business",
-  "version": "1.24.4",
+  "version": "1.24.7",
   "description": "观麦科技业务组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -28,8 +28,8 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/react": "^1.24.4",
-    "@gm-pc/table-x": "^1.24.4"
+    "@gm-pc/react": "^1.24.7",
+    "@gm-pc/table-x": "^1.24.7"
   },
-  "gitHead": "a963de1e2fca7fbec5a55a0c34e3012559512d36"
+  "gitHead": "b405946c7c4cc8c7e0442bbcf9c339c54875713e"
 }
diff --git a/packages/cropper/package.json b/packages/cropper/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/cropper",
-  "version": "1.24.4",
+  "version": "1.24.7",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -26,10 +26,10 @@
     "react-dom": "^16.14.0"
   },
   "dependencies": {
-    "@gm-pc/locales": "^1.24.4",
-    "@gm-pc/react": "^1.24.4",
-    "@gm-pc/table-x": "^1.24.4",
+    "@gm-pc/locales": "^1.24.7",
+    "@gm-pc/react": "^1.24.7",
+    "@gm-pc/table-x": "^1.24.7",
     "cropperjs": "^1.5.9"
   },
-  "gitHead": "a963de1e2fca7fbec5a55a0c34e3012559512d36"
+  "gitHead": "b405946c7c4cc8c7e0442bbcf9c339c54875713e"
 }
diff --git a/packages/frame/package.json b/packages/frame/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/frame",
-  "version": "1.24.4",
+  "version": "1.24.7",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -23,13 +23,13 @@
   },
   "dependencies": {
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/react": "^1.24.4",
+    "@gm-pc/react": "^1.24.7",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19"
   },
   "peerDependencies": {
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   },
-  "gitHead": "a963de1e2fca7fbec5a55a0c34e3012559512d36"
+  "gitHead": "b405946c7c4cc8c7e0442bbcf9c339c54875713e"
 }
diff --git a/packages/keyboard/package.json b/packages/keyboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/keyboard",
-  "version": "1.24.4",
+  "version": "1.24.7",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/react": "^1.24.4",
-    "@gm-pc/table-x": "^1.24.4",
+    "@gm-pc/react": "^1.24.7",
+    "@gm-pc/table-x": "^1.24.7",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19"
   },
-  "gitHead": "a963de1e2fca7fbec5a55a0c34e3012559512d36"
+  "gitHead": "b405946c7c4cc8c7e0442bbcf9c339c54875713e"
 }
diff --git a/packages/locales/package.json b/packages/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/locales",
-  "version": "1.24.4",
+  "version": "1.24.7",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -20,5 +20,5 @@
   "bugs": {
     "url": "https://github.com/gmfe/gm-pc/issues"
   },
-  "gitHead": "a963de1e2fca7fbec5a55a0c34e3012559512d36"
+  "gitHead": "b405946c7c4cc8c7e0442bbcf9c339c54875713e"
 }
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.24.4",
+  "version": "1.24.7",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.24.4",
+    "@gm-pc/locales": "^1.24.7",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "a963de1e2fca7fbec5a55a0c34e3012559512d36"
+  "gitHead": "b405946c7c4cc8c7e0442bbcf9c339c54875713e"
 }
diff --git a/packages/react/src/component/button/button.tsx b/packages/react/src/component/button/button.tsx
@@ -80,7 +80,11 @@ const Button: FC<ButtonProps> = ({
       disabled={loadFlag || disabled}
       onClick={handleClick}
     >
-      {loadFlag && <Loading size='1em' />}
+      {loadFlag && (
+        <div style={{ marginRight: 4 }}>
+          <Loading size='1em' type={type} />
+        </div>
+      )}
       {children}
     </Tag>
   )

diff --git a/packages/react/src/component/button/style.less b/packages/react/src/component/button/style.less
@@ -1,7 +1,7 @@
 .gm-btn {
   height: 30px;
   border-radius: 2px;
-  display: inline-block;
+  display: inline-flex;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -11,6 +11,8 @@
   font-size: 12px;
   line-height: 30px;
   user-select: none;
+  flex-direction: row;
+  align-items: center;
 
   &.gm-btn-default {
     .gmBtnVariants(var(--gm-color-default), white, white);

diff --git a/packages/react/src/component/dialog/confirm.tsx b/packages/react/src/component/dialog/confirm.tsx
@@ -10,6 +10,11 @@ import { Button } from '../button'
 interface InnerProps extends ConfirmProps {
   resolve: any
   reject: any
+  /**
+   * @deprecated
+   * 这个没用
+   * */
+  confirmLoading?: boolean
 }
 
 const Inner: FC<InnerProps> = ({
@@ -20,27 +25,43 @@ const Inner: FC<InnerProps> = ({
   read,
   resolve,
   reject,
+  confirmLoading,
+  onOk,
+  onCancel,
 }) => {
   const [checked, setChecked] = useState<boolean>(false)
 
   const readText = _.isString(read) ? read : getLocale('我已阅读以上提示，确认删除')
+  const [loading, setLoading] = useState<boolean>(false)
+
+  const handleOk = async () => {
+    const fn = onOk || resolve
+    try {
+      setLoading(true)
+      await fn()
+      Dialog.hide()
+    } finally {
+      setLoading(false)
+    }
+  }
 
   const buttons: DialogButtonProps[] = [
     {
       text: cancelBtnText || getLocale('取消'),
       btnType: 'default',
       onClick() {
-        reject(new Error('cancel'))
+        const fn = onCancel || reject
+
+        fn(new Error('cancel'))
+
         Dialog.hide()
       },
     },
     {
       text: okBtnText || getLocale('确定'),
       btnType: okBtnType || 'primary',
-      onClick() {
-        resolve()
-        Dialog.hide()
-      },
+      onClick: handleOk,
+      loading: loading,
       disabled: read ? !checked : false,
     },
   ]
@@ -61,9 +82,8 @@ const Inner: FC<InnerProps> = ({
             key={btn.text}
             type={btn.btnType}
             disabled={btn.disabled}
-            onClick={() => {
-              btn.onClick()
-            }}
+            onClick={() => btn.onClick()}
+            loading={btn.loading}
             className='gm-margin-left-10'
           >
             {btn.text}

diff --git a/packages/react/src/component/dialog/dialog.tsx b/packages/react/src/component/dialog/dialog.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
 import { DialogProps, DialogStatic } from './types'
 import { getLocale } from '@gm-pc/locales'
 import _ from 'lodash'
@@ -15,6 +15,7 @@ const Dialog: FC<DialogProps> & DialogStatic = ({
   onHide = () => Dialog.hide(),
   children,
 }) => {
+  const [loading, setLoading] = useState(false)
   return (
     <Modal
       title={title}
@@ -26,19 +27,28 @@ const Dialog: FC<DialogProps> & DialogStatic = ({
       <div>{children}</div>
       {buttons && (
         <Flex justifyEnd className='gm-dialog-buttons gm-margin-top-10'>
-          {_.map(buttons, (btn) => (
-            <Button
-              key={btn.text}
-              type={btn.btnType}
-              disabled={btn.disabled}
-              onClick={() => {
-                btn.onClick()
-              }}
-              className='gm-margin-left-10'
-            >
-              {btn.text}
-            </Button>
-          ))}
+          {_.map(buttons, (btn) => {
+            const isPrimary = btn.btnType === 'primary' || btn.btnType === 'danger'
+
+            return (
+              <Button
+                loading={btn.loading || (isPrimary && loading)}
+                key={btn.text}
+                type={btn.btnType}
+                disabled={btn.disabled}
+                onClick={() => {
+                  setLoading(true)
+                  // console.log('btn.onClick', btn.onClick())
+                  Promise.resolve(btn.onClick()).finally(() => {
+                    setLoading(false)
+                  })
+                }}
+                className='gm-margin-left-10'
+              >
+                {btn.text}
+              </Button>
+            )
+          })}
         </Flex>
       )}
     </Modal>

diff --git a/packages/react/src/component/dialog/types.ts b/packages/react/src/component/dialog/types.ts
@@ -11,6 +11,7 @@ interface DialogButtonProps {
   onClick(event?: Event): void
   btnType?: ButtonType
   disabled?: boolean
+  loading?: boolean
 }
 
 interface DialogProps extends ConfigProviderProps {
@@ -41,6 +42,9 @@ interface ConfirmProps extends SpecificDialogProps {
   onValidate?: (value: string) => boolean | void
   /** 阅读提示 */
   read?: boolean | string
+  confirmLoading?: boolean
+  onOk?: () => any
+  onCancel?: (error: any) => any
 }
 
 interface PromptProps extends ConfirmProps, ConfigProviderProps {

diff --git a/packages/react/src/component/form/form_group.tsx b/packages/react/src/component/form/form_group.tsx
@@ -129,10 +129,17 @@ const FormGroup: FC<FormGroupProps> = ({
 export default FormGroup
 
 type ActionProps = Omit<FormGroupProps, 'formRefs' | 'onSubmitValidated' | 'onSubmit'> & {
-  onSubmit?(event: BaseSyntheticEvent): void
+  onSubmit?(event: BaseSyntheticEvent): Promise<void> | void
 }
 
 const Action: FC<ActionProps> = ({ onCancel, onSubmit, disabled, saveText, actions }) => {
+  const [loading, setLoading] = useState(false)
+
+  const handleClick = (e: BaseSyntheticEvent) => {
+    setLoading(true)
+    Promise.resolve(onSubmit?.(e)).finally(() => setLoading(false))
+  }
+
   return (
     <>
       {onCancel && (
@@ -141,7 +148,7 @@ const Action: FC<ActionProps> = ({ onCancel, onSubmit, disabled, saveText, actio
           <div className='gm-gap-10' />
         </>
       )}
-      <Button type='primary' disabled={disabled} onClick={onSubmit}>
+      <Button type='primary' disabled={disabled} loading={loading} onClick={handleClick}>
         {saveText || getLocale('确定')}
       </Button>
       {actions}

diff --git a/packages/react/src/component/loading/loading.tsx b/packages/react/src/component/loading/loading.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { LoadingProps } from './types'
 
-const Loading: FC<LoadingProps> = ({ size = '1em' }) => {
+const Loading: FC<LoadingProps> = ({ size = '1em', type = 'default' }) => {
   return (
     <svg
       className='gm-loading'
@@ -11,7 +11,14 @@ const Loading: FC<LoadingProps> = ({ size = '1em' }) => {
       }}
       viewBox='0 0 50 50'
     >
-      <circle className='gm-loading-path' cx='25' cy='25' r='20' fill='none' />
+      <circle
+        className='gm-loading-path'
+        cx='25'
+        cy='25'
+        r='20'
+        fill='none'
+        stroke={type === 'default' ? '#0363ff' : '#fff'}
+      />
     </svg>
   )
 }

diff --git a/packages/react/src/component/loading/style.less b/packages/react/src/component/loading/style.less
@@ -6,7 +6,7 @@
     stroke-dasharray: 90, 150;
     stroke-dashoffset: 0;
     stroke-width: 2;
-    stroke: var(--gm-color-primary);
+    // stroke: var(--gm-color-primary);
     stroke-linecap: round;
   }
 }

diff --git a/packages/react/src/component/loading/types.ts b/packages/react/src/component/loading/types.ts
@@ -2,6 +2,7 @@ import { HTMLAttributes, ReactNode } from 'react'
 
 interface LoadingProps {
   size?: string
+  type: any
 }
 
 interface LoadingChunkProps extends HTMLAttributes<HTMLDivElement> {