• 上传管理器
  • API 概览
  • 类型
    • UploadItemStatus
    • UploadItem
    • UploadsManagerProps
  • 使用量
  • 运行命令
  • 可用命令
  • 所有权
  • 翻译

上传管理器

显示带有相撞面板的文件和文件夹的上传进度、每个项目动作和批量操作。 组件从 items 内部阵列.

API 概览

消费的应用通过一个 items: UploadItem[] 数组和动作召回。 没有获取数据,没有外部上下文依赖性(但除外) IntlProvider) (中文(简体) ).

<UploadsManager
    isExpanded={isExpanded}
    onToggle={() => setIsExpanded(prev => !prev)}
    items={items}
    onCancelAll={handleCancelAll}
    onRetryAll={handleRetryAll}
    onItemCancel={handleItemCancel}
    onItemRetry={handleItemRetry}
    onItemRemove={handleItemRemove}
    onItemOpen={handleItemOpen}
    onItemShare={handleItemShare}
/>

类型

UploadItemStatus

type UploadItemStatus = 'pending' | 'uploading' | 'staged' | 'complete' | 'error' | 'canceled';

UploadItem

UploadsManagerProps

使用量

import { UploadsManager } from '@box/uploads-manager';
import type { UploadItem } from '@box/uploads-manager';

const items: UploadItem[] = [
    { id: '1', name: 'report.pdf', extension: 'pdf', progress: 100, status: 'complete' },
    { id: '2', name: 'photo.png', extension: 'png', progress: 45, status: 'uploading' },
    {
        id: '3',
        name: 'data.csv',
        extension: 'csv',
        progress: 0,
        status: 'error',
        errorMessage: 'Upload failed',
        isRetryable: true,
    },
];

function App() {
    const [isExpanded, setIsExpanded] = useState(true);

    return (
        <UploadsManager
            isExpanded={isExpanded}
            onToggle={() => setIsExpanded(prev => !prev)}
            items={items}
            onCancelAll={() => {
                /* cancel pending + in-progress uploads */
            }}
            onRetryAll={() => {
                /* retry all errored items */
            }}
            onItemCancel={id => {
                /* cancel single item */
            }}
            onItemRetry={id => {
                /* retry single item */
            }}
            onItemRemove={id => {
                /* remove item from list */
            }}
        />
    );
}

运行命令

您的终端应该留在寄存器根目录的位置, 即 frontend-mono。允许 Nx 运行针对您的项目的行动,或者在必要时运行多个项目. 不导航到 packages/group-shared-features/uploads-manager 以运行命令.

项目的命令使用 Nx 使用的语法运行 :

Syntax: yarn nx <target name> <project name> <option overrides>
                      |              |                |
Example: yarn nx    test         products         --watch

可用命令

所有使用 Nx 的命令都可以在 project.json 文档.

• nx storybook uploads-manager - 发射UI组件的开发环境.
• nx build-storybook uploads-manager - 建立静态版本的故事书 与所有的故事.
• nx build uploads-manager - 使用 shared-feature-builder 执行器从 automation 软件包.
• nx build uploads-manager --watch - 以启用 -- watch 旗构建软件包,用于重建 dist 内容基于 src。 。 。 .
• nx lint uploads-manager - 运行linter过包文件.
• nx test uploads-manager - 进行故事书测试(视觉/互动)和笑话测试,最后编写报道报告.
• nx test-storybook uploads-manager - 做故事书测试 需要先在单独的终端开始故事本才能成功.
• nx test-storybook-local-coverage uploads-manager - 进行故事书测试,并在最后制作报道报告。 需要运行的故事书实例.
• nx test-storybook-ci uploads-manager - 建立故事书,并进行故事书测试,提供覆盖产出。 设计为CI使用.
• nx test-jest uploads-manager - 运行滑稽单元测试, 产生代码覆盖结尾.
• nx sonar uploads-manager - 使用声纳Qube工具对代码进行静态分析,以检测出臭虫和代码的气味。 集成为CI进程的步骤之一.
• nx chromatic uploads-manager - 上传供审查的故事手册构建到框色相上,并对用户界面的变化与基线进行可视比较.
• nx prepare uploads-manager - 在Nx Release安排的软件包出版过程中运行命令.

所有权

该特性的代码属于home-web. 拥有团队的职责包括控制代码质量,提供修改指南,并与其他团队在修改方面保持一致. 征求拥有或请求哪个团队负责修改守则,将是一种良好做法.

翻译

每个地方 i18n/*.js 档案由莫吉·詹金斯管道生成和完成。 共享特性构建器复制到 dist/i18n/ 期间 build中的软件包 i18n.config.js 下级 translationDependencies。 。 。 .