Merge branch 'rc/master' into bugfix/keep-pushable

react-component · Dec 16, 2017 · c5322a8 · c5322a8
2 parents de05632 + db32618
commit c5322a8
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 17 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,6 +1,14 @@
 # History
 ----
 
+## 8.5.0
+
+[Feature] Add focus() blur() and autoFocus.
+
+## 8.4.0 / 2017-11-09
+
+Support React 16.
+
 ## 8.3.0 / 2017-07-28
 
 [Feature] Support keyboard accessibility.[#282](https://github.com/react-component/slider/pull/282)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "8.3.5",
+  "version": "8.5.0",
   "description": "Slider UI component for React",
   "keywords": [
     "react",
@@ -10,7 +10,7 @@
     "input",
     "range"
   ],
-  "homepage": "http://github.com/react-component/gesture/",
+  "homepage": "http://github.com/react-component/slider/",
   "repository": {
     "type": "git",
     "url": "git@github.com:react-component/slider.git"
@@ -67,7 +67,7 @@
     "enzyme-to-json": "^3.0.0",
     "jest": "^20.0.0",
     "pre-commit": "1.x",
-    "rc-tools": "6.x",
+    "rc-tools": "7.x",
     "rc-trigger": "^2.2.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
@@ -80,7 +80,7 @@
     "babel-runtime": "6.x",
     "classnames": "^2.2.5",
     "prop-types": "^15.5.4",
-    "rc-tooltip": "^3.4.3",
+    "rc-tooltip": "^3.7.0",
     "rc-util": "^4.0.4",
     "shallowequal": "^1.0.1",
     "warning": "^3.0.0"

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 = {
@@ -87,7 +90,8 @@ export default function createSlider(Component) {
     }
 
     componentDidMount() {
-      this.document = this.sliderRef.ownerDocument;
+      // Snapshot testing cannot handle refs, so be sure to null-check this.
+      this.document = this.sliderRef && this.sliderRef.ownerDocument;
     }
 
     onMouseDown = (e) => {
@@ -126,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() {
@@ -187,6 +196,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
@@ -146,4 +146,47 @@ describe('Range', () => {
     expect(wrapper.instance().getSlider().state.bounds[0]).toBe(39);
     expect(wrapper.instance().getSlider().state.bounds[1]).toBe(40);
   });
+
+  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
@@ -22,7 +22,7 @@ describe('Slider', () => {
     expect(trackStyle.visibility).toMatch('visible');
   });
 
-  it('increments the value when key "up" was pressed', () => {
+  it('increases the value when key "up" is pressed', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);
 
@@ -32,7 +32,7 @@ describe('Slider', () => {
     expect(wrapper.state('value')).toBe(51);
   });
 
-  it('increments the value when key "right" was pressed', () => {
+  it('increases the value when key "right" is pressed', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);
 
@@ -42,7 +42,7 @@ describe('Slider', () => {
     expect(wrapper.state('value')).toBe(51);
   });
 
-  it('increases the value when key "page up" was pressed, by a factor 2', () => {
+  it('increases the value when key "page up" is pressed, by a factor 2', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);
 
@@ -52,7 +52,7 @@ describe('Slider', () => {
     expect(wrapper.state('value')).toBe(52);
   });
 
-  it('decreases the value when key "down" was pressed', () => {
+  it('decreases the value when key "down" is pressed', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);
 
@@ -62,7 +62,7 @@ describe('Slider', () => {
     expect(wrapper.state('value')).toBe(49);
   });
 
-  it('decreases the value when key "left" was pressed', () => {
+  it('decreases the value when key "left" is pressed', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);
 
@@ -72,7 +72,7 @@ describe('Slider', () => {
     expect(wrapper.state('value')).toBe(49);
   });
 
-  it('decreases the value when key "page down" was pressed, by a factor 2', () => {
+  it('decreases the value when key "page down" is pressed, by a factor 2', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);
 
@@ -82,7 +82,7 @@ describe('Slider', () => {
     expect(wrapper.state('value')).toBe(48);
   });
 
-  it('sets the value to minimum when key "home" was pressed', () => {
+  it('sets the value to minimum when key "home" is pressed', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);
 
@@ -92,7 +92,7 @@ describe('Slider', () => {
     expect(wrapper.state('value')).toBe(0);
   });
 
-  it('sets the value to maximum when the key "end" was pressed', () => {
+  it('sets the value to maximum when the key "end" is pressed', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);
 
@@ -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();
+    });
+  });
 });