Merge pull request #3830 from ant-design/fix-popover

Let Checkbox and Radio response hover events

components/checkbox/index.tsx

@@ -29,8 +29,10 @@ export default class Checkbox extends React.Component<CheckboxProps, any> {
     return PureRenderMixin.shouldComponentUpdate.apply(this, args);
   }
   render() {
-    const [{ prefixCls, style, children, className, indeterminate }, restProps] = splitObject(
+    const [{ prefixCls, style, children, className, indeterminate, onMouseEnter,
-      this.props, ['prefixCls', 'style', 'children', 'className', 'indeterminate']
+      onMouseLeave }, restProps] = splitObject(
+      this.props, ['prefixCls', 'style', 'children', 'className', 'indeterminate',
+      'onMouseEnter', 'onMouseLeave']
     );
     const classString = classNames({
       [className]: !!className,
@@ -40,7 +42,12 @@ export default class Checkbox extends React.Component<CheckboxProps, any> {
       [`${prefixCls}-indeterminate`]: indeterminate,
     });
     return (
-      <label className={classString} style={style}>
+      <label
+        className={classString}
+        style={style}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
         <RcCheckbox
           {...restProps}
           prefixCls={prefixCls}

components/radio/group.tsx

@@ -30,6 +30,8 @@ export interface RadioGroupProps {
   size?: 'large' | 'default' | 'small';
   style?: React.CSSProperties;
   disabled?: boolean;
+  onMouseEnter?: React.FormEventHandler<any>;
+  onMouseLeave?: React.FormEventHandler<any>;
 }
 
 export default class RadioGroup extends React.Component<RadioGroupProps, any> {
@@ -99,6 +101,15 @@ export default class RadioGroup extends React.Component<RadioGroupProps, any> {
       [`${prefixCls}-${props.size}`]: props.size,
       [className]: className,
     });
-    return <div className={classString} style={props.style}>{children}</div>;
+    return (
+      <div
+        className={classString}
+        style={props.style}
+        onMouseEnter={props.onMouseEnter}
+        onMouseLeave={props.onMouseLeave}
+      >
+        {children}
+      </div>
+    );
   }
 }

components/radio/radio.tsx

@@ -15,6 +15,8 @@ export interface RadioProps {
   disabled?: boolean;
   className?: string;
   onChange?: (e: any) => any;
+  onMouseEnter?: React.FormEventHandler<any>;
+  onMouseLeave?: React.FormEventHandler<any>;
 }
 
 export default class Radio extends React.Component<RadioProps, any> {
@@ -40,8 +42,14 @@ export default class Radio extends React.Component<RadioProps, any> {
       [`${prefixCls}-checked`]: checked,
       [`${prefixCls}-disabled`]: disabled,
     });
+
     return (
-      <label className={wrapperClassString} style={style}>
+      <label
+        className={wrapperClassString}
+        style={style}
+        onMouseEnter={this.props.onMouseEnter}
+        onMouseLeave={this.props.onMouseLeave}
+      >
         <RcRadio {...this.props} className={classString} style={null} children={null} />
         {children ? <span>{children}</span> : null}
       </label>

tests/checkbox/index.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Checkbox from '../../components/checkbox';
+
+describe('Checkbox', () => {
+  it('responses hover events', () => {
+    const onMouseEnter = jest.fn();
+    const onMouseLeave = jest.fn();
+
+    const wrapper = shallow(
+      <Checkbox
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      />
+    );
+
+    wrapper.simulate('mouseenter');
+    expect(onMouseEnter).toHaveBeenCalled();
+
+    wrapper.simulate('mouseleave');
+    expect(onMouseLeave).toHaveBeenCalled();
+  });
+});

tests/radio/group.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Radio from '../../components/radio';
+import RadioGroup from '../../components/radio/group';
+
+describe('Radio', () => {
+  it('responses hover events', () => {
+    const onMouseEnter = jest.fn();
+    const onMouseLeave = jest.fn();
+
+    const wrapper = shallow(
+      <RadioGroup
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        <Radio/>
+      </RadioGroup>
+    );
+
+    wrapper.simulate('mouseenter');
+    expect(onMouseEnter).toHaveBeenCalled();
+
+    wrapper.simulate('mouseleave');
+    expect(onMouseLeave).toHaveBeenCalled();
+  });
+});

tests/radio/radio.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Radio from '../../components/radio';
+
+describe('Radio', () => {
+  it('responses hover events', () => {
+    const onMouseEnter = jest.fn();
+    const onMouseLeave = jest.fn();
+
+    const wrapper = shallow(
+      <Radio
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      />
+    );
+
+    wrapper.simulate('mouseenter');
+    expect(onMouseEnter).toHaveBeenCalled();
+
+    wrapper.simulate('mouseleave');
+    expect(onMouseLeave).toHaveBeenCalled();
+  });
+});