Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(RadioButton): allow an extended value other than a string #1177

Merged
merged 2 commits into from
Dec 4, 2023
Merged

feat(RadioButton): allow an extended value other than a string #1177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59e1ba9
feat: make RadioButton Generic
GermanVor Nov 30, 2023
80b978d
Merge branch 'main' into radio-button-generic
GermanVor Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 18 additions & 14 deletions src/components/RadioButton/RadioButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,37 @@ import './RadioButton.scss';

const b = block('radio-button');

export type RadioButtonOption = ControlGroupOption;
export type RadioButtonOption<T extends string = string> = ControlGroupOption<T>;
export type RadioButtonSize = 's' | 'm' | 'l' | 'xl';
export type RadioButtonWidth = 'auto' | 'max';

export interface RadioButtonProps extends ControlGroupProps, DOMProps, QAProps {
export interface RadioButtonProps<T extends string = string>
extends ControlGroupProps<T>,
DOMProps,
QAProps {
size?: RadioButtonSize;
width?: RadioButtonWidth;
children?: React.ReactElement<ControlGroupOption> | React.ReactElement<ControlGroupOption>[];
children?:
| React.ReactElement<ControlGroupOption<T>>
| React.ReactElement<ControlGroupOption<T>>[];
}

interface RadioButtonComponent
extends React.ForwardRefExoticComponent<
RadioButtonProps & React.RefAttributes<HTMLDivElement>
> {
Option: React.ComponentType<ControlGroupOption>;
}
type RadioButtonComponentType = (<T extends string>(
props: RadioButtonProps<T> & {ref?: React.ForwardedRef<HTMLDivElement>},
) => React.JSX.Element) & {
Comment on lines +28 to +30
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I do not know how to write like this

<T extends string>React.ForwardRefExoticComponent<
        RadioButtonProps<T> & React.RefAttributes<HTMLDivElement>
>

Ts does not allow

Option: typeof Option;
};

export const RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(function RadioButton(
props,
ref,
export const RadioButton = React.forwardRef(function RadioButton<T extends string>(
props: RadioButtonProps<T>,
ref: React.ForwardedRef<HTMLDivElement>,
) {
const {size = 'm', width, style, className, qa, children} = props;
let options = props.options;

if (!options) {
options = (
React.Children.toArray(children) as React.ReactElement<ControlGroupOption>[]
React.Children.toArray(children) as React.ReactElement<ControlGroupOption<T>>[]
).map(({props}) => ({
value: props.value,
content: props.content || props.children,
Expand Down Expand Up @@ -109,6 +113,6 @@ export const RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(fu
))}
</div>
);
}) as RadioButtonComponent;
}) as unknown as RadioButtonComponentType;

RadioButton.Option = Option;
51 changes: 28 additions & 23 deletions src/components/RadioButton/RadioButtonOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,36 @@ import {isIcon} from '../utils/common';

const b = block('radio-button');

export interface RadioButtonOptionProps extends ControlProps {
value: string;
export interface RadioButtonOptionProps<ValueType extends string> extends ControlProps {
value: ValueType;
content?: React.ReactNode;
children?: React.ReactNode;
}

export const RadioButtonOption = React.forwardRef<HTMLLabelElement, RadioButtonOptionProps>(
function RadioButtonOption(props, ref) {
const {disabled = false, content, children} = props;
const {checked, inputProps} = useRadio(props);
const inner = content || children;
const icon = isIcon(inner);
type RadioButtonOptionComponentType = <T extends string>(
props: RadioButtonOptionProps<T> & {ref?: React.ForwardedRef<HTMLLabelElement>},
) => React.JSX.Element;

return (
<label
className={b('option', {
disabled,
checked,
})}
ref={ref}
>
<input {...inputProps} className={b('option-control')} />
<span className={b('option-outline')} />
{inner && <span className={b('option-text', {icon})}>{inner}</span>}
</label>
);
},
);
export const RadioButtonOption = React.forwardRef(function RadioButtonOption<T extends string>(
props: RadioButtonOptionProps<T>,
ref: React.ForwardedRef<HTMLLabelElement>,
) {
const {disabled = false, content, children} = props;
const {checked, inputProps} = useRadio(props);
const inner = content || children;
const icon = isIcon(inner);

return (
<label
className={b('option', {
disabled,
checked,
})}
ref={ref}
>
<input {...inputProps} className={b('option-control')} />
<span className={b('option-outline')} />
{inner && <span className={b('option-text', {icon})}>{inner}</span>}
</label>
);
}) as unknown as RadioButtonOptionComponentType;
14 changes: 7 additions & 7 deletions src/components/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,23 @@ export interface ControlProps
controlRef?: React.Ref<HTMLInputElement>;
}

export interface ControlGroupOption {
value: string;
export interface ControlGroupOption<ValueType extends string = string> {
value: ValueType;
content?: React.ReactNode;
children?: React.ReactNode;
disabled?: boolean;
}

export interface ControlGroupProps {
export interface ControlGroupProps<ValueType extends string = string> {
name?: string;
value?: string;
defaultValue?: string;
onUpdate?: (value: string) => void;
value?: ValueType;
defaultValue?: ValueType;
onUpdate?: (value: ValueType) => void;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
disabled?: boolean;
options?: ControlGroupOption[];
options?: ControlGroupOption<ValueType>[];
'aria-label'?: string;
'aria-labelledby'?: string;
}
22 changes: 12 additions & 10 deletions src/hooks/private/useRadioGroup/useRadioGroup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,29 @@ import React from 'react';
import {useUniqId} from '../..';
import type {ControlGroupOption, ControlGroupProps} from '../../../components/types';

interface OptionsProps
interface OptionsProps<ValueType extends string = string>
extends Omit<
ControlGroupProps,
ControlGroupProps<ValueType>,
'options' | 'defaultValue' | 'aria-label' | 'aria-labelledby' | 'onUpdate' | 'value'
> {
value: string;
value: ValueType;
checked: boolean;
content: ControlGroupOption['content'];
}

export type UseRadioGroupProps = ControlGroupProps;
export type UseRadioGroupProps<ValueType extends string = string> = ControlGroupProps<ValueType>;

export type UseRadioGroupResult = {
export type UseRadioGroupResult<ValueType extends string = string> = {
containerProps: Pick<ControlGroupProps, 'aria-label' | 'aria-labelledby'> & {
role: string;
'aria-disabled': ControlGroupProps['disabled'];
};
optionsProps: OptionsProps[];
optionsProps: OptionsProps<ValueType>[];
};

export function useRadioGroup(props: UseRadioGroupProps): UseRadioGroupResult {
export function useRadioGroup<ValueType extends string = string>(
props: UseRadioGroupProps<ValueType>,
): UseRadioGroupResult<ValueType> {
const {
name,
value,
Expand All @@ -40,7 +42,7 @@ export function useRadioGroup(props: UseRadioGroupProps): UseRadioGroupResult {
const [valueState, setValueState] = React.useState(
defaultValue ?? options[0]?.value?.toString(),
);
const isControlled = typeof value === 'string';
const isControlled = typeof value !== 'undefined';
const currentValue = isControlled ? value : valueState;

const handleChange = React.useCallback(
Expand All @@ -52,7 +54,7 @@ export function useRadioGroup(props: UseRadioGroupProps): UseRadioGroupResult {
onChange(event);
}
if (onUpdate) {
onUpdate(event.target.value);
onUpdate(event.target.value as ValueType);
}
},
[isControlled, onUpdate, onChange],
Expand All @@ -67,7 +69,7 @@ export function useRadioGroup(props: UseRadioGroupProps): UseRadioGroupResult {

const optionsProps = options.map((option) => ({
name: name || controlId,
value: String(option.value),
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I did not understand why - type option.value === 'string' already

value: option.value,
content: option.content,
checked: currentValue === String(option.value),
disabled: disabled || option.disabled,
Expand Down
Loading