Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-virtualized
Advanced tools
react-virtualized - npm Package Compare versions
Comparing version 10.0.0-alpha.1 to 10.0.0-alpha.2
348
index.js
@@ -1,346 +0,2 @@ | ||
| var React = require('react'); | ||
| var memoize = require('memoize-one').default; | ||
| var IS_SCROLLING_DEBOUNCE_INTERVAL = 150; | ||
| function createListComponent({ | ||
| getCellSize, | ||
| getEstimatedTotalSize, | ||
| getOffsetForIndex, | ||
| getStartIndexForOffset, | ||
| getStopIndexForStartIndex, | ||
| validateProps | ||
| }) { | ||
| class List extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this._cellStyleCache = {}; | ||
| this._poolSize = 0; | ||
| this._resetIsScrollingTimeoutId = null; | ||
| this._scrollingContainer; | ||
| this.state = { | ||
| isScrolling: false, | ||
| scrollDirection: "forward", | ||
| scrollOffset: 0 | ||
| }; | ||
| this.scrollingContainerRef = this.scrollingContainerRef.bind(this); | ||
| this.resetIsScrollingDebounced = this.resetIsScrollingDebounced.bind(this); | ||
| this.resetIsScrolling = this.resetIsScrolling.bind(this); | ||
| this.createOnScroll = memoize((direction) => { | ||
| switch (direction) { | ||
| case "horizontal": | ||
| return (event) => { | ||
| var { scrollLeft } = event.currentTarget; | ||
| this.setState( | ||
| prevState => ({ | ||
| isScrolling: true, | ||
| scrollDirection: | ||
| prevState.scrollOffset < scrollLeft ? "forward" : "backward", | ||
| scrollOffset: scrollLeft | ||
| }), | ||
| this.resetIsScrollingDebounced | ||
| ); | ||
| }; | ||
| case "vertical": | ||
| return (event) => { | ||
| var { scrollTop } = event.currentTarget; | ||
| this.setState( | ||
| prevState => ({ | ||
| isScrolling: true, | ||
| scrollDirection: | ||
| prevState.scrollOffset < scrollTop ? "forward" : "backward", | ||
| scrollOffset: scrollTop | ||
| }), | ||
| this.resetIsScrollingDebounced | ||
| ); | ||
| }; | ||
| default: | ||
| // This case already handled by validateSharedProps() | ||
| break; | ||
| } | ||
| }); | ||
| } | ||
| scrollTo(index, align = "auto") { | ||
| var { direction } = this.props; | ||
| var scrollOffset = getOffsetForIndex( | ||
| this.props, | ||
| index, | ||
| align, | ||
| this.state.scrollOffset | ||
| ); | ||
| if (this._scrollingContainer != null) { | ||
| if (direction === "horizontal") { | ||
| this._scrollingContainer.scrollLeft = scrollOffset; | ||
| } else { | ||
| this._scrollingContainer.scrollTop = scrollOffset; | ||
| } | ||
| } | ||
| } | ||
| componnetWillUnmount() { | ||
| if (this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(this._resetIsScrollingTimeoutId); | ||
| } | ||
| } | ||
| render() { | ||
| var { className, direction, height, style, width } = this.props; | ||
| var { isScrolling } = this.state; | ||
| var onScroll = this.createOnScroll(direction); | ||
| var estimatedTotalSize = getEstimatedTotalSize(this.props); | ||
| return React.createElement( | ||
| "div", | ||
| { | ||
| className: className, | ||
| ref: this.scrollingContainerRef, | ||
| style: Object.assign({ | ||
| position: "relative", | ||
| height, | ||
| width, | ||
| overflow: "auto" | ||
| }, style), | ||
| onScroll: onScroll | ||
| }, | ||
| React.createElement( | ||
| "div", | ||
| { | ||
| style: { | ||
| height: direction === "horizontal" ? height : estimatedTotalSize, | ||
| overflow: "hidden", | ||
| pointerEvents: isScrolling ? "none" : "", | ||
| width: direction === "horizontal" ? estimatedTotalSize : width | ||
| } | ||
| }, | ||
| this.renderCells() | ||
| ) | ||
| ); | ||
| } | ||
| renderCells() { | ||
| var { children, direction, useIsScrolling } = this.props; | ||
| var { isScrolling } = this.state; | ||
| var [startIndex, stopIndex] = this.getRangeToRender(); | ||
| var cells = []; | ||
| for (var index = startIndex; index <= stopIndex; index++) { | ||
| var key = "" + index; | ||
| // Cache cell styles while scrolling, | ||
| // So that pure component sCU will prevent re-renders. | ||
| var style; | ||
| if (this._cellStyleCache.hasOwnProperty(index)) { | ||
| style = this._cellStyleCache[index]; | ||
| } else { | ||
| this._cellStyleCache[index] = style = { | ||
| position: "absolute", | ||
| left: | ||
| direction === "horizontal" | ||
| ? index * getCellSize(this.props, index) | ||
| : 0, | ||
| top: | ||
| direction === "vertical" | ||
| ? index * getCellSize(this.props, index) | ||
| : 0, | ||
| height: | ||
| direction === "vertical" | ||
| ? getCellSize(this.props, index) | ||
| : "100%", | ||
| width: | ||
| direction === "horizontal" | ||
| ? getCellSize(this.props, index) | ||
| : "100%" | ||
| }; | ||
| } | ||
| cells.push( | ||
| children({ | ||
| key, | ||
| index, | ||
| isScrolling: useIsScrolling ? isScrolling : undefined, | ||
| style | ||
| }) | ||
| ); | ||
| } | ||
| return cells; | ||
| } | ||
| getRangeToRender() { | ||
| var { count, overscanCount } = this.props; | ||
| var { scrollDirection, scrollOffset } = this.state; | ||
| var startIndex = getStartIndexForOffset(this.props, scrollOffset); | ||
| var stopIndex = getStopIndexForStartIndex(this.props, startIndex); | ||
| // Overscan by one cell in each direction so that tab/focus works. | ||
| // If there isn't at least one extra cell, tab loops back around. | ||
| var overscanBackward = | ||
| scrollDirection === "backward" ? Math.max(1, overscanCount) : 1; | ||
| var overscanForward = | ||
| scrollDirection === "forward" ? Math.max(1, overscanCount) : 1; | ||
| return [ | ||
| Math.max(0, startIndex - overscanBackward), | ||
| Math.min(count - 1, stopIndex + overscanForward) | ||
| ]; | ||
| } | ||
| scrollingContainerRef(ref) { | ||
| this._scrollingContainer = ref; | ||
| } | ||
| resetIsScrollingDebounced() { | ||
| if (this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(this._resetIsScrollingTimeoutId); | ||
| } | ||
| this._resetIsScrollingTimeoutId = setTimeout( | ||
| this.resetIsScrolling, | ||
| IS_SCROLLING_DEBOUNCE_INTERVAL | ||
| ); | ||
| } | ||
| resetIsScrolling() { | ||
| this._resetIsScrollingTimeoutId = null; | ||
| this.setState({ isScrolling: false }, () => { | ||
| // Clear style cache after state update has been committed. | ||
| // This way we don't break pure sCU for cells that don't use isScrolling param. | ||
| this._cellStyleCache = {}; | ||
| }); | ||
| } | ||
| }; | ||
| List.defaultProps = { | ||
| direction: "vertical", | ||
| overscanCount: 2, | ||
| useIsScrolling: false | ||
| }; | ||
| List.getDerivedStateFromProps = function( | ||
| nextProps, | ||
| prevState | ||
| ) { | ||
| validateSharedProps(nextProps); | ||
| validateProps(nextProps); | ||
| return null; | ||
| } | ||
| return List; | ||
| } | ||
| var validateSharedProps = ({ | ||
| children, | ||
| direction, | ||
| height, | ||
| render, | ||
| width | ||
| }) => { | ||
| if (direction !== "horizontal" && direction !== "vertical") { | ||
| // TODO Strip bulky error strings from production build | ||
| throw Error( | ||
| 'An invalid "direction" prop has been specified. ' + | ||
| 'Value should be either "horizontal" or "vertical". ' + | ||
| `"${direction}" was specified.` | ||
| ); | ||
| } | ||
| if (typeof children !== "function") { | ||
| throw Error( | ||
| 'An invalid "children" prop has been specified. ' + | ||
| "Value should be a function that creates a React element. " + | ||
| `"${children === null ? "null" : typeof children}" was specified.` | ||
| ); | ||
| } | ||
| if (direction === "horizontal" && typeof width !== "number") { | ||
| throw Error( | ||
| 'An invalid "width" prop has been specified. ' + | ||
| "Horizontal lists must specify a number for width. " + | ||
| `"${width === null ? "null" : typeof width}" was specified.` | ||
| ); | ||
| } else if (direction === "vertical" && typeof height !== "number") { | ||
| throw Error( | ||
| 'An invalid "height" prop has been specified. ' + | ||
| "Vertical lists must specify a number for height. " + | ||
| `"${height === null ? "null" : typeof height}" was specified.` | ||
| ); | ||
| } | ||
| }; | ||
| export var List = createListComponent({ | ||
| getCellSize({ cellSize, size }, index) { | ||
| return cellSize; | ||
| }, | ||
| getEstimatedTotalSize({ cellSize, count }) { | ||
| return cellSize * count; | ||
| }, | ||
| getOffsetForIndex( | ||
| { cellSize, direction, height, width }, | ||
| index, | ||
| align, | ||
| scrollOffset | ||
| ) { | ||
| var maxOffset = index * cellSize; | ||
| var minOffset = | ||
| index * cellSize - | ||
| (direction === "horizontal" ? width : height) + | ||
| cellSize; | ||
| switch (align) { | ||
| case "start": | ||
| return maxOffset; | ||
| case "end": | ||
| return minOffset; | ||
| case "center": | ||
| return minOffset + (maxOffset - minOffset) / 2; | ||
| case "auto": | ||
| default: | ||
| if (scrollOffset >= minOffset && scrollOffset <= maxOffset) { | ||
| return scrollOffset; | ||
| } else if (scrollOffset - minOffset < maxOffset - scrollOffset) { | ||
| return minOffset; | ||
| } else { | ||
| return maxOffset; | ||
| } | ||
| } | ||
| }, | ||
| getStartIndexForOffset( | ||
| { cellSize, count }, | ||
| offset | ||
| ) { | ||
| return Math.min(count - 1, Math.floor(offset / cellSize)); | ||
| }, | ||
| getStopIndexForStartIndex( | ||
| { cellSize, count, direction, height, width }, | ||
| startIndex | ||
| ) { | ||
| var size = (direction === "horizontal" ? width : height); | ||
| return Math.min( | ||
| count - 1, | ||
| Math.round(startIndex + size / cellSize) | ||
| ); | ||
| }, | ||
| validateProps({ cellSize }) { | ||
| if (typeof cellSize !== "number") { | ||
| // TODO Strip bulky error strings from production build | ||
| throw Error( | ||
| 'An invalid "cellSize" prop has been specified. ' + | ||
| "Value should be a number. " + | ||
| `"${cellSize === null ? "null" : typeof cellSize}" was specified.` | ||
| ); | ||
| } | ||
| } | ||
| });; | ||
| export {Grid} from "./FixedSizeGrid"; | ||
| export {List} from "./FixedSizeList"; |
| { | ||
| "name": "react-virtualized", | ||
| "version": "10.0.0-alpha.1", | ||
| "version": "10.0.0-alpha.2", | ||
| "main": "index.js", | ||
| "module": "index.js", | ||
| "author": "Brian Vaughn <brian.david.vaughn@gmail.com>", | ||
| "license": "MIT", | ||
| "files": [ | ||
| "index.js" | ||
| ], | ||
| "dependencies": { | ||
@@ -11,0 +9,0 @@ "memoize-one": "^3.1.1" |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by279.5%
38360
- Number of package files
- increased by250%
7
- Lines of code
- increased by58.31%
486
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
2
No dependency changes