57 lines
1.2 KiB
TypeScript
57 lines
1.2 KiB
TypeScript
import { ChangeEvent } from 'react';
|
|
import React, { FC, useCallback, memo } from '../../lib/teact/teact';
|
|
|
|
import Radio from './Radio';
|
|
|
|
type IRadioOption = {
|
|
label: string;
|
|
subLabel?: string;
|
|
value: string;
|
|
hidden?: boolean;
|
|
};
|
|
|
|
type OwnProps = {
|
|
id?: string;
|
|
name: string;
|
|
options: IRadioOption[];
|
|
selected?: string;
|
|
disabled?: boolean;
|
|
loadingOption?: string;
|
|
onChange: (value: string) => void;
|
|
};
|
|
|
|
const RadioGroup: FC<OwnProps> = ({
|
|
id,
|
|
name,
|
|
options,
|
|
selected,
|
|
disabled,
|
|
loadingOption,
|
|
onChange,
|
|
}) => {
|
|
const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
|
|
const { value } = event.currentTarget;
|
|
onChange(value);
|
|
}, [onChange]);
|
|
|
|
return (
|
|
<div id={id} className="radio-group">
|
|
{options.map((option) => (
|
|
<Radio
|
|
name={name}
|
|
label={option.label}
|
|
subLabel={option.subLabel}
|
|
value={option.value}
|
|
checked={option.value === selected}
|
|
hidden={option.hidden}
|
|
disabled={disabled}
|
|
isLoading={loadingOption ? loadingOption === option.value : undefined}
|
|
onChange={handleChange}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(RadioGroup);
|