import * as React from 'react'; import classNames from 'classnames'; import RcCheckbox from 'rc-checkbox'; import CheckboxGroup, { GroupContext } from './Group'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import warning from '../_util/warning'; export interface AbstractCheckboxProps { prefixCls?: string; className?: string; defaultChecked?: boolean; checked?: boolean; style?: React.CSSProperties; disabled?: boolean; onChange?: (e: T) => void; onClick?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; onMouseLeave?: React.MouseEventHandler; onKeyPress?: React.KeyboardEventHandler; onKeyDown?: React.KeyboardEventHandler; value?: any; tabIndex?: number; name?: string; children?: React.ReactNode; id?: string; autoFocus?: boolean; } export interface CheckboxProps extends AbstractCheckboxProps { indeterminate?: boolean; } export interface CheckboxChangeEventTarget extends CheckboxProps { checked: boolean; } export interface CheckboxChangeEvent { target: CheckboxChangeEventTarget; stopPropagation: () => void; preventDefault: () => void; nativeEvent: MouseEvent; } class Checkbox extends React.PureComponent { static Group: typeof CheckboxGroup; static __ANT_CHECKBOX = true; static defaultProps = { indeterminate: false, }; static contextType = GroupContext; context: any; private rcCheckbox: any; componentDidMount() { const { value } = this.props; this.context?.registerValue(value); warning( 'checked' in this.props || this.context || !('value' in this.props), 'Checkbox', '`value` is not validate prop, do you mean `checked`?', ); } componentDidUpdate({ value: prevValue }: CheckboxProps) { const { value } = this.props; if (value !== prevValue) { this.context?.cancelValue(prevValue); this.context?.registerValue(value); } } componentWillUnmount() { const { value } = this.props; this.context?.cancelValue(value); } saveCheckbox = (node: any) => { this.rcCheckbox = node; }; focus() { this.rcCheckbox.focus(); } blur() { this.rcCheckbox.blur(); } renderCheckbox = ({ getPrefixCls }: ConfigConsumerProps) => { const { props, context } = this; const { prefixCls: customizePrefixCls, className, children, indeterminate, style, onMouseEnter, onMouseLeave, ...restProps } = props; const checkboxGroup = context; const prefixCls = getPrefixCls('checkbox', customizePrefixCls); const checkboxProps: CheckboxProps = { ...restProps }; if (checkboxGroup) { checkboxProps.onChange = (...args) => { if (restProps.onChange) { restProps.onChange(...args); } checkboxGroup.toggleOption({ label: children, value: props.value }); }; checkboxProps.name = checkboxGroup.name; checkboxProps.checked = checkboxGroup.value.indexOf(props.value) !== -1; checkboxProps.disabled = props.disabled || checkboxGroup.disabled; } const classString = classNames(className, { [`${prefixCls}-wrapper`]: true, [`${prefixCls}-wrapper-checked`]: checkboxProps.checked, [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled, }); const checkboxClass = classNames({ [`${prefixCls}-indeterminate`]: indeterminate, }); return ( // eslint-disable-next-line jsx-a11y/label-has-associated-control ); }; render() { return {this.renderCheckbox}; } } export default Checkbox;