@box/uploads-manager 2.2.23 → 2.2.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/uploads-header.js +1 -149
- package/dist/chunks/uploads-item-list.js +1 -41
- package/dist/chunks/uploads-item.module.js +1 -11
- package/dist/chunks/uploads-manager.js +1 -58
- package/dist/esm/index.js +1 -5
- package/dist/esm/lib/uploads-header/index.js +1 -2
- package/dist/esm/lib/uploads-header/uploads-header.js +1 -2
- package/dist/esm/lib/uploads-header/uploads-header.messages.js +1 -68
- package/dist/esm/lib/uploads-item/components/action-buttons.js +1 -47
- package/dist/esm/lib/uploads-item/components/index.js +1 -4
- package/dist/esm/lib/uploads-item/components/item-row-icon.js +1 -25
- package/dist/esm/lib/uploads-item/components/status-line.js +1 -70
- package/dist/esm/lib/uploads-item/index.js +1 -2
- package/dist/esm/lib/uploads-item/uploads-item.js +1 -32
- package/dist/esm/lib/uploads-item/uploads-item.messages.js +1 -76
- package/dist/esm/lib/uploads-item-list/index.js +1 -2
- package/dist/esm/lib/uploads-item-list/uploads-item-list.js +1 -2
- package/dist/esm/lib/uploads-item-list/uploads-item-list.messages.js +1 -6
- package/dist/esm/lib/uploads-manager.js +1 -3
- package/dist/esm/lib/utils/getProgress.js +1 -10
- package/dist/esm/lib/utils/getStatus.js +1 -10
- package/package.json +9 -9
|
@@ -1,149 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Button as t, ProgressBar as n, Text as r } from "@box/blueprint-web";
|
|
3
|
-
import i from "clsx";
|
|
4
|
-
import { AlertCircle as a, ChevronDown as o, ChevronUp as s, CloudCheck as c, CloudExclamation as l, CloudUp as u, CloudXMark as d } from "@box/blueprint-web-assets/icons/Medium";
|
|
5
|
-
import { Gray80 as f, GreenLight160 as p, WatermelonRed120 as m } from "@box/blueprint-web-assets/tokens/tokens";
|
|
6
|
-
import { useIntl as h } from "react-intl";
|
|
7
|
-
import { jsx as g, jsxs as _ } from "react/jsx-runtime";
|
|
8
|
-
import '../styles/uploads-header.css';var v = {
|
|
9
|
-
header: "_header_zsz5o_2042",
|
|
10
|
-
headerTop: "_headerTop_zsz5o_2050",
|
|
11
|
-
statusIcon: "_statusIcon_zsz5o_2057",
|
|
12
|
-
iconSwapIn: "_iconSwapIn_zsz5o_1",
|
|
13
|
-
statusIconContainer: "_statusIconContainer_zsz5o_2063",
|
|
14
|
-
iconPulse: "_iconPulse_zsz5o_1",
|
|
15
|
-
titleText: "_titleText_zsz5o_2078",
|
|
16
|
-
textSwapIn: "_textSwapIn_zsz5o_1",
|
|
17
|
-
subtitleText: "_subtitleText_zsz5o_2082",
|
|
18
|
-
statusIconContainerSuccess: "_statusIconContainerSuccess_zsz5o_2086",
|
|
19
|
-
statusIconContainerUploading: "_statusIconContainerUploading_zsz5o_2091",
|
|
20
|
-
statusIconContainerError: "_statusIconContainerError_zsz5o_2096",
|
|
21
|
-
statusIconContainerCanceled: "_statusIconContainerCanceled_zsz5o_2101",
|
|
22
|
-
subtitleError: "_subtitleError_zsz5o_2106",
|
|
23
|
-
subtitleErrorIcon: "_subtitleErrorIcon_zsz5o_2111",
|
|
24
|
-
titleArea: "_titleArea_zsz5o_2117",
|
|
25
|
-
actions: "_actions_zsz5o_2122",
|
|
26
|
-
chevronButton: "_chevronButton_zsz5o_2129",
|
|
27
|
-
progressBar: "_progressBar_zsz5o_2133"
|
|
28
|
-
};
|
|
29
|
-
function y(t, n, r, i, a) {
|
|
30
|
-
return n === "idle" && r === 0 ? {
|
|
31
|
-
title: t.formatMessage(e.titleDragAndDrop),
|
|
32
|
-
subtitle: null,
|
|
33
|
-
StatusIcon: u,
|
|
34
|
-
statusIconAriaLabel: t.formatMessage(e.statusIconPending)
|
|
35
|
-
} : n === "idle" || n === "uploading" ? {
|
|
36
|
-
title: t.formatMessage(e.titleUploading),
|
|
37
|
-
subtitle: t.formatMessage(e.subtitleProgress, {
|
|
38
|
-
completedCount: i,
|
|
39
|
-
totalCount: r
|
|
40
|
-
}),
|
|
41
|
-
StatusIcon: u,
|
|
42
|
-
statusIconAriaLabel: t.formatMessage(e.statusIconPending)
|
|
43
|
-
} : n === "success" ? {
|
|
44
|
-
title: t.formatMessage(e.titleComplete),
|
|
45
|
-
subtitle: t.formatMessage(e.subtitleProgress, {
|
|
46
|
-
completedCount: i,
|
|
47
|
-
totalCount: r
|
|
48
|
-
}),
|
|
49
|
-
StatusIcon: c,
|
|
50
|
-
statusIconAriaLabel: t.formatMessage(e.statusIconComplete)
|
|
51
|
-
} : n === "error" ? i > 0 ? {
|
|
52
|
-
title: t.formatMessage(e.titleComplete),
|
|
53
|
-
subtitle: t.formatMessage(e.subtitleErrors, { failedCount: a }),
|
|
54
|
-
StatusIcon: l,
|
|
55
|
-
statusIconAriaLabel: t.formatMessage(e.statusIconError)
|
|
56
|
-
} : {
|
|
57
|
-
title: t.formatMessage(e.titleErrorAllFailed),
|
|
58
|
-
subtitle: t.formatMessage(e.subtitleErrors, { failedCount: a }),
|
|
59
|
-
StatusIcon: l,
|
|
60
|
-
statusIconAriaLabel: t.formatMessage(e.statusIconError)
|
|
61
|
-
} : {
|
|
62
|
-
title: t.formatMessage(e.titleCanceled),
|
|
63
|
-
subtitle: null,
|
|
64
|
-
StatusIcon: d,
|
|
65
|
-
statusIconAriaLabel: t.formatMessage(e.statusIconCanceled)
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
function b({ status: c, progress: l, totalCount: u, completedCount: d, failedCount: b, isExpanded: x, onToggle: S, onCancelAll: C, onRetryAll: w }) {
|
|
69
|
-
let T = h(), E = c === "success", D = c === "uploading", O = c === "error", k = c === "canceled", A;
|
|
70
|
-
E ? A = p : D || k ? A = f : O && (A = m);
|
|
71
|
-
let { title: j, subtitle: M, StatusIcon: N, statusIconAriaLabel: P } = y(T, c, u, d, b), F = x ? T.formatMessage(e.toggleCollapse) : T.formatMessage(e.toggleExpand);
|
|
72
|
-
return /* @__PURE__ */ _("div", {
|
|
73
|
-
className: v.header,
|
|
74
|
-
children: [/* @__PURE__ */ _("div", {
|
|
75
|
-
className: v.headerTop,
|
|
76
|
-
children: [
|
|
77
|
-
/* @__PURE__ */ g("div", {
|
|
78
|
-
className: i(v.statusIconContainer, {
|
|
79
|
-
[v.statusIconContainerSuccess]: E,
|
|
80
|
-
[v.statusIconContainerUploading]: D,
|
|
81
|
-
[v.statusIconContainerError]: O,
|
|
82
|
-
[v.statusIconContainerCanceled]: k
|
|
83
|
-
}),
|
|
84
|
-
children: /* @__PURE__ */ g(N, {
|
|
85
|
-
"aria-label": P,
|
|
86
|
-
className: v.statusIcon,
|
|
87
|
-
color: A,
|
|
88
|
-
role: "img"
|
|
89
|
-
}, c)
|
|
90
|
-
}, c),
|
|
91
|
-
/* @__PURE__ */ _("div", {
|
|
92
|
-
className: v.titleArea,
|
|
93
|
-
children: [/* @__PURE__ */ g(r, {
|
|
94
|
-
as: "p",
|
|
95
|
-
className: v.titleText,
|
|
96
|
-
variant: "bodyDefaultBold",
|
|
97
|
-
children: j
|
|
98
|
-
}, j), M && /* @__PURE__ */ _(r, {
|
|
99
|
-
as: "p",
|
|
100
|
-
className: i(v.subtitleText, O && v.subtitleError),
|
|
101
|
-
color: O ? "textOnLightError" : "textOnLightSecondary",
|
|
102
|
-
variant: "bodySmall",
|
|
103
|
-
children: [O && /* @__PURE__ */ g(a, {
|
|
104
|
-
"aria-hidden": !0,
|
|
105
|
-
className: v.subtitleErrorIcon,
|
|
106
|
-
color: "currentColor",
|
|
107
|
-
role: "presentation"
|
|
108
|
-
}), M]
|
|
109
|
-
}, O ? "error" : "progress")]
|
|
110
|
-
}),
|
|
111
|
-
/* @__PURE__ */ _("div", {
|
|
112
|
-
className: v.actions,
|
|
113
|
-
children: [
|
|
114
|
-
C && /* @__PURE__ */ g(t, {
|
|
115
|
-
"aria-label": T.formatMessage(e.cancelAll),
|
|
116
|
-
onClick: C,
|
|
117
|
-
size: "small",
|
|
118
|
-
variant: "secondary",
|
|
119
|
-
children: T.formatMessage(e.cancelAll)
|
|
120
|
-
}),
|
|
121
|
-
w && /* @__PURE__ */ g(t, {
|
|
122
|
-
"aria-label": T.formatMessage(e.retryAll),
|
|
123
|
-
onClick: w,
|
|
124
|
-
size: "small",
|
|
125
|
-
variant: "secondary",
|
|
126
|
-
children: T.formatMessage(e.retryAll)
|
|
127
|
-
}),
|
|
128
|
-
/* @__PURE__ */ g(t, {
|
|
129
|
-
"aria-expanded": x,
|
|
130
|
-
"aria-label": F,
|
|
131
|
-
className: v.chevronButton,
|
|
132
|
-
onClick: S,
|
|
133
|
-
size: "small",
|
|
134
|
-
variant: "secondary",
|
|
135
|
-
endIcon: x ? o : s
|
|
136
|
-
})
|
|
137
|
-
]
|
|
138
|
-
})
|
|
139
|
-
]
|
|
140
|
-
}), /* @__PURE__ */ g(n, {
|
|
141
|
-
ariaLabel: T.formatMessage(e.progressAriaLabel),
|
|
142
|
-
className: v.progressBar,
|
|
143
|
-
maxValue: 100,
|
|
144
|
-
minValue: 0,
|
|
145
|
-
value: l
|
|
146
|
-
})]
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
export { b as t };
|
|
1
|
+
import uploads_header_messages_default from"../esm/lib/uploads-header/uploads-header.messages.js";import{Button,ProgressBar,Text}from"@box/blueprint-web";import clsx from"clsx";import{AlertCircle,ChevronDown,ChevronUp,CloudCheck,CloudExclamation,CloudUp,CloudXMark}from"@box/blueprint-web-assets/icons/Medium";import{Gray80,GreenLight160,WatermelonRed120}from"@box/blueprint-web-assets/tokens/tokens";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import '../styles/uploads-header.css';var uploads_header_module_default={header:`_header_zsz5o_2042`,headerTop:`_headerTop_zsz5o_2050`,statusIcon:`_statusIcon_zsz5o_2057`,iconSwapIn:`_iconSwapIn_zsz5o_1`,statusIconContainer:`_statusIconContainer_zsz5o_2063`,iconPulse:`_iconPulse_zsz5o_1`,titleText:`_titleText_zsz5o_2078`,textSwapIn:`_textSwapIn_zsz5o_1`,subtitleText:`_subtitleText_zsz5o_2082`,statusIconContainerSuccess:`_statusIconContainerSuccess_zsz5o_2086`,statusIconContainerUploading:`_statusIconContainerUploading_zsz5o_2091`,statusIconContainerError:`_statusIconContainerError_zsz5o_2096`,statusIconContainerCanceled:`_statusIconContainerCanceled_zsz5o_2101`,subtitleError:`_subtitleError_zsz5o_2106`,subtitleErrorIcon:`_subtitleErrorIcon_zsz5o_2111`,titleArea:`_titleArea_zsz5o_2117`,actions:`_actions_zsz5o_2122`,chevronButton:`_chevronButton_zsz5o_2129`,progressBar:`_progressBar_zsz5o_2133`};function getHeaderContent(intl,status,totalCount,completedCount,failedCount){return status===`idle`&&totalCount===0?{title:intl.formatMessage(uploads_header_messages_default.titleDragAndDrop),subtitle:null,StatusIcon:CloudUp,statusIconAriaLabel:intl.formatMessage(uploads_header_messages_default.statusIconPending)}:status===`idle`||status===`uploading`?{title:intl.formatMessage(uploads_header_messages_default.titleUploading),subtitle:intl.formatMessage(uploads_header_messages_default.subtitleProgress,{completedCount,totalCount}),StatusIcon:CloudUp,statusIconAriaLabel:intl.formatMessage(uploads_header_messages_default.statusIconPending)}:status===`success`?{title:intl.formatMessage(uploads_header_messages_default.titleComplete),subtitle:intl.formatMessage(uploads_header_messages_default.subtitleProgress,{completedCount,totalCount}),StatusIcon:CloudCheck,statusIconAriaLabel:intl.formatMessage(uploads_header_messages_default.statusIconComplete)}:status===`error`?completedCount>0?{title:intl.formatMessage(uploads_header_messages_default.titleComplete),subtitle:intl.formatMessage(uploads_header_messages_default.subtitleErrors,{failedCount}),StatusIcon:CloudExclamation,statusIconAriaLabel:intl.formatMessage(uploads_header_messages_default.statusIconError)}:{title:intl.formatMessage(uploads_header_messages_default.titleErrorAllFailed),subtitle:intl.formatMessage(uploads_header_messages_default.subtitleErrors,{failedCount}),StatusIcon:CloudExclamation,statusIconAriaLabel:intl.formatMessage(uploads_header_messages_default.statusIconError)}:{title:intl.formatMessage(uploads_header_messages_default.titleCanceled),subtitle:null,StatusIcon:CloudXMark,statusIconAriaLabel:intl.formatMessage(uploads_header_messages_default.statusIconCanceled)}}function UploadsHeader({status,progress,totalCount,completedCount,failedCount,isExpanded,onToggle,onCancelAll,onRetryAll}){let intl=useIntl(),isSuccessState=status===`success`,isUploadingState=status===`uploading`,isErrorState=status===`error`,isCanceledState=status===`canceled`,statusIconColor;isSuccessState?statusIconColor=GreenLight160:isUploadingState||isCanceledState?statusIconColor=Gray80:isErrorState&&(statusIconColor=WatermelonRed120);let{title,subtitle,StatusIcon,statusIconAriaLabel}=getHeaderContent(intl,status,totalCount,completedCount,failedCount),toggleAriaLabel=isExpanded?intl.formatMessage(uploads_header_messages_default.toggleCollapse):intl.formatMessage(uploads_header_messages_default.toggleExpand);return jsxs(`div`,{className:uploads_header_module_default.header,children:[jsxs(`div`,{className:uploads_header_module_default.headerTop,children:[jsx(`div`,{className:clsx(uploads_header_module_default.statusIconContainer,{[uploads_header_module_default.statusIconContainerSuccess]:isSuccessState,[uploads_header_module_default.statusIconContainerUploading]:isUploadingState,[uploads_header_module_default.statusIconContainerError]:isErrorState,[uploads_header_module_default.statusIconContainerCanceled]:isCanceledState}),children:jsx(StatusIcon,{"aria-label":statusIconAriaLabel,className:uploads_header_module_default.statusIcon,color:statusIconColor,role:`img`},status)},status),jsxs(`div`,{className:uploads_header_module_default.titleArea,children:[jsx(Text,{as:`p`,className:uploads_header_module_default.titleText,variant:`bodyDefaultBold`,children:title},title),subtitle&&jsxs(Text,{as:`p`,className:clsx(uploads_header_module_default.subtitleText,isErrorState&&uploads_header_module_default.subtitleError),color:isErrorState?`textOnLightError`:`textOnLightSecondary`,variant:`bodySmall`,children:[isErrorState&&jsx(AlertCircle,{"aria-hidden":!0,className:uploads_header_module_default.subtitleErrorIcon,color:`currentColor`,role:`presentation`}),subtitle]},isErrorState?`error`:`progress`)]}),jsxs(`div`,{className:uploads_header_module_default.actions,children:[onCancelAll&&jsx(Button,{"aria-label":intl.formatMessage(uploads_header_messages_default.cancelAll),onClick:onCancelAll,size:`small`,variant:`secondary`,children:intl.formatMessage(uploads_header_messages_default.cancelAll)}),onRetryAll&&jsx(Button,{"aria-label":intl.formatMessage(uploads_header_messages_default.retryAll),onClick:onRetryAll,size:`small`,variant:`secondary`,children:intl.formatMessage(uploads_header_messages_default.retryAll)}),jsx(Button,{"aria-expanded":isExpanded,"aria-label":toggleAriaLabel,className:uploads_header_module_default.chevronButton,onClick:onToggle,size:`small`,variant:`secondary`,endIcon:isExpanded?ChevronDown:ChevronUp})]})]}),jsx(ProgressBar,{ariaLabel:intl.formatMessage(uploads_header_messages_default.progressAriaLabel),className:uploads_header_module_default.progressBar,maxValue:100,minValue:0,value:progress})]})}export{UploadsHeader as t};
|
|
@@ -1,41 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import t from "../esm/lib/uploads-item-list/uploads-item-list.messages.js";
|
|
3
|
-
import { SmallList as n } from "@box/blueprint-web";
|
|
4
|
-
import { useIntl as r } from "react-intl";
|
|
5
|
-
import { jsx as i } from "react/jsx-runtime";
|
|
6
|
-
import { useMemo as a } from "react";
|
|
7
|
-
import { Collection as o, ListLayout as s, Virtualizer as c } from "react-aria-components";
|
|
8
|
-
import '../styles/uploads-item-list.css';var l = {
|
|
9
|
-
container: "_container_3lxf1_2009",
|
|
10
|
-
list: "_list_3lxf1_2018"
|
|
11
|
-
}, u = 56, d = 0;
|
|
12
|
-
function f({ items: f, onItemCancel: p, onItemRetry: m, onItemRemove: h, onItemOpen: g, onItemShare: _ }) {
|
|
13
|
-
let { formatMessage: v } = r(), y = a(() => new s({
|
|
14
|
-
estimatedRowHeight: u,
|
|
15
|
-
gap: d
|
|
16
|
-
}), []);
|
|
17
|
-
return /* @__PURE__ */ i("div", {
|
|
18
|
-
className: l.container,
|
|
19
|
-
children: /* @__PURE__ */ i(c, {
|
|
20
|
-
layout: y,
|
|
21
|
-
children: /* @__PURE__ */ i(n, {
|
|
22
|
-
"aria-label": v(t.listAriaLabel),
|
|
23
|
-
"data-testid": "uploads-manager-item-list",
|
|
24
|
-
selectionMode: "none",
|
|
25
|
-
className: l.list,
|
|
26
|
-
children: /* @__PURE__ */ i(o, {
|
|
27
|
-
items: f,
|
|
28
|
-
children: (t) => /* @__PURE__ */ i(e, {
|
|
29
|
-
item: t,
|
|
30
|
-
onItemCancel: p,
|
|
31
|
-
onItemRetry: m,
|
|
32
|
-
onItemRemove: h,
|
|
33
|
-
onItemOpen: g,
|
|
34
|
-
onItemShare: _
|
|
35
|
-
})
|
|
36
|
-
})
|
|
37
|
-
})
|
|
38
|
-
})
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
export { f as t };
|
|
1
|
+
import{UploadsItem}from"../esm/lib/uploads-item/uploads-item.js";import uploads_item_list_messages_default from"../esm/lib/uploads-item-list/uploads-item-list.messages.js";import{SmallList}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{Collection,ListLayout,Virtualizer}from"react-aria-components";import '../styles/uploads-item-list.css';var uploads_item_list_module_default={container:`_container_3lxf1_2009`,list:`_list_3lxf1_2018`},ESTIMATED_ROW_HEIGHT=56,ROW_GAP=0;function UploadsItemList({items,onItemCancel,onItemRetry,onItemRemove,onItemOpen,onItemShare}){let{formatMessage}=useIntl(),layout=useMemo(()=>new ListLayout({estimatedRowHeight:ESTIMATED_ROW_HEIGHT,gap:ROW_GAP}),[]);return jsx(`div`,{className:uploads_item_list_module_default.container,children:jsx(Virtualizer,{layout,children:jsx(SmallList,{"aria-label":formatMessage(uploads_item_list_messages_default.listAriaLabel),"data-testid":`uploads-manager-item-list`,selectionMode:`none`,className:uploads_item_list_module_default.list,children:jsx(Collection,{items,children:item=>jsx(UploadsItem,{item,onItemCancel,onItemRetry,onItemRemove,onItemOpen,onItemShare})})})})})}export{UploadsItemList as t};
|
|
@@ -1,11 +1 @@
|
|
|
1
|
-
import '../styles/uploads-item.css';var
|
|
2
|
-
iconDimmed: "_iconDimmed_1obkn_2009",
|
|
3
|
-
statusLine: "_statusLine_1obkn_2013",
|
|
4
|
-
statusIcon: "_statusIcon_1obkn_2020",
|
|
5
|
-
statusCompleted: "_statusCompleted_1obkn_2026",
|
|
6
|
-
statusError: "_statusError_1obkn_2031",
|
|
7
|
-
item: "_item_1obkn_2035",
|
|
8
|
-
actionButton: "_actionButton_1obkn_2040",
|
|
9
|
-
progressRing: "_progressRing_1obkn_2046"
|
|
10
|
-
};
|
|
11
|
-
export { e as t };
|
|
1
|
+
import '../styles/uploads-item.css';var uploads_item_module_default={iconDimmed:`_iconDimmed_1obkn_2009`,statusLine:`_statusLine_1obkn_2013`,statusIcon:`_statusIcon_1obkn_2020`,statusCompleted:`_statusCompleted_1obkn_2026`,statusError:`_statusError_1obkn_2031`,item:`_item_1obkn_2035`,actionButton:`_actionButton_1obkn_2040`,progressRing:`_progressRing_1obkn_2046`};export{uploads_item_module_default as t};
|
|
@@ -1,58 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { t } from "./uploads-item-list.js";
|
|
3
|
-
import { getProgress as n } from "../esm/lib/utils/getProgress.js";
|
|
4
|
-
import { getStatus as r } from "../esm/lib/utils/getStatus.js";
|
|
5
|
-
import { useControllableState as i } from "@box/blueprint-web";
|
|
6
|
-
import a from "clsx";
|
|
7
|
-
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
8
|
-
import '../styles/uploads-manager.css';var c = {
|
|
9
|
-
container: "_container_ub40c_2009",
|
|
10
|
-
itemListSlot: "_itemListSlot_ub40c_2021",
|
|
11
|
-
itemListSlotExpanded: "_itemListSlotExpanded_ub40c_2029",
|
|
12
|
-
itemList: "_itemList_ub40c_2021"
|
|
13
|
-
};
|
|
14
|
-
function l({ isExpanded: l, defaultExpanded: u = !0, onToggle: d, items: f, onCancelAll: p, onRetryAll: m, onItemCancel: h, onItemRetry: g, onItemRemove: _, onItemOpen: v, onItemShare: y }) {
|
|
15
|
-
let [b = !0, x] = i({
|
|
16
|
-
prop: l,
|
|
17
|
-
defaultProp: u,
|
|
18
|
-
onChange: d
|
|
19
|
-
}), S = () => x((e) => !e), { totalCount: C, completedCount: w, failedCount: T, canceledCount: E, activeCount: D } = f.reduce((e, t) => (t.status === "canceled" ? e.canceledCount += 1 : (e.totalCount += 1, t.status === "complete" ? e.completedCount += 1 : t.status === "error" ? e.failedCount += 1 : (t.status === "pending" || t.status === "uploading" || t.status === "staged") && (e.activeCount += 1)), e), {
|
|
20
|
-
totalCount: 0,
|
|
21
|
-
completedCount: 0,
|
|
22
|
-
failedCount: 0,
|
|
23
|
-
canceledCount: 0,
|
|
24
|
-
activeCount: 0
|
|
25
|
-
}), O = D > 0, k = O && !!p, A = !O && T > 0 && !!m, j = r(f), M = n(f), N = f.length > 0;
|
|
26
|
-
return /* @__PURE__ */ s("div", {
|
|
27
|
-
className: c.container,
|
|
28
|
-
children: [/* @__PURE__ */ o(e, {
|
|
29
|
-
canceledCount: E,
|
|
30
|
-
completedCount: w,
|
|
31
|
-
failedCount: T,
|
|
32
|
-
isExpanded: b,
|
|
33
|
-
onCancelAll: k ? p : void 0,
|
|
34
|
-
onRetryAll: A ? m : void 0,
|
|
35
|
-
onToggle: S,
|
|
36
|
-
progress: M,
|
|
37
|
-
status: j,
|
|
38
|
-
totalCount: C
|
|
39
|
-
}), N && /* @__PURE__ */ o("div", {
|
|
40
|
-
className: a(c.itemListSlot, b && c.itemListSlotExpanded),
|
|
41
|
-
children: /* @__PURE__ */ o("div", {
|
|
42
|
-
"aria-hidden": !b,
|
|
43
|
-
className: c.itemList,
|
|
44
|
-
"data-testid": "uploads-manager-item-list-container",
|
|
45
|
-
...!b && { inert: "" },
|
|
46
|
-
children: /* @__PURE__ */ o(t, {
|
|
47
|
-
items: f,
|
|
48
|
-
onItemCancel: h,
|
|
49
|
-
onItemRetry: g,
|
|
50
|
-
onItemRemove: _,
|
|
51
|
-
onItemOpen: v,
|
|
52
|
-
onItemShare: y
|
|
53
|
-
})
|
|
54
|
-
})
|
|
55
|
-
})]
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
export { l as t };
|
|
1
|
+
import{t as UploadsHeader}from"./uploads-header.js";import{t as UploadsItemList}from"./uploads-item-list.js";import{getProgress}from"../esm/lib/utils/getProgress.js";import{getStatus}from"../esm/lib/utils/getStatus.js";import{useControllableState}from"@box/blueprint-web";import clsx from"clsx";import{jsx,jsxs}from"react/jsx-runtime";import '../styles/uploads-manager.css';var uploads_manager_module_default={container:`_container_ub40c_2009`,itemListSlot:`_itemListSlot_ub40c_2021`,itemListSlotExpanded:`_itemListSlotExpanded_ub40c_2029`,itemList:`_itemList_ub40c_2021`};function UploadsManager({isExpanded:isExpandedProp,defaultExpanded=!0,onToggle:onToggleProp,items,onCancelAll,onRetryAll,onItemCancel,onItemRetry,onItemRemove,onItemOpen,onItemShare}){let[isExpanded=!0,setExpanded]=useControllableState({prop:isExpandedProp,defaultProp:defaultExpanded,onChange:onToggleProp}),handleToggle=()=>setExpanded(prev=>!prev),{totalCount,completedCount,failedCount,canceledCount,activeCount}=items.reduce((acc,item)=>(item.status===`canceled`?acc.canceledCount+=1:(acc.totalCount+=1,item.status===`complete`?acc.completedCount+=1:item.status===`error`?acc.failedCount+=1:(item.status===`pending`||item.status===`uploading`||item.status===`staged`)&&(acc.activeCount+=1)),acc),{totalCount:0,completedCount:0,failedCount:0,canceledCount:0,activeCount:0}),hasActiveItems=activeCount>0,showCancelAll=hasActiveItems&&!!onCancelAll,showRetryAll=!hasActiveItems&&failedCount>0&&!!onRetryAll,status=getStatus(items),progress=getProgress(items),hasItems=items.length>0;return jsxs(`div`,{className:uploads_manager_module_default.container,children:[jsx(UploadsHeader,{canceledCount,completedCount,failedCount,isExpanded,onCancelAll:showCancelAll?onCancelAll:void 0,onRetryAll:showRetryAll?onRetryAll:void 0,onToggle:handleToggle,progress,status,totalCount}),hasItems&&jsx(`div`,{className:clsx(uploads_manager_module_default.itemListSlot,isExpanded&&uploads_manager_module_default.itemListSlotExpanded),children:jsx(`div`,{"aria-hidden":!isExpanded,className:uploads_manager_module_default.itemList,"data-testid":`uploads-manager-item-list-container`,...!isExpanded&&{inert:``},children:jsx(UploadsItemList,{items,onItemCancel,onItemRetry,onItemRemove,onItemOpen,onItemShare})})})]})}export{UploadsManager as t};
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { t } from "../chunks/uploads-item-list.js";
|
|
3
|
-
import "./lib/uploads-item-list/index.js";
|
|
4
|
-
import { t as n } from "../chunks/uploads-manager.js";
|
|
5
|
-
export { e as UploadsItem, t as UploadsItemList, n as UploadsManager };
|
|
1
|
+
import{UploadsItem}from"./lib/uploads-item/uploads-item.js";import{t as UploadsItemList}from"../chunks/uploads-item-list.js";import"./lib/uploads-item-list/index.js";import{t as UploadsManager}from"../chunks/uploads-manager.js";export{UploadsItem,UploadsItemList,UploadsManager};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export { e as UploadsHeader, e as default };
|
|
1
|
+
import{t as UploadsHeader}from"../../../chunks/uploads-header.js";export{UploadsHeader,UploadsHeader as default};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export { e as UploadsHeader, e as default };
|
|
1
|
+
import{t as UploadsHeader}from"../../../chunks/uploads-header.js";export{UploadsHeader,UploadsHeader as default};
|
|
@@ -1,68 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
var t = e({
|
|
3
|
-
titleDragAndDrop: {
|
|
4
|
-
id: "groupSharedFeatures.uploadsManager.header.titleDragAndDrop",
|
|
5
|
-
defaultMessage: "Drag and drop files"
|
|
6
|
-
},
|
|
7
|
-
titleUploading: {
|
|
8
|
-
id: "groupSharedFeatures.uploadsManager.header.titleUploading",
|
|
9
|
-
defaultMessage: "Uploading"
|
|
10
|
-
},
|
|
11
|
-
titleComplete: {
|
|
12
|
-
id: "groupSharedFeatures.uploadsManager.header.titleComplete",
|
|
13
|
-
defaultMessage: "Uploads Complete"
|
|
14
|
-
},
|
|
15
|
-
titleCanceled: {
|
|
16
|
-
id: "groupSharedFeatures.uploadsManager.header.titleCanceled",
|
|
17
|
-
defaultMessage: "Uploads Canceled"
|
|
18
|
-
},
|
|
19
|
-
titleErrorAllFailed: {
|
|
20
|
-
id: "groupSharedFeatures.uploadsManager.header.titleErrorAllFailed",
|
|
21
|
-
defaultMessage: "Uploads Failed"
|
|
22
|
-
},
|
|
23
|
-
subtitleProgress: {
|
|
24
|
-
id: "groupSharedFeatures.uploadsManager.header.subtitleProgress",
|
|
25
|
-
defaultMessage: "{completedCount} of {totalCount} complete"
|
|
26
|
-
},
|
|
27
|
-
subtitleErrors: {
|
|
28
|
-
id: "groupSharedFeatures.uploadsManager.header.subtitleErrors",
|
|
29
|
-
defaultMessage: "{failedCount, plural, one {# Error} other {# Errors}}"
|
|
30
|
-
},
|
|
31
|
-
cancelAll: {
|
|
32
|
-
id: "groupSharedFeatures.uploadsManager.header.cancelAll",
|
|
33
|
-
defaultMessage: "Cancel All"
|
|
34
|
-
},
|
|
35
|
-
retryAll: {
|
|
36
|
-
id: "groupSharedFeatures.uploadsManager.header.retryAll",
|
|
37
|
-
defaultMessage: "Retry All"
|
|
38
|
-
},
|
|
39
|
-
toggleExpand: {
|
|
40
|
-
id: "groupSharedFeatures.uploadsManager.header.toggleExpand",
|
|
41
|
-
defaultMessage: "Expand uploads panel"
|
|
42
|
-
},
|
|
43
|
-
toggleCollapse: {
|
|
44
|
-
id: "groupSharedFeatures.uploadsManager.header.toggleCollapse",
|
|
45
|
-
defaultMessage: "Collapse uploads panel"
|
|
46
|
-
},
|
|
47
|
-
progressAriaLabel: {
|
|
48
|
-
id: "groupSharedFeatures.uploadsManager.header.progressAriaLabel",
|
|
49
|
-
defaultMessage: "Upload progress"
|
|
50
|
-
},
|
|
51
|
-
statusIconPending: {
|
|
52
|
-
id: "groupSharedFeatures.uploadsManager.header.statusIconPending",
|
|
53
|
-
defaultMessage: "Pending upload"
|
|
54
|
-
},
|
|
55
|
-
statusIconComplete: {
|
|
56
|
-
id: "groupSharedFeatures.uploadsManager.header.statusIconComplete",
|
|
57
|
-
defaultMessage: "Upload complete"
|
|
58
|
-
},
|
|
59
|
-
statusIconError: {
|
|
60
|
-
id: "groupSharedFeatures.uploadsManager.header.statusIconError",
|
|
61
|
-
defaultMessage: "Upload error"
|
|
62
|
-
},
|
|
63
|
-
statusIconCanceled: {
|
|
64
|
-
id: "groupSharedFeatures.uploadsManager.header.statusIconCanceled",
|
|
65
|
-
defaultMessage: "Upload canceled"
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
|
-
export { t as default };
|
|
1
|
+
import{defineMessages}from"react-intl";var uploads_header_messages_default=defineMessages({titleDragAndDrop:{id:`groupSharedFeatures.uploadsManager.header.titleDragAndDrop`,defaultMessage:`Drag and drop files`},titleUploading:{id:`groupSharedFeatures.uploadsManager.header.titleUploading`,defaultMessage:`Uploading`},titleComplete:{id:`groupSharedFeatures.uploadsManager.header.titleComplete`,defaultMessage:`Uploads Complete`},titleCanceled:{id:`groupSharedFeatures.uploadsManager.header.titleCanceled`,defaultMessage:`Uploads Canceled`},titleErrorAllFailed:{id:`groupSharedFeatures.uploadsManager.header.titleErrorAllFailed`,defaultMessage:`Uploads Failed`},subtitleProgress:{id:`groupSharedFeatures.uploadsManager.header.subtitleProgress`,defaultMessage:`{completedCount} of {totalCount} complete`},subtitleErrors:{id:`groupSharedFeatures.uploadsManager.header.subtitleErrors`,defaultMessage:`{failedCount, plural, one {# Error} other {# Errors}}`},cancelAll:{id:`groupSharedFeatures.uploadsManager.header.cancelAll`,defaultMessage:`Cancel All`},retryAll:{id:`groupSharedFeatures.uploadsManager.header.retryAll`,defaultMessage:`Retry All`},toggleExpand:{id:`groupSharedFeatures.uploadsManager.header.toggleExpand`,defaultMessage:`Expand uploads panel`},toggleCollapse:{id:`groupSharedFeatures.uploadsManager.header.toggleCollapse`,defaultMessage:`Collapse uploads panel`},progressAriaLabel:{id:`groupSharedFeatures.uploadsManager.header.progressAriaLabel`,defaultMessage:`Upload progress`},statusIconPending:{id:`groupSharedFeatures.uploadsManager.header.statusIconPending`,defaultMessage:`Pending upload`},statusIconComplete:{id:`groupSharedFeatures.uploadsManager.header.statusIconComplete`,defaultMessage:`Upload complete`},statusIconError:{id:`groupSharedFeatures.uploadsManager.header.statusIconError`,defaultMessage:`Upload error`},statusIconCanceled:{id:`groupSharedFeatures.uploadsManager.header.statusIconCanceled`,defaultMessage:`Upload canceled`}});export{uploads_header_messages_default as default};
|
|
@@ -1,47 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { t } from "../../../../chunks/uploads-item.module.js";
|
|
3
|
-
import { SmallList as n } from "@box/blueprint-web";
|
|
4
|
-
import { ArrowUpRightSquare as r, ArrowsSpinning as i, Link as a, XMark as o } from "@box/blueprint-web-assets/icons/Medium";
|
|
5
|
-
import { useIntl as s } from "react-intl";
|
|
6
|
-
import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
7
|
-
function d({ item: d, onItemCancel: f, onItemRetry: p, onItemRemove: m, onItemOpen: h, onItemShare: g }) {
|
|
8
|
-
let _ = s(), { status: v, isRetryable: y } = d;
|
|
9
|
-
return v === "pending" || v === "uploading" ? f ? /* @__PURE__ */ l(n.ActionIconButton, {
|
|
10
|
-
"aria-label": _.formatMessage(e.itemActionCancelAriaLabel),
|
|
11
|
-
className: t.actionButton,
|
|
12
|
-
icon: o,
|
|
13
|
-
onClick: () => f(d.id),
|
|
14
|
-
size: "small"
|
|
15
|
-
}) : null : v === "complete" ? /* @__PURE__ */ u(c, { children: [h && /* @__PURE__ */ l(n.ActionIconButton, {
|
|
16
|
-
"aria-label": _.formatMessage(e.itemActionOpenAriaLabel),
|
|
17
|
-
className: t.actionButton,
|
|
18
|
-
icon: r,
|
|
19
|
-
onClick: () => h(d.id),
|
|
20
|
-
size: "small"
|
|
21
|
-
}), g && /* @__PURE__ */ l(n.ActionIconButton, {
|
|
22
|
-
"aria-label": _.formatMessage(e.itemActionShareAriaLabel),
|
|
23
|
-
className: t.actionButton,
|
|
24
|
-
icon: a,
|
|
25
|
-
onClick: () => g(d.id),
|
|
26
|
-
size: "small"
|
|
27
|
-
})] }) : v === "error" ? /* @__PURE__ */ u(c, { children: [y !== !1 && p && /* @__PURE__ */ l(n.ActionIconButton, {
|
|
28
|
-
"aria-label": _.formatMessage(e.itemActionRetryAriaLabel),
|
|
29
|
-
className: t.actionButton,
|
|
30
|
-
icon: i,
|
|
31
|
-
onClick: () => p(d.id),
|
|
32
|
-
size: "small"
|
|
33
|
-
}), m && /* @__PURE__ */ l(n.ActionIconButton, {
|
|
34
|
-
"aria-label": _.formatMessage(e.itemActionRemoveAriaLabel),
|
|
35
|
-
className: t.actionButton,
|
|
36
|
-
icon: o,
|
|
37
|
-
onClick: () => m(d.id),
|
|
38
|
-
size: "small"
|
|
39
|
-
})] }) : v === "canceled" && p ? /* @__PURE__ */ l(n.ActionIconButton, {
|
|
40
|
-
"aria-label": _.formatMessage(e.itemActionRetryAriaLabel),
|
|
41
|
-
className: t.actionButton,
|
|
42
|
-
icon: i,
|
|
43
|
-
onClick: () => p(d.id),
|
|
44
|
-
size: "small"
|
|
45
|
-
}) : null;
|
|
46
|
-
}
|
|
47
|
-
export { d as ActionButtons };
|
|
1
|
+
import uploads_item_messages_default from"../uploads-item.messages.js";import{t as uploads_item_module_default}from"../../../../chunks/uploads-item.module.js";import{SmallList}from"@box/blueprint-web";import{ArrowUpRightSquare,ArrowsSpinning,Link,XMark}from"@box/blueprint-web-assets/icons/Medium";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";function ActionButtons({item,onItemCancel,onItemRetry,onItemRemove,onItemOpen,onItemShare}){let intl=useIntl(),{status,isRetryable}=item;return status===`pending`||status===`uploading`?onItemCancel?jsx(SmallList.ActionIconButton,{"aria-label":intl.formatMessage(uploads_item_messages_default.itemActionCancelAriaLabel),className:uploads_item_module_default.actionButton,icon:XMark,onClick:()=>onItemCancel(item.id),size:`small`}):null:status===`complete`?jsxs(Fragment,{children:[onItemOpen&&jsx(SmallList.ActionIconButton,{"aria-label":intl.formatMessage(uploads_item_messages_default.itemActionOpenAriaLabel),className:uploads_item_module_default.actionButton,icon:ArrowUpRightSquare,onClick:()=>onItemOpen(item.id),size:`small`}),onItemShare&&jsx(SmallList.ActionIconButton,{"aria-label":intl.formatMessage(uploads_item_messages_default.itemActionShareAriaLabel),className:uploads_item_module_default.actionButton,icon:Link,onClick:()=>onItemShare(item.id),size:`small`})]}):status===`error`?jsxs(Fragment,{children:[isRetryable!==!1&&onItemRetry&&jsx(SmallList.ActionIconButton,{"aria-label":intl.formatMessage(uploads_item_messages_default.itemActionRetryAriaLabel),className:uploads_item_module_default.actionButton,icon:ArrowsSpinning,onClick:()=>onItemRetry(item.id),size:`small`}),onItemRemove&&jsx(SmallList.ActionIconButton,{"aria-label":intl.formatMessage(uploads_item_messages_default.itemActionRemoveAriaLabel),className:uploads_item_module_default.actionButton,icon:XMark,onClick:()=>onItemRemove(item.id),size:`small`})]}):status===`canceled`&&onItemRetry?jsx(SmallList.ActionIconButton,{"aria-label":intl.formatMessage(uploads_item_messages_default.itemActionRetryAriaLabel),className:uploads_item_module_default.actionButton,icon:ArrowsSpinning,onClick:()=>onItemRetry(item.id),size:`small`}):null}export{ActionButtons};
|
|
@@ -1,4 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { StatusLine as t } from "./status-line.js";
|
|
3
|
-
import { ActionButtons as n } from "./action-buttons.js";
|
|
4
|
-
export { n as ActionButtons, e as ItemRowIcon, t as StatusLine };
|
|
1
|
+
import{ItemRowIcon}from"./item-row-icon.js";import{StatusLine}from"./status-line.js";import{ActionButtons}from"./action-buttons.js";export{ActionButtons,ItemRowIcon,StatusLine};
|
|
@@ -1,25 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { t } from "../../../../chunks/uploads-item.module.js";
|
|
3
|
-
import { CircularProgress as n } from "@box/blueprint-web";
|
|
4
|
-
import { useIntl as r } from "react-intl";
|
|
5
|
-
import { jsx as i } from "react/jsx-runtime";
|
|
6
|
-
import { ItemIcon as a, getFileCategoryByExtension as o } from "@box/item-icon";
|
|
7
|
-
function s({ item: s }) {
|
|
8
|
-
let c = r(), { status: l, name: u, progress: d, isFolder: f, extension: p } = s;
|
|
9
|
-
if (l === "pending" || l === "uploading" || l === "staged") return /* @__PURE__ */ i(n, {
|
|
10
|
-
"aria-label": c.formatMessage(e.itemProgressAriaLabel, {
|
|
11
|
-
name: u,
|
|
12
|
-
progress: d
|
|
13
|
-
}),
|
|
14
|
-
className: t.progressRing,
|
|
15
|
-
value: d
|
|
16
|
-
});
|
|
17
|
-
let m = f ? "folder-plain" : o(p.toLowerCase());
|
|
18
|
-
return /* @__PURE__ */ i(a, {
|
|
19
|
-
ariaHidden: !0,
|
|
20
|
-
className: l === "canceled" ? t.iconDimmed : void 0,
|
|
21
|
-
dimension: 32,
|
|
22
|
-
iconType: m
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
export { s as ItemRowIcon };
|
|
1
|
+
import uploads_item_messages_default from"../uploads-item.messages.js";import{t as uploads_item_module_default}from"../../../../chunks/uploads-item.module.js";import{CircularProgress}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx}from"react/jsx-runtime";import{ItemIcon,getFileCategoryByExtension}from"@box/item-icon";function ItemRowIcon({item}){let intl=useIntl(),{status,name,progress,isFolder,extension}=item;if(status===`pending`||status===`uploading`||status===`staged`)return jsx(CircularProgress,{"aria-label":intl.formatMessage(uploads_item_messages_default.itemProgressAriaLabel,{name,progress}),className:uploads_item_module_default.progressRing,value:progress});let iconType=isFolder?`folder-plain`:getFileCategoryByExtension(extension.toLowerCase());return jsx(ItemIcon,{ariaHidden:!0,className:status===`canceled`?uploads_item_module_default.iconDimmed:void 0,dimension:32,iconType})}export{ItemRowIcon};
|
|
@@ -1,70 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { t } from "../../../../chunks/uploads-item.module.js";
|
|
3
|
-
import { Text as n } from "@box/blueprint-web";
|
|
4
|
-
import { AlertCircle as r, CheckmarkCircle as i, XMarkCircle as a } from "@box/blueprint-web-assets/icons/Medium";
|
|
5
|
-
import { useIntl as o } from "react-intl";
|
|
6
|
-
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
7
|
-
function l({ item: l }) {
|
|
8
|
-
let u = o(), { status: d, progress: f, isFolder: p, errorMessage: m, versionNumber: h } = l, g = h && Number(h) > 1;
|
|
9
|
-
if (d === "pending" || d === "uploading" || d === "staged") return p ? null : /* @__PURE__ */ s(n, {
|
|
10
|
-
as: "span",
|
|
11
|
-
color: "textOnLightSecondary",
|
|
12
|
-
variant: "bodySmall",
|
|
13
|
-
children: u.formatMessage(e.itemStatusUploading, { progress: f })
|
|
14
|
-
});
|
|
15
|
-
if (d === "complete") return /* @__PURE__ */ c("div", {
|
|
16
|
-
className: t.statusLine,
|
|
17
|
-
children: [
|
|
18
|
-
/* @__PURE__ */ s(i, {
|
|
19
|
-
"aria-hidden": !0,
|
|
20
|
-
className: `${t.statusIcon} ${t.statusCompleted}`,
|
|
21
|
-
color: "currentColor",
|
|
22
|
-
role: "presentation"
|
|
23
|
-
}),
|
|
24
|
-
/* @__PURE__ */ s(n, {
|
|
25
|
-
as: "span",
|
|
26
|
-
className: t.statusCompleted,
|
|
27
|
-
variant: "bodySmall",
|
|
28
|
-
children: u.formatMessage(e.itemStatusCompleted)
|
|
29
|
-
}),
|
|
30
|
-
g && /* @__PURE__ */ s(n, {
|
|
31
|
-
as: "span",
|
|
32
|
-
variant: "bodySmall",
|
|
33
|
-
color: "textOnLightSecondary",
|
|
34
|
-
children: u.formatMessage(e.itemStatusVersionSuffix, { versionNumber: h })
|
|
35
|
-
})
|
|
36
|
-
]
|
|
37
|
-
});
|
|
38
|
-
if (d === "error") {
|
|
39
|
-
let i = m ? u.formatMessage(e.itemStatusError, { errorMessage: m }) : u.formatMessage(e.itemStatusErrorNoMessage);
|
|
40
|
-
return /* @__PURE__ */ c("div", {
|
|
41
|
-
className: t.statusLine,
|
|
42
|
-
children: [/* @__PURE__ */ s(r, {
|
|
43
|
-
"aria-hidden": !0,
|
|
44
|
-
className: `${t.statusIcon} ${t.statusError}`,
|
|
45
|
-
color: "currentColor",
|
|
46
|
-
role: "presentation"
|
|
47
|
-
}), /* @__PURE__ */ s(n, {
|
|
48
|
-
as: "span",
|
|
49
|
-
color: "textOnLightError",
|
|
50
|
-
variant: "bodySmall",
|
|
51
|
-
children: i
|
|
52
|
-
})]
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
return d === "canceled" ? /* @__PURE__ */ c("div", {
|
|
56
|
-
className: t.statusLine,
|
|
57
|
-
children: [/* @__PURE__ */ s(a, {
|
|
58
|
-
"aria-hidden": !0,
|
|
59
|
-
className: t.statusIcon,
|
|
60
|
-
color: "currentColor",
|
|
61
|
-
role: "presentation"
|
|
62
|
-
}), /* @__PURE__ */ s(n, {
|
|
63
|
-
as: "span",
|
|
64
|
-
color: "textOnLightSecondary",
|
|
65
|
-
variant: "bodySmall",
|
|
66
|
-
children: u.formatMessage(e.itemStatusCanceled)
|
|
67
|
-
})]
|
|
68
|
-
}) : null;
|
|
69
|
-
}
|
|
70
|
-
export { l as StatusLine };
|
|
1
|
+
import uploads_item_messages_default from"../uploads-item.messages.js";import{t as uploads_item_module_default}from"../../../../chunks/uploads-item.module.js";import{Text}from"@box/blueprint-web";import{AlertCircle,CheckmarkCircle,XMarkCircle}from"@box/blueprint-web-assets/icons/Medium";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";function StatusLine({item}){let intl=useIntl(),{status,progress,isFolder,errorMessage,versionNumber}=item,showVersion=versionNumber&&Number(versionNumber)>1;if(status===`pending`||status===`uploading`||status===`staged`)return isFolder?null:jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodySmall`,children:intl.formatMessage(uploads_item_messages_default.itemStatusUploading,{progress})});if(status===`complete`)return jsxs(`div`,{className:uploads_item_module_default.statusLine,children:[jsx(CheckmarkCircle,{"aria-hidden":!0,className:`${uploads_item_module_default.statusIcon} ${uploads_item_module_default.statusCompleted}`,color:`currentColor`,role:`presentation`}),jsx(Text,{as:`span`,className:uploads_item_module_default.statusCompleted,variant:`bodySmall`,children:intl.formatMessage(uploads_item_messages_default.itemStatusCompleted)}),showVersion&&jsx(Text,{as:`span`,variant:`bodySmall`,color:`textOnLightSecondary`,children:intl.formatMessage(uploads_item_messages_default.itemStatusVersionSuffix,{versionNumber})})]});if(status===`error`){let errorText=errorMessage?intl.formatMessage(uploads_item_messages_default.itemStatusError,{errorMessage}):intl.formatMessage(uploads_item_messages_default.itemStatusErrorNoMessage);return jsxs(`div`,{className:uploads_item_module_default.statusLine,children:[jsx(AlertCircle,{"aria-hidden":!0,className:`${uploads_item_module_default.statusIcon} ${uploads_item_module_default.statusError}`,color:`currentColor`,role:`presentation`}),jsx(Text,{as:`span`,color:`textOnLightError`,variant:`bodySmall`,children:errorText})]})}return status===`canceled`?jsxs(`div`,{className:uploads_item_module_default.statusLine,children:[jsx(XMarkCircle,{"aria-hidden":!0,className:uploads_item_module_default.statusIcon,color:`currentColor`,role:`presentation`}),jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodySmall`,children:intl.formatMessage(uploads_item_messages_default.itemStatusCanceled)})]}):null}export{StatusLine};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export { e as UploadsItem };
|
|
1
|
+
import{UploadsItem}from"./uploads-item.js";export{UploadsItem};
|
|
@@ -1,32 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ItemRowIcon as t } from "./components/item-row-icon.js";
|
|
3
|
-
import { StatusLine as n } from "./components/status-line.js";
|
|
4
|
-
import { ActionButtons as r } from "./components/action-buttons.js";
|
|
5
|
-
import { SmallList as i } from "@box/blueprint-web";
|
|
6
|
-
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
7
|
-
function s({ item: s, onItemCancel: c, onItemRetry: l, onItemRemove: u, onItemOpen: d, onItemShare: f }) {
|
|
8
|
-
let p = !s.isFolder || s.status === "complete" || s.status === "error";
|
|
9
|
-
return /* @__PURE__ */ o(i.Item, {
|
|
10
|
-
id: s.id,
|
|
11
|
-
textValue: s.name,
|
|
12
|
-
className: e.item,
|
|
13
|
-
onPointerDown: (e) => e.preventDefault(),
|
|
14
|
-
children: [
|
|
15
|
-
/* @__PURE__ */ a(i.Thumbnail, {
|
|
16
|
-
hasCustomSize: !0,
|
|
17
|
-
children: /* @__PURE__ */ a(t, { item: s })
|
|
18
|
-
}),
|
|
19
|
-
/* @__PURE__ */ a(i.Header, { children: s.name }),
|
|
20
|
-
p && /* @__PURE__ */ a(i.Subtitle, { children: /* @__PURE__ */ a(n, { item: s }) }),
|
|
21
|
-
/* @__PURE__ */ a(i.Actions, { children: /* @__PURE__ */ a(r, {
|
|
22
|
-
item: s,
|
|
23
|
-
onItemCancel: c,
|
|
24
|
-
onItemRetry: l,
|
|
25
|
-
onItemRemove: u,
|
|
26
|
-
onItemOpen: d,
|
|
27
|
-
onItemShare: f
|
|
28
|
-
}) })
|
|
29
|
-
]
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
export { s as UploadsItem, s as default };
|
|
1
|
+
import{t as uploads_item_module_default}from"../../../chunks/uploads-item.module.js";import{ItemRowIcon}from"./components/item-row-icon.js";import{StatusLine}from"./components/status-line.js";import{ActionButtons}from"./components/action-buttons.js";import{SmallList}from"@box/blueprint-web";import{jsx,jsxs}from"react/jsx-runtime";function UploadsItem({item,onItemCancel,onItemRetry,onItemRemove,onItemOpen,onItemShare}){let isSubtitleVisible=!item.isFolder||item.status===`complete`||item.status===`error`;return jsxs(SmallList.Item,{id:item.id,textValue:item.name,className:uploads_item_module_default.item,onPointerDown:e=>e.preventDefault(),children:[jsx(SmallList.Thumbnail,{hasCustomSize:!0,children:jsx(ItemRowIcon,{item})}),jsx(SmallList.Header,{children:item.name}),isSubtitleVisible&&jsx(SmallList.Subtitle,{children:jsx(StatusLine,{item})}),jsx(SmallList.Actions,{children:jsx(ActionButtons,{item,onItemCancel,onItemRetry,onItemRemove,onItemOpen,onItemShare})})]})}export{UploadsItem,UploadsItem as default};
|
|
@@ -1,76 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
var t = e({
|
|
3
|
-
itemStatusUploading: {
|
|
4
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemStatusUploading",
|
|
5
|
-
defaultMessage: "Uploading · {progress}%"
|
|
6
|
-
},
|
|
7
|
-
itemStatusCompleted: {
|
|
8
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemStatusCompleted",
|
|
9
|
-
defaultMessage: "Completed"
|
|
10
|
-
},
|
|
11
|
-
itemStatusCompletedWithVersion: {
|
|
12
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemStatusCompletedWithVersion",
|
|
13
|
-
defaultMessage: "Completed · Version {versionNumber}"
|
|
14
|
-
},
|
|
15
|
-
itemStatusVersionSuffix: {
|
|
16
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemStatusVersionSuffix",
|
|
17
|
-
defaultMessage: "· Version {versionNumber}"
|
|
18
|
-
},
|
|
19
|
-
itemStatusCanceled: {
|
|
20
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemStatusCanceled",
|
|
21
|
-
defaultMessage: "Canceled"
|
|
22
|
-
},
|
|
23
|
-
itemStatusError: {
|
|
24
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemStatusError",
|
|
25
|
-
defaultMessage: "Error: {errorMessage}"
|
|
26
|
-
},
|
|
27
|
-
itemStatusErrorNoMessage: {
|
|
28
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemStatusErrorNoMessage",
|
|
29
|
-
defaultMessage: "Error"
|
|
30
|
-
},
|
|
31
|
-
itemProgressAriaLabel: {
|
|
32
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemProgressAriaLabel",
|
|
33
|
-
defaultMessage: "Uploading {name}, {progress}% complete"
|
|
34
|
-
},
|
|
35
|
-
itemActionCancel: {
|
|
36
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionCancel",
|
|
37
|
-
defaultMessage: "Cancel"
|
|
38
|
-
},
|
|
39
|
-
itemActionCancelAriaLabel: {
|
|
40
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionCancelAriaLabel",
|
|
41
|
-
defaultMessage: "Cancel upload"
|
|
42
|
-
},
|
|
43
|
-
itemActionRetry: {
|
|
44
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionRetry",
|
|
45
|
-
defaultMessage: "Retry"
|
|
46
|
-
},
|
|
47
|
-
itemActionRetryAriaLabel: {
|
|
48
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionRetryAriaLabel",
|
|
49
|
-
defaultMessage: "Retry upload"
|
|
50
|
-
},
|
|
51
|
-
itemActionRemove: {
|
|
52
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionRemove",
|
|
53
|
-
defaultMessage: "Remove"
|
|
54
|
-
},
|
|
55
|
-
itemActionRemoveAriaLabel: {
|
|
56
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionRemoveAriaLabel",
|
|
57
|
-
defaultMessage: "Remove"
|
|
58
|
-
},
|
|
59
|
-
itemActionOpen: {
|
|
60
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionOpen",
|
|
61
|
-
defaultMessage: "Open"
|
|
62
|
-
},
|
|
63
|
-
itemActionOpenAriaLabel: {
|
|
64
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionOpenAriaLabel",
|
|
65
|
-
defaultMessage: "Open"
|
|
66
|
-
},
|
|
67
|
-
itemActionShare: {
|
|
68
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionShare",
|
|
69
|
-
defaultMessage: "Share"
|
|
70
|
-
},
|
|
71
|
-
itemActionShareAriaLabel: {
|
|
72
|
-
id: "groupSharedFeatures.uploadsManager.itemList.itemActionShareAriaLabel",
|
|
73
|
-
defaultMessage: "Share"
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
export { t as default };
|
|
1
|
+
import{defineMessages}from"react-intl";var uploads_item_messages_default=defineMessages({itemStatusUploading:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusUploading`,defaultMessage:`Uploading · {progress}%`},itemStatusCompleted:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusCompleted`,defaultMessage:`Completed`},itemStatusCompletedWithVersion:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusCompletedWithVersion`,defaultMessage:`Completed · Version {versionNumber}`},itemStatusVersionSuffix:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusVersionSuffix`,defaultMessage:`· Version {versionNumber}`},itemStatusCanceled:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusCanceled`,defaultMessage:`Canceled`},itemStatusError:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusError`,defaultMessage:`Error: {errorMessage}`},itemStatusErrorNoMessage:{id:`groupSharedFeatures.uploadsManager.itemList.itemStatusErrorNoMessage`,defaultMessage:`Error`},itemProgressAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemProgressAriaLabel`,defaultMessage:`Uploading {name}, {progress}% complete`},itemActionCancel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionCancel`,defaultMessage:`Cancel`},itemActionCancelAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionCancelAriaLabel`,defaultMessage:`Cancel upload`},itemActionRetry:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRetry`,defaultMessage:`Retry`},itemActionRetryAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRetryAriaLabel`,defaultMessage:`Retry upload`},itemActionRemove:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRemove`,defaultMessage:`Remove`},itemActionRemoveAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionRemoveAriaLabel`,defaultMessage:`Remove`},itemActionOpen:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionOpen`,defaultMessage:`Open`},itemActionOpenAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionOpenAriaLabel`,defaultMessage:`Open`},itemActionShare:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionShare`,defaultMessage:`Share`},itemActionShareAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.itemActionShareAriaLabel`,defaultMessage:`Share`}});export{uploads_item_messages_default as default};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export { e as UploadsItemList };
|
|
1
|
+
import{t as UploadsItemList}from"../../../chunks/uploads-item-list.js";export{UploadsItemList};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export { e as UploadsItemList, e as default };
|
|
1
|
+
import{t as UploadsItemList}from"../../../chunks/uploads-item-list.js";export{UploadsItemList,UploadsItemList as default};
|
|
@@ -1,6 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
var t = e({ listAriaLabel: {
|
|
3
|
-
id: "groupSharedFeatures.uploadsManager.itemList.listAriaLabel",
|
|
4
|
-
defaultMessage: "Uploads"
|
|
5
|
-
} });
|
|
6
|
-
export { t as default };
|
|
1
|
+
import{defineMessages}from"react-intl";var uploads_item_list_messages_default=defineMessages({listAriaLabel:{id:`groupSharedFeatures.uploadsManager.itemList.listAriaLabel`,defaultMessage:`Uploads`}});export{uploads_item_list_messages_default as default};
|
|
@@ -1,3 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { t as e } from "../../chunks/uploads-manager.js";
|
|
3
|
-
export { e as UploadsManager, e as default };
|
|
1
|
+
import"./uploads-item-list/index.js";import{t as UploadsManager}from"../../chunks/uploads-manager.js";export{UploadsManager,UploadsManager as default};
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
function
|
|
2
|
-
return e < 0 ? 0 : e > 100 ? 100 : e;
|
|
3
|
-
}
|
|
4
|
-
function t(t) {
|
|
5
|
-
let n = t.filter((e) => e.status !== "canceled" && e.status !== "error");
|
|
6
|
-
if (n.length === 0) return 0;
|
|
7
|
-
let r = n.reduce((t, n) => n.status === "complete" ? t + 100 : n.status === "pending" ? t : t + e(n.progress), 0);
|
|
8
|
-
return Math.floor(r / n.length);
|
|
9
|
-
}
|
|
10
|
-
export { t as getProgress };
|
|
1
|
+
function clampProgress(value){return value<0?0:value>100?100:value}function getProgress(items){let eligibleItems=items.filter(item=>item.status!==`canceled`&&item.status!==`error`);if(eligibleItems.length===0)return 0;let progressSum=eligibleItems.reduce((sum,item)=>item.status===`complete`?sum+100:item.status===`pending`?sum:sum+clampProgress(item.progress),0);return Math.floor(progressSum/eligibleItems.length)}export{getProgress};
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
function
|
|
2
|
-
if (e.length === 0) return "idle";
|
|
3
|
-
let t = e.filter((e) => e.status !== "canceled");
|
|
4
|
-
if (t.length === 0) return "canceled";
|
|
5
|
-
let n = t.filter((e) => e.status === "complete").length;
|
|
6
|
-
if (n === t.length) return "success";
|
|
7
|
-
let r = t.some((e) => e.status === "pending"), i = t.some((e) => e.status === "uploading" || e.status === "staged");
|
|
8
|
-
return i || r ? i ? "uploading" : "idle" : t.some((e) => e.status === "error") ? "error" : n > 0 ? "success" : "canceled";
|
|
9
|
-
}
|
|
10
|
-
export { e as getStatus };
|
|
1
|
+
function getStatus(items){if(items.length===0)return`idle`;let eligibleItems=items.filter(item=>item.status!==`canceled`);if(eligibleItems.length===0)return`canceled`;let completedCount=eligibleItems.filter(item=>item.status===`complete`).length;if(completedCount===eligibleItems.length)return`success`;let hasPending=eligibleItems.some(item=>item.status===`pending`),hasInProgress=eligibleItems.some(item=>item.status===`uploading`||item.status===`staged`);return hasInProgress||hasPending?hasInProgress?`uploading`:`idle`:eligibleItems.some(item=>item.status===`error`)?`error`:completedCount>0?`success`:`canceled`}export{getStatus};
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/uploads-manager",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.25",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@box/blueprint-web": "^16.13.
|
|
7
|
-
"@box/blueprint-web-assets": "^5.5.
|
|
8
|
-
"@box/item-icon": "^3.2.
|
|
6
|
+
"@box/blueprint-web": "^16.13.2",
|
|
7
|
+
"@box/blueprint-web-assets": "^5.5.11",
|
|
8
|
+
"@box/item-icon": "^3.2.35",
|
|
9
9
|
"react": "^18.0.0",
|
|
10
10
|
"react-aria-components": "1.16.0",
|
|
11
11
|
"react-dom": "^18.0.0",
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
"access": "public"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@box/blueprint-web": "^16.13.
|
|
19
|
-
"@box/blueprint-web-assets": "^5.5.
|
|
20
|
-
"@box/eslint-plugin-blueprint": "2.1.
|
|
21
|
-
"@box/item-icon": "^3.2.
|
|
22
|
-
"@box/storybook-utils": "1.1.
|
|
18
|
+
"@box/blueprint-web": "^16.13.2",
|
|
19
|
+
"@box/blueprint-web-assets": "^5.5.11",
|
|
20
|
+
"@box/eslint-plugin-blueprint": "2.1.11",
|
|
21
|
+
"@box/item-icon": "^3.2.35",
|
|
22
|
+
"@box/storybook-utils": "1.1.35",
|
|
23
23
|
"react-aria-components": "1.16.0",
|
|
24
24
|
"react-intl": "^6.4.2"
|
|
25
25
|
},
|