storj.io/minio@v0.0.0-20230509071714-0cbc90f649b1/browser/app/js/objects/ObjectsHeader.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 classNames from "classnames"
    19  import { connect } from "react-redux"
    20  import * as actionsObjects from "./actions"
    21  import {
    22    SORT_BY_NAME,
    23    SORT_BY_SIZE,
    24    SORT_BY_LAST_MODIFIED,
    25    SORT_ORDER_DESC,
    26    SORT_ORDER_ASC
    27  } from "../constants"
    28  
    29  export const ObjectsHeader = ({
    30    sortedByName,
    31    sortedBySize,
    32    sortedByLastModified,
    33    sortOrder,
    34    sortObjects
    35  }) => (
    36    <div className="feb-container">
    37      <header className="fesl-row" data-type="folder">
    38        <div className="fesl-item fesl-item-icon" />
    39        <div
    40          className="fesl-item fesl-item-name"
    41          id="sort-by-name"
    42          onClick={() => sortObjects(SORT_BY_NAME)}
    43          data-sort="name"
    44        >
    45          Name
    46          <i
    47            className={classNames({
    48              "fesli-sort": true,
    49              "fesli-sort--active": sortedByName,
    50              fas: true,
    51              "fa-sort-alpha-down-alt": sortedByName && sortOrder === SORT_ORDER_DESC,
    52              "fa-sort-alpha-down": sortedByName && sortOrder === SORT_ORDER_ASC
    53            })}
    54          />
    55        </div>
    56        <div
    57          className="fesl-item fesl-item-size"
    58          id="sort-by-size"
    59          onClick={() => sortObjects(SORT_BY_SIZE)}
    60          data-sort="size"
    61        >
    62          Size
    63          <i
    64            className={classNames({
    65              "fesli-sort": true,
    66              "fesli-sort--active": sortedBySize,
    67              fas: true,
    68              "fa-sort-amount-down":
    69                sortedBySize && sortOrder === SORT_ORDER_DESC,
    70              "fa-sort-amount-down-alt": sortedBySize && sortOrder === SORT_ORDER_ASC
    71            })}
    72          />
    73        </div>
    74        <div
    75          className="fesl-item fesl-item-modified"
    76          id="sort-by-last-modified"
    77          onClick={() => sortObjects(SORT_BY_LAST_MODIFIED)}
    78          data-sort="last-modified"
    79        >
    80          Last Modified
    81          <i
    82            className={classNames({
    83              "fesli-sort": true,
    84              "fesli-sort--active": sortedByLastModified,
    85              fas: true,
    86              "fa-sort-numeric-down-alt":
    87                sortedByLastModified && sortOrder === SORT_ORDER_DESC,
    88              "fa-sort-numeric-down":
    89                sortedByLastModified && sortOrder === SORT_ORDER_ASC
    90            })}
    91          />
    92        </div>
    93        <div className="fesl-item fesl-item-actions" />
    94      </header>
    95    </div>
    96  )
    97  
    98  const mapStateToProps = state => {
    99    return {
   100      sortedByName: state.objects.sortBy == SORT_BY_NAME,
   101      sortedBySize: state.objects.sortBy == SORT_BY_SIZE,
   102      sortedByLastModified: state.objects.sortBy == SORT_BY_LAST_MODIFIED,
   103      sortOrder: state.objects.sortOrder
   104    }
   105  }
   106  
   107  const mapDispatchToProps = dispatch => {
   108    return {
   109      sortObjects: sortBy => dispatch(actionsObjects.sortObjects(sortBy))
   110    }
   111  }
   112  
   113  export default connect(
   114    mapStateToProps,
   115    mapDispatchToProps
   116  )(ObjectsHeader)