adilallo
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { memo, useCallback, useId } from "react";
|
|
import { RadioGroupView } from "./RadioGroup.view";
|
|
import type { RadioGroupProps } from "./RadioGroup.types";
|
|
import {
|
|
normalizeMode,
|
|
normalizeState,
|
|
} from "../../../../lib/propNormalization";
|
|
|
|
const RadioGroupContainer = ({
|
|
name,
|
|
value,
|
|
onChange,
|
|
mode: modeProp = "standard",
|
|
state: stateProp = "default",
|
|
disabled = false,
|
|
options = [],
|
|
className = "",
|
|
...props
|
|
}: RadioGroupProps) => {
|
|
// Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
|
|
const mode = normalizeMode(modeProp);
|
|
// Normalize state, but handle "With Subtext" separately (it's represented by options with subtext)
|
|
const state =
|
|
typeof stateProp === "string" &&
|
|
(stateProp.toLowerCase() === "with subtext" || stateProp === "With Subtext")
|
|
? "default" // "With Subtext" is handled via RadioOption.subtext, use default state
|
|
: normalizeState(stateProp);
|
|
// Generate unique ID for accessibility if not provided
|
|
const generatedId = useId();
|
|
const groupId = name || `radio-group-${generatedId}`;
|
|
|
|
const handleChange = useCallback(
|
|
(optionValue: string) => {
|
|
if (!disabled && onChange) {
|
|
onChange({ value: optionValue });
|
|
}
|
|
},
|
|
[disabled, onChange],
|
|
);
|
|
|
|
return (
|
|
<RadioGroupView
|
|
groupId={groupId}
|
|
value={value}
|
|
mode={mode}
|
|
state={state}
|
|
disabled={disabled}
|
|
options={options}
|
|
className={className}
|
|
ariaLabel={props["aria-label"]}
|
|
onOptionChange={handleChange}
|
|
/>
|
|
);
|
|
};
|
|
|
|
RadioGroupContainer.displayName = "RadioGroup";
|
|
|
|
export default memo(RadioGroupContainer);
|