Merge pull request #513 from yue4u/feat/allow-type-radio-group-value

feat: allow type radio group value
pixiv · May 1, 2024 · 8684ab8 · 8684ab8
2 parents 8581694 + 40821c4
commit 8684ab8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 28 deletions.
diff --git a/packages/react/src/components/Radio/index.story.tsx b/packages/react/src/components/Radio/index.story.tsx
@@ -17,15 +17,16 @@ const LayoutDiv = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => px(theme.spacing[24])};
 `
+const options = ['1', '2', '3'] as const
+type Option = (typeof options)[number]
 
 export const Default: StoryObj<typeof Radio> = {
   render: function Render(args) {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
 
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           {...args}
@@ -45,11 +46,11 @@ export const Default: StoryObj<typeof Radio> = {
 
 export const Disabled: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}
@@ -69,11 +70,11 @@ export const Disabled: StoryObj<typeof Radio> = {
 
 export const PartialDisabled: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}
@@ -92,11 +93,11 @@ export const PartialDisabled: StoryObj<typeof Radio> = {
 
 export const Readonly: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}
@@ -116,11 +117,11 @@ export const Readonly: StoryObj<typeof Radio> = {
 
 export const Invalid: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}

diff --git a/packages/react/src/components/Radio/index.tsx b/packages/react/src/components/Radio/index.tsx
@@ -169,16 +169,17 @@ const RadioLabel = styled.div`
   }
 `
 
-export type RadioGroupProps = React.PropsWithChildren<{
-  className?: string
-  value?: string
-  label: string
-  name: string
-  onChange(next: string): void
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-}>
+export type RadioGroupProps<Value extends string = string> =
+  React.PropsWithChildren<{
+    className?: string
+    value?: Value
+    label: string
+    name: string
+    onChange(next: Value): void
+    disabled?: boolean
+    readonly?: boolean
+    invalid?: boolean
+  }>
 
 // TODO: use (or polyfill) flex gap
 const StyledRadioGroup = styled.div`
@@ -209,7 +210,7 @@ const RadioGroupContext = React.createContext<RadioGroupContext>({
   },
 })
 
-export function RadioGroup({
+export function RadioGroup<Value extends string = string>({
   className,
   value,
   label,
@@ -219,10 +220,10 @@ export function RadioGroup({
   readonly,
   invalid,
   children,
-}: RadioGroupProps) {
+}: RadioGroupProps<Value>) {
   const handleChange = useCallback(
     (next: string) => {
-      onChange(next)
+      onChange(next as Value)
     },
     [onChange]
   )