From c739a057d915554224e7164c1ebbd8f717c475b3 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Wed, 12 Aug 2020 00:02:22 +0100
Subject: [PATCH] Add basic selection to folders
---
.../src/components/atoms/FileCard/index.tsx | 2 +-
.../src/components/atoms/FolderCard/index.tsx | 9 +-
.../molecules/ResourceFolders/index.tsx | 103 ++++++++++++++----
3 files changed, 90 insertions(+), 24 deletions(-)
diff --git a/frontend/src/components/atoms/FileCard/index.tsx b/frontend/src/components/atoms/FileCard/index.tsx
index 15eff91bd..8eb6924f3 100644
--- a/frontend/src/components/atoms/FileCard/index.tsx
+++ b/frontend/src/components/atoms/FileCard/index.tsx
@@ -32,7 +32,7 @@ const FileCard: React.FC<FileCardProps> = ({
<Card.Footer>
{
tags.map(tag =>
- <Badge pill className={classNames(styles.quickViewTag, tag==="new" ? styles.tagTeal : styles.tagBlue)}>
+ <Badge pill key={tag} className={classNames(styles.quickViewTag, tag==="new" ? styles.tagTeal : styles.tagBlue)}>
{tag}
</Badge>
)
diff --git a/frontend/src/components/atoms/FolderCard/index.tsx b/frontend/src/components/atoms/FolderCard/index.tsx
index 5c8042550..2063603a3 100644
--- a/frontend/src/components/atoms/FolderCard/index.tsx
+++ b/frontend/src/components/atoms/FolderCard/index.tsx
@@ -2,20 +2,21 @@ import React from "react";
import styles from "./style.module.scss";
import Card from "react-bootstrap/Card";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
export interface FolderCardProps{
title: string;
- id: number;
+ icon: IconDefinition;
+ onIconClick: (event: React.MouseEvent) => void;
}
-const FolderCard: React.FC<FolderCardProps> = ({title, id}: FolderCardProps) => {
+const FolderCard: React.FC<FolderCardProps> = ({title, icon, onIconClick}: FolderCardProps) => {
return (
<Card className={styles.folderCard}>
<Card.Body style={{ padding: ".6rem" }}>
<Card.Text style={{ marginBottom: 0 }}>{title}</Card.Text>
- <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={faFolder} />
+ <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={icon} onClick={onIconClick}/>
</Card.Body>
</Card>
);
diff --git a/frontend/src/components/molecules/ResourceFolders/index.tsx b/frontend/src/components/molecules/ResourceFolders/index.tsx
index 9e65c68cc..5ca493d02 100644
--- a/frontend/src/components/molecules/ResourceFolders/index.tsx
+++ b/frontend/src/components/molecules/ResourceFolders/index.tsx
@@ -3,28 +3,93 @@ import Row from "react-bootstrap/esm/Row";
import Col from "react-bootstrap/esm/Col";
import ResourceSectionHeader from "../ResourceSectionHeader";
import FolderCard from "components/atoms/FolderCard";
-
-export interface ResourceFoldersProps{
- folderItems: {
+import {
+ faSquare,
+ faCheckSquare,
+} from "@fortawesome/free-regular-svg-icons";
+import {
+ faFolder
+} from "@fortawesome/free-solid-svg-icons";
+export interface ResourceFoldersProps {
+ folderItems: {
title: string;
id: number;
- }[];
+ }[];
+}
+
+type idBooleanMap = { [key: number]: boolean };
+interface MyState {
+ isSelected: idBooleanMap;
}
-const ResourceFolders: React.FC<ResourceFoldersProps> = ({folderItems}: ResourceFoldersProps) => {
- return (
- <>
- <ResourceSectionHeader heading="Folders" />
-
- <Row style={{ marginTop: "10px" }}>
- {folderItems.map(({title, id}) => (
- <Col xs={6} sm={6} md={3} key={id}>
- <FolderCard title={title} id={id}/>
- </Col>
- ))}
- </Row>
- </>
- );
-};
+class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
+ constructor(props: ResourceFoldersProps) {
+ super(props);
+ let isSelected: idBooleanMap = [];
+ this.state = { isSelected };
+ }
+
+ componentDidMount() {
+ let isSelected: idBooleanMap = [];
+ this.props.folderItems.forEach(({ id }: { id: number }) => {
+ isSelected[id] = false;
+ });
+ this.setState({ isSelected });
+ }
+
+ isAnySelected(): boolean {
+ let items = this.props.folderItems;
+ let isSelected = this.state.isSelected;
+ for (let item in items) {
+ if (isSelected[items[item].id]) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ isAllSelected(): boolean {
+ let items = this.props.folderItems;
+ let isSelected = this.state.isSelected;
+ for (let item in items) {
+ if (!isSelected[items[item].id]) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ handleIconClick(id: number) {
+ let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+ isSelected[id] = !isSelected[id];
+ this.setState({ isSelected });
+ }
+
+ render() {
+ return (
+ <>
+ <ResourceSectionHeader heading="Folders" />
+
+ <Row style={{ marginTop: "10px" }}>
+ {this.props.folderItems.map(({ title, id }) => (
+ <Col xs={6} sm={6} md={3} key={id}>
+ <FolderCard
+ title={title}
+ icon={
+ this.isAnySelected()
+ ? this.state.isSelected[id]
+ ? faCheckSquare
+ : faSquare
+ : faFolder
+ }
+ onIconClick={() => this.handleIconClick(id)}
+ />
+ </Col>
+ ))}
+ </Row>
+ </>
+ );
+ }
+}
export default ResourceFolders;
--
GitLab