You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.8 KiB
84 lines
2.8 KiB
import * as React from 'react';
|
|
import RcCheckbox from 'rc-checkbox';
|
|
import classNames from 'classnames';
|
|
import { composeRef } from 'rc-util/lib/ref';
|
|
import { useContext } from 'react';
|
|
import { FormItemInputContext } from '../form/context';
|
|
import type { RadioProps, RadioChangeEvent } from './interface';
|
|
import { ConfigContext } from '../config-provider';
|
|
import RadioGroupContext, { RadioOptionTypeContext } from './context';
|
|
import DisabledContext from '../config-provider/DisabledContext';
|
|
import warning from '../_util/warning';
|
|
|
|
const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (props, ref) => {
|
|
const groupContext = React.useContext(RadioGroupContext);
|
|
const radioOptionTypeContext = React.useContext(RadioOptionTypeContext);
|
|
|
|
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
|
const innerRef = React.useRef<HTMLElement>();
|
|
const mergedRef = composeRef(ref, innerRef);
|
|
const { isFormItemInput } = useContext(FormItemInputContext);
|
|
|
|
warning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
|
|
|
|
const onChange = (e: RadioChangeEvent) => {
|
|
props.onChange?.(e);
|
|
groupContext?.onChange?.(e);
|
|
};
|
|
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
className,
|
|
children,
|
|
style,
|
|
disabled: customDisabled,
|
|
...restProps
|
|
} = props;
|
|
const radioPrefixCls = getPrefixCls('radio', customizePrefixCls);
|
|
const prefixCls =
|
|
(groupContext?.optionType || radioOptionTypeContext) === 'button'
|
|
? `${radioPrefixCls}-button`
|
|
: radioPrefixCls;
|
|
|
|
const radioProps: RadioProps = { ...restProps };
|
|
|
|
// ===================== Disabled =====================
|
|
const disabled = React.useContext(DisabledContext);
|
|
radioProps.disabled = customDisabled || disabled;
|
|
|
|
if (groupContext) {
|
|
radioProps.name = groupContext.name;
|
|
radioProps.onChange = onChange;
|
|
radioProps.checked = props.value === groupContext.value;
|
|
radioProps.disabled = radioProps.disabled || groupContext.disabled;
|
|
}
|
|
const wrapperClassString = classNames(
|
|
`${prefixCls}-wrapper`,
|
|
{
|
|
[`${prefixCls}-wrapper-checked`]: radioProps.checked,
|
|
[`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
|
|
[`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
|
|
[`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
|
|
},
|
|
className,
|
|
);
|
|
|
|
return (
|
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
<label
|
|
className={wrapperClassString}
|
|
style={style}
|
|
onMouseEnter={props.onMouseEnter}
|
|
onMouseLeave={props.onMouseLeave}
|
|
>
|
|
<RcCheckbox {...radioProps} type="radio" prefixCls={prefixCls} ref={mergedRef} />
|
|
{children !== undefined ? <span>{children}</span> : null}
|
|
</label>
|
|
);
|
|
};
|
|
|
|
const Radio = React.forwardRef<unknown, RadioProps>(InternalRadio);
|
|
|
|
Radio.displayName = 'Radio';
|
|
|
|
export default Radio;
|
|
|