129 lines
3.7 KiB
JavaScript
129 lines
3.7 KiB
JavaScript
import React from "react";
|
|
import FolderIcon from "@material-ui/icons/Folder";
|
|
import classNames from "classnames";
|
|
import {
|
|
ButtonBase,
|
|
fade,
|
|
makeStyles,
|
|
Tooltip,
|
|
Typography,
|
|
} from "@material-ui/core";
|
|
import { useSelector } from "react-redux";
|
|
import statusHelper from "../../utils/page";
|
|
import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
container: {
|
|
padding: "7px",
|
|
},
|
|
|
|
selected: {
|
|
"&:hover": {
|
|
border: "1px solid #d0d0d0",
|
|
},
|
|
backgroundColor: fade(
|
|
theme.palette.primary.main,
|
|
theme.palette.type === "dark" ? 0.3 : 0.18
|
|
),
|
|
},
|
|
|
|
notSelected: {
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.background.default,
|
|
border: "1px solid #d0d0d0",
|
|
},
|
|
backgroundColor: theme.palette.background.paper,
|
|
},
|
|
|
|
button: {
|
|
height: "50px",
|
|
border: "1px solid " + theme.palette.divider,
|
|
width: "100%",
|
|
borderRadius: theme.shape.borderRadius,
|
|
boxSizing: "border-box",
|
|
transition:
|
|
"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
display: "flex",
|
|
justifyContent: "left",
|
|
alignItems: "initial",
|
|
},
|
|
icon: {
|
|
margin: "10px 10px 10px 16px",
|
|
height: "30px",
|
|
minWidth: "30px",
|
|
backgroundColor: theme.palette.background.paper,
|
|
borderRadius: "90%",
|
|
paddingTop: "3px",
|
|
color: theme.palette.text.secondary,
|
|
},
|
|
folderNameSelected: {
|
|
color:
|
|
theme.palette.type === "dark" ? "#fff" : theme.palette.primary.dark,
|
|
fontWeight: "500",
|
|
},
|
|
folderNameNotSelected: {
|
|
color: theme.palette.text.secondary,
|
|
},
|
|
folderName: {
|
|
marginTop: "15px",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
overflow: "hidden",
|
|
marginRight: "20px",
|
|
},
|
|
active: {
|
|
boxShadow: "0 0 0 2px " + theme.palette.primary.light,
|
|
},
|
|
checkIcon: {
|
|
color: theme.palette.primary.main,
|
|
},
|
|
}));
|
|
|
|
export default function Folder({ folder, isActive, onIconClick }) {
|
|
const selected = useSelector((state) => state.explorer.selected);
|
|
const classes = useStyles();
|
|
const isMobile = statusHelper.isMobile();
|
|
const isSelected =
|
|
selected.findIndex((value) => {
|
|
return value === folder;
|
|
}) !== -1;
|
|
|
|
return (
|
|
<ButtonBase
|
|
focusRipple
|
|
className={classNames(
|
|
{
|
|
[classes.selected]: isSelected,
|
|
[classes.notSelected]: !isSelected,
|
|
[classes.active]: isActive,
|
|
},
|
|
classes.button
|
|
)}
|
|
>
|
|
<div
|
|
onClick={onIconClick}
|
|
className={classNames(classes.icon, {
|
|
[classes.iconSelected]: isSelected,
|
|
[classes.iconNotSelected]: !isSelected,
|
|
})}
|
|
>
|
|
{!isSelected && <FolderIcon />}
|
|
{isSelected && (
|
|
<CheckCircleRoundedIcon className={classes.checkIcon} />
|
|
)}
|
|
</div>
|
|
<Tooltip title={folder.name} aria-label={folder.name}>
|
|
<Typography
|
|
variant="body2"
|
|
className={classNames(classes.folderName, {
|
|
[classes.folderNameSelected]: isSelected,
|
|
[classes.folderNameNotSelected]: !isSelected,
|
|
})}
|
|
>
|
|
{folder.name}
|
|
</Typography>
|
|
</Tooltip>
|
|
</ButtonBase>
|
|
);
|
|
}
|