diff --git a/docs/index.es6 b/docs/index.es6 index c49ac2c..1ecc3fb 100644 --- a/docs/index.es6 +++ b/docs/index.es6 @@ -82,6 +82,13 @@ const examples = [ itemSizeGetter: getHeight, type: 'variable' }, + { + length: 10000, + itemRenderer: renderVariableHeightItem, + itemSizeGetter: getHeight, + usePosition: true, + type: 'variable' + }, { axis: 'x', length: 10000, diff --git a/docs/index.js b/docs/index.js index 5705ae8..0462203 100644 --- a/docs/index.js +++ b/docs/index.js @@ -31102,7 +31102,8 @@ Cogs.define("react-list.js", function (COGS_REQUIRE, COGS_REQUIRE_ASYNC, module, axis = _this$props7.axis, length = _this$props7.length, type = _this$props7.type, - useTranslate3d = _this$props7.useTranslate3d; + useTranslate3d = _this$props7.useTranslate3d, + usePosition = _this$props7.usePosition; var _this$state6 = this.state, from = _this$state6.from, itemsPerRow = _this$state6.itemsPerRow; @@ -31123,12 +31124,23 @@ Cogs.define("react-list.js", function (COGS_REQUIRE, COGS_REQUIRE_ASYNC, module, var offset = this.getSpaceBefore(from, cache); var x = axis === 'x' ? offset : 0; var y = axis === 'y' ? offset : 0; - var transform = useTranslate3d ? "translate3d(".concat(x, "px, ").concat(y, "px, 0)") : "translate(".concat(x, "px, ").concat(y, "px)"); - var listStyle = { - msTransform: transform, - WebkitTransform: transform, - transform: transform - }; + var listStyle; + + if (usePosition) { + listStyle = { + position: 'relative', + top: y, + left: x + }; + } else { + var transform = useTranslate3d ? "translate3d(".concat(x, "px, ").concat(y, "px, 0)") : "translate(".concat(x, "px, ").concat(y, "px)"); + listStyle = { + msTransform: transform, + WebkitTransform: transform, + transform: transform + }; + } + return _react["default"].createElement("div", { style: style, ref: function ref(c) { @@ -31156,7 +31168,8 @@ Cogs.define("react-list.js", function (COGS_REQUIRE, COGS_REQUIRE_ASYNC, module, threshold: _propTypes["default"].number, type: _propTypes["default"].oneOf(['simple', 'variable', 'uniform']), useStaticSize: _propTypes["default"].bool, - useTranslate3d: _propTypes["default"].bool + useTranslate3d: _propTypes["default"].bool, + usePosition: _propTypes["default"].bool }), _defineProperty(_class, "defaultProps", { axis: 'y', itemRenderer: function itemRenderer(index, key) { @@ -31177,7 +31190,8 @@ Cogs.define("react-list.js", function (COGS_REQUIRE, COGS_REQUIRE_ASYNC, module, threshold: 100, type: 'simple', useStaticSize: false, - useTranslate3d: false + useTranslate3d: false, + usePosition: false }), _temp); }); }); @@ -31317,6 +31331,12 @@ var examples = [{ itemRenderer: renderVariableHeightItem, itemSizeGetter: getHeight, type: 'variable' +}, { + length: 10000, + itemRenderer: renderVariableHeightItem, + itemSizeGetter: getHeight, + usePosition: true, + type: 'variable' }, { axis: 'x', length: 10000, 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", diff --git a/react-list.es6 b/react-list.es6 index 024815b..7debf2c 100644 --- a/react-list.es6 +++ b/react-list.es6 @@ -104,7 +104,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 = { @@ -119,7 +120,8 @@ module.exports = class ReactList extends Component { threshold: 100, type: 'simple', useStaticSize: false, - useTranslate3d: false + useTranslate3d: false, + usePosition: false }; static getDerivedStateFromProps(props, state) { @@ -508,7 +510,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(); @@ -525,14 +527,23 @@ 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 (
(this.el = c)}>
{items}
diff --git a/react-list.js b/react-list.js index c470cc5..31a1b04 100644 --- a/react-list.js +++ b/react-list.js @@ -659,7 +659,8 @@ axis = _this$props7.axis, length = _this$props7.length, type = _this$props7.type, - useTranslate3d = _this$props7.useTranslate3d; + useTranslate3d = _this$props7.useTranslate3d, + usePosition = _this$props7.usePosition; var _this$state6 = this.state, from = _this$state6.from, itemsPerRow = _this$state6.itemsPerRow; @@ -680,12 +681,23 @@ var offset = this.getSpaceBefore(from, cache); var x = axis === 'x' ? offset : 0; var y = axis === 'y' ? offset : 0; - var transform = useTranslate3d ? "translate3d(".concat(x, "px, ").concat(y, "px, 0)") : "translate(".concat(x, "px, ").concat(y, "px)"); - var listStyle = { - msTransform: transform, - WebkitTransform: transform, - transform: transform - }; + var listStyle; + + if (usePosition) { + listStyle = { + position: 'relative', + top: y, + left: x + }; + } else { + var transform = useTranslate3d ? "translate3d(".concat(x, "px, ").concat(y, "px, 0)") : "translate(".concat(x, "px, ").concat(y, "px)"); + listStyle = { + msTransform: transform, + WebkitTransform: transform, + transform: transform + }; + } + return _react["default"].createElement("div", { style: style, ref: function ref(c) { @@ -713,7 +725,8 @@ threshold: _propTypes["default"].number, type: _propTypes["default"].oneOf(['simple', 'variable', 'uniform']), useStaticSize: _propTypes["default"].bool, - useTranslate3d: _propTypes["default"].bool + useTranslate3d: _propTypes["default"].bool, + usePosition: _propTypes["default"].bool }), _defineProperty(_class, "defaultProps", { axis: 'y', itemRenderer: function itemRenderer(index, key) { @@ -734,6 +747,7 @@ threshold: 100, type: 'simple', useStaticSize: false, - useTranslate3d: false + useTranslate3d: false, + usePosition: false }), _temp); });