feat: 单选按钮组支持options设置子元素

src/packages/radio/__test__/radio.spec.tsx

@@ -62,4 +62,31 @@ describe('radio', () => {
  fireEvent.click(screen.getByTestId('r3'))
  expect(changeFn).toBeCalledWith('3')
  })
+
+ test('Render radios by configuring options', () => {
+ const RadioGroupOptions = () => {
+ const [radioVal] = useState('1')
+ const [optionsDemo1, setOptionsDemo1] = useState([
+ {
+ label: '选项一',
+ value: '1',
+ },
+ {
+ label: '选项二',
+ value: '2',
+ disabled: true,
+ },
+ {
+ label: '选项三',
+ value: '3',
+ },
+ ])
+ return (
+ <>
+ <RadioGroup value={radioVal} options={optionsDemo1}></RadioGroup>
+ </>
+ )
+ }
+ const { container } = render(<RadioGroupOptions />)
+ })
 })

src/packages/radio/demo.taro.tsx

@@ -12,6 +12,7 @@ interface T {
  '70ffa5d8': string
  '0f261484': string
  '6b1f669d': string
+ options: string
 }
 
 const RadioDemo = () => {
@@ -24,6 +25,7 @@ const RadioDemo = () => {
  '70ffa5d8': '自定义图标',
  '0f261484': '触发事件',
  '6b1f669d': '当前选中值',
+ options: '配置 options 渲染单选按钮',
  },
  'zh-TW': {
  '74fc5d8a': '基本用法',
@@ -33,6 +35,7 @@ const RadioDemo = () => {
  '70ffa5d8': '自定義圖示',
  '0f261484': '觸發事件',
  '6b1f669d': '當前選中值',
+ options: '配置 options 渲染單選按鈕',
  },
  'en-US': {
  '74fc5d8a': 'Basic Usage',
@@ -42,11 +45,27 @@ const RadioDemo = () => {
  '70ffa5d8': 'Custom Icon',
  '0f261484': 'Trigger Event',
  '6b1f669d': 'Currently selected',
+ options: 'Render radios by configuring options',
  },
  })
 
  const [checked1] = useState(true)
  const [radioVal, setRadioVal] = useState(1)
+ const [optionsDemo1, setOptionsDemo1] = useState([
+ {
+ label: '选项一',
+ value: '1',
+ },
+ {
+ label: '选项二',
+ value: '2',
+ disabled: true,
+ },
+ {
+ label: '选项三',
+ value: '3',
+ },
+ ])
 
  function handleChange(val: number | string | boolean) {
  console.log(val)
@@ -164,6 +183,12 @@ const RadioDemo = () => {
  </Cell>
  <Cell title={translated['6b1f669d']} desc={radioVal.toString()} />
  </CellGroup>
+ <h2>{translated.options}</h2>
+ <CellGroup>
+ <Cell>
+ <RadioGroup options={optionsDemo1} value={radioVal}></RadioGroup>
+ </Cell>
+ </CellGroup>
  </div>
  </>
  )

src/packages/radio/demo.tsx

@@ -14,6 +14,7 @@ interface T {
  '70ffa5d8': string
  '0f261484': string
  '6b1f669d': string
+ options: string
 }
 
 const RadioDemo = () => {
@@ -26,6 +27,7 @@ const RadioDemo = () => {
  '70ffa5d8': '自定义图标',
  '0f261484': '触发事件',
  '6b1f669d': '当前选中值',
+ options: '配置 options 渲染单选按钮',
  },
  'zh-TW': {
  '74fc5d8a': '基本用法',
@@ -35,6 +37,7 @@ const RadioDemo = () => {
  '70ffa5d8': '自定義圖示',
  '0f261484': '觸發事件',
  '6b1f669d': '當前選中值',
+ options: '配置 options 渲染單選按鈕',
  },
  'en-US': {
  '74fc5d8a': 'Basic Usage',
@@ -44,11 +47,27 @@ const RadioDemo = () => {
  '70ffa5d8': 'Custom Icon',
  '0f261484': 'Trigger Event',
  '6b1f669d': 'Currently selected',
+ options: 'Render radios by configuring options',
  },
  })
 
  const [checked1] = useState(true)
  const [radioVal, setRadioVal] = useState(1)
+ const [optionsDemo1, setOptionsDemo1] = useState([
+ {
+ label: '选项一',
+ value: '1',
+ },
+ {
+ label: '选项二',
+ value: '2',
+ disabled: true,
+ },
+ {
+ label: '选项三',
+ value: '3',
+ },
+ ])
 
  function handleChange(val: number | string | boolean) {
  console.log(val)
@@ -166,6 +185,12 @@ const RadioDemo = () => {
  </Cell>
  <Cell title={translated['6b1f669d']} desc={radioVal.toString()} />
  </CellGroup>
+ <h2>{translated.options}</h2>
+ <CellGroup>
+ <Cell>
+ <RadioGroup options={optionsDemo1} value={radioVal}></RadioGroup>
+ </Cell>
+ </CellGroup>
  </div>
  </>
  )

src/packages/radio/doc.en-US.md

@@ -172,6 +172,7 @@ export default RadioGroupLast;
 | value | The identifier of the currently selected item, which is selected when the label value is consistent with the | String、Number、Boolean | - |
 | textPosition | Where the text is located, optional values: 'left', 'right' | String | `right` |
 | direction | Use horizontal and vertical directions The optional values horizontal, vertical, | String | `vertical` |
+| options `v1.3.9` | Render radios by configuring options | Array | `Array<{ label: string value: string disabled?: boolean }` |
 
 ## RadioGroup Event
 

src/packages/radio/doc.md

@@ -171,6 +171,8 @@ export default RadioGroupLast;
 | value | 当前选中项的标识符，与label值一致时呈选中状态 | String、Number、Boolean | - |
 | textPosition | 文本所在的位置，可选值：`left`,`right` | String | `right` |
 | direction | 使用横纵方向 可选值 horizontal、vertical | String | `vertical` |
+| options `v1.3.9` | 配置 options 渲染单选按钮 | Array | `Array<{ label: string value: string disabled?: boolean }` |
+
 
 ## RadioGroup Event
 

src/packages/radio/doc.zh-TW.md

@@ -171,6 +171,7 @@ export default RadioGroupLast;
 | value | 當前選取的標識碼，與label值一致時呈選中狀態 | String、Number、Boolean | - |
 | textPosition | 文本所在的位置，可選值：'left'，'right' | String | `right` |
 | direction | 使用橫縱方向 可選值 horizontal、vertical | String | `vertical` |
+| options `v1.3.9` | 配置 options 渲染單選按鈕 | Array | `Array<{ label: string value: string disabled?: boolean }` |
 
 ## RadioGroup Event
 

src/packages/radiogroup/radiogroup.taro.tsx

@@ -1,23 +1,33 @@
-import React, { useEffect, useState } from 'react'
+import React, { MouseEventHandler, useEffect, useState } from 'react'
 import RadioContext from '../radio/context'
+import Radio from '../radio/index.taro'
 
 import bem from '@/utils/bem'
 
 type Position = 'left' | 'right'
 type Direction = 'horizontal' | 'vertical'
 
+export interface RadioGroupOptionType {
+ label: string
+ value: string
+ disabled?: boolean
+ onChange?: MouseEventHandler<HTMLDivElement>
+}
+
 export interface RadioGroupProps {
  value: string | number | boolean | null
  textPosition: Position
  direction: Direction
  onChange: (value: string | number | boolean) => void
+ options: RadioGroupOptionType[]
 }
 
 const defaultProps = {
  value: null,
  textPosition: 'right',
  onChange: (value: string | number | boolean) => {},
  direction: 'vertical',
+ options: [],
 } as RadioGroupProps
 export const RadioGroup = React.forwardRef(
  (
@@ -27,8 +37,15 @@ export const RadioGroup = React.forwardRef(
  ) => {
  const { children } = { ...defaultProps, ...props }
  const b = bem('RadioGroup')
- const { className, value, onChange, textPosition, direction, ...rest } =
- props
+ const {
+ className,
+ value,
+ onChange,
+ textPosition,
+ direction,
+ options,
+ ...rest
+ } = props
 
  const [val2State, setVal2State] = useState(value)
 
@@ -85,6 +102,18 @@ export const RadioGroup = React.forwardRef(
  })
  }
 
+ function renderOptionsChildren() {
+ return options?.map(({ label, value, disabled, onChange }) => (
+ <Radio
+ key={value?.toString()}
+ children={label}
+ value={value}
+ disabled={disabled}
+ onChange={onChange}
+ />
+ ))
+ }
+
  return (
  <RadioContext.Provider
  value={{
@@ -95,10 +124,12 @@ export const RadioGroup = React.forwardRef(
  }}
  >
  <div
- className={`nut-radiogroup nut-radiogroup--${props.direction}`}
+ className={`nut-radiogroup nut-radiogroup--${props.direction} ${
+ className || ''
+ }`}
  {...rest}
  >
- {cloneChildren()}
+ {options?.length ? renderOptionsChildren() : cloneChildren()}
  </div>
  </RadioContext.Provider>
  )

src/packages/radiogroup/radiogroup.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import RadioContext from '../radio/context'
+import { RadioGroupOptionType } from './radiogroup.taro'
+import { Radio } from '../radio/radio'
 
 import bem from '@/utils/bem'
 
@@ -11,13 +13,15 @@ export interface RadioGroupProps {
  textPosition: Position
  direction: Direction
  onChange: (value: string | number | boolean) => void
+ options: RadioGroupOptionType[]
 }
 
 const defaultProps = {
  value: null,
  textPosition: 'right',
  onChange: (value: string | number | boolean) => {},
  direction: 'vertical',
+ options: [],
 } as RadioGroupProps
 export const RadioGroup = React.forwardRef(
  (
@@ -27,8 +31,15 @@ export const RadioGroup = React.forwardRef(
  ) => {
  const { children } = { ...defaultProps, ...props }
  const b = bem('RadioGroup')
- const { className, value, onChange, textPosition, direction, ...rest } =
- props
+ const {
+ className,
+ value,
+ onChange,
+ textPosition,
+ direction,
+ options,
+ ...rest
+ } = props
 
  const [val2State, setVal2State] = useState(value)
 
@@ -85,6 +96,18 @@ export const RadioGroup = React.forwardRef(
  })
  }
 
+ function renderOptionsChildren() {
+ return options?.map(({ label, value, disabled, onChange }) => (
+ <Radio
+ key={value?.toString()}
+ children={label}
+ value={value}
+ disabled={disabled}
+ onChange={onChange}
+ />
+ ))
+ }
+
  return (
  <RadioContext.Provider
  value={{
@@ -95,10 +118,12 @@ export const RadioGroup = React.forwardRef(
  }}
  >
  <div
- className={`nut-radiogroup nut-radiogroup--${props.direction}`}
+ className={`nut-radiogroup nut-radiogroup--${props.direction} ${
+ className || ''
+ }`}
  {...rest}
  >
- {cloneChildren()}
+ {options?.length ? renderOptionsChildren() : cloneChildren()}
  </div>
  </RadioContext.Provider>
  )