mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 11:08:45 +08:00
86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import RcCheckbox from 'rc-checkbox';
|
|
import shallowEqual from 'shallowequal';
|
|
import CheckboxGroup from './Group';
|
|
|
|
export interface AbstractCheckboxProps {
|
|
prefixCls?: string;
|
|
className?: string;
|
|
defaultChecked?: boolean;
|
|
checked?: boolean;
|
|
style?: React.CSSProperties;
|
|
disabled?: boolean;
|
|
onChange?: React.FormEventHandler<any>;
|
|
onMouseEnter?: React.MouseEventHandler<any>;
|
|
onMouseLeave?: React.MouseEventHandler<any>;
|
|
value?: any;
|
|
name?: string;
|
|
children?: React.ReactChild;
|
|
}
|
|
|
|
export interface CheckboxProps extends AbstractCheckboxProps {
|
|
indeterminate?: boolean;
|
|
}
|
|
|
|
export default class Checkbox extends React.Component<CheckboxProps, any> {
|
|
static Group: typeof CheckboxGroup;
|
|
static defaultProps = {
|
|
prefixCls: 'ant-checkbox',
|
|
indeterminate: false,
|
|
};
|
|
|
|
static contextTypes = {
|
|
checkboxGroup: PropTypes.any,
|
|
};
|
|
|
|
shouldComponentUpdate(nextProps, nextState, nextContext) {
|
|
return !shallowEqual(this.props, nextProps) ||
|
|
!shallowEqual(this.state, nextState) ||
|
|
!shallowEqual(this.context.checkboxGroup, nextContext.checkboxGroup);
|
|
}
|
|
|
|
render() {
|
|
const { props, context } = this;
|
|
const {
|
|
prefixCls,
|
|
className,
|
|
children,
|
|
indeterminate,
|
|
style,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
...restProps,
|
|
} = props;
|
|
const { checkboxGroup } = context;
|
|
let checkboxProps: CheckboxProps = { ...restProps };
|
|
if (checkboxGroup) {
|
|
checkboxProps.onChange = () => checkboxGroup.toggleOption({ label: children, value: props.value });
|
|
checkboxProps.checked = checkboxGroup.value.indexOf(props.value) !== -1;
|
|
checkboxProps.disabled = 'disabled' in props ? props.disabled : checkboxGroup.disabled;
|
|
}
|
|
const classString = classNames(className, {
|
|
[`${prefixCls}-wrapper`]: true,
|
|
});
|
|
const checkboxClass = classNames({
|
|
[`${prefixCls}-indeterminate`]: indeterminate,
|
|
});
|
|
return (
|
|
<label
|
|
className={classString}
|
|
style={style}
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
>
|
|
<RcCheckbox
|
|
{...checkboxProps}
|
|
prefixCls={prefixCls}
|
|
className={checkboxClass}
|
|
/>
|
|
{children !== undefined ? <span>{children}</span> : null}
|
|
</label>
|
|
);
|
|
}
|
|
}
|