diff --git a/packages/apsara-ui/src/Checkbox/Checkbox.tsx b/packages/apsara-ui/src/Checkbox/Checkbox.tsx index 86f9be50..56381aba 100644 --- a/packages/apsara-ui/src/Checkbox/Checkbox.tsx +++ b/packages/apsara-ui/src/Checkbox/Checkbox.tsx @@ -1,6 +1,7 @@ import { CheckIcon } from "@radix-ui/react-icons"; import React, { useEffect, useState } from "react"; import { CheckboxWrapper, CheckboxGroupWrapper, StyledCheckbox, StyledIndicator } from "./Checkbox.styles"; +import { generateRandomId } from "../helper"; type CheckboxProps = { defaultChecked?: boolean; @@ -25,6 +26,7 @@ type CheckboxGroupProps = { orientation?: "horizontal" | "vertical"; name?: string; options?: CheckboxProps[]; + id?: string; }; const Checkbox = ({ @@ -37,7 +39,7 @@ const Checkbox = ({ value, label, style, - id = "c1", + id = generateRandomId(), }: CheckboxProps) => { const [isChecked, setIsChecked] = useState<boolean | "indeterminate">(checked || defaultChecked || false); @@ -78,6 +80,7 @@ const CheckboxGroup = ({ options, onChange, orientation = "horizontal", + id = generateRandomId(), ...props }: CheckboxGroupProps) => { const [selectedValues, setSelectedValues] = useState(defaultValue || value || []); @@ -102,12 +105,12 @@ const CheckboxGroup = ({ setSelectedValues(newSelectedValues); onChange && onChange(newSelectedValues); }} - id={`${option.value}${index}`} + id={`${id}${option.value}${index}`} checked={selectedValues.includes(option.value || "")} value={option.value} {...props} /> - <label className="checkbox_label" htmlFor={`${option.value}${index}`}> + <label className="checkbox_label" htmlFor={`${id}${option.value}${index}`}> {option.label} </label> </div> diff --git a/packages/apsara-ui/src/Radio/Radio.tsx b/packages/apsara-ui/src/Radio/Radio.tsx index 2508d848..84347c5d 100644 --- a/packages/apsara-ui/src/Radio/Radio.tsx +++ b/packages/apsara-ui/src/Radio/Radio.tsx @@ -1,6 +1,7 @@ import React from "react"; import { RadioGroup, StyledRadioItem, StyledIndicator, Label, Flex, StyledRadioButton } from "./Radio.styles"; import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; +import { generateRandomId } from "../helper"; type RadioItem = { label?: string; @@ -35,9 +36,20 @@ export type RadioProps = { style?: React.CSSProperties; itemStyle?: styleProps; children?: React.ReactNode; + id?: string; }; -const Radio = ({ defaultValue, value, items, onChange, required, orientation, dir, ...props }: RadioProps) => { +const Radio = ({ + defaultValue, + value, + items, + onChange, + required, + orientation, + dir, + id = generateRandomId(), + ...props +}: RadioProps) => { return ( <RadioGroup defaultValue={defaultValue} @@ -58,11 +70,11 @@ const Radio = ({ defaultValue, value, items, onChange, required, orientation, di disabled={item.disabled} required={item.required} {...props.itemStyle} - id={i.toString()} + id={`${id}${item.value}${i}`} > <StyledIndicator /> </StyledRadioItem> - <Label dir={dir} htmlFor={i.toString()}> + <Label dir={dir} htmlFor={`${id}${item.value}${i}`}> {item.label} </Label> </Flex> diff --git a/packages/apsara-ui/src/helper/index.tsx b/packages/apsara-ui/src/helper/index.tsx new file mode 100644 index 00000000..5a1eda67 --- /dev/null +++ b/packages/apsara-ui/src/helper/index.tsx @@ -0,0 +1,5 @@ +export const generateRandomId = () => { + const randomChars = Math.random().toString(36).substring(2, 10); + const timestamp = Date.now().toString(36); + return randomChars + timestamp; +};