fix: add checked state for radio

packages/semi-foundation/radio/radioFoundation.ts

@@ -3,6 +3,7 @@ import warning from '../utils/warning';
 
 export interface RadioAdapter extends DefaultAdapter {
     setHover: (hover: boolean) => void;
+    setChecked: (checked: boolean) => void;
     setAddonId: () => void;
     setExtraId: () => void;
     setFocusVisible: (focusVisible: boolean) => void;
@@ -21,6 +22,10 @@ export default class RadioFoundation extends BaseFoundation<RadioAdapter> {
         this._adapter.setHover(hover);
     }
 
+    setChecked(checked: boolean) {
+        this._adapter.setChecked(checked);
+    }
+
     handleFocusVisible = (event: any) => {
         const { target } = event;
         try {

packages/semi-ui/radio/radio.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
-import { noop } from 'lodash';
+import { noop, isUndefined, isBoolean } from 'lodash';
 
 import RadioFoundation, { RadioAdapter } from '@douyinfe/semi-foundation/radio/radioFoundation';
 import { RadioChangeEvent } from '@douyinfe/semi-foundation/radio/radioInnerFoundation';
@@ -52,6 +52,7 @@ export interface RadioState {
     addonId?: string;
     extraId?: string;
     focusVisible?: boolean;
+    checked?: boolean;
 }
 
 export { RadioChangeEvent };
@@ -104,11 +105,22 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             hover: false,
             addonId: props.addonId,
             extraId: props.extraId,
+            checked: props.checked || props.defaultChecked || false,
         };
         this.foundation = new RadioFoundation(this.adapter);
         this.radioEntity = null;
     }
 
+    componentDidUpdate(prevProps: RadioProps) {
+        if (this.props.checked !== prevProps.checked) {
+            if (isUndefined(this.props.checked)) {
+                this.foundation.setChecked(false);
+            } else if (isBoolean(this.props.checked)) {
+                this.foundation.setChecked(this.props.checked);
+            }
+        }
+    }
+
     get adapter(): RadioAdapter {
         return {
             ...super.adapter,
@@ -118,6 +130,9 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             setAddonId: () => {
                 this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
             },
+            setChecked: (checked: boolean) => {
+                this.setState({ checked });
+            },
             setExtraId: () => {
                 this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
             },
@@ -146,6 +161,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             const { radioGroup } = this.context;
             radioGroup.onChange && radioGroup.onChange(e);
         }
+        !('checked' in this.props) && this.foundation.setChecked(e.target.checked);
         onChange && onChange(e);
     };
 
@@ -171,7 +187,6 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         const {
             addonClassName,
             addonStyle,
-            checked,
             disabled,
             style,
             className,
@@ -194,8 +209,11 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isButtonRadioComponent,
             buttonSize,
             realPrefixCls;
-        const { hover: isHover, addonId, extraId, focusVisible } = this.state;
-        let props = {};
+        const { hover: isHover, addonId, extraId, focusVisible, checked, } = this.state;
+        const props: Record<string, any> = {
+            checked,
+            disabled,
+        };
 
         if (this.isInGroup()) {
             realChecked = this.context.radioGroup.value === propValue;
@@ -206,7 +224,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isPureCardRadioGroup = this.context.radioGroup.isPureCardRadio;
             buttonSize = this.context.radioGroup.buttonSize;
             realPrefixCls = prefixCls || this.context.radioGroup.prefixCls;
-            props = { checked: realChecked, disabled: isDisabled };
+            props.checked = realChecked;
+            props.disabled = isDisabled;
         } else {
             realChecked = checked;
             isDisabled = disabled;