From cf9286cbd6e70f6a59da00df740d47bcd1b831d1 Mon Sep 17 00:00:00 2001 From: Mikkel Schmidt Date: Tue, 29 Nov 2016 12:16:39 +0100 Subject: [PATCH 1/2] Add option to use relative position instead of transform --- examples/index.es6 | 7 ++ examples/index.js | 6 ++ react-list.es6 | 35 +++++--- react-list.js | 204 +++++++++++++++++++++++---------------------- 4 files changed, 140 insertions(+), 112 deletions(-) diff --git a/examples/index.es6 b/examples/index.es6 index a2586d1..777339f 100644 --- a/examples/index.es6 +++ b/examples/index.es6 @@ -78,6 +78,13 @@ const examples = [ itemSizeGetter: getHeight, type: 'variable' }, + { + length: 10000, + itemRenderer: renderVariableHeightItem, + itemSizeGetter: getHeight, + usePosition: true, + type: 'variable' + }, { axis: 'x', length: 10000, diff --git a/examples/index.js b/examples/index.js index 62fbb5d..2c86de5 100644 --- a/examples/index.js +++ b/examples/index.js @@ -177,6 +177,12 @@ itemRenderer: renderVariableHeightItem, itemSizeGetter: getHeight, type: 'variable' + }, { + length: 10000, + itemRenderer: renderVariableHeightItem, + itemSizeGetter: getHeight, + usePosition: true, + type: 'variable' }, { axis: 'x', length: 10000, diff --git a/react-list.es6 b/react-list.es6 index 0d6fd2d..91008c0 100644 --- a/react-list.es6 +++ b/react-list.es6 @@ -49,7 +49,8 @@ module.exports = class ReactList extends Component { threshold: PropTypes.number, type: PropTypes.oneOf(['simple', 'variable', 'uniform']), useStaticSize: PropTypes.bool, - useTranslate3d: PropTypes.bool + useTranslate3d: PropTypes.bool, + usePosition: PropTypes.bool }; static defaultProps = { @@ -61,7 +62,8 @@ module.exports = class ReactList extends Component { threshold: 100, type: 'simple', useStaticSize: false, - useTranslate3d: false + useTranslate3d: false, + usePosition: false }; constructor(props) { @@ -419,7 +421,7 @@ module.exports = class ReactList extends Component { } render() { - const {axis, length, type, useTranslate3d} = this.props; + const {axis, length, type, useTranslate3d, usePosition} = this.props; const {from, itemsPerRow} = this.state; const items = this.renderItems(); @@ -436,15 +438,24 @@ module.exports = class ReactList extends Component { const offset = this.getSpaceBefore(from, cache); const x = axis === 'x' ? offset : 0; const y = axis === 'y' ? offset : 0; - const transform = - useTranslate3d ? - `translate3d(${x}px, ${y}px, 0)` : - `translate(${x}px, ${y}px)`; - const listStyle = { - msTransform: transform, - WebkitTransform: transform, - transform - }; + let listStyle; + if (usePosition) { + listStyle = { + position: 'relative', + top: y, + left: x + }; + } else { + const transform = + useTranslate3d ? + `translate3d(${x}px, ${y}px, 0)` : + `translate(${x}px, ${y}px)`; + listStyle = { + msTransform: transform, + WebkitTransform: transform, + transform + }; + } return
{items}
; } }; diff --git a/react-list.js b/react-list.js index d0c0a4d..9f78529 100644 --- a/react-list.js +++ b/react-list.js @@ -115,16 +115,15 @@ var _this = _possibleConstructorReturn(this, (ReactList.__proto__ || Object.getPrototypeOf(ReactList)).call(this, props)); - var _this$props = _this.props; - var initialIndex = _this$props.initialIndex; - var pageSize = _this$props.pageSize; + var _this$props = _this.props, + initialIndex = _this$props.initialIndex, + pageSize = _this$props.pageSize; var itemsPerRow = 1; - var _this$constrain = _this.constrain(initialIndex, pageSize, itemsPerRow, _this.props); - - var from = _this$constrain.from; - var size = _this$constrain.size; + var _this$constrain = _this.constrain(initialIndex, pageSize, itemsPerRow, _this.props), + from = _this$constrain.from, + size = _this$constrain.size; _this.state = { from: from, size: size, itemsPerRow: itemsPerRow }; _this.cache = {}; @@ -134,10 +133,10 @@ _createClass(ReactList, [{ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(next) { - var _state = this.state; - var from = _state.from; - var size = _state.size; - var itemsPerRow = _state.itemsPerRow; + var _state = this.state, + from = _state.from, + size = _state.size, + itemsPerRow = _state.itemsPerRow; this.maybeSetState(this.constrain(from, size, itemsPerRow, next), NOOP); } @@ -183,9 +182,9 @@ }, { key: 'getScrollParent', value: function getScrollParent() { - var _props = this.props; - var axis = _props.axis; - var scrollParentGetter = _props.scrollParentGetter; + var _props = this.props, + axis = _props.axis, + scrollParentGetter = _props.scrollParentGetter; if (scrollParentGetter) return scrollParentGetter(); var el = findDOMNode(this); @@ -239,9 +238,9 @@ key: 'getScrollSize', value: function getScrollSize() { var scrollParent = this.scrollParent; - var _document = document; - var body = _document.body; - var documentElement = _document.documentElement; + var _document = document, + body = _document.body, + documentElement = _document.documentElement; var key = SCROLL_SIZE_KEYS[this.props.axis]; return scrollParent === window ? Math.max(body[key], documentElement[key]) : scrollParent[key]; @@ -249,16 +248,16 @@ }, { key: 'hasDeterminateSize', value: function hasDeterminateSize() { - var _props2 = this.props; - var itemSizeGetter = _props2.itemSizeGetter; - var type = _props2.type; + var _props2 = this.props, + itemSizeGetter = _props2.itemSizeGetter, + type = _props2.type; return type === 'uniform' || itemSizeGetter; } }, { key: 'getStartAndEnd', value: function getStartAndEnd() { - var threshold = arguments.length <= 0 || arguments[0] === undefined ? this.props.threshold : arguments[0]; + var threshold = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.threshold; var scroll = this.getScroll(); var start = Math.max(0, scroll - threshold); @@ -271,12 +270,12 @@ }, { key: 'getItemSizeAndItemsPerRow', value: function getItemSizeAndItemsPerRow() { - var _props3 = this.props; - var axis = _props3.axis; - var useStaticSize = _props3.useStaticSize; - var _state2 = this.state; - var itemSize = _state2.itemSize; - var itemsPerRow = _state2.itemsPerRow; + var _props3 = this.props, + axis = _props3.axis, + useStaticSize = _props3.useStaticSize; + var _state2 = this.state, + itemSize = _state2.itemSize, + itemsPerRow = _state2.itemsPerRow; if (useStaticSize && itemSize && itemsPerRow) { return { itemSize: itemSize, itemsPerRow: itemsPerRow }; @@ -334,9 +333,8 @@ }, { key: 'updateSimpleFrame', value: function updateSimpleFrame(cb) { - var _getStartAndEnd = this.getStartAndEnd(); - - var end = _getStartAndEnd.end; + var _getStartAndEnd = this.getStartAndEnd(), + end = _getStartAndEnd.end; var itemEls = findDOMNode(this.items).children; var elEnd = 0; @@ -351,9 +349,9 @@ if (elEnd > end) return cb(); - var _props4 = this.props; - var pageSize = _props4.pageSize; - var length = _props4.length; + var _props4 = this.props, + pageSize = _props4.pageSize, + length = _props4.length; var size = Math.min(this.state.size + pageSize, length); this.maybeSetState({ size: size }, cb); @@ -363,13 +361,13 @@ value: function updateVariableFrame(cb) { if (!this.props.itemSizeGetter) this.cacheSizes(); - var _getStartAndEnd2 = this.getStartAndEnd(); + var _getStartAndEnd2 = this.getStartAndEnd(), + start = _getStartAndEnd2.start, + end = _getStartAndEnd2.end; - var start = _getStartAndEnd2.start; - var end = _getStartAndEnd2.end; - var _props5 = this.props; - var length = _props5.length; - var pageSize = _props5.pageSize; + var _props5 = this.props, + length = _props5.length, + pageSize = _props5.pageSize; var space = 0; var from = 0; @@ -400,38 +398,33 @@ }, { key: 'updateUniformFrame', value: function updateUniformFrame(cb) { - var _getItemSizeAndItemsP = this.getItemSizeAndItemsPerRow(); - - var itemSize = _getItemSizeAndItemsP.itemSize; - var itemsPerRow = _getItemSizeAndItemsP.itemsPerRow; - + var _getItemSizeAndItemsP = this.getItemSizeAndItemsPerRow(), + itemSize = _getItemSizeAndItemsP.itemSize, + itemsPerRow = _getItemSizeAndItemsP.itemsPerRow; if (!itemSize || !itemsPerRow) return cb(); - var _getStartAndEnd3 = this.getStartAndEnd(); - - var start = _getStartAndEnd3.start; - var end = _getStartAndEnd3.end; - - var _constrain = this.constrain(Math.floor(start / itemSize) * itemsPerRow, (Math.ceil((end - start) / itemSize) + 1) * itemsPerRow, itemsPerRow, this.props); - - var from = _constrain.from; - var size = _constrain.size; + var _getStartAndEnd3 = this.getStartAndEnd(), + start = _getStartAndEnd3.start, + end = _getStartAndEnd3.end; + var _constrain = this.constrain(Math.floor(start / itemSize) * itemsPerRow, (Math.ceil((end - start) / itemSize) + 1) * itemsPerRow, itemsPerRow, this.props), + from = _constrain.from, + size = _constrain.size; return this.maybeSetState({ itemsPerRow: itemsPerRow, from: from, itemSize: itemSize, size: size }, cb); } }, { key: 'getSpaceBefore', value: function getSpaceBefore(index) { - var cache = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; + var cache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (cache[index] != null) return cache[index]; // Try the static itemSize. - var _state3 = this.state; - var itemSize = _state3.itemSize; - var itemsPerRow = _state3.itemsPerRow; + var _state3 = this.state, + itemSize = _state3.itemSize, + itemsPerRow = _state3.itemsPerRow; if (itemSize) { return cache[index] = Math.floor(index / itemsPerRow) * itemSize; @@ -467,17 +460,17 @@ }, { key: 'getSizeOf', value: function getSizeOf(index) { - var cache = this.cache; - var items = this.items; - var _props6 = this.props; - var axis = _props6.axis; - var itemSizeGetter = _props6.itemSizeGetter; - var itemSizeEstimator = _props6.itemSizeEstimator; - var type = _props6.type; - var _state4 = this.state; - var from = _state4.from; - var itemSize = _state4.itemSize; - var size = _state4.size; + var cache = this.cache, + items = this.items; + var _props6 = this.props, + axis = _props6.axis, + itemSizeGetter = _props6.itemSizeGetter, + itemSizeEstimator = _props6.itemSizeEstimator, + type = _props6.type; + var _state4 = this.state, + from = _state4.from, + itemSize = _state4.itemSize, + size = _state4.size; // Try the static itemSize. @@ -501,9 +494,9 @@ }, { key: 'constrain', value: function constrain(from, size, itemsPerRow, _ref) { - var length = _ref.length; - var pageSize = _ref.pageSize; - var type = _ref.type; + var length = _ref.length, + pageSize = _ref.pageSize, + type = _ref.type; size = Math.max(size, pageSize); var mod = size % itemsPerRow; @@ -537,14 +530,13 @@ }, { key: 'getVisibleRange', value: function getVisibleRange() { - var _state5 = this.state; - var from = _state5.from; - var size = _state5.size; + var _state5 = this.state, + from = _state5.from, + size = _state5.size; - var _getStartAndEnd4 = this.getStartAndEnd(0); - - var start = _getStartAndEnd4.start; - var end = _getStartAndEnd4.end; + var _getStartAndEnd4 = this.getStartAndEnd(0), + start = _getStartAndEnd4.start, + end = _getStartAndEnd4.end; var cache = {}; var first = void 0, @@ -562,12 +554,12 @@ value: function renderItems() { var _this2 = this; - var _props7 = this.props; - var itemRenderer = _props7.itemRenderer; - var itemsRenderer = _props7.itemsRenderer; - var _state6 = this.state; - var from = _state6.from; - var size = _state6.size; + var _props7 = this.props, + itemRenderer = _props7.itemRenderer, + itemsRenderer = _props7.itemsRenderer; + var _state6 = this.state, + from = _state6.from, + size = _state6.size; var items = []; for (var i = 0; i < size; ++i) { @@ -579,14 +571,15 @@ }, { key: 'render', value: function render() { - var _props8 = this.props; - var axis = _props8.axis; - var length = _props8.length; - var type = _props8.type; - var useTranslate3d = _props8.useTranslate3d; - var _state7 = this.state; - var from = _state7.from; - var itemsPerRow = _state7.itemsPerRow; + var _props8 = this.props, + axis = _props8.axis, + length = _props8.length, + type = _props8.type, + useTranslate3d = _props8.useTranslate3d, + usePosition = _props8.usePosition; + var _state7 = this.state, + from = _state7.from, + itemsPerRow = _state7.itemsPerRow; var items = this.renderItems(); @@ -603,12 +596,21 @@ var offset = this.getSpaceBefore(from, cache); var x = axis === 'x' ? offset : 0; var y = axis === 'y' ? offset : 0; - var transform = useTranslate3d ? 'translate3d(' + x + 'px, ' + y + 'px, 0)' : 'translate(' + x + 'px, ' + y + 'px)'; - var listStyle = { - msTransform: transform, - WebkitTransform: transform, - transform: transform - }; + var listStyle = void 0; + if (usePosition) { + listStyle = { + position: 'relative', + top: y, + left: x + }; + } else { + var transform = useTranslate3d ? 'translate3d(' + x + 'px, ' + y + 'px, 0)' : 'translate(' + x + 'px, ' + y + 'px)'; + listStyle = { + msTransform: transform, + WebkitTransform: transform, + transform: transform + }; + } return _react2.default.createElement( 'div', { style: style }, @@ -635,7 +637,8 @@ threshold: _react.PropTypes.number, type: _react.PropTypes.oneOf(['simple', 'variable', 'uniform']), useStaticSize: _react.PropTypes.bool, - useTranslate3d: _react.PropTypes.bool + useTranslate3d: _react.PropTypes.bool, + usePosition: _react.PropTypes.bool }, _class.defaultProps = { axis: 'y', itemRenderer: function itemRenderer(index, key) { @@ -657,6 +660,7 @@ threshold: 100, type: 'simple', useStaticSize: false, - useTranslate3d: false + useTranslate3d: false, + usePosition: false }, _temp); }); From 14dc32a0b25c9f2bad49e81ce6a6594e610bc2fd Mon Sep 17 00:00:00 2001 From: "Brian K. Christensen" Date: Wed, 6 May 2020 08:22:52 +0200 Subject: [PATCH 2/2] NPM: move pacakge to @secoya/react-list in package.json --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3f3bcf5..95f5ee8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "react-list", - "version": "0.8.13", + "name": "@secoya/react-list", + "version": "0.8.14", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index b21f081..af435b1 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-list", + "name": "@secoya/react-list", "version": "0.8.14", "author": "Casey Foster ", "license": "MIT",