Skip to content

Commit

Permalink
refactor: add type for use-radio returned state (#5708)
Browse files Browse the repository at this point in the history
* refactor: add type for use-radio returned state

* chore: add changeset
  • Loading branch information
noobinthisgame committed Mar 15, 2022
1 parent 6ec0974 commit 8e201b9
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 13 deletions.
5 changes: 5 additions & 0 deletions .changeset/tall-candles-deny.md
@@ -0,0 +1,5 @@
---
"@chakra-ui/radio": patch
---

Add type for state returned by use-radio hook
40 changes: 27 additions & 13 deletions packages/radio/src/use-radio.ts
Expand Up @@ -76,6 +76,17 @@ export interface UseRadioProps {
"aria-describedby"?: string
}

export interface RadioState {
isInvalid: boolean | undefined
isFocused: boolean
isChecked: boolean
isActive: boolean
isHovered: boolean
isDisabled: boolean | undefined
isReadOnly: boolean | undefined
isRequired: boolean | undefined
}

export function useRadio(props: UseRadioProps = {}) {
const {
defaultIsChecked,
Expand Down Expand Up @@ -163,7 +174,7 @@ export function useRadio(props: UseRadioProps = {}) {
[setActive],
)

const getCheckboxProps: PropGetter = useCallback(
const getRadioProps: PropGetter = useCallback(
(props = {}, ref = null) => ({
...props,
ref,
Expand Down Expand Up @@ -263,18 +274,21 @@ export function useRadio(props: UseRadioProps = {}) {
"data-invalid": dataAttr(isInvalid),
})

const state: RadioState = {
isInvalid,
isFocused,
isChecked,
isActive,
isHovered,
isDisabled,
isReadOnly,
isRequired,
}

return {
state: {
isInvalid,
isFocused,
isChecked,
isActive,
isHovered,
isDisabled,
isReadOnly,
isRequired,
},
getCheckboxProps,
state,
// the function is renamed to getRadioProps to make the code more consistent. It is renamed towards outside because otherwise this would produce a breaking change
getCheckboxProps: getRadioProps,
getInputProps,
getLabelProps,
getRootProps,
Expand All @@ -283,7 +297,7 @@ export function useRadio(props: UseRadioProps = {}) {
}

/**
* Prevent `onBlur` being fired when the checkbox label is touched
* Prevent `onBlur` being fired when the radio label is touched
*/
function stop(event: SyntheticEvent) {
event.preventDefault()
Expand Down

1 comment on commit 8e201b9

@vercel
Copy link

@vercel vercel bot commented on 8e201b9 Mar 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.