storj.io/minio@v0.0.0-20230509071714-0cbc90f649b1/browser/app/js/objects/ObjectsListContainer.js (about) 1 /* 2 * MinIO Cloud Storage (C) 2018 MinIO, Inc. 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16 17 import React from "react" 18 import { connect } from "react-redux" 19 import InfiniteScroll from "react-infinite-scroller" 20 import ObjectsList from "./ObjectsList" 21 import { getFilteredObjects } from "./selectors" 22 23 export class ObjectsListContainer extends React.Component { 24 constructor(props) { 25 super(props) 26 this.state = { 27 page: 1 28 } 29 this.loadNextPage = this.loadNextPage.bind(this) 30 } 31 componentWillReceiveProps(nextProps) { 32 if ( 33 nextProps.currentBucket !== this.props.currentBucket || 34 nextProps.currentPrefix !== this.props.currentPrefix || 35 nextProps.sortBy !== this.props.sortBy || 36 nextProps.sortOrder !== this.props.sortOrder 37 ) { 38 this.setState({ 39 page: 1 40 }) 41 } 42 } 43 componentDidUpdate(prevProps) { 44 if (this.props.filter !== prevProps.filter) { 45 this.setState({ 46 page: 1 47 }) 48 } 49 } 50 loadNextPage() { 51 this.setState(state => { 52 return { page: state.page + 1 } 53 }) 54 } 55 render() { 56 const { filteredObjects, listLoading } = this.props 57 58 const visibleObjects = filteredObjects.slice(0, this.state.page * 100) 59 60 return ( 61 <div style={{ position: "relative" }}> 62 <InfiniteScroll 63 pageStart={0} 64 loadMore={this.loadNextPage} 65 hasMore={filteredObjects.length > visibleObjects.length} 66 useWindow={true} 67 initialLoad={false} 68 > 69 <ObjectsList objects={visibleObjects} /> 70 </InfiniteScroll> 71 {listLoading && <div className="loading" />} 72 </div> 73 ) 74 } 75 } 76 77 const mapStateToProps = state => { 78 return { 79 currentBucket: state.buckets.currentBucket, 80 currentPrefix: state.objects.currentPrefix, 81 filteredObjects: getFilteredObjects(state), 82 filter: state.objects.filter, 83 sortBy: state.objects.sortBy, 84 sortOrder: state.objects.sortOrder, 85 listLoading: state.objects.listLoading 86 } 87 } 88 89 export default connect(mapStateToProps)(ObjectsListContainer)