Add types to build, Opt-in prop change for disableKeyboardControls (#480

) * add types to build, switch disableKeyboardControls to 'opt-in' with enableKeyboardControls, update tests * remove tar file
FormidableLabs · Jan 16, 2019 · cc26ac9 · cc26ac9
1 parent 4b64cbb
commit cc26ac9
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 10 deletions.
diff --git a/.npmignore b/.npmignore
@@ -6,3 +6,5 @@
 !package.json
 !LICENSE
 !README.md
+!index.js
+!index.d.ts
diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ Or on CodeSandBox at the following url: <a href="https://codesandbox.io/s/04wxlo
 | beforeSlide                | `React.PropTypes.func`                                                                  | Hook to be called before a slide is changed                                                                                                                                                                |                                                                           |
 | cellAlign                  | `React.PropTypes.oneOf(['left', 'center', 'right'])`                                    | When displaying more than one slide, sets which position to anchor the current slide to.**Is overridden to `left` when `transitionMode="fade"`**                                                           |                                                                           |
 | cellSpacing                | `React.PropTypes.number`                                                                | Space between slides, as an integer, but reflected as `px`                                                                                                                                                 |                                                                           |
-| disableKeyboardControls    | `React.PropTypes.bool`                                                                  | When set to `true` will disable keyboard controls.                                                                                                                                                         | `false`                                                                   |
+| enableKeyboardControls     | `React.PropTypes.bool`                                                                  | When set to `true` will enable keyboard controls.                                                                                                                                                          | `false`                                                                   |
 | dragging                   | `React.PropTypes.bool`                                                                  | Enable mouse swipe/dragging.                                                                                                                                                                               | `true`                                                                    |
 | easing                     | `React.PropTypes.string`                                                                | Animation easing function. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease)                                                                                                    |                                                                           |
 | edgeEasing                 | `React.PropTypes.string`                                                                | Animation easing function when swipe exceeds edge. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease)                                                                            |                                                                           |

diff --git a/index.d.ts b/index.d.ts
@@ -125,7 +125,7 @@ export interface CarouselProps {
    * When set to true, disable keyboard controls
    * @default false
    */
-  disableKeyboardControls?: boolean;
+  enableKeyboardControls?: boolean;
 
   /**
    * Enable mouse swipe/dragging

diff --git a/src/index.js b/src/index.js
@@ -421,7 +421,7 @@ export default class Carousel extends React.Component {
   }
   // eslint-disable-next-line complexity
   handleKeyPress(e) {
-    if (!this.props.disableKeyboardControls) {
+    if (this.props.enableKeyboardControls) {
       switch (e.keyCode) {
         case 39:
         case 68:
@@ -976,7 +976,7 @@ Carousel.propTypes = {
   beforeSlide: PropTypes.func,
   cellAlign: PropTypes.oneOf(['left', 'center', 'right']),
   cellSpacing: PropTypes.number,
-  disableKeyboardControls: PropTypes.bool,
+  enableKeyboardControls: PropTypes.bool,
   dragging: PropTypes.bool,
   easing: PropTypes.string,
   edgeEasing: PropTypes.string,
@@ -1022,7 +1022,7 @@ Carousel.defaultProps = {
   beforeSlide() {},
   cellAlign: 'left',
   cellSpacing: 0,
-  disableKeyboardControls: false,
+  enableKeyboardControls: false,
   dragging: true,
   easing: 'easeCircleOut',
   edgeEasing: 'easeElasticOut',

diff --git a/src/utilities/style-utilities.js b/src/utilities/style-utilities.js
@@ -97,7 +97,7 @@ export const getSliderStyles = (propWidth, stateSlideWidth) => {
   return {
     boxSizing: 'border-box',
     display: 'block',
-    height: '100%',
+    height: 'auto',
     MozBoxSizing: 'border-box',
     position: 'relative',
     visibility: stateSlideWidth ? 'inherit' : 'hidden',

diff --git a/test/specs/carousel.test.js b/test/specs/carousel.test.js
@@ -477,15 +477,15 @@ describe('<Carousel />', () => {
       expect(afterSlideSpy).toBeCalledWith(1);
     });
 
-    describe('disableKeyboardControls', () => {
+    describe('enableKeyboardControls', () => {
       it('should move to next slide when pressing right arrow key', () => {
         const map = {};
         document.addEventListener = jest.fn((event, cb) => {
           map[event] = cb;
         });
 
         const wrapper = mount(
-          <Carousel>
+          <Carousel enableKeyboardControls>
             <p>Slide1</p>
             <p>Slide2</p>
             <p>Slide3</p>
@@ -496,14 +496,14 @@ describe('<Carousel />', () => {
         expect(wrapper).toHaveState({ currentSlide: 1 });
       });
 
-      it('should not move to next slide when pressing right arrow key when disableKeyboardControls is set to true', () => {
+      it('should not move to next slide when pressing right arrow key when enableKeyboardControls is set to false/not passed in', () => {
         const map = {};
         document.addEventListener = jest.fn((event, cb) => {
           map[event] = cb;
         });
 
         const wrapper = mount(
-          <Carousel disableKeyboardControls>
+          <Carousel>
             <p>Slide1</p>
             <p>Slide2</p>
             <p>Slide3</p>