dub-step - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
   "name": "dub-step",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A set of primitives for building step/index based UI widgets controlled by swipe, timers, and/or buttons.",
@@ -36,3 +36,3 @@ "main": "dist/dub-step.js",
     "prepublish": "npm run build",
-    "precommit": "lint-staged && npm run lint && npm run test && npm run documentation && git add docs"
+    "precommit": "lint-staged && npm run lint && npm run test && npm run documentation && git add docs && emdaer && git add *.md && git add .emdaer/.offline"
   },
@@ -44,2 +44,10 @@ "peerDependencies": {
   "devDependencies": {
+    "@emdaer/cli": "^1.2.2",
+    "@emdaer/core": "^1.2.2",
+    "@emdaer/plugin-contributors-details-github": "^1.2.1",
+    "@emdaer/plugin-import": "^1.2.2",
+    "@emdaer/plugin-license-reference": "^1.2.1",
+    "@emdaer/plugin-shields": "^1.2.1",
+    "@emdaer/plugin-value-from-package": "^1.2.1",
+    "@emdaer/transform-table-of-contents": "^1.3.0",
     "babel-cli": "^6.26.0",
@@ -46,0 +54,0 @@ "babel-core": "^6.26.0",

README.md

@@ -0,17 +1,20 @@
+<!--
+  This file was generated by emdaer
+
+  Its template can be found at .emdaer/README.emdaer.md
+-->
+
 <h1 align="center">
-  dub-step 🕺🏽
+dub-step 🕺🏽
     </br>
     <img src="https://user-images.githubusercontent.com/1127238/30524706-690c72e0-9bad-11e7-9feb-4c76f572bdfc.png" alt="dub-step logo" title="dub-step logo" width="100">
 </h1>
-<p align="center">Primitives for building step/index based UI widgets controlled by swipe, timers, and/or buttons.</p>
+<p align="center">
+A set of primitives for building step/index based UI widgets controlled by swipe, timers, and/or buttons.
+</p>
 <hr />
 
-[![Travis](https://img.shields.io/travis/infiniteluke/dub-step.svg?style=flat-square)](https://travis-ci.org/infiniteluke/dub-step)
-[![npm](https://img.shields.io/npm/v/dub-step.svg?style=flat-square)](https://www.npmjs.com/package/dub-step)
-[![GitHub issues](https://img.shields.io/github/issues/infiniteluke/dub-step.svg?style=flat-square)](https://github.com/infiniteluke/dub-step/issues)
-[![Coverage](https://img.shields.io/coveralls/infiniteluke/dub-step.svg?style=flat-square)]()
-[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![Travis](https://img.shields.io/travis/infiniteluke/dub-step.svg?style=flat-square)](https://travis-ci.org/infiniteluke/dub-step/) [![npm](https://img.shields.io/npm/v/dub-step.svg?style=flat-square)](https://www.npmjs.com/package/dub-step) [![GitHub Issues](https://img.shields.io/github/issues/infiniteluke/dub-step.svg?style=flat-square)](https://github.com/infiniteluke/dub-step/issues) [![Coverage](https://img.shields.io/coveralls/infiniteluke/dub-step.svg?style=flat-square)]() [![Styled with Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![README generated by emdaer](https://img.shields.io/badge/📓-documented%20with%20emdaer-F06632.svg?style=flat-square)](https://github.com/emdaer/emdaer)
 </br>
-[![Twitter](https://img.shields.io/twitter/url/https/github.com/infiniteluke/dub-step.svg?style=social)](https://twitter.com/intent/tweet?text=Step%20through%20an%20index%20with%20style%20with%20dub-step.%20Check%20it%20out!%20https://github.com/infiniteluke/dub-step%20🕺🏽&url=%5Bobject%20Object%5D)
-[![GitHub stars](https://img.shields.io/github/stars/infiniteluke/dub-step.svg?style=social&label=Star)](https://github.com/infiniteluke/dub-step/stargazers)
+[![Twitter](https://img.shields.io/twitter/url/https/github.com/infiniteluke/dub-step.svg?style=social)](https://twitter.com/intent/tweet?text=Step%20through%20an%20index%20with%20style%20with%20dub-step.%20Check%20it%20out!%20https://github.com/infiniteluke/dub-step%20🕺🏽&url=%5Bobject%20Object%5D) [![GitHub stars](https://img.shields.io/github/stars/infiniteluke/dub-step.svg?style=social)](https://github.com/infiniteluke/dub-step/stargazers)
 
@@ -22,14 +25,21 @@ Many existing carousel/swipe solutions in one way or another end up dictating the markup of your UI. They expose many options to allow for extensibility, but this results in a convoluted API that is not flexible. In these cases, your often very specific design must be fit into an existing rigid solution.
 
-_NOTE: Version v0.0.5 introduced a breaking change. All occurences of `index` in the dub-step API were renamed to `step`, for consistency. Please see [the docs](https://infiniteluke.github.io/dub-step) for more info._
+_NOTE: Version v0.0.5 introduced a breaking change. All occurences of `index` in the dub-step API were renamed to `step`, for consistency. Please see the [release notes](https://github.com/infiniteluke/dub-step/releases/tag/v0.0.5) for more info._
 
+
 ## Table of Contents
 
-* [Installation](#installation)
-* [Usage](#usage)
-* [Props](#props)
-* [Control Props](#control-props)
-* [Child Callback Function](#child-callback-function)
-* [Examples (WIP)](#examples)
-* [Credits](#credits)
+<!-- toc -->
 
+- [Installation](#installation)
+- [Usage](#usage)
+- [Props](#props)
+  * [Control Props](#control-props)
+- [How To Render](#how-to-render)
+- [Examples](#examples)
+- [Credits](#credits)
+- [Contributing](#contributing)
+- [License](#license)
+
+<!-- tocstop -->
+
 ## Installation
@@ -47,2 +57,3 @@
 
+
 ## Usage
@@ -85,2 +96,3 @@ > NOTE: Glamorous is used for styles in this example, but is not required.
                 component={Img}
+                step={i}
                 key={i}
@@ -131,2 +143,3 @@ src={url}
 
+
 ## Props
@@ -136,3 +149,3 @@
 
-## Control Props
+### Control Props
 
@@ -143,4 +156,5 @@ dub-step manages its own state internally and calls your `onChange`/`OnPlay`/`OnPause` etc. handlers with any relevant changes. The controllable state that dub-step manages includes: `step` and `paused`. Your child callback function (read more below) can be used to manipulate this state from within the render function and can likely support many of your use cases.
 
-## Child Callback Function
-This is where you render whatever you want to based on the state of dub-step. The function is passed as the child prop:
+
+## How To Render
+Dub step uses the child callback render function pattern. This is where you render whatever you want to based on the state of dub-step which is passed to the callback as parameters. The function is passed as the child prop of the DubStep component:
 ```jsx
@@ -156,2 +170,3 @@ <DubStep>
 
+
 ## Examples
@@ -167,3 +182,2 @@ These are not yet available on github. But check out the codesandbox until they are! Fork it and build your own examples then [tweet me](https://twitter.com/lukeherrington) about it!
 ## Credits
-
 [Kent Dodds'](github.com/kentcdodds) work on [downshift 🏎](https://github.com/paypal/downshift/) heavily inspired this package. You may even notice some copy pasta in the README 😏.
@@ -185,3 +199,35 @@
 
+
+## Contributing
+
+If you'd like to make emdaer better, please read our [guide to contributing](./CONTRIBUTING.md).
+
+These wonderful people have contributed to dub-step in one way or another:
+<details>
+<summary><strong>Contributors</strong></summary><br />
+<a title="I build multi-channel publishing systems and web applications at @fourkitchens." href="https://github.com/infiniteluke">
+  <img align="left" src="https://avatars0.githubusercontent.com/u/1127238?s=24" />
+</a>
+<strong>Luke Herrington</strong>
+<br /><br />
+<a title="🐼  Junior Frontend Engineer at @SumUp" href="https://github.com/connor-baer">
+  <img align="left" src="https://avatars0.githubusercontent.com/u/11017722?s=24" />
+</a>
+<strong>Connor Bär</strong>
+<br /><br />
+<a href="https://github.com/flipactual">
+  <img align="left" src="https://avatars0.githubusercontent.com/u/1306968?s=24" />
+</a>
+<strong>Flip</strong>
+<br /><br />
+<a title="Making software dev more accessible · Mormon, Husband, Father, Teacher · OSS, GDE, @TC39 · @PayPal @eggheadio @FrontendMasters @JavaScriptAir · #JS" href="https://github.com/kentcdodds">
+  <img align="left" src="https://avatars0.githubusercontent.com/u/1500684?s=24" />
+</a>
+<strong>Kent C. Dodds</strong>
+<br /><br />
+</details>
+
 ## License
-MIT
+dub-step is [MIT licensed](./LICENSE).
+
+

src/dub-step.js

@@ -289,19 +289,2 @@ import React, { Component } from 'react';
 
-  getValidStep(stepOffset) {
-    if (this.props.total) {
-      if (this.props.cycle) {
-        return this.getControlledProp('step') + stepOffset - this.props.total;
-      }
-      if (this.getControlledProp('step') + stepOffset < 0) {
-        return 0;
-      } else if (
-        this.getControlledProp('step') + stepOffset >
-        this.props.total - 1
-      ) {
-        return this.props.total - 1;
-      }
-    }
-    return this.getControlledProp('step') + stepOffset;
-  }
-
   /**
@@ -562,3 +545,4 @@ * The state of dub-step and prop getters/actions for changing the state are exposed as a parameter to the render prop.
     const posY = e.touches !== undefined ? e.touches[0].pageY : e.clientY;
-    this.targetSize = e.target[this.props.vertical ? 'height' : 'width'];
+    this.targetSize =
+      e.target[this.props.vertical ? 'offsetHeight' : 'offsetWidth'];
     this.setState(
@@ -565,0 +549,0 @@ {

No alert changes

Improved metrics

Number of lines in readme file

225

increased by25.7%

Worsened metrics

Total package byte prevSize

590790

decreased by-33.67%

Dev dependency count

35

increased by29.63%

Number of package files

8

decreased by-52.94%

Lines of code

16266

decreased by-1.79%

No dependency changes