diff --git a/.vscode/settings.json b/.vscode/settings.json index b1af5a5299..e5c735fc61 100644 --- 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 index fec6d9721f..c30ec48ff2 100644 --- 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) => { +const Check = forwardRef((_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) => { const TOnChange: ( checked: boolean, - context: { - e: React.ChangeEvent | React.MouseEvent; - }, + context: { e: ChangeEvent | MouseEvent }, ) => void = onChange; const [internalChecked, setInternalChecked] = useControlled(props, 'checked', TOnChange); @@ -90,9 +88,11 @@ const Check = forwardRef((_props: CheckProps, ref: Ref) => { // Checkbox/ Radio 内容为空则不再渲染 span，不存在 0:Number 的情况 const showLabel = !!(children || label); - const handleLabelClick = (event) => { + const handleLabelClick = (event: MouseEvent) => { // 在tree等组件中使用 阻止label触发checked 与expand冲突 - if (props.stopLabelTrigger) event.preventDefault(); + if (props.stopLabelTrigger) { + event.preventDefault(); + } }; const onInnerClick = (e: MouseEvent) => { diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx index e23ed272ab..d679d70c3d 100644 --- 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; const Radio = forwardRefWithStatics( - (props: RadioProps, ref: Ref) => , + (props: RadioProps, ref: Ref) => ( + (props, radioDefaultProps)} /> + ), { Group: RadioGroup, - Button: forwardRef((props: RadioProps, ref: Ref) => ( - + Button: forwardRef((props, ref) => ( + (props, radioDefaultProps)} /> )), }, ); Radio.displayName = 'Radio'; -Radio.defaultProps = radioDefaultProps; export default Radio; diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx index 9032d3532d..d8f92ad022 100644 --- 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 { /** * 单选选项组，里面可以嵌套 */ -const RadioGroup = (props: RadioGroupProps) => { +const RadioGroup: React.FC = (originalProps) => { const { classPrefix } = useConfig(); + + const props = useDefaultProps(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
; }; @@ -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 index 2b7eec7090..f7d1b35889 100644 --- 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" >