feat(flat-components): add upload panel

packages/flat-components/package.json

@@ -25,6 +25,7 @@
     "i18next-browser-languagedetector": "^6.0.1",
     "pretty-bytes": "^5.6.0",
     "react-i18next": "^11.8.4",
+    "react-resize-reporter": "^1.0.2",
     "react-use": "^15.3.8"
   },
   "peerDependencies": {

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

@@ -0,0 +1,108 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Story, Meta } from "@storybook/react";
+import Chance from "chance";
+import faker from "faker";
+
+import { CloudStorageUploadPanel, CloudStorageUploadPanelProps } from "./index";
+import { CloudStorageUploadStatus } from "../types";
+import CloudStorageUploadItem from "../CloudStorageUploadItem";
+
+const chance = new Chance();
+
+const storyMeta: Meta = {
+    title: "CloudStorage/CloudStorageUploadPanel",
+    component: CloudStorageUploadPanel,
+};
+
+export default storyMeta;
+
+export const Overview: Story<CloudStorageUploadPanelProps> = args => (
+    <CloudStorageUploadPanel {...args}>
+        {String(args.children)
+            .split("\n")
+            .map(line => (
+                <p className="ma1">{line}</p>
+            ))}
+    </CloudStorageUploadPanel>
+);
+Overview.args = {
+    title: "传输列表",
+    expand: true,
+    total: chance.integer({ min: 0, max: 200 }),
+    children: "Example Content",
+};
+Overview.args.finished = chance.integer({ min: 0, max: Overview.args.total });
+Overview.argTypes = {
+    children: {
+        description: "Child elements",
+        control: "text",
+        table: { category: "Showcase" },
+    },
+};
+
+interface PlayableExampleArgs extends CloudStorageUploadPanelProps {
+    onRetry: (fileUUID: string) => void;
+    onCancel: (fileUUID: string) => void;
+}
+export const PlayableExample: Story<PlayableExampleArgs> = ({ onRetry, onCancel, ...props }) => {
+    const uploadStatuses = useUploadStatusList(props.total);
+    const [expand, setExpand] = useState(false);
+    return (
+        <CloudStorageUploadPanel {...props} expand={expand} onExpandChange={setExpand}>
+            {uploadStatuses.map(status => (
+                <CloudStorageUploadItem
+                    {...status}
+                    key={status.fileUUID}
+                    onRetry={onRetry}
+                    onCancel={onCancel}
+                />
+            ))}
+        </CloudStorageUploadPanel>
+    );
+};
+PlayableExample.args = {
+    expand: true,
+    total: chance.integer({ min: 0, max: 200 }),
+};
+PlayableExample.args.finished = chance.integer({ min: 0, max: PlayableExample.args.total });
+PlayableExample.argTypes = {
+    expand: { control: false },
+    finished: { control: { type: "range", min: 0, max: 200, step: 1 } },
+    total: { control: { type: "range", min: 0, max: 200, step: 1 } },
+    onRetry: {
+        action: "onRetry",
+        table: { disable: true },
+    },
+    onCancel: {
+        action: "onCancel",
+        table: { disable: true },
+    },
+};
+
+function useUploadStatusList(count: number): CloudStorageUploadStatus[] {
+    const [statuses, setStatuses] = useState(() => getUploadStatuses(count));
+
+    useEffect(() => {
+        setStatuses(statuses => {
+            if (count > statuses.length) {
+                return [...statuses, ...getUploadStatuses(count - statuses.length)];
+            } else if (count < statuses.length) {
+                return statuses.slice(0, count);
+            }
+            return statuses;
+        });
+    }, [count]);
+
+    return statuses;
+}
+
+function getUploadStatuses(count: number): CloudStorageUploadStatus[] {
+    return Array(count)
+        .fill(0)
+        .map(() => ({
+            fileUUID: faker.random.uuid(),
+            fileName: faker.random.word() + "." + faker.system.commonFileExt(),
+            hasError: false,
+            percent: chance.integer({ min: 0, max: 100 }),
+        }));
+}

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

@@ -0,0 +1,77 @@
+import "./style.less";
+
+import { ExclamationCircleOutlined, 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";
+
+export interface CloudStorageUploadPanelProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+    /** Max Panel Height */
+    maxHeight?: number;
+    /** If at least one failed upload */
+    hasError?: boolean;
+    /** Should expand panel */
+    expand: boolean;
+    /** Number of finished upload */
+    finished: number;
+    /** Number of total upload */
+    total: number;
+    /** Panel expand button clicked */
+    onExpandChange: (isExpand: boolean) => void;
+    /** Panel close button clicked */
+    onClose: (event?: React.MouseEvent<HTMLElement>) => void;
+}
+
+export const CloudStorageUploadPanel: FC<CloudStorageUploadPanelProps> = ({
+    maxHeight = 260,
+    hasError,
+    expand,
+    finished,
+    total,
+    className,
+    children,
+    onExpandChange,
+    onClose,
+    ...restProps
+}) => {
+    const [contentHeight, setContentHeight] = useState(0);
+
+    return (
+        <section {...restProps} className={classNames(classNames, "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>
+                <div className="cloud-storage-upload-panel-head-btns">
+                    <Button shape="circle" size="small" onClick={() => onExpandChange(!expand)}>
+                        <UpOutlined rotate={expand ? 180 : 0} />
+                    </Button>
+                    <Button shape="circle" size="small" onClick={onClose}>
+                        <CloseOutlined />
+                    </Button>
+                </div>
+            </header>
+            <div
+                className="cloud-storage-upload-panel-content"
+                style={{
+                    height: expand ? (contentHeight < maxHeight ? contentHeight : maxHeight) : 0,
+                }}
+            >
+                <div className="cloud-storage-upload-panel-content-sizer">
+                    <ResizeReporter reportInit onHeightChanged={setContentHeight} />
+                    <div className="cloud-storage-upload-panel-status-list">{children}</div>
+                </div>
+            </div>
+        </section>
+    );
+};

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

@@ -0,0 +1,73 @@
+.cloud-storage-upload-panel {
+    width: 368px;
+    overflow: hidden;
+    padding: 16px 0 8px;
+    font-size: 16px;
+    background: #ffffff;
+    box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+}
+
+.cloud-storage-upload-panel-head {
+    display: flex;
+    align-items: center;
+    padding: 0 16px 8px;
+    user-select: none;
+}
+
+.cloud-storage-upload-panel-warning {
+    color: #f45454;
+    margin-right: 8px;
+}
+
+.cloud-storage-upload-panel-title {
+    margin: 0 8px 0 0;
+    padding: 0;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1;
+}
+
+.cloud-storage-upload-panel-count {
+    font-size: 14px;
+    color: #7a7b7c;
+    line-height: 1;
+}
+
+.cloud-storage-upload-panel-head-btns {
+    margin-left: auto;
+
+    button {
+        margin-left: 10px;
+        border: none;
+        box-shadow: none;
+        background: transparent;
+
+        &:hover {
+            background: rgba(0, 0, 0, 0.02);
+        }
+    }
+
+    .anticon {
+        font-size: 14px;
+        color: #7a7b7c;
+    }
+
+    svg {
+        transition: transform 0.2s;
+    }
+}
+
+.cloud-storage-upload-panel-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    transition: height 0.4s;
+}
+
+.cloud-storage-upload-panel-content-sizer {
+    position: relative;
+}
+
+.cloud-storage-upload-panel-status-list {
+    padding: 0 16px;
+}

yarn.lock

@@ -15297,6 +15297,11 @@ react-refresh@^0.9.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf"
   integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==
 
+react-resize-reporter@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-resize-reporter/-/react-resize-reporter-1.0.2.tgz#e9e2069cf7276edd1f7ed0438342bc1ceb6c10c6"
+  integrity sha512-Z9OcPJDpsvdIJpwjbZBbF0vwmCKBgaimMNo4ekJu3jGPih3xv91Eae5cyFbA0fnDPsOriukqoD5TOR+8Ef0xUQ==
+
 react-router-dom@^5.2.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"