2023-09-11 17:28:04 +08:00
|
|
|
import * as React from 'react';
|
2017-04-14 16:20:09 +08:00
|
|
|
import classNames from 'classnames';
|
2023-03-08 11:54:40 +08:00
|
|
|
import type { CheckboxRef } from 'rc-checkbox';
|
2017-03-13 10:20:25 +08:00
|
|
|
import RcCheckbox from 'rc-checkbox';
|
2023-09-11 17:28:04 +08:00
|
|
|
|
|
|
|
import { devUseWarning } from '../_util/warning';
|
|
|
|
import Wave from '../_util/wave';
|
|
|
|
import { TARGET_CLS } from '../_util/wave/interface';
|
2020-11-20 08:58:14 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2023-06-15 09:46:05 +08:00
|
|
|
import DisabledContext from '../config-provider/DisabledContext';
|
2022-06-21 10:24:52 +08:00
|
|
|
import { FormItemInputContext } from '../form/context';
|
2023-06-25 12:18:34 +08:00
|
|
|
import GroupContext from './GroupContext';
|
2022-03-01 21:12:00 +08:00
|
|
|
import useStyle from './style';
|
2017-03-13 10:20:25 +08:00
|
|
|
|
2018-03-08 20:34:40 +08:00
|
|
|
export interface AbstractCheckboxProps<T> {
|
2017-03-13 10:20:25 +08:00
|
|
|
prefixCls?: string;
|
2017-04-14 16:20:09 +08:00
|
|
|
className?: string;
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName?: string;
|
2017-03-13 10:20:25 +08:00
|
|
|
defaultChecked?: boolean;
|
2017-04-14 16:20:09 +08:00
|
|
|
checked?: boolean;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
disabled?: boolean;
|
2023-06-15 09:46:05 +08:00
|
|
|
title?: string;
|
2018-03-08 20:34:40 +08:00
|
|
|
onChange?: (e: T) => void;
|
2019-06-16 20:51:47 +08:00
|
|
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
|
|
onMouseEnter?: React.MouseEventHandler<HTMLElement>;
|
|
|
|
onMouseLeave?: React.MouseEventHandler<HTMLElement>;
|
|
|
|
onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
|
|
|
|
onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
|
2019-06-24 11:29:58 +08:00
|
|
|
value?: any;
|
2018-01-12 00:09:23 +08:00
|
|
|
tabIndex?: number;
|
2017-05-27 09:31:06 +08:00
|
|
|
name?: string;
|
2017-09-18 15:40:25 +08:00
|
|
|
children?: React.ReactNode;
|
2019-05-03 21:55:18 +08:00
|
|
|
id?: string;
|
|
|
|
autoFocus?: boolean;
|
2020-05-27 10:21:17 +08:00
|
|
|
type?: string;
|
2020-12-28 18:54:02 +08:00
|
|
|
skipGroup?: boolean;
|
2017-04-14 16:20:09 +08:00
|
|
|
}
|
|
|
|
|
2018-03-08 20:34:40 +08:00
|
|
|
export interface CheckboxChangeEventTarget extends CheckboxProps {
|
|
|
|
checked: boolean;
|
|
|
|
}
|
|
|
|
|
2018-03-08 21:42:22 +08:00
|
|
|
export interface CheckboxChangeEvent {
|
|
|
|
target: CheckboxChangeEventTarget;
|
|
|
|
stopPropagation: () => void;
|
|
|
|
preventDefault: () => void;
|
2018-07-24 14:49:23 +08:00
|
|
|
nativeEvent: MouseEvent;
|
2018-03-08 21:42:22 +08:00
|
|
|
}
|
2018-03-08 20:34:40 +08:00
|
|
|
|
2020-09-16 11:43:55 +08:00
|
|
|
export interface CheckboxProps extends AbstractCheckboxProps<CheckboxChangeEvent> {
|
|
|
|
indeterminate?: boolean;
|
|
|
|
}
|
|
|
|
|
2023-03-08 11:54:40 +08:00
|
|
|
const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProps> = (
|
2023-07-11 11:20:11 +08:00
|
|
|
props,
|
|
|
|
ref,
|
|
|
|
) => {
|
|
|
|
const {
|
2020-11-20 08:58:14 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
className,
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName,
|
2020-11-20 08:58:14 +08:00
|
|
|
children,
|
|
|
|
indeterminate = false,
|
|
|
|
style,
|
|
|
|
onMouseEnter,
|
|
|
|
onMouseLeave,
|
2020-12-28 18:54:02 +08:00
|
|
|
skipGroup = false,
|
2022-07-01 21:29:31 +08:00
|
|
|
disabled,
|
2020-11-20 08:58:14 +08:00
|
|
|
...restProps
|
2023-07-11 11:20:11 +08:00
|
|
|
} = props;
|
2023-06-26 11:42:46 +08:00
|
|
|
const { getPrefixCls, direction, checkbox } = React.useContext(ConfigContext);
|
2020-11-20 08:58:14 +08:00
|
|
|
const checkboxGroup = React.useContext(GroupContext);
|
2022-12-06 21:09:59 +08:00
|
|
|
const { isFormItemInput } = React.useContext(FormItemInputContext);
|
|
|
|
const contextDisabled = React.useContext(DisabledContext);
|
2022-09-20 16:48:59 +08:00
|
|
|
const mergedDisabled = (checkboxGroup?.disabled || disabled) ?? contextDisabled;
|
2020-11-20 08:58:14 +08:00
|
|
|
|
|
|
|
const prevValue = React.useRef(restProps.value);
|
|
|
|
|
2023-09-11 17:28:04 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
const warning = devUseWarning();
|
|
|
|
|
2022-05-10 15:43:29 +08:00
|
|
|
warning(
|
2020-11-20 08:58:14 +08:00
|
|
|
'checked' in restProps || !!checkboxGroup || !('value' in restProps),
|
2019-08-27 18:29:20 +08:00
|
|
|
'Checkbox',
|
2023-09-11 17:28:04 +08:00
|
|
|
'usage',
|
2020-04-14 16:48:23 +08:00
|
|
|
'`value` is not a valid prop, do you mean `checked`?',
|
2019-08-27 18:29:20 +08:00
|
|
|
);
|
2023-09-11 17:28:04 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
checkboxGroup?.registerValue(restProps.value);
|
2020-11-20 08:58:14 +08:00
|
|
|
}, []);
|
2019-04-30 23:39:01 +08:00
|
|
|
|
2020-11-20 08:58:14 +08:00
|
|
|
React.useEffect(() => {
|
2020-12-28 18:54:02 +08:00
|
|
|
if (skipGroup) {
|
|
|
|
return;
|
|
|
|
}
|
2020-11-20 08:58:14 +08:00
|
|
|
if (restProps.value !== prevValue.current) {
|
|
|
|
checkboxGroup?.cancelValue(prevValue.current);
|
|
|
|
checkboxGroup?.registerValue(restProps.value);
|
2022-01-20 10:15:42 +08:00
|
|
|
prevValue.current = restProps.value;
|
2017-04-14 16:20:09 +08:00
|
|
|
}
|
2020-11-20 08:58:14 +08:00
|
|
|
return () => checkboxGroup?.cancelValue(restProps.value);
|
|
|
|
}, [restProps.value]);
|
|
|
|
|
|
|
|
const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
|
2022-03-03 14:55:19 +08:00
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
2022-03-01 21:12:00 +08:00
|
|
|
|
2020-11-20 08:58:14 +08:00
|
|
|
const checkboxProps: CheckboxProps = { ...restProps };
|
2020-12-28 18:54:02 +08:00
|
|
|
if (checkboxGroup && !skipGroup) {
|
2020-11-20 08:58:14 +08:00
|
|
|
checkboxProps.onChange = (...args) => {
|
|
|
|
if (restProps.onChange) {
|
|
|
|
restProps.onChange(...args);
|
|
|
|
}
|
|
|
|
if (checkboxGroup.toggleOption) {
|
|
|
|
checkboxGroup.toggleOption({ label: children, value: restProps.value });
|
|
|
|
}
|
|
|
|
};
|
|
|
|
checkboxProps.name = checkboxGroup.name;
|
2022-10-21 11:45:55 +08:00
|
|
|
checkboxProps.checked = checkboxGroup.value.includes(restProps.value);
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2020-11-20 08:58:14 +08:00
|
|
|
const classString = classNames(
|
2023-07-13 01:46:56 +08:00
|
|
|
`${prefixCls}-wrapper`,
|
2020-11-20 08:58:14 +08:00
|
|
|
{
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
[`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
|
2022-07-01 21:29:31 +08:00
|
|
|
[`${prefixCls}-wrapper-disabled`]: mergedDisabled,
|
2022-03-24 21:54:20 +08:00
|
|
|
[`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
|
2020-11-20 08:58:14 +08:00
|
|
|
},
|
2023-06-26 11:42:46 +08:00
|
|
|
checkbox?.className,
|
2020-11-20 08:58:14 +08:00
|
|
|
className,
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName,
|
2022-03-03 14:55:19 +08:00
|
|
|
hashId,
|
|
|
|
);
|
|
|
|
const checkboxClass = classNames(
|
|
|
|
{
|
|
|
|
[`${prefixCls}-indeterminate`]: indeterminate,
|
|
|
|
},
|
2023-08-04 11:22:33 +08:00
|
|
|
TARGET_CLS,
|
2022-03-03 14:55:19 +08:00
|
|
|
hashId,
|
2020-11-20 08:58:14 +08:00
|
|
|
);
|
2022-04-06 10:04:09 +08:00
|
|
|
const ariaChecked = indeterminate ? 'mixed' : undefined;
|
2022-03-01 21:12:00 +08:00
|
|
|
return wrapSSR(
|
2023-08-04 11:22:33 +08:00
|
|
|
<Wave component="Checkbox" disabled={mergedDisabled}>
|
|
|
|
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
|
|
|
<label
|
|
|
|
className={classString}
|
|
|
|
style={{ ...checkbox?.style, ...style }}
|
|
|
|
onMouseEnter={onMouseEnter}
|
|
|
|
onMouseLeave={onMouseLeave}
|
|
|
|
>
|
|
|
|
<RcCheckbox
|
|
|
|
aria-checked={ariaChecked}
|
|
|
|
{...checkboxProps}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
className={checkboxClass}
|
|
|
|
disabled={mergedDisabled}
|
|
|
|
ref={ref}
|
|
|
|
/>
|
|
|
|
{children !== undefined && <span>{children}</span>}
|
|
|
|
</label>
|
|
|
|
</Wave>,
|
2020-11-20 08:58:14 +08:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2023-07-07 13:34:51 +08:00
|
|
|
const Checkbox = React.forwardRef<CheckboxRef, CheckboxProps>(InternalCheckbox);
|
|
|
|
|
2022-06-21 10:24:52 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
Checkbox.displayName = 'Checkbox';
|
|
|
|
}
|
2019-04-30 23:39:01 +08:00
|
|
|
|
|
|
|
export default Checkbox;
|