[Radio] support keyboard events; support radio.group allowUncheck; add more unit test

src/checkbox/type.ts

@@ -5,7 +5,7 @@
  * */
 
 import { TNode } from '../common';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, MouseEvent } from 'react';
 
 export interface TdCheckboxProps {
   /**
@@ -53,11 +53,15 @@ export interface TdCheckboxProps {
   /**
    * 多选框的值
    */
-  value?: string | number;
+  value?: string | number | boolean;
   /**
    * 值变化时触发
    */
   onChange?: (checked: boolean, context: { e: ChangeEvent<HTMLInputElement> }) => void;
+  /**
+   * 点击时出发，一般用于外层阻止冒泡场景
+   */
+  onClick?: (context: { e: MouseEvent<HTMLLabelElement> }) => void;
 }
 
 export interface TdCheckboxGroupProps {

src/common/Check.tsx

@@ -1,4 +1,4 @@
-import React, { Ref, forwardRef, useContext, MouseEventHandler } from 'react';
+import React, { Ref, forwardRef, useContext, MouseEvent } from 'react';
 import classNames from 'classnames';
 import isBoolean from 'lodash/isBoolean';
 import { omit } from '../_util/helper';
@@ -7,13 +7,11 @@ import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
 import { TdCheckboxProps } from '../checkbox/type';
 
-export interface CheckProps extends Omit<TdCheckboxProps, 'value'>, StyledProps {
+export interface CheckProps extends TdCheckboxProps, StyledProps {
   type: 'radio' | 'radio-button' | 'checkbox';
   allowUncheck?: boolean;
   title?: string;
-  value?: string | number | boolean;
   children?: React.ReactNode;
-  onClick?: MouseEventHandler<HTMLLabelElement>;
   stopLabelTrigger?: Boolean;
 }
 
@@ -47,6 +45,7 @@ const Check = forwardRef((_props: CheckProps, ref: Ref<HTMLLabelElement>) => {
     className,
     style,
     readonly,
+    onClick,
     ...htmlProps
   } = props;
 
@@ -75,7 +74,10 @@ const Check = forwardRef((_props: CheckProps, ref: Ref<HTMLLabelElement>) => {
       checked={internalChecked}
       disabled={disabled}
       name={name}
+      tabIndex={-1}
       value={isBoolean(value) ? Number(value) : value}
+      data-value={typeof value === 'string' ? `'${value}'` : value}
+      data-allow-uncheck={allowUncheck || undefined}
       onClick={(e) => {
         e.stopPropagation();
         if ((type === 'radio-button' || type === 'radio') && allowUncheck && internalChecked) {
@@ -93,13 +95,19 @@ const Check = forwardRef((_props: CheckProps, ref: Ref<HTMLLabelElement>) => {
     if (props.stopLabelTrigger) event.preventDefault();
   };
 
+  const onInnerClick = (e: MouseEvent<HTMLLabelElement>) => {
+    onClick?.({ e });
+  };
+
   return (
     <label
       ref={ref}
+      tabIndex={disabled ? undefined : 0}
       className={labelClassName}
       title={props.title}
       style={style}
       {...omit(htmlProps, ['checkAll', 'stopLabelTrigger'])}
+      onClick={onInnerClick}
     >
       {input}
       <span className={`${classPrefix}-${type}__input`} />

src/radio/RadioGroup.tsx

@@ -9,6 +9,7 @@ import { CheckContext, CheckContextValue } from '../common/Check';
 import Radio from './Radio';
 import useMutationObservable from '../_util/useMutationObserver';
 import { radioGroupDefaultProps } from './defaultProps';
+import useKeyboard from './useKeyboard';
 
 /**
  * RadioGroup 组件所接收的属性
@@ -26,7 +27,9 @@ const RadioGroup = (props: RadioGroupProps) => {
 
   const [internalValue, setInternalValue] = useControlled(props, 'value', onChange);
   const [barStyle, setBarStyle] = useState({});
-  const groupRef = useRef(null);
+  const radioGroupRef = useRef<HTMLDivElement>(null);
+
+  useKeyboard(radioGroupRef, setInternalValue);
 
   const checkedRadioCls = `.${classPrefix}-radio-button.${classPrefix}-is-checked`;
   const { SIZE: sizeMap } = useCommonClassName();
@@ -42,6 +45,9 @@ const RadioGroup = (props: RadioGroupProps) => {
 
       return {
         ...checkProps,
+        name: props.name,
+        // 有一个允许取消，就可以取消选中
+        allowUncheck: checkProps.allowUncheck || props.allowUncheck,
         checked: internalValue === checkProps.value,
         disabled: checkProps.disabled || disabled,
         onChange(checked, { e }) {
@@ -56,7 +62,7 @@ const RadioGroup = (props: RadioGroupProps) => {
 
   const calcBarStyle = () => {
     if (!variant.includes('filled')) return;
-    const checkedRadio = groupRef.current.querySelector?.(checkedRadioCls);
+    const checkedRadio = radioGroupRef.current.querySelector?.(checkedRadioCls) as HTMLElement;
     if (!checkedRadio) return setBarStyle({ width: 0 });
 
     const { offsetWidth, offsetLeft } = checkedRadio;
@@ -65,9 +71,9 @@ const RadioGroup = (props: RadioGroupProps) => {
 
   useEffect(() => {
     calcBarStyle();
-  }, [groupRef.current, internalValue]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [radioGroupRef.current, internalValue]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useMutationObservable(groupRef.current, calcBarStyle);
+  useMutationObservable(radioGroupRef.current, calcBarStyle);
 
   const renderBlock = () => {
     if (!variant.includes('filled')) return null;
@@ -93,7 +99,7 @@ const RadioGroup = (props: RadioGroupProps) => {
   return (
     <CheckContext.Provider value={context}>
       <div
-        ref={groupRef}
+        ref={radioGroupRef}
         style={style}
         className={classNames(`${classPrefix}-radio-group`, sizeMap[size], className, {
           [`${classPrefix}-radio-group__outline`]: variant === 'outline',