fix: 🐛 replace defaultProps with useDefaultProps (#2397)

* fix: 🐛 🐛 replace defaultProps with useDefaultProps * fix: 🐛 fix * fix: 🐛 fix * fix: 🐛 fix * fix: 🐛 fix * fix: 🐛 fix * fix: 🐛 fix * fix: fix * fix: fix * fix: fix * fix(fix snap): fix snap
Tencent · Nov 28, 2023 · be13f67 · be13f67
1 parent db81348
commit be13f67
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 34 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -24,13 +24,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "cSpell.words": [
-    "activable",
-    "actived",
-    "borderless",
-    "Cascader",
-    "Popconfirm",
-    "Swiper",
-    "tdesign"
-  ]
+  "cSpell.words": ["activable", "actived", "borderless", "Cascader", "Popconfirm", "Swiper", "tdesign"]
 }
diff --git a/src/common/Check.tsx b/src/common/Check.tsx
@@ -1,4 +1,4 @@
-import React, { Ref, forwardRef, useContext, MouseEvent } from 'react';
+import React, { forwardRef, useContext, MouseEvent, ChangeEvent } from 'react';
 import classNames from 'classnames';
 import isBoolean from 'lodash/isBoolean';
 import { omit } from '../_util/helper';
@@ -27,7 +27,7 @@ export interface CheckContextValue {
   inject: (props: CheckProps) => CheckProps;
 }
 
-const Check = forwardRef((_props: CheckProps, ref: Ref<HTMLLabelElement>) => {
+const Check = forwardRef<HTMLLabelElement, CheckProps>((_props, ref) => {
   // 支持从 Context 注入
   const context = useContext(CheckContext);
   const props = context ? context.inject(_props) : _props;
@@ -53,9 +53,7 @@ const Check = forwardRef((_props: CheckProps, ref: Ref<HTMLLabelElement>) => {
 
   const TOnChange: (
     checked: boolean,
-    context: {
-      e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>;
-    },
+    context: { e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLInputElement> },
   ) => void = onChange;
 
   const [internalChecked, setInternalChecked] = useControlled(props, 'checked', TOnChange);
@@ -90,9 +88,11 @@ const Check = forwardRef((_props: CheckProps, ref: Ref<HTMLLabelElement>) => {
   // Checkbox/ Radio 内容为空则不再渲染 span，不存在 0:Number 的情况
   const showLabel = !!(children || label);
 
-  const handleLabelClick = (event) => {
+  const handleLabelClick = (event: MouseEvent<HTMLSpanElement>) => {
     // 在tree等组件中使用  阻止label触发checked 与expand冲突
-    if (props.stopLabelTrigger) event.preventDefault();
+    if (props.stopLabelTrigger) {
+      event.preventDefault();
+    }
   };
 
   const onInnerClick = (e: MouseEvent<HTMLLabelElement>) => {

diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
@@ -3,20 +3,22 @@ import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import Check, { CheckProps } from '../common/Check';
 import RadioGroup from './RadioGroup';
 import { radioDefaultProps } from './defaultProps';
+import useDefaultProps from '../hooks/useDefaultProps';
 
 export type RadioProps = Omit<CheckProps, 'type'>;
 
 const Radio = forwardRefWithStatics(
-  (props: RadioProps, ref: Ref<HTMLLabelElement>) => <Check ref={ref} type="radio" {...props} />,
+  (props: RadioProps, ref: Ref<HTMLLabelElement>) => (
+    <Check ref={ref} type="radio" {...useDefaultProps<RadioProps>(props, radioDefaultProps)} />
+  ),
   {
     Group: RadioGroup,
-    Button: forwardRef((props: RadioProps, ref: Ref<HTMLLabelElement>) => (
-      <Check ref={ref} type="radio-button" {...props} />
+    Button: forwardRef<HTMLLabelElement, RadioProps>((props, ref) => (
+      <Check ref={ref} type="radio-button" {...useDefaultProps<RadioProps>(props, radioDefaultProps)} />
     )),
   },
 );
 
 Radio.displayName = 'Radio';
-Radio.defaultProps = radioDefaultProps;
 
 export default Radio;
diff --git a/src/radio/RadioGroup.tsx b/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 useDefaultProps from '../hooks/useDefaultProps';
 import useKeyboard from './useKeyboard';
 
 /**
@@ -21,8 +22,11 @@ export interface RadioGroupProps extends TdRadioGroupProps, StyledProps {
 /**
  * 单选选项组，里面可以嵌套 <Radio />
  */
-const RadioGroup = (props: RadioGroupProps) => {
+const RadioGroup: React.FC<RadioGroupProps> = (originalProps) => {
   const { classPrefix } = useConfig();
+
+  const props = useDefaultProps<RadioGroupProps>(originalProps, radioGroupDefaultProps);
+
   const { disabled, children, onChange, size, variant, options = [], className, style } = props;
 
   const [internalValue, setInternalValue] = useControlled(props, 'value', onChange);
@@ -61,9 +65,13 @@ const RadioGroup = (props: RadioGroupProps) => {
   };
 
   const calcBarStyle = () => {
-    if (!variant.includes('filled')) return;
+    if (!variant.includes('filled')) {
+      return;
+    }
     const checkedRadio = radioGroupRef.current.querySelector?.(checkedRadioCls) as HTMLElement;
-    if (!checkedRadio) return setBarStyle({ width: 0 });
+    if (!checkedRadio) {
+      return setBarStyle({ width: 0 });
+    }
 
     const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = checkedRadio;
     setBarStyle({
@@ -81,7 +89,9 @@ const RadioGroup = (props: RadioGroupProps) => {
   useMutationObservable(radioGroupRef.current, calcBarStyle);
 
   const renderBlock = () => {
-    if (!variant.includes('filled')) return null;
+    if (!variant.includes('filled')) {
+      return null;
+    }
     return <div style={barStyle} className={`${classPrefix}-radio-group__bg-block`}></div>;
   };
 
@@ -126,6 +136,5 @@ const RadioGroup = (props: RadioGroupProps) => {
 };
 
 RadioGroup.displayName = 'RadioGroup';
-RadioGroup.defaultProps = radioGroupDefaultProps;
 
 export default RadioGroup;
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -92203,12 +92203,12 @@ exports[`csr snapshot test > csr test src/form/_example/disabled.jsx 1`] = `
                     class="t-radio-group t-size-m t-radio-group__outline"
                   >
                     <label
-                      class="t-radio"
-                      tabindex="0"
+                      class="t-radio t-is-disabled"
                     >
                       <input
                         class="t-radio__former"
                         data-value="'1'"
+                        disabled=""
                         tabindex="-1"
                         type="radio"
                         value="1"
@@ -92223,12 +92223,12 @@ exports[`csr snapshot test > csr test src/form/_example/disabled.jsx 1`] = `
                       </span>
                     </label>
                     <label
-                      class="t-radio"
-                      tabindex="0"
+                      class="t-radio t-is-disabled"
                     >
                       <input
                         class="t-radio__former"
                         data-value="'2'"
+                        disabled=""
                         tabindex="-1"
                         type="radio"
                         value="2"
@@ -92986,12 +92986,12 @@ exports[`csr snapshot test > csr test src/form/_example/disabled.jsx 1`] = `
                   class="t-radio-group t-size-m t-radio-group__outline"
                 >
                   <label
-                    class="t-radio"
-                    tabindex="0"
+                    class="t-radio t-is-disabled"
                   >
                     <input
                       class="t-radio__former"
                       data-value="'1'"
+                      disabled=""
                       tabindex="-1"
                       type="radio"
                       value="1"
@@ -93006,12 +93006,12 @@ exports[`csr snapshot test > csr test src/form/_example/disabled.jsx 1`] = `
                     </span>
                   </label>
                   <label
-                    class="t-radio"
-                    tabindex="0"
+                    class="t-radio t-is-disabled"
                   >
                     <input
                       class="t-radio__former"
                       data-value="'2'"
+                      disabled=""
                       tabindex="-1"
                       type="radio"
                       value="2"