Upgrade to latest scroll-into-view-if-needed

icd2k3 · icd2k3 · commit aca2328ef7d3 · 2018-05-06T22:54:54.000-07:00
diff --git a/README.md b/README.md
@@ -39,26 +39,69 @@ The standalone version does **not** come bundled with [scroll-into-view-if-neede
 
 `import ScrollIntoViewIfNeeded from 'react-scroll-into-view-if-needed/dist/umd/standalone.js'`
 
-## Optional Props
-The following props are supported by the component.
-
-You can _also_ pass standard html attributes like `className`, `id`, etc...
-
 #### active
 > Type: `boolean`
 > Default: `true`
 
 The `active` prop allows controll of _when_ to scroll to the component. By default, it will attempt to scroll as soon as it is mounted, but you can set this prop to manually control when to trigger the scroll behavior from the parent component.
 
+```js
+class Example extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { active: false };
+  }
+
+  handleScrollToggle = () => this.setState({ active: !this.state.active });
+
+  render() {
+    const { active } = this.state;
+
+    return (
+      <div>
+        <button onClick={this.handleScrollToggle}>Scroll</button>
+        <div style={{ paddingTop: 2000 }}>
+          <ScrollIntoViewIfNeeded active={active}>
+            <div>Hello</div>
+          </ScrollIntoViewIfNeeded>
+        </div>
+      </div>
+    );
+  }
+}
+```
+
+#### options
+> Type: `object`
+> Default: `{ behavior: 'smooth', scrollMode: 'if-needed' }`
+> Full list of options [here](https://www.npmjs.com/package/scroll-into-view-if-needed#api)
+
+The `options` prop simply passes options to `scroll-into-view-if-needed`. See all the possible options in their [API documentation](https://www.npmjs.com/package/scroll-into-view-if-needed#api).
+
+```js
+<ScrollIntoViewIfNeeded options={{
+  scrollMode: 'always',
+}}>
+  <div>Hello</div>
+</ScrollIntoViewIfNeeded>
+```
+
 #### elementType
 > Type: `string`
 > Default: `'div'`
 
 Set the wrapper component type. For example, this could also be `'footer'`, `'button'`, etc...  See the React [createElement](https://reactjs.org/docs/react-api.html#createelement) api.
 
-#### options
-> Type: `object`
-> Default: `{ duration: 250, easing: 'easeOut' }`
+```js
+<ScrollIntoViewIfNeeded elementType="span">
+  <div>Hello</div>
+</ScrollIntoViewIfNeeded>
+```
 
-The `options` prop simply passes options to `scroll-into-view-if-needed`. See all the possible options in their [API documentation](https://www.npmjs.com/package/scroll-into-view-if-needed#api).
+#### className, id, etc
+
+You can also pass normal element attributes like `className` to the component.
+
+## Upgrading from v1
 
+This project has been updated along with `scroll-into-view-if-needed` and accepts the same `options`. Check out the [migration guide](https://www.npmjs.com/package/scroll-into-view-if-needed#breaking-api-changes-from-v1) over there!
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-scroll-into-view-if-needed",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "A thin component wrapper around scroll-into-view-if-needed",
   "main": "dist/umd/index.js",
   "module": "dist/es/index.js",
@@ -20,14 +20,14 @@
   "dependencies": {},
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-jest": "^22.4.3",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
-    "coveralls": "^3.0.0",
+    "coveralls": "^3.0.1",
     "cross-env": "^5.1.4",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -40,11 +40,11 @@
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "rollup": "^0.58.1",
-    "rollup-plugin-babel": "^3.0.3",
-    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup": "^0.58.2",
+    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0",
-    "scroll-into-view-if-needed": "^1.5.0"
+    "scroll-into-view-if-needed": "^2.1.5"
   },
   "scripts": {
     "build": "rollup -c && cross-env BUILD_TYPE=standalone rollup -c",
diff --git a/src/__tests__/__snapshots__/index.test.js.snap b/src/__tests__/__snapshots__/index.test.js.snap
@@ -9,8 +9,8 @@ ShallowWrapper {
     elementType="div"
     options={
       Object {
-        "duration": 250,
-        "easing": "easeOut",
+        "behavior": "smooth",
+        "scrollMode": "if-needed",
       }
     }
   >
@@ -86,8 +86,8 @@ ShallowWrapper {
     elementType="div"
     options={
       Object {
-        "duration": 250,
-        "easing": "easeOut",
+        "behavior": "smooth",
+        "scrollMode": "if-needed",
       }
     }
   >
diff --git a/src/__tests__/index.test.js b/src/__tests__/index.test.js
@@ -15,8 +15,8 @@ test('Render with no props', () => {
   expect(wrapper).toMatchSnapshot();
   expect(mockScroll).toHaveBeenCalledTimes(1);
   expect(mockScroll).toHaveBeenCalledWith(null, {
-    duration: 250,
-    easing: 'easeOut',
+    behavior: 'smooth',
+    scrollMode: 'if-needed',
   });
 });
 
@@ -71,10 +71,10 @@ test('Expect elementType to be respected', () => {
 
 test('Expect custom options to be passed to `scroll-into-view-if-needed`', () => {
   shallow(
-    <ScrollIntoViewIfNeeded options={{ centerIfNeeded: true }}>
+    <ScrollIntoViewIfNeeded options={{ block: 'center' }}>
       <MockChild />
     </ScrollIntoViewIfNeeded>,
   );
 
-  expect(mockScroll).toHaveBeenLastCalledWith(null, { centerIfNeeded: true });
+  expect(mockScroll).toHaveBeenLastCalledWith(null, { block: 'center' });
 });
diff --git a/src/index.js b/src/index.js
@@ -10,31 +10,43 @@ export default class ScrollIntoViewIfNeeded extends PureComponent {
     elementType: PropTypes.string,
     // this shape should mirror the scroll-into-view-if-needed options
     options: PropTypes.shape({
-      boundary: PropTypes.node,
-      centerIfNeeded: PropTypes.bool,
-      duration: PropTypes.number,
-      easing: PropTypes.oneOf([
-        'ease',
-        'easeIn',
-        'easeOut',
-        'easeInOut',
-        'linear',
+      behavior: PropTypes.oneOfType([
+        PropTypes.oneOf([
+          'auto',
+          'smooth',
+          'instant',
+        ]),
+        PropTypes.func,
+      ]),
+      block: PropTypes.oneOf([
+        'center',
+        'end',
+        'nearest',
+        'start',
+      ]),
+      inline: PropTypes.oneOf([
+        'center',
+        'end',
+        'nearest',
+        'start',
+      ]),
+      scrollMode: PropTypes.oneOf([
+        'always',
+        'if-needed',
+      ]),
+      boundary: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.func,
       ]),
-      offset: PropTypes.shape({
-        top: PropTypes.number,
-        right: PropTypes.number,
-        bottom: PropTypes.number,
-        left: PropTypes.number,
-      }),
     }),
   };
 
   static defaultProps = {
     active: true,
     elementType: 'div',
     options: {
-      duration: 250,
-      easing: 'easeOut',
+      behavior: 'smooth',
+      scrollMode: 'if-needed',
     },
   };
 
diff --git a/yarn.lock b/yarn.lock
@@ -142,12 +142,6 @@ align-text@^0.1.1, align-text@^0.1.3:
     longest "^1.0.1"
     repeat-string "^1.5.2"
 
-amator@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/amator/-/amator-1.0.1.tgz#0fd3663fef5f3334d088cf68a70ba74398aa0e26"
-  dependencies:
-    bezier-easing "^2.0.3"
-
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -394,6 +388,30 @@ babel-core@^6.0.0, babel-core@^6.26.0:
     slash "^1.0.0"
     source-map "^0.5.6"
 
+babel-core@^6.26.3:
+  version "6.26.3"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-generator "^6.26.0"
+    babel-helpers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-register "^6.26.0"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    convert-source-map "^1.5.1"
+    debug "^2.6.9"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.8"
+    slash "^1.0.0"
+    source-map "^0.5.7"
+
 babel-eslint@^8.2.3:
   version "8.2.3"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.3.tgz#1a2e6681cc9bc4473c32899e59915e19cd6733cf"
@@ -1056,10 +1074,6 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-bezier-easing@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.0.3.tgz#cb493fddb7f8920ecca00973344ce0518885f17e"
-
 binary-extensions@^1.0.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
@@ -1367,7 +1381,7 @@ contains-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
@@ -1387,9 +1401,9 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-coveralls@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.0.tgz#22ef730330538080d29b8c151dc9146afde88a99"
+coveralls@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.1.tgz#12e15914eaa29204e56869a5ece7b9e1492d2ae2"
   dependencies:
     js-yaml "^3.6.1"
     lcov-parse "^0.0.10"
@@ -3842,7 +3856,7 @@ pretty-format@^22.4.3:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-private@^0.1.6, private@^0.1.7:
+private@^0.1.6, private@^0.1.7, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
 
@@ -4225,15 +4239,15 @@ rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1:
   dependencies:
     glob "^7.0.5"
 
-rollup-plugin-babel@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-3.0.3.tgz#63adedc863130327512a4a9006efc2241c5b7c15"
+rollup-plugin-babel@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-3.0.4.tgz#41b3e762fe64450dd61da3105a2cf7ad76be4edc"
   dependencies:
     rollup-pluginutils "^1.5.0"
 
-rollup-plugin-commonjs@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.1.0.tgz#468341aab32499123ee9a04b22f51d9bf26fdd94"
+rollup-plugin-commonjs@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.1.3.tgz#37bfbf341292ea14f512438a56df8f9ca3ba4d67"
   dependencies:
     estree-walker "^0.5.1"
     magic-string "^0.22.4"
@@ -4262,9 +4276,9 @@ rollup-pluginutils@^2.0.1:
     estree-walker "^0.3.0"
     micromatch "^2.3.11"
 
-rollup@^0.58.1:
-  version "0.58.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.58.1.tgz#5e2e05ceb103f770868b12c4048c22d3903fa2dd"
+rollup@^0.58.2:
+  version "0.58.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.58.2.tgz#2feddea8c0c022f3e74b35c48e3c21b3433803ce"
   dependencies:
     "@types/estree" "0.0.38"
     "@types/node" "*"
@@ -4324,11 +4338,9 @@ sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-scroll-into-view-if-needed@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-1.5.0.tgz#39e8ce15cb74348a897ee96110e848fed50aaf95"
-  dependencies:
-    amator "1.0.1"
+scroll-into-view-if-needed@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.1.5.tgz#0ded69275e0172c71f523722d497aef44f6c6bad"
 
 "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1:
   version "5.5.0"

Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,8 @@ ShallowWrapper {`
`9`	`9`	`elementType="div"`
`10`	`10`	`options={`
`11`	`11`	`Object {`
`12`		`- "duration": 250,`
`13`		`- "easing": "easeOut",`
	`12`	`+ "behavior": "smooth",`
	`13`	`+ "scrollMode": "if-needed",`
`14`	`14`	`}`
`15`	`15`	`}`
`16`	`16`	`>`
`@@ -86,8 +86,8 @@ ShallowWrapper {`
`86`	`86`	`elementType="div"`
`87`	`87`	`options={`
`88`	`88`	`Object {`
`89`		`- "duration": 250,`
`90`		`- "easing": "easeOut",`
	`89`	`+ "behavior": "smooth",`
	`90`	`+ "scrollMode": "if-needed",`
`91`	`91`	`}`
`92`	`92`	`}`
`93`	`93`	`>`