Merge pull request #371 from react-component/focus

Add focus() & blur()
react-component · Dec 1, 2017 · a5853d1 · a5853d1
2 parents 49aad59 + 370235d
commit a5853d1
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 4 deletions.
diff --git a/src/Handle.jsx b/src/Handle.jsx
@@ -2,6 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export default class Handle extends React.Component {
+  focus() {
+    this.handle.focus();
+  }
+
+  blur() {
+    this.handle.blur();
+  }
+
   render() {
     const {
       className, vertical, offset, style, disabled, min, max, value, ...restProps,
@@ -24,6 +32,7 @@ export default class Handle extends React.Component {
     }
     return (
       <div
+        ref={node => (this.handle = node)}
         role="slider"
         tabIndex="0"
         {...ariaProps}

diff --git a/src/Slider.jsx b/src/Slider.jsx
@@ -11,6 +11,7 @@ class Slider extends React.Component {
     defaultValue: PropTypes.number,
     value: PropTypes.number,
     disabled: PropTypes.bool,
+    autoFocus: PropTypes.bool,
   };
 
   constructor(props) {
@@ -37,6 +38,13 @@ class Slider extends React.Component {
     }
   }
 
+  componentDidMount() {
+    const { autoFocus, disabled } = this.props;
+    if (autoFocus && !disabled) {
+      this.focus();
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (!('value' in nextProps || 'min' in nextProps || 'max' in nextProps)) return;
 

diff --git a/src/common/createSlider.jsx b/src/common/createSlider.jsx
@@ -38,6 +38,9 @@ export default function createSlider(Component) {
       railStyle: PropTypes.object,
       dotStyle: PropTypes.object,
       activeDotStyle: PropTypes.object,
+      autoFocus: PropTypes.bool,
+      onFocus: PropTypes.func,
+      onBlur: PropTypes.func,
     };
 
     static defaultProps = {
@@ -127,19 +130,24 @@ export default function createSlider(Component) {
     }
 
     onFocus = (e) => {
-      const isVertical = this.props.vertical;
-
+      const { onFocus, vertical } = this.props;
       if (utils.isEventFromHandle(e, this.handlesRefs)) {
-        const handlePosition = utils.getHandleCenterPosition(isVertical, e.target);
-
+        const handlePosition = utils.getHandleCenterPosition(vertical, e.target);
         this.dragOffset = 0;
         this.onStart(handlePosition);
         utils.pauseEvent(e);
+        if (onFocus) {
+          onFocus(e);
+        }
       }
     }
 
     onBlur = (e) => {
+      const { onBlur } = this.props;
       this.onEnd(e);
+      if (onBlur) {
+        onBlur(e);
+      }
     };
 
     addDocumentTouchEvents() {
@@ -193,6 +201,18 @@ export default function createSlider(Component) {
       }
     }
 
+    focus() {
+      if (!this.props.disabled) {
+        this.handlesRefs[0].focus();
+      }
+    }
+
+    blur() {
+      if (!this.props.disabled) {
+        this.handlesRefs[0].blur();
+      }
+    }
+
     getSliderStart() {
       const slider = this.sliderRef;
       const rect = slider.getBoundingClientRect();

diff --git a/tests/Range.test.js b/tests/Range.test.js
@@ -91,4 +91,47 @@ describe('Range', () => {
     wrapper.find('.rc-slider-handle').at(3).simulate('mouseLeave');
     expect(wrapper.state().visibles[1]).toBe(false);
   });
+
+  describe('focus & blur', () => {
+    let container;
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container);
+    });
+
+    const mockRect = (wrapper) => {
+      wrapper.instance().sliderRef.getBoundingClientRect = () => ({
+        left: 10,
+        width: 100,
+      });
+    };
+
+    it('focus()', () => {
+      const handleFocus = jest.fn();
+      const wrapper = mount(
+        <Range min={0} max={20} onFocus={handleFocus} />,
+        { attachTo: container }
+      );
+      mockRect(wrapper);
+      wrapper.instance().focus();
+      expect(handleFocus).toBeCalled();
+    });
+
+    it('blur', () => {
+      const handleBlur = jest.fn();
+      const wrapper = mount(
+        <Range min={0} max={20} onBlur={handleBlur} />,
+        { attachTo: container }
+      );
+      mockRect(wrapper);
+      wrapper.instance().focus();
+      wrapper.instance().blur();
+      expect(handleBlur).toBeCalled();
+    });
+  });
 });
diff --git a/tests/Slider.test.js b/tests/Slider.test.js
@@ -101,4 +101,47 @@ describe('Slider', () => {
 
     expect(wrapper.state('value')).toBe(100);
   });
+
+  describe('focus & blur', () => {
+    let container;
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container);
+    });
+
+    const mockRect = (wrapper) => {
+      wrapper.instance().sliderRef.getBoundingClientRect = () => ({
+        left: 10,
+        width: 100,
+      });
+    };
+
+    it('focus()', () => {
+      const handleFocus = jest.fn();
+      const wrapper = mount(
+        <Slider min={0} max={10} defaultValue={0} onFocus={handleFocus} />,
+        { attachTo: container }
+      );
+      mockRect(wrapper);
+      wrapper.instance().focus();
+      expect(handleFocus).toBeCalled();
+    });
+
+    it('blur', () => {
+      const handleBlur = jest.fn();
+      const wrapper = mount(
+        <Slider min={0} max={10} defaultValue={0} onBlur={handleBlur} />,
+        { attachTo: container }
+      );
+      mockRect(wrapper);
+      wrapper.instance().focus();
+      wrapper.instance().blur();
+      expect(handleBlur).toBeCalled();
+    });
+  });
 });