feat(flat-components): add Cloud Storage panel container (#444)

* feat(flat-components): add CloudStorageContainer

* refactor(flat-components): update upload panel icon logic

* refactor(flat-components): use Number.isNaN instead of isNaN

packages/flat-components/src/components/CloudStorage/CloudStorageUploadPanel/CloudStorageUploadPanel.stories.tsx

@@ -20,8 +20,10 @@ export const Overview: Story<CloudStorageUploadPanelProps> = args => (
     <CloudStorageUploadPanel {...args}>
         {String(args.children)
             .split("\n")
-            .map(line => (
-                <p className="pv1">{line}</p>
+            .map((line, i) => (
+                <p className="pv1" key={i}>
+                    {line}
+                </p>
             ))}
     </CloudStorageUploadPanel>
 );

packages/flat-components/src/components/CloudStorage/CloudStorageUploadPanel/index.tsx

@@ -1,17 +1,18 @@
 import "./style.less";
 
-import { ExclamationCircleOutlined, UpOutlined, CloseOutlined } from "@ant-design/icons";
+import { UpOutlined, CloseOutlined } from "@ant-design/icons";
 import React, { FC, useState } from "react";
 import { Button } from "antd";
 import classNames from "classnames";
 import { ResizeReporter } from "react-resize-reporter/scroll";
+import { CloudStorageUploadTitle } from "../CloudStorageUploadTitle";
 
 export interface CloudStorageUploadPanelProps
     extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     /** Max Panel Height */
     maxHeight?: number;
-    /** If at least one failed upload */
-    hasError?: boolean;
+    /** Upload finish with error */
+    finishWithError?: boolean;
     /** Compact version of the panel */
     compact?: boolean;
     /** Should expand panel */
@@ -28,7 +29,7 @@ export interface CloudStorageUploadPanelProps
 
 export const CloudStorageUploadPanel: FC<CloudStorageUploadPanelProps> = ({
     maxHeight = 260,
-    hasError,
+    finishWithError,
     compact,
     expand,
     finished,
@@ -42,19 +43,13 @@ export const CloudStorageUploadPanel: FC<CloudStorageUploadPanelProps> = ({
     const [contentHeight, setContentHeight] = useState(0);
 
     return (
-        <section {...restProps} className={classNames(classNames, "cloud-storage-upload-panel")}>
+        <section {...restProps} className={classNames(className, "cloud-storage-upload-panel")}>
             <header className="cloud-storage-upload-panel-head">
-                {hasError ? (
-                    <>
-                        <ExclamationCircleOutlined className="cloud-storage-upload-panel-warning" />{" "}
-                        <h1 className="cloud-storage-upload-panel-title">上传异常</h1>
-                    </>
-                ) : (
-                    <h1 className="cloud-storage-upload-panel-title">传输列表</h1>
-                )}
-                <div className="cloud-storage-upload-panel-count">
-                    {finished}/{total}
-                </div>
+                <CloudStorageUploadTitle
+                    finishWithError={finishWithError}
+                    total={total}
+                    finished={finished}
+                />
                 <div className="cloud-storage-upload-panel-head-btns">
                     {!compact && (
                         <Button

packages/flat-components/src/components/CloudStorage/CloudStorageUploadPanel/style.less

@@ -17,11 +17,10 @@
 
 .cloud-storage-upload-panel-warning {
     color: #f45454;
-    margin-right: 8px;
 }
 
 .cloud-storage-upload-panel-title {
-    margin: 0 8px 0 0;
+    margin: 0 8px 0;
     padding: 0;
     font-size: 16px;
     font-weight: 500;

packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/CloudStorageUploadTitle.stories.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Story, Meta } from "@storybook/react";
+import faker from "faker";
+
+import { CloudStorageUploadTitle, CloudStorageUploadTitleProps } from "./index";
+import { Chance } from "chance";
+
+const chance = new Chance();
+
+const storyMeta: Meta = {
+    title: "CloudStorage/CloudStorageUploadTitle",
+    component: CloudStorageUploadTitle,
+};
+
+export default storyMeta;
+
+export const Overview: Story<CloudStorageUploadTitleProps> = args => (
+    <CloudStorageUploadTitle {...args} />
+);
+Overview.args = {
+    finishWithError: faker.random.boolean(),
+    total: chance.integer({ min: 0, max: 200 }),
+};
+Overview.args.finished = chance.integer({ min: 0, max: Overview.args.total! });
+
+export const Uploading: Story<CloudStorageUploadTitleProps> = args => (
+    <CloudStorageUploadTitle {...args} />
+);
+Uploading.args = {
+    finishWithError: false,
+    total: chance.integer({ min: 0, max: 200 }),
+};
+Uploading.args.finished = chance.integer({ min: 0, max: Uploading.args.total! - 1 });
+
+export const Error: Story<CloudStorageUploadTitleProps> = args => (
+    <CloudStorageUploadTitle {...args} />
+);
+Error.args = {
+    finishWithError: true,
+    total: chance.integer({ min: 0, max: 200 }),
+};
+Error.args.finished = chance.integer({ min: 0, max: Error.args.total! });
+
+export const Success: Story<CloudStorageUploadTitleProps> = args => (
+    <CloudStorageUploadTitle {...args} />
+);
+Success.args = {
+    finishWithError: false,
+    total: chance.integer({ min: 0, max: 200 }),
+};
+Success.args.finished = Success.args.total!;

packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/index.tsx

@@ -0,0 +1,42 @@
+import "./style.less";
+
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { Progress } from "antd";
+import React from "react";
+
+export interface CloudStorageUploadTitleProps {
+    finishWithError?: boolean;
+    finished: number;
+    total: number;
+}
+
+export const CloudStorageUploadTitle = React.memo<CloudStorageUploadTitleProps>(
+    function CloudStorageUploadTitle({ finishWithError, finished, total }) {
+        const percent = finished && total ? (finished / total) * 100 : 0;
+        const isFinish = percent >= 100;
+
+        return (
+            <div className="cloud-storage-upload-title">
+                {finishWithError ? (
+                    <ExclamationCircleOutlined className="cloud-storage-upload-title-error" />
+                ) : (
+                    <Progress
+                        type="circle"
+                        percent={percent}
+                        width={20}
+                        strokeWidth={isFinish ? 8 : 10}
+                        showInfo={isFinish}
+                    />
+                )}
+                <h1 className="cloud-storage-upload-title-content">
+                    {finishWithError ? "上传异常" : isFinish ? "上传完成" : "传输列表"}
+                </h1>
+                {!isFinish && !finishWithError && total && !Number.isNaN(finished) && (
+                    <span className="cloud-storage-upload-title-count">
+                        {finished}/{total}
+                    </span>
+                )}
+            </div>
+        );
+    },
+);

packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/style.less

@@ -0,0 +1,27 @@
+.cloud-storage-upload-title {
+    display: flex;
+    align-items: center;
+
+    .ant-progress {
+        font-size: 0; // remove space
+    }
+}
+
+.cloud-storage-upload-title-error {
+    color: #f45454;
+    font-size: 20px;
+}
+
+.cloud-storage-upload-title-content {
+    margin: 0 8px 0;
+    padding: 0;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1;
+}
+
+.cloud-storage-upload-title-count {
+    font-size: 14px;
+    color: #7a7b7c;
+    line-height: 1;
+}

packages/flat-components/src/components/CloudStorage/index.tsx

@@ -1,11 +1,3 @@
-import "./style.less";
-
-import React from "react";
-import { observer } from "mobx-react-lite";
-
-export interface CloudStorageProps {}
-
-export const CloudStorage = observer<CloudStorageProps>(function CloudStorage() {
-    // @TODO
-    return <></>;
-});
+export * from "./CloudStorageFileList";
+export * from "./CloudStorageUploadItem";
+export * from "./CloudStorageUploadPanel";

packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { Story, Meta, ArgTypes } from "@storybook/react";
+import Chance from "chance";
+import faker from "faker";
+import { action, AnnotationsMap, makeObservable } from "mobx";
+
+import { CloudStorageContainer, CloudStorageStore } from "./index";
+
+const chance = new Chance();
+
+const storyMeta: Meta = {
+    title: "CloudStorage/CloudStorageContainer",
+    component: CloudStorageContainer,
+    argTypes: {
+        store: { control: false },
+    },
+};
+
+export default storyMeta;
+
+const fakeStoreImplProps = [
+    "onBatchDelete",
+    "onUpload",
+    "onUploadCancel",
+    "onUploadPanelClose",
+    "onUploadRetry",
+] as const;
+
+type FakeStoreImplProps = typeof fakeStoreImplProps[number];
+
+type FakeStoreConfig = Pick<CloudStorageStore, FakeStoreImplProps>;
+
+class FakeStore extends CloudStorageStore {
+    onBatchDelete;
+    onUpload;
+    onUploadCancel;
+    onUploadPanelClose;
+    onUploadRetry;
+
+    constructor(config: FakeStoreConfig) {
+        super();
+
+        this.onBatchDelete = config.onBatchDelete;
+        this.onUpload = config.onUpload;
+        this.onUploadCancel = config.onUploadCancel;
+        this.onUploadPanelClose = config.onUploadPanelClose;
+        this.onUploadRetry = config.onUploadRetry;
+
+        makeObservable(
+            this,
+            fakeStoreImplProps.reduce((o, k) => {
+                o[k] = action;
+                return o;
+            }, {} as AnnotationsMap<this, never>),
+        );
+    }
+}
+
+function createFakeStore(config: FakeStoreConfig): FakeStore {
+    const store = new FakeStore(config);
+    store.totalUsage = chance.integer({ min: 0, max: 1000 * 1000 * 1000 });
+    store.files = Array(25)
+        .fill(0)
+        .map(() => {
+            return {
+                fileUUID: faker.random.uuid(),
+                fileName: faker.random.words() + "." + faker.system.commonFileExt(),
+                fileSize: chance.integer({ min: 0, max: 1000 * 1000 * 100 }),
+                createAt: faker.date.past(),
+            };
+        });
+    store.uploadTotalCount = chance.integer({ min: 0, max: 200 });
+    store.uploadFinishedCount = chance.integer({ min: 0, max: store.uploadTotalCount });
+    store.uploadStatuses = Array(store.uploadTotalCount)
+        .fill(0)
+        .map(() => ({
+            fileUUID: faker.random.uuid(),
+            fileName: faker.random.word() + "." + faker.system.commonFileExt(),
+            status: chance.pickone(["idle", "error", "success", "uploading"]),
+            percent: chance.integer({ min: 0, max: 100 }),
+        }));
+    return store;
+}
+
+function fakeStoreArgTypes(): ArgTypes {
+    return fakeStoreImplProps.reduce((o, k) => {
+        o[k] = { table: { disable: true } };
+        return o;
+    }, {} as ArgTypes);
+}
+
+export const Overview: Story<FakeStoreConfig> = config => {
+    const [store] = useState(() => createFakeStore(config));
+    return (
+        <div className="ba br3 b--light-gray" style={{ height: 600, maxHeight: "80vh" }}>
+            <CloudStorageContainer store={store} />
+        </div>
+    );
+};
+Overview.argTypes = fakeStoreArgTypes();

packages/flat-components/src/containers/CloudStorageContainer/CloudStorageUploadItemContainer.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { toJS } from "mobx";
+import { CloudStorageUploadItem, CloudStorageUploadItemProps } from "../../components/CloudStorage";
+import { CloudStorageUploadStatus } from "../../components/CloudStorage/types";
+
+export type CloudStorageUploadItemContainerProps = {
+    status: CloudStorageUploadStatus;
+} & Pick<CloudStorageUploadItemProps, "onCancel" | "onRetry">;
+
+/** Reduce re-rendering */
+export const CloudStorageUploadItemContainer = observer<CloudStorageUploadItemContainerProps>(
+    function CloudStorageUploadItemContainer({ status, onCancel, onRetry }) {
+        return <CloudStorageUploadItem {...toJS(status)} onCancel={onCancel} onRetry={onRetry} />;
+    },
+);

packages/flat-components/src/containers/CloudStorageContainer/CloudStorageUploadListContainer.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { CloudStorageUploadStatus } from "../../components/CloudStorage/types";
+import {
+    CloudStorageUploadItemContainer,
+    CloudStorageUploadItemContainerProps,
+} from "./CloudStorageUploadItemContainer";
+
+export type CloudStorageUploadListContainerProps = {
+    statuses: CloudStorageUploadStatus[];
+} & Pick<CloudStorageUploadItemContainerProps, "onCancel" | "onRetry">;
+
+export const CloudStorageUploadListContainer = observer<CloudStorageUploadListContainerProps>(
+    function CloudStorageUploadListContainer({ statuses, onCancel, onRetry }) {
+        return (
+            <>
+                {statuses.map(status => (
+                    <CloudStorageUploadItemContainer
+                        key={status.fileUUID}
+                        status={status}
+                        onCancel={onCancel}
+                        onRetry={onRetry}
+                    />
+                ))}
+            </>
+        );
+    },
+);