@gm-pc/react 1.24.4 → 1.24.7-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.24.4",
+  "version": "1.24.7-beta.10",
   "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-beta.10",
     "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": "56daac5e693c42568aa9a53c8d102968968b0ad6"
+  "gitHead": "7f39e8a167416093461fec7e2227556bb851cfa7"
 }

package/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>
   )

package/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);

package/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}

package/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>

package/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 {

package/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}

package/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>
   )
 }

package/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;
   }
 }

package/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> {

package/src/component/popup/popup_content_confirm.tsx

@@ -14,6 +14,7 @@ type ButtonMap = {
     text: string
     onClick(): void
     disabled?: boolean
+    loading?: boolean
   }
 }
 
@@ -27,6 +28,7 @@ export interface PopupContentConfirmProps extends HTMLAttributes<HTMLDivElement>
   read?: boolean | string
   className?: string
   style?: CSSProperties
+  loading?: boolean
 }
 
 const PopupContentConfirm: FC<PopupContentConfirmProps> = ({
@@ -38,6 +40,7 @@ const PopupContentConfirm: FC<PopupContentConfirmProps> = ({
   read,
   className,
   children,
+  loading,
   ...rest
 }) => {
   const [checked, setChecked] = useState<boolean>(false)
@@ -51,6 +54,7 @@ const PopupContentConfirm: FC<PopupContentConfirmProps> = ({
       onClick() {
         onSave && onSave()
       },
+      loading: loading,
     },
     delete: {
       text: getLocale('删除'),
@@ -58,6 +62,7 @@ const PopupContentConfirm: FC<PopupContentConfirmProps> = ({
       onClick() {
         onDelete && onDelete()
       },
+      loading: loading,
       disabled: read ? !checked : false,
     },
   }
@@ -88,6 +93,7 @@ const PopupContentConfirm: FC<PopupContentConfirmProps> = ({
             onClick={() => {
               buttonMap[type].onClick()
             }}
+            loading={loading}
             disabled={buttonMap[type].disabled}
           >
             {buttonMap[type].text}