diff --git a/src/progress/ProgressState.ts b/src/progress/ProgressState.ts index bc285b892..fa1b508c2 100644 --- a/src/progress/ProgressState.ts +++ b/src/progress/ProgressState.ts @@ -36,33 +36,27 @@ export interface ProgressState { percent: number | null; } -export interface ProgressAction { - /** - * Update the value of the progress indicator - */ - setValue: React.Dispatch>; -} - export type ProgressInitialState = Pick< Partial, "value" | "min" | "max" >; -export type ProgressStateReturn = ProgressState & ProgressAction; +export type ProgressStateReturn = ProgressState; export function useProgressState( props: ProgressInitialState = {}, ): ProgressStateReturn { - const { value: defaultValue = 0, min = 0, max = 100 } = props; - const [value, setValue] = React.useState(clampValue(defaultValue, min, max)); - const percent = isNull(value) ? null : valueToPercent(value, min, max); + const { value = 0, min = 0, max = 100 } = props; + const clampedValue = clampValue(value, min, max); + const percent = isNull(clampedValue) + ? null + : valueToPercent(clampedValue, min, max); return { - value, - setValue, + value: clampedValue, min, max, - isIndeterminate: isNull(value), + isIndeterminate: isNull(clampedValue), percent, }; } diff --git a/src/progress/stories/CircularProgress.component.tsx b/src/progress/stories/CircularProgress.component.tsx index 7a03b1fc9..04453c809 100644 --- a/src/progress/stories/CircularProgress.component.tsx +++ b/src/progress/stories/CircularProgress.component.tsx @@ -20,8 +20,9 @@ export interface AppProps extends ProgressInitialState { export const App: React.FC = props => { const { withLabel = false, children, ...rest } = props; - const state = useProgressState(rest); - const { value, setValue, percent, isIndeterminate } = state; + const [value, setValue] = React.useState(0); + const state = useProgressState({ value, ...rest }); + const { percent, isIndeterminate } = state; React.useEffect(() => { const clearId = setInterval(() => { diff --git a/src/progress/stories/LinearProgress.component.tsx b/src/progress/stories/LinearProgress.component.tsx index 54c5185f1..ef4095a96 100644 --- a/src/progress/stories/LinearProgress.component.tsx +++ b/src/progress/stories/LinearProgress.component.tsx @@ -33,8 +33,9 @@ export const App: React.FC = props => { withStripeAnimation = false, ...rest } = props; - const state = useProgressState(rest); - const { value, setValue, percent, isIndeterminate } = state; + const [value, setValue] = React.useState(0); + const state = useProgressState({ value, ...rest }); + const { percent, isIndeterminate } = state; React.useEffect(() => { const clearId = setInterval(() => {