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)