From e7e4b7ded20270f4333e32ec324ea84ddd7a7268 Mon Sep 17 00:00:00 2001 From: meikidd Date: Sun, 3 Jan 2021 22:12:18 +0800 Subject: [PATCH] fix #108 "ref is not a prop" error --- dist/InfiniteScroll.js | 45 +++++++++++++++++++++++++++++-------- src/InfiniteScroll.js | 17 +++++++++----- test/infiniteScroll_test.js | 2 +- 3 files changed, 49 insertions(+), 15 deletions(-) diff --git a/dist/InfiniteScroll.js b/dist/InfiniteScroll.js index 462ef57..2fd1579 100644 --- a/dist/InfiniteScroll.js +++ b/dist/InfiniteScroll.js @@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true }); +exports.InfiniteScroll = undefined; var _createClass = (function() { function defineProperties(target, props) { @@ -21,6 +22,20 @@ var _createClass = (function() { }; })(); +var _extends = + Object.assign || + function(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + return target; + }; + var _react = require('react'); var _react2 = _interopRequireDefault(_react); @@ -81,7 +96,21 @@ function _inherits(subClass, superClass) { : (subClass.__proto__ = superClass); } -var InfiniteScroll = (function(_Component) { +exports.default = _react2.default.forwardRef(function(props, ref) { + return _react2.default.createElement( + InfiniteScroll, + _extends({}, props, { + forwardedRef: + typeof ref === 'function' + ? ref + : function(r) { + return (ref = r); + } + }) + ); +}); + +var InfiniteScroll = (exports.InfiniteScroll = (function(_Component) { _inherits(InfiniteScroll, _Component); function InfiniteScroll(props) { @@ -357,7 +386,7 @@ var InfiniteScroll = (function(_Component) { loader = renderProps.loader, loadMore = renderProps.loadMore, pageStart = renderProps.pageStart, - ref = renderProps.ref, + forwardedRef = renderProps.forwardedRef, threshold = renderProps.threshold, useCapture = renderProps.useCapture, useWindow = renderProps.useWindow, @@ -371,7 +400,7 @@ var InfiniteScroll = (function(_Component) { 'loader', 'loadMore', 'pageStart', - 'ref', + 'forwardedRef', 'threshold', 'useCapture', 'useWindow', @@ -380,8 +409,8 @@ var InfiniteScroll = (function(_Component) { props.ref = function(node) { _this2.scrollComponent = node; - if (ref) { - ref(node); + if (forwardedRef) { + forwardedRef(node); } }; @@ -403,7 +432,7 @@ var InfiniteScroll = (function(_Component) { ]); return InfiniteScroll; -})(_react.Component); +})(_react.Component)); InfiniteScroll.propTypes = { children: _propTypes2.default.node.isRequired, @@ -414,7 +443,7 @@ InfiniteScroll.propTypes = { loader: _propTypes2.default.node, loadMore: _propTypes2.default.func.isRequired, pageStart: _propTypes2.default.number, - ref: _propTypes2.default.func, + forwardedRef: _propTypes2.default.func, getScrollParent: _propTypes2.default.func, threshold: _propTypes2.default.number, useCapture: _propTypes2.default.bool, @@ -433,5 +462,3 @@ InfiniteScroll.defaultProps = { loader: null, getScrollParent: null }; -exports.default = InfiniteScroll; -module.exports = exports['default']; diff --git a/src/InfiniteScroll.js b/src/InfiniteScroll.js index 332f7bd..1091f91 100644 --- a/src/InfiniteScroll.js +++ b/src/InfiniteScroll.js @@ -1,7 +1,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -export default class InfiniteScroll extends Component { +export default React.forwardRef((props, ref) => ( + (ref = r)} + /> +)); + +export class InfiniteScroll extends Component { static propTypes = { children: PropTypes.node.isRequired, element: PropTypes.node, @@ -11,7 +18,7 @@ export default class InfiniteScroll extends Component { loader: PropTypes.node, loadMore: PropTypes.func.isRequired, pageStart: PropTypes.number, - ref: PropTypes.func, + forwardedRef: PropTypes.func, getScrollParent: PropTypes.func, threshold: PropTypes.number, useCapture: PropTypes.bool, @@ -256,7 +263,7 @@ export default class InfiniteScroll extends Component { loader, loadMore, pageStart, - ref, + forwardedRef, threshold, useCapture, useWindow, @@ -266,8 +273,8 @@ export default class InfiniteScroll extends Component { props.ref = node => { this.scrollComponent = node; - if (ref) { - ref(node); + if (forwardedRef) { + forwardedRef(node); } }; diff --git a/test/infiniteScroll_test.js b/test/infiniteScroll_test.js index b18263c..02f99bb 100644 --- a/test/infiniteScroll_test.js +++ b/test/infiniteScroll_test.js @@ -2,7 +2,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { expect } from 'chai'; import { stub, spy } from 'sinon'; -import InfiniteScroll from '../src/InfiniteScroll'; +import { InfiniteScroll } from '../src/InfiniteScroll'; describe('InfiniteScroll component', () => { it('should render', () => {