useProgessNext; optim. performance; pass event to onClick; fix resetVal;

control-ui · Nov 20, 2024 · a3f27d7 · a3f27d7
1 parent e5cf2e5
commit a3f27d7
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 122 deletions.
diff --git a/packages/ctrls-progress/demo/src/DemoProgress.tsx b/packages/ctrls-progress/demo/src/DemoProgress.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ButtonProgress } from '@ui-controls/progress/ButtonProgress'
 import { IconButtonProgress } from '@ui-controls/progress/IconButtonProgress'
-import { ps, useProgress } from 'react-progress-state'
+import { ps, useProgress } from 'react-progress-state/useProgressNext'
 import Box from '@mui/material/Box'
 import IcLogin from '@mui/icons-material/Login'
 import Button from '@mui/material/Button'
@@ -31,7 +31,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading1()
                             window.setTimeout(() => {
-                                const isPid = setLoading1(ps.done, undefined, pid)
+                                const isPid = setLoading1(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -47,7 +47,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading1()
                             window.setTimeout(() => {
-                                const isPid = setLoading1(ps.done, undefined, pid)
+                                const isPid = setLoading1(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -81,7 +81,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading3()
                             window.setTimeout(() => {
-                                const isPid = setLoading3(ps.done, undefined, pid)
+                                const isPid = setLoading3(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -120,7 +120,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading1()
                             window.setTimeout(() => {
-                                const isPid = setLoading1(ps.done, undefined, pid)
+                                const isPid = setLoading1(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -137,7 +137,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading1()
                             window.setTimeout(() => {
-                                const isPid = setLoading1(ps.done, undefined, pid)
+                                const isPid = setLoading1(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -173,7 +173,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading3()
                             window.setTimeout(() => {
-                                const isPid = setLoading3(ps.done, undefined, pid)
+                                const isPid = setLoading3(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)

diff --git a/packages/ctrls-progress/demo/src/DemoProgressConfirm.tsx b/packages/ctrls-progress/demo/src/DemoProgressConfirm.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ButtonProgress } from '@ui-controls/progress/ButtonProgress'
 import { IconButtonProgress } from '@ui-controls/progress/IconButtonProgress'
-import { ps, useProgress } from 'react-progress-state'
+import { ps, useProgress } from 'react-progress-state/useProgressNext'
 import Box from '@mui/material/Box'
 import IcDeleteConfirm from '@mui/icons-material/Delete'
 import IcDelete from '@mui/icons-material/DeleteOutline'
@@ -21,7 +21,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -57,7 +57,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -94,7 +94,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -130,7 +130,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -165,7 +165,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -200,7 +200,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading3()
                         window.setTimeout(() => {
-                            const isPid = setLoading3(ps.done, undefined, pid)
+                            const isPid = setLoading3(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -238,7 +238,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading3()
                         window.setTimeout(() => {
-                            const isPid = setLoading3(ps.done, undefined, pid)
+                            const isPid = setLoading3(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)

diff --git a/packages/ctrls-progress/package.json b/packages/ctrls-progress/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ui-controls/progress",
-    "version": "0.0.5",
+    "version": "0.1.0-alpha.0",
     "description": "Material-UI Button + IconButton with progress (loading/error/success)",
     "homepage": "https://bemit.codes",
     "author": "Michael Becker <michael@bemit.codes>",
@@ -45,7 +45,7 @@
     },
     "peerDependencies": {
         "@mui/material": "^5.1",
-        "react-progress-state": "~0.2.3 || ~0.3.1",
+        "react-progress-state": "~0.3.2",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
     },

diff --git a/packages/ctrls-progress/src/ButtonConfirm/ButtonConfirm.tsx b/packages/ctrls-progress/src/ButtonConfirm/ButtonConfirm.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
+import { MouseEvent, ReactNode, useEffect } from 'react'
 import Button, { ButtonProps } from '@mui/material/Button'
 import { useTheme } from '@mui/material/styles'
 import { useWithConfirm } from '@ui-controls/progress/useWithConfirm'
 import { buttonColors, ColorMap } from '@ui-controls/progress/buttonColors'
 
 export interface WithConfirmProps {
-    confirmIcon: React.ReactNode
-    confirmText: React.ReactNode | string
+    confirmIcon: ReactNode
+    confirmText: ReactNode | string
     // todo: add optional dialog view instead of button label switch
     // confirmDialog?: boolean
     confirmDuration?: number
@@ -24,11 +24,11 @@ export type ButtonConfirmProps =
     {
         classNameWrapper?: string
         resetVal?: any
-        onClick: () => void
+        onClick: (e: MouseEvent<HTMLButtonElement>) => void
         colorMap?: ColorMap
     }
 
-export const ButtonConfirm: React.ComponentType<ButtonConfirmProps> = (
+export const ButtonConfirm = (
     {
         className, classNameWrapper,
         style,
@@ -40,13 +40,13 @@ export const ButtonConfirm: React.ComponentType<ButtonConfirmProps> = (
         resetVal, disabled,
         colorMap,
         ...props
-    },
+    }: ButtonConfirmProps,
 ) => {
-    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm(resetVal ? [resetVal] : undefined, confirmDuration)
+    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm<HTMLButtonElement>(resetVal, confirmDuration)
     const theme = useTheme()
     const btnSx = buttonColors(theme, colorMap)
 
-    React.useEffect(() => {
+    useEffect(() => {
         if(!disabled) return
         setConfirmShow(false)
     }, [disabled, setConfirmShow])
@@ -64,7 +64,7 @@ export const ButtonConfirm: React.ComponentType<ButtonConfirmProps> = (
             }
             onClick={(e) => {
                 e.stopPropagation()
-                handleClick(confirmShow, onClick)
+                handleClick(confirmShow, onClick, e)
             }}
             endIcon={confirmShow && confirmIcon ? confirmIcon : endIcon}
         >

diff --git a/packages/ctrls-progress/src/ButtonProgress/ButtonProgress.tsx b/packages/ctrls-progress/src/ButtonProgress/ButtonProgress.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import { CSSProperties, MouseEvent } from 'react'
 import { useTheme, SxProps } from '@mui/material/styles'
 import CircularProgress from '@mui/material/CircularProgress'
 import { green } from '@mui/material/colors'
 import Button, { ButtonProps } from '@mui/material/Button'
-import { ProgressStateValues, ps } from 'react-progress-state'
+import { ProgressStateValues, ps } from 'react-progress-state/useProgressNext'
 import Box from '@mui/material/Box'
 import { buttonColors, ColorMap } from '@ui-controls/progress/buttonColors'
 import { WithConfirmProps } from '@ui-controls/progress/ButtonConfirm'
@@ -13,16 +13,16 @@ export type ButtonProgressProps = Omit<ButtonProps, 'onClick'> & Partial<WithCon
     progress: ProgressStateValues
     resetVal?: any
     classNameWrapper?: string
-    onClick: () => void
-    boxStyle?: React.CSSProperties
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void
+    boxStyle?: CSSProperties
     boxSx?: SxProps
     // when `true` will display any `progress` color from mount on,
     // `false` forces `ps.none`, only when then changed it shows the actual button-state
     showInitial?: boolean
     colorMap?: ColorMap
 }
 
-export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
+export const ButtonProgress = (
     {
         progress, resetVal,
         className, classNameWrapper,
@@ -36,12 +36,12 @@ export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
         showInitial,
         colorMap,
         ...props
-    },
+    }: ButtonProgressProps,
 ) => {
     const {
         progressState, currentProgress,
         handleClick, confirmShow,
-    } = useButtonProgress(progress, resetVal, disabled, showInitial, confirmDuration, resetDelay)
+    } = useButtonProgress<HTMLButtonElement>(progress, resetVal, disabled, showInitial, confirmDuration, resetDelay)
     const theme = useTheme()
     const btnSx = buttonColors(theme, colorMap)
     const hasConfirm = Boolean(confirmIcon || confirmText)
@@ -58,7 +58,7 @@ export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
         <Button
             {...props}
             // `disabled` must check against the original `progress`, to be able to not rely on any coloring logic
-            disabled={disabled || progress === ps.start}
+            disabled={disabled || progress === ps.loading}
             className={className}
             sx={{
                 ...sx || {},
@@ -74,9 +74,9 @@ export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
                 e.stopPropagation()
                 e.preventDefault()
                 if(hasConfirm) {
-                    handleClick(confirmShow, onClick)
+                    handleClick(confirmShow, onClick, e)
                 } else {
-                    onClick()
+                    onClick(e)
                 }
             }}
             endIcon={
@@ -87,7 +87,7 @@ export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
             {hasConfirm && confirmShow && confirmText ? confirmText : children}
         </Button>
 
-        {currentProgress === ps.start &&
+        {currentProgress === ps.loading &&
             <CircularProgress
                 size={24}
                 style={{

diff --git a/packages/ctrls-progress/src/IconButtonConfirm/IconButtonConfirm.tsx b/packages/ctrls-progress/src/IconButtonConfirm/IconButtonConfirm.tsx
@@ -1,23 +1,24 @@
-import React from 'react'
+import { MouseEvent, ReactNode, useEffect } from 'react'
 import { useTheme } from '@mui/material/styles'
 import IconButton, { IconButtonProps } from '@mui/material/IconButton'
 import { useWithConfirm } from '@ui-controls/progress/useWithConfirm'
-import Tooltip from '@mui/material/Tooltip'
+import Tooltip, { TooltipProps } from '@mui/material/Tooltip'
 import { buttonColors, ColorMap } from '@ui-controls/progress/buttonColors'
 
 export type IconButtonConfirmProps = {
-    confirmIcon?: React.ReactNode
+    confirmIcon?: ReactNode
     confirmDuration?: number
-    tooltipConfirm: string | NonNullable<React.ReactNode>
-    tooltip: string | NonNullable<React.ReactNode>
-    onClick: () => void
+    tooltipConfirm: string | NonNullable<ReactNode>
+    tooltip: string | NonNullable<ReactNode>
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void
     resetVal?: any
     // when `true` enabled pointer-events on the tooltip
     tooltipInteractive?: boolean
     colorMap?: ColorMap
+    TooltipProps?: Omit<TooltipProps, 'title'>
 } & Omit<IconButtonProps, 'onClick'>
 
-export const IconButtonConfirm: React.ComponentType<IconButtonConfirmProps> = (
+export const IconButtonConfirm = (
     {
         onClick,
         tooltip, tooltipConfirm,
@@ -27,23 +28,25 @@ export const IconButtonConfirm: React.ComponentType<IconButtonConfirmProps> = (
         resetVal, disabled,
         tooltipInteractive = false,
         colorMap,
+        TooltipProps,
         ...props
-    },
+    }: IconButtonConfirmProps,
 ) => {
-    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm(resetVal ? [resetVal] : undefined, confirmDuration)
+    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm<HTMLButtonElement>(resetVal, confirmDuration)
     const theme = useTheme()
     const btnSx = buttonColors(theme, colorMap)
 
-    React.useEffect(() => {
+    useEffect(() => {
         if(!disabled) return
         setConfirmShow(false)
     }, [disabled, setConfirmShow])
 
-    const title: string | NonNullable<React.ReactNode> = (confirmShow ? tooltipConfirm : tooltip) as string | NonNullable<React.ReactNode>
-    // todo: use describeChild
+    const title: string | NonNullable<ReactNode> = (confirmShow ? tooltipConfirm : tooltip) as string | NonNullable<ReactNode>
+
     return <Tooltip
         title={typeof title === 'undefined' ? '' : title}
         disableInteractive={!tooltipInteractive}
+        {...TooltipProps || {}}
     >
         <IconButton
             {...props}
@@ -56,7 +59,7 @@ export const IconButtonConfirm: React.ComponentType<IconButtonConfirmProps> = (
             }
             onClick={(e) => {
                 e.stopPropagation()
-                handleClick(confirmShow, onClick)
+                handleClick(confirmShow, onClick, e)
             }}
         >
             {confirmShow && confirmIcon ? confirmIcon : children}