@mittwald/flow-react-components 0.2.0-alpha.401 → 0.2.0-alpha.403
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/CHANGELOG.md +12 -0
- package/dist/assets/doc-properties.json +21242 -21204
- package/dist/css/all.css +1 -1
- package/dist/js/components/src/components/FileCard/FileCard.mjs +29 -11
- package/dist/js/components/src/components/FileCard/FileCard.mjs.map +1 -1
- package/dist/js/components/src/components/FileCard/FileCard.module.scss.mjs +3 -3
- package/dist/js/components/src/components/FileCard/components/Avatar/Avatar.mjs +4 -1
- package/dist/js/components/src/components/FileCard/components/Avatar/Avatar.mjs.map +1 -1
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarValue.mjs +1 -1
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarValue.mjs.map +1 -1
- package/dist/types/components/FileCard/FileCard.d.ts +3 -1
- package/dist/types/components/FileCard/FileCard.d.ts.map +1 -1
- package/dist/types/components/FileCard/components/Avatar/Avatar.d.ts +1 -0
- package/dist/types/components/FileCard/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/FileCard/stories/Default.stories.d.ts +3 -0
- package/dist/types/components/FileCard/stories/Default.stories.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -15,6 +15,7 @@ import '../../lib/propsContext/propsContext.mjs';
|
|
|
15
15
|
import '../../lib/viewComponentContext/viewComponentContext.mjs';
|
|
16
16
|
import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
|
|
17
17
|
import { OptionsButton } from '../List/components/Items/components/Item/components/OptionsButton/OptionsButton.mjs';
|
|
18
|
+
import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
|
|
18
19
|
|
|
19
20
|
const FileCard = flowComponent("FileCard", (props) => {
|
|
20
21
|
const {
|
|
@@ -30,18 +31,33 @@ const FileCard = flowComponent("FileCard", (props) => {
|
|
|
30
31
|
target,
|
|
31
32
|
download,
|
|
32
33
|
imageSrc,
|
|
33
|
-
children
|
|
34
|
+
children,
|
|
35
|
+
isFailed
|
|
34
36
|
} = props;
|
|
35
|
-
const rootClassName = clsx(
|
|
37
|
+
const rootClassName = clsx(
|
|
38
|
+
styles.fileCard,
|
|
39
|
+
isFailed && styles["failed"],
|
|
40
|
+
className
|
|
41
|
+
);
|
|
36
42
|
const propsContext = {
|
|
37
43
|
ContextMenu: {
|
|
38
44
|
wrapWith: /* @__PURE__ */ jsx(OptionsButton, {}),
|
|
39
45
|
placement: "bottom right"
|
|
40
|
-
}
|
|
46
|
+
},
|
|
47
|
+
Text: {
|
|
48
|
+
elementType: "span",
|
|
49
|
+
className: styles.subTitle,
|
|
50
|
+
tunnelId: "subTitle"
|
|
51
|
+
},
|
|
52
|
+
ProgressBar: {
|
|
53
|
+
size: "s",
|
|
54
|
+
tunnelId: "progressBar"
|
|
55
|
+
},
|
|
56
|
+
Button: { variant: "plain", color: "secondary" }
|
|
41
57
|
};
|
|
42
58
|
const Element = elementType;
|
|
43
|
-
return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, mergeInParentContext: true, children: /* @__PURE__ */ jsxs(Element, { ref, className: rootClassName, children: [
|
|
44
|
-
/* @__PURE__ */ jsx(Wrap, { if: href || onPress, children: /* @__PURE__ */ jsxs(
|
|
59
|
+
return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, mergeInParentContext: true, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(Element, { ref, className: rootClassName, children: [
|
|
60
|
+
/* @__PURE__ */ jsx(Wrap, { if: (href || onPress) && !isFailed, children: /* @__PURE__ */ jsxs(
|
|
45
61
|
Link,
|
|
46
62
|
{
|
|
47
63
|
className: styles.link,
|
|
@@ -51,17 +67,19 @@ const FileCard = flowComponent("FileCard", (props) => {
|
|
|
51
67
|
target,
|
|
52
68
|
download,
|
|
53
69
|
children: [
|
|
54
|
-
/* @__PURE__ */ jsx(Avatar, { type, imageSrc }),
|
|
70
|
+
/* @__PURE__ */ jsx(Avatar, { type, imageSrc, isFailed }),
|
|
55
71
|
/* @__PURE__ */ jsxs("span", { className: styles.text, children: [
|
|
56
|
-
/* @__PURE__ */ jsx(Text, { className: styles.title, children: /* @__PURE__ */ jsx("b", { children: name }) }),
|
|
57
|
-
sizeInBytes && /* @__PURE__ */ jsx(FileSizeText, { sizeInBytes })
|
|
72
|
+
name && /* @__PURE__ */ jsx(Text, { className: styles.title, children: /* @__PURE__ */ jsx("b", { children: name }) }),
|
|
73
|
+
sizeInBytes && /* @__PURE__ */ jsx(FileSizeText, { sizeInBytes }),
|
|
74
|
+
/* @__PURE__ */ jsx(TunnelExit, { id: "subTitle" }),
|
|
75
|
+
/* @__PURE__ */ jsx(TunnelExit, { id: "progressBar" })
|
|
58
76
|
] })
|
|
59
77
|
]
|
|
60
78
|
}
|
|
61
79
|
) }),
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
] }) });
|
|
80
|
+
children,
|
|
81
|
+
onDelete && /* @__PURE__ */ jsx(DeleteButton, { onDelete })
|
|
82
|
+
] }) }) });
|
|
65
83
|
});
|
|
66
84
|
|
|
67
85
|
export { FileCard, FileCard as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileCard.mjs","sources":["../../../../../../src/components/FileCard/FileCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { Avatar } from \"./components/Avatar\";\nimport { Text } from \"@/components/Text\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport styles from \"./FileCard.module.scss\";\nimport clsx from \"clsx\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { FileSizeText } from \"@/components/FileCard/components/FileSizeText\";\nimport { Link, type LinkProps } from \"@/components/Link\";\nimport Wrap from \"@/components/Wrap\";\nimport { DeleteButton } from \"@/components/FileCard/components/DeleteButton\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\n\nexport interface FileCardProps\n extends FlowComponentProps<HTMLDivElement | HTMLLIElement>,\n PropsWithClassName,\n PropsWithElementType<\"div\" | \"li\">,\n Pick<LinkProps, \"onPress\" | \"href\" | \"target\" | \"download\"> {\n /** The name of the file. */\n name
|
|
1
|
+
{"version":3,"file":"FileCard.mjs","sources":["../../../../../../src/components/FileCard/FileCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { Avatar } from \"./components/Avatar\";\nimport { Text } from \"@/components/Text\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport styles from \"./FileCard.module.scss\";\nimport clsx from \"clsx\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { FileSizeText } from \"@/components/FileCard/components/FileSizeText\";\nimport { Link, type LinkProps } from \"@/components/Link\";\nimport Wrap from \"@/components/Wrap\";\nimport { DeleteButton } from \"@/components/FileCard/components/DeleteButton\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface FileCardProps\n extends FlowComponentProps<HTMLDivElement | HTMLLIElement>,\n PropsWithClassName,\n PropsWithElementType<\"div\" | \"li\">,\n Pick<LinkProps, \"onPress\" | \"href\" | \"target\" | \"download\"> {\n /** The name of the file. */\n name?: string;\n /** The type of the file. */\n type?: string;\n /** Handler that is called when the file cards delete button is clicked. */\n onDelete?: () => void;\n /** The size of the file in bytes. */\n sizeInBytes?: number;\n /** The source of an image file. */\n imageSrc?: string;\n /** Whether the file card is in a failed state. */\n isFailed?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileCard = flowComponent(\"FileCard\", (props) => {\n const {\n ref,\n onDelete,\n type,\n sizeInBytes,\n name,\n className,\n elementType = \"div\",\n onPress,\n href,\n target,\n download,\n imageSrc,\n children,\n isFailed,\n } = props;\n\n const rootClassName = clsx(\n styles.fileCard,\n isFailed && styles[\"failed\"],\n className,\n );\n\n const propsContext: PropsContext = {\n ContextMenu: {\n wrapWith: <OptionsButton />,\n placement: \"bottom right\",\n },\n Text: {\n elementType: \"span\",\n className: styles.subTitle,\n tunnelId: \"subTitle\",\n },\n ProgressBar: {\n size: \"s\",\n tunnelId: \"progressBar\",\n },\n Button: { variant: \"plain\", color: \"secondary\" },\n };\n\n const Element = elementType;\n\n return (\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <TunnelProvider>\n <Element ref={ref as never} className={rootClassName}>\n <Wrap if={(href || onPress) && !isFailed}>\n <Link\n className={styles.link}\n unstyled\n href={href}\n onPress={onPress}\n target={target}\n download={download}\n >\n <Avatar type={type} imageSrc={imageSrc} isFailed={isFailed} />\n\n <span className={styles.text}>\n {name && (\n <Text className={styles.title}>\n <b>{name}</b>\n </Text>\n )}\n {sizeInBytes && <FileSizeText sizeInBytes={sizeInBytes} />}\n <TunnelExit id=\"subTitle\" />\n <TunnelExit id=\"progressBar\" />\n </span>\n </Link>\n </Wrap>\n {children}\n {onDelete && <DeleteButton onDelete={onDelete} />}\n </Element>\n </TunnelProvider>\n </PropsContextProvider>\n );\n});\n\nexport default FileCard;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAyCO,MAAM,QAAW,GAAA,aAAA,CAAc,UAAY,EAAA,CAAC,KAAU,KAAA;AAC3D,EAAM,MAAA;AAAA,IACJ,GAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAc,GAAA,KAAA;AAAA,IACd,OAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,QAAA;AAAA,IACP,QAAA,IAAY,OAAO,QAAQ,CAAA;AAAA,IAC3B;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,WAAa,EAAA;AAAA,MACX,QAAA,sBAAW,aAAc,EAAA,EAAA,CAAA;AAAA,MACzB,SAAW,EAAA;AAAA,KACb;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,WAAa,EAAA,MAAA;AAAA,MACb,WAAW,MAAO,CAAA,QAAA;AAAA,MAClB,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,WAAa,EAAA;AAAA,MACX,IAAM,EAAA,GAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,MAAQ,EAAA,EAAE,OAAS,EAAA,OAAA,EAAS,OAAO,WAAY;AAAA,GACjD;AAEA,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EAAA,uBACG,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAAc,oBAAoB,EAAA,IAAA,EAC7D,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EACC,QAAC,kBAAA,IAAA,CAAA,OAAA,EAAA,EAAQ,GAAmB,EAAA,SAAA,EAAW,aACrC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAA,CAAK,IAAQ,IAAA,OAAA,KAAY,CAAC,QAC9B,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,IAAA;AAAA,QAClB,QAAQ,EAAA,IAAA;AAAA,QACR,IAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA,EAAO,IAAY,EAAA,QAAA,EAAoB,QAAoB,EAAA,CAAA;AAAA,0BAE3D,IAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,IACrB,EAAA,QAAA,EAAA;AAAA,YACC,IAAA,oBAAA,GAAA,CAAC,QAAK,SAAW,EAAA,MAAA,CAAO,OACtB,QAAC,kBAAA,GAAA,CAAA,GAAA,EAAA,EAAG,gBAAK,CACX,EAAA,CAAA;AAAA,YAED,WAAA,oBAAgB,GAAA,CAAA,YAAA,EAAA,EAAa,WAA0B,EAAA,CAAA;AAAA,4BACxD,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,UAAW,EAAA,CAAA;AAAA,4BAC1B,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,aAAc,EAAA;AAAA,WAC/B,EAAA;AAAA;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,IACC,QAAA;AAAA,IACA,QAAA,oBAAa,GAAA,CAAA,YAAA,EAAA,EAAa,QAAoB,EAAA;AAAA,GAAA,EACjD,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -5,15 +5,15 @@ const link = "flow--file-card--link";
|
|
|
5
5
|
const text = "flow--file-card--text";
|
|
6
6
|
const title = "flow--file-card--title";
|
|
7
7
|
const subTitle = "flow--file-card--sub-title";
|
|
8
|
-
const
|
|
8
|
+
const failed = "flow--file-card--failed";
|
|
9
9
|
const styles = {
|
|
10
10
|
fileCard: fileCard,
|
|
11
11
|
link: link,
|
|
12
12
|
text: text,
|
|
13
13
|
title: title,
|
|
14
14
|
subTitle: subTitle,
|
|
15
|
-
|
|
15
|
+
failed: failed
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
export { styles as default,
|
|
18
|
+
export { styles as default, failed, fileCard, link, subTitle, text, title };
|
|
19
19
|
//# sourceMappingURL=FileCard.module.scss.mjs.map
|
|
@@ -10,7 +10,10 @@ import { Avatar as Avatar$1 } from '../../../Avatar/Avatar.mjs';
|
|
|
10
10
|
import { Image } from '../../../Image/Image.mjs';
|
|
11
11
|
|
|
12
12
|
const Avatar = (props) => {
|
|
13
|
-
const { type, imageSrc } = props;
|
|
13
|
+
const { type, imageSrc, isFailed } = props;
|
|
14
|
+
if (isFailed) {
|
|
15
|
+
return /* @__PURE__ */ jsx(Avatar$1, { status: "danger" });
|
|
16
|
+
}
|
|
14
17
|
if (imageSrc) {
|
|
15
18
|
return /* @__PURE__ */ jsx(Avatar$1, { children: /* @__PURE__ */ jsx(Image, { src: imageSrc }) });
|
|
16
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.mjs","sources":["../../../../../../../../src/components/FileCard/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { IconFile } from \"@/components/Icon/components/icons\";\nimport { Avatar as AvatarComponent } from \"@/components/Avatar\";\nimport { Image } from \"@/components/Image\";\nimport Icon from \"@/components/Icon\";\nimport { IconPhoto } from \"@tabler/icons-react\";\n\ninterface Props {\n type?: string;\n imageSrc?: string;\n}\n\nexport const Avatar: FC<Props> = (props) => {\n const { type, imageSrc } = props;\n\n if (imageSrc) {\n return (\n <AvatarComponent>\n <Image src={imageSrc} />\n </AvatarComponent>\n );\n }\n\n return (\n <AvatarComponent color=\"blue\">\n {type?.startsWith(\"image\") ? (\n <Icon>\n <IconPhoto />\n </Icon>\n ) : (\n <IconFile />\n )}\n </AvatarComponent>\n );\n};\nexport default Avatar;\n"],"names":["AvatarComponent"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","sources":["../../../../../../../../src/components/FileCard/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { IconFile } from \"@/components/Icon/components/icons\";\nimport { Avatar as AvatarComponent } from \"@/components/Avatar\";\nimport { Image } from \"@/components/Image\";\nimport Icon from \"@/components/Icon\";\nimport { IconPhoto } from \"@tabler/icons-react\";\n\ninterface Props {\n type?: string;\n imageSrc?: string;\n isFailed?: boolean;\n}\n\nexport const Avatar: FC<Props> = (props) => {\n const { type, imageSrc, isFailed } = props;\n\n if (isFailed) {\n return <AvatarComponent status=\"danger\" />;\n }\n\n if (imageSrc) {\n return (\n <AvatarComponent>\n <Image src={imageSrc} />\n </AvatarComponent>\n );\n }\n\n return (\n <AvatarComponent color=\"blue\">\n {type?.startsWith(\"image\") ? (\n <Icon>\n <IconPhoto />\n </Icon>\n ) : (\n <IconFile />\n )}\n </AvatarComponent>\n );\n};\nexport default Avatar;\n"],"names":["AvatarComponent"],"mappings":";;;;;;;;;AAca,MAAA,MAAA,GAAoB,CAAC,KAAU,KAAA;AAC1C,EAAA,MAAM,EAAE,IAAA,EAAM,QAAU,EAAA,QAAA,EAAa,GAAA,KAAA;AAErC,EAAA,IAAI,QAAU,EAAA;AACZ,IAAO,uBAAA,GAAA,CAACA,QAAgB,EAAA,EAAA,MAAA,EAAO,QAAS,EAAA,CAAA;AAAA;AAG1C,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,2BACGA,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAM,EAAA,EAAA,GAAA,EAAK,UAAU,CACxB,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACGA,QAAgB,EAAA,EAAA,KAAA,EAAM,MACpB,EAAA,QAAA,EAAA,IAAA,EAAM,WAAW,OAAO,CAAA,mBACtB,GAAA,CAAA,IAAA,EAAA,EACC,8BAAC,SAAU,EAAA,EAAA,CAAA,EACb,CAEA,mBAAA,GAAA,CAAC,YAAS,CAEd,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -18,7 +18,7 @@ const ProgressBarValue = (props) => {
|
|
|
18
18
|
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
19
19
|
const maxValueText = !showMaxValue || !maxValue ? void 0 : formatOptions ? formatter.format(maxValue) : `${maxValue} %`;
|
|
20
20
|
const valueText = formatOptions ? formatter.format(value) : `${value} %`;
|
|
21
|
-
const textWithMaxValue = `${
|
|
21
|
+
const textWithMaxValue = `${valueText} ${stringFormatter.format("progressBar.of")} ${maxValueText}`;
|
|
22
22
|
return /* @__PURE__ */ jsx("span", { className: styles.value, children: valueLabel ?? (maxValueText ? textWithMaxValue : valueText) });
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarValue.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props\n extends Pick<\n ProgressBarProps,\n \"showMaxValue\" | \"maxValue\" | \"formatOptions\"\n > {\n value?: number;\n valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n const {\n showMaxValue,\n maxValue,\n value = 0,\n formatOptions,\n valueLabel,\n } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const maxValueText =\n !showMaxValue || !maxValue\n ? undefined\n : formatOptions\n ? formatter.format(maxValue)\n : `${maxValue} %`;\n\n const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n const textWithMaxValue = `${
|
|
1
|
+
{"version":3,"file":"ProgressBarValue.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props\n extends Pick<\n ProgressBarProps,\n \"showMaxValue\" | \"maxValue\" | \"formatOptions\"\n > {\n value?: number;\n valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n const {\n showMaxValue,\n maxValue,\n value = 0,\n formatOptions,\n valueLabel,\n } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const maxValueText =\n !showMaxValue || !maxValue\n ? undefined\n : formatOptions\n ? formatter.format(maxValue)\n : `${maxValue} %`;\n\n const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n const textWithMaxValue = `${valueText} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`;\n\n return (\n <span className={styles.value}>\n {valueLabel ?? (maxValueText ? textWithMaxValue : valueText)}\n </span>\n );\n};\n"],"names":[],"mappings":";;;;;;AAea,MAAA,gBAAA,GAA8B,CAAC,KAAU,KAAA;AACpD,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAQ,GAAA,CAAA;AAAA,IACR,aAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,YACJ,GAAA,CAAC,YAAgB,IAAA,CAAC,QACd,GAAA,MAAA,GACA,aACE,GAAA,SAAA,CAAU,MAAO,CAAA,QAAQ,CACzB,GAAA,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA;AAEnB,EAAA,MAAM,YAAY,aAAgB,GAAA,SAAA,CAAU,OAAO,KAAK,CAAA,GAAI,GAAG,KAAK,CAAA,EAAA,CAAA;AAEpE,EAAM,MAAA,gBAAA,GAAmB,GAAG,SAAS,CAAA,CAAA,EAAI,gBAAgB,MAAO,CAAA,gBAAgB,CAAC,CAAA,CAAA,EAAI,YAAY,CAAA,CAAA;AAEjG,EACE,uBAAA,GAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,OACrB,QAAe,EAAA,UAAA,KAAA,YAAA,GAAe,mBAAmB,SACpD,CAAA,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -4,7 +4,7 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
|
4
4
|
import { LinkProps } from '../Link';
|
|
5
5
|
export interface FileCardProps extends FlowComponentProps<HTMLDivElement | HTMLLIElement>, PropsWithClassName, PropsWithElementType<"div" | "li">, Pick<LinkProps, "onPress" | "href" | "target" | "download"> {
|
|
6
6
|
/** The name of the file. */
|
|
7
|
-
name
|
|
7
|
+
name?: string;
|
|
8
8
|
/** The type of the file. */
|
|
9
9
|
type?: string;
|
|
10
10
|
/** Handler that is called when the file cards delete button is clicked. */
|
|
@@ -13,6 +13,8 @@ export interface FileCardProps extends FlowComponentProps<HTMLDivElement | HTMLL
|
|
|
13
13
|
sizeInBytes?: number;
|
|
14
14
|
/** The source of an image file. */
|
|
15
15
|
imageSrc?: string;
|
|
16
|
+
/** Whether the file card is in a failed state. */
|
|
17
|
+
isFailed?: boolean;
|
|
16
18
|
}
|
|
17
19
|
/** @flr-generate all */
|
|
18
20
|
export declare const FileCard: React.FunctionComponent<FileCardProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/FileCard/FileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"FileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/FileCard/FileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAOzD,MAAM,WAAW,aACf,SAAQ,kBAAkB,CAAC,cAAc,GAAG,aAAa,CAAC,EACxD,kBAAkB,EAClB,oBAAoB,CAAC,KAAK,GAAG,IAAI,CAAC,EAClC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7D,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAwB;AACxB,eAAO,MAAM,QAAQ,8FA4EnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FileCard/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FileCard/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,KAAK,CA0B5B,CAAC;AACF,eAAe,MAAM,CAAC"}
|
|
@@ -11,4 +11,7 @@ export declare const WithLink: Story;
|
|
|
11
11
|
export declare const WithLinkAndOnDelete: Story;
|
|
12
12
|
export declare const WithContextMenu: Story;
|
|
13
13
|
export declare const WithImage: Story;
|
|
14
|
+
export declare const WithProgressBar: Story;
|
|
15
|
+
export declare const Failed: Story;
|
|
16
|
+
export declare const WithButtons: Story;
|
|
14
17
|
//# sourceMappingURL=Default.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/FileCard/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/FileCard/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAcjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAK/B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAAuC,CAAC;AAE/D,eAAO,MAAM,QAAQ,EAAE,KAAwC,CAAC;AAEhE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AACF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAezB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.403",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"@chakra-ui/live-region": "^2.1.0",
|
|
59
59
|
"@internationalized/string-compiler": "^3.2.6",
|
|
60
60
|
"@mittwald/password-tools-js": "3.0.0-alpha.15",
|
|
61
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
61
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.403",
|
|
62
62
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
63
63
|
"@react-aria/form": "^3.1.0",
|
|
64
64
|
"@react-aria/utils": "^3.30.0",
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"@faker-js/faker": "^9.9.0",
|
|
100
100
|
"@internationalized/date": "^3.8.2",
|
|
101
101
|
"@mittwald/flow-core": "",
|
|
102
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
102
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.403",
|
|
103
103
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
104
104
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
105
105
|
"@mittwald/typescript-config": "",
|
|
@@ -175,5 +175,5 @@
|
|
|
175
175
|
"optional": true
|
|
176
176
|
}
|
|
177
177
|
},
|
|
178
|
-
"gitHead": "
|
|
178
|
+
"gitHead": "ddb9bc7d1fd051182a3f3ee08e11f1aa5081afc6"
|
|
179
179
|
}
|