a48a034e5a
This change will allow users to navigate to their desired locations, including buckets and directories that haven't been "created" yet Fixes #7883 Add tests Change tooltip wording Migrate to Font Awesome 5 to use path icon Fix sidebar not closing on mobile
117 lines
3.3 KiB
JavaScript
117 lines
3.3 KiB
JavaScript
/*
|
|
* MinIO Cloud Storage (C) 2018 MinIO, Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import React from "react"
|
|
import classNames from "classnames"
|
|
import { connect } from "react-redux"
|
|
import * as actionsObjects from "./actions"
|
|
import {
|
|
SORT_BY_NAME,
|
|
SORT_BY_SIZE,
|
|
SORT_BY_LAST_MODIFIED,
|
|
SORT_ORDER_DESC,
|
|
SORT_ORDER_ASC
|
|
} from "../constants"
|
|
|
|
export const ObjectsHeader = ({
|
|
sortedByName,
|
|
sortedBySize,
|
|
sortedByLastModified,
|
|
sortOrder,
|
|
sortObjects
|
|
}) => (
|
|
<div className="feb-container">
|
|
<header className="fesl-row" data-type="folder">
|
|
<div className="fesl-item fesl-item-icon" />
|
|
<div
|
|
className="fesl-item fesl-item-name"
|
|
id="sort-by-name"
|
|
onClick={() => sortObjects(SORT_BY_NAME)}
|
|
data-sort="name"
|
|
>
|
|
Name
|
|
<i
|
|
className={classNames({
|
|
"fesli-sort": true,
|
|
"fesli-sort--active": sortedByName,
|
|
fas: true,
|
|
"fa-sort-alpha-down-alt": sortedByName && sortOrder === SORT_ORDER_DESC,
|
|
"fa-sort-alpha-down": sortedByName && sortOrder === SORT_ORDER_ASC
|
|
})}
|
|
/>
|
|
</div>
|
|
<div
|
|
className="fesl-item fesl-item-size"
|
|
id="sort-by-size"
|
|
onClick={() => sortObjects(SORT_BY_SIZE)}
|
|
data-sort="size"
|
|
>
|
|
Size
|
|
<i
|
|
className={classNames({
|
|
"fesli-sort": true,
|
|
"fesli-sort--active": sortedBySize,
|
|
fas: true,
|
|
"fa-sort-amount-down":
|
|
sortedBySize && sortOrder === SORT_ORDER_DESC,
|
|
"fa-sort-amount-down-alt": sortedBySize && sortOrder === SORT_ORDER_ASC
|
|
})}
|
|
/>
|
|
</div>
|
|
<div
|
|
className="fesl-item fesl-item-modified"
|
|
id="sort-by-last-modified"
|
|
onClick={() => sortObjects(SORT_BY_LAST_MODIFIED)}
|
|
data-sort="last-modified"
|
|
>
|
|
Last Modified
|
|
<i
|
|
className={classNames({
|
|
"fesli-sort": true,
|
|
"fesli-sort--active": sortedByLastModified,
|
|
fas: true,
|
|
"fa-sort-numeric-down-alt":
|
|
sortedByLastModified && sortOrder === SORT_ORDER_DESC,
|
|
"fa-sort-numeric-down":
|
|
sortedByLastModified && sortOrder === SORT_ORDER_ASC
|
|
})}
|
|
/>
|
|
</div>
|
|
<div className="fesl-item fesl-item-actions" />
|
|
</header>
|
|
</div>
|
|
)
|
|
|
|
const mapStateToProps = state => {
|
|
return {
|
|
sortedByName: state.objects.sortBy == SORT_BY_NAME,
|
|
sortedBySize: state.objects.sortBy == SORT_BY_SIZE,
|
|
sortedByLastModified: state.objects.sortBy == SORT_BY_LAST_MODIFIED,
|
|
sortOrder: state.objects.sortOrder
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = dispatch => {
|
|
return {
|
|
sortObjects: sortBy => dispatch(actionsObjects.sortObjects(sortBy))
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(ObjectsHeader)
|