@sikt/sds-input-file 0.2.0 → 0.2.1
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 +6 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [0.2.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@0.2.0...@sikt/sds-input-file@0.2.1) (2024-10-25)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **input-file:** catch accept wildcard ([bcbc572](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/bcbc5727850ef94e0adc6a3f490cdd44ba0fd1d1))
|
|
10
|
+
|
|
5
11
|
## [0.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-input-file@0.1.0...@sikt/sds-input-file@0.2.0) (2024-10-23)
|
|
6
12
|
|
|
7
13
|
### ⚠ BREAKING CHANGES
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-form"),s=require("@sikt/sds-icons"),l=require("clsx/lite"),i=require("react"),t=require("react-aria-components"),a=require("react/jsx-runtime"),n=require("@sikt/sds-button"),o=require("clsx"),c=Object.defineProperty,p=Object.defineProperties,d=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,x=(e,r,s)=>r in e?c(e,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[r]=s,f=(e,r)=>{for(var s in r||(r={}))m.call(r,s)&&x(e,s,r[s]);if(u)for(var s of u(r))h.call(r,s)&&x(e,s,r[s]);return e},g=(e,r)=>p(e,d(r)),b=(e,r)=>{var s={};for(var l in e)m.call(e,l)&&r.indexOf(l)<0&&(s[l]=e[l]);if(null!=e&&u)for(var l of u(e))r.indexOf(l)<0&&h.call(e,l)&&(s[l]=e[l]);return s},j=i.forwardRef(((n,o)=>{var c=n,{label:p,"aria-label":d,errorText:u,helpText:m,className:h,placeholder:x="Dra og slipp filer her,",placeholderBridge:j="eller",triggerText:v="Åpne filutforskeren",onChange:_,accept:y,multiple:N=!1,capture:T,value:F,maxFileSize:I}=c,O=b(c,["label","aria-label","errorText","helpText","className","placeholder","placeholderBridge","triggerText","onChange","accept","multiple","capture","value","maxFileSize"]);const P=i.useId(),z="".concat(P,"-help-text"),[B,S]=i.useState(null!=F?F:[]),q={id:P},w=y.split(",");i.useEffect((()=>{F&&S(F)}),[F]);const k=e=>{const r=(e=>e.map(((e,r)=>{const s=e,l=[];return w.
|
|
1
|
+
"use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-form"),s=require("@sikt/sds-icons"),l=require("clsx/lite"),i=require("react"),t=require("react-aria-components"),a=require("react/jsx-runtime"),n=require("@sikt/sds-button"),o=require("clsx"),c=Object.defineProperty,p=Object.defineProperties,d=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,x=(e,r,s)=>r in e?c(e,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[r]=s,f=(e,r)=>{for(var s in r||(r={}))m.call(r,s)&&x(e,s,r[s]);if(u)for(var s of u(r))h.call(r,s)&&x(e,s,r[s]);return e},g=(e,r)=>p(e,d(r)),b=(e,r)=>{var s={};for(var l in e)m.call(e,l)&&r.indexOf(l)<0&&(s[l]=e[l]);if(null!=e&&u)for(var l of u(e))r.indexOf(l)<0&&h.call(e,l)&&(s[l]=e[l]);return s},j=i.forwardRef(((n,o)=>{var c=n,{label:p,"aria-label":d,errorText:u,helpText:m,className:h,placeholder:x="Dra og slipp filer her,",placeholderBridge:j="eller",triggerText:v="Åpne filutforskeren",onChange:_,accept:y,multiple:N=!1,capture:T,value:F,maxFileSize:I}=c,O=b(c,["label","aria-label","errorText","helpText","className","placeholder","placeholderBridge","triggerText","onChange","accept","multiple","capture","value","maxFileSize"]);const P=i.useId(),z="".concat(P,"-help-text"),[B,S]=i.useState(null!=F?F:[]),q={id:P},w=y.split(",");i.useEffect((()=>{F&&S(F)}),[F]);const k=e=>{const r=(e=>e.map(((e,r)=>{const s=e,l=[];return w.some((r=>e.type.match(r.replaceAll("*",".*").replaceAll("/","/\\/"))))||l.push("type"),I&&I<e.size&&l.push("size"),!N&&r>0&&l.push("multiple"),l.length>0&&(s.error=l),s})))(e);S([...B,...r]),_&&_([...B,...r])};return a.jsx(r.FormField,{className:l.clsx("sds-input-file",u&&"sds-input-file--error",h),label:p,errorText:u,helpText:m,htmlFor:P,helpTextId:z,children:a.jsxs(t.DropZone,g(f({className:l.clsx("sds-input-file__drop-zone",Boolean(u)&&"sds-input-file__drop-zone--error"),onDrop:e=>{(async()=>{const r=e.items.filter((e=>"file"===e.kind));return await Promise.all(r.map((e=>e.getFile())))})().then(k).catch((e=>{throw console.error(e),e}))},"aria-label":d,"aria-describedby":(null!=u?u:m)?z:void 0,"aria-invalid":Boolean(u),"aria-errormessage":u?z:void 0,ref:o},O),{children:[a.jsx("div",{className:"sds-input-file__drop-zone-icon",children:a.jsx(s.UploadSimpleIcon,{})}),a.jsxs(e.Paragraph,{className:"sds-input-file__placeholder",children:[x,j&&a.jsxs(a.Fragment,{children:[a.jsx("br",{}),j]})]}),a.jsx(t.FileTrigger,g(f({},q),{onSelect:e=>{if(!e)return;const r=Array.from(e);k(r)},acceptedFileTypes:w,allowsMultiple:N,defaultCamera:T,children:a.jsx(t.Button,{className:l.clsx("sds-button","sds-button--".concat(u?"critical":"subtle")),children:a.jsx("span",{className:"sds-button__label",children:v})})}))]}))})}));j.displayName="InputFile";exports.FileList=e=>{var r=e,{children:s,className:i,figCaption:t}=r,n=b(r,["children","className","figCaption"]);return a.jsxs("figure",g(f({className:l.clsx("sds-input-file-list",i)},n),{children:[t&&a.jsx("figcaption",{className:"sds-input-file-list__caption sds-typography-heading--paragraph",children:t}),a.jsx("ul",{className:"sds-input-file-list__list",children:s})]}))},exports.FileListItem=e=>{var l,i=e,{children:t,className:c,errorText:p,fileSize:d,loading:u=!1,progressProps:m,removeActionProps:h}=i,x=b(i,["children","className","errorText","fileSize","loading","progressProps","removeActionProps"]);let j=h&&a.jsx(s.TrashIcon,{});u?j=a.jsx(s.SpinnerIcon,{}):p&&(j=a.jsx(s.XIcon,{}));const v=d&&(e=>{const r=e=>Math.round(100*e)/100;return e<1e3?"".concat(e,"B"):e>=1e3&&e<1e6?"".concat(r(e/1e3),"KB"):"".concat(r(e/1e6),"MB")})(d);return a.jsxs("li",g(f({className:o.clsx("sds-input-file-list__item",Boolean(p)&&"sds-input-file-list__item--error","ssds-typography-body--regular",c)},x),{children:[a.jsxs("div",{className:"sds-input-file-list__item-start",children:[a.jsx("div",{className:"sds-input-file-list__item-name sds-typography-body--strong",children:t}),v&&a.jsx("div",{children:v}),p&&a.jsx(r.HelpText,{error:!0,className:"sds-input-file-list__item-error",children:p})]}),a.jsxs("div",{className:"sds-input-file-list__item-end",children:[m&&a.jsxs("div",{role:"progressbar","aria-valuenow":m.value,"aria-label":m.label,children:[m.value,"%"]}),!u&&h&&a.jsx(n.Button,g(f({variant:"transparent",size:"small",iconVariant:"only",icon:j,type:null!=(l=h.type)?l:"button"},h),{children:h.label})),u&&a.jsx("div",{className:"sds-input-file-list__item-icon",children:a.jsx(s.SpinnerIcon,{})})]})]}))},exports.InputFile=j;//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["forwardRef","useId","useState","useEffect","jsx","FormField","clsx","jsxs","DropZone","UploadSimpleIcon","Paragraph","Fragment","FileTrigger","Button","n","_a","TrashIcon","SpinnerIcon","XIcon","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { DropEvent } from \"@react-types/shared\";\nimport { Paragraph } from \"@sikt/sds-core\";\nimport { FormField } from \"@sikt/sds-form\";\nimport { UploadSimpleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, useEffect, useId, useState } from \"react\";\nimport {\n Button,\n DropZone,\n DropZoneProps,\n FileDropItem,\n FileTrigger,\n} from \"react-aria-components\";\nimport \"./input-file.pcss\";\n\nexport type FileError = \"type\" | \"size\" | \"multiple\";\n\nexport interface FileWithError extends File {\n error?: FileError[];\n}\n\nexport interface InputFileProps extends DropZoneProps {\n label: NonNullable<ReactNode>;\n \"aria-label\": string;\n errorText?: ReactNode;\n helpText?: ReactNode;\n className?: string;\n placeholder?: string;\n placeholderBridge?: string;\n triggerText?: ReactNode;\n onChange?: (newValue: (File | FileWithError)[]) => void;\n accept: string;\n multiple?: boolean;\n capture?: \"user\" | \"environment\";\n value?: File[];\n maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n (\n {\n label,\n \"aria-label\": ariaLabel,\n errorText,\n helpText,\n className,\n placeholder = \"Dra og slipp filer her,\",\n placeholderBridge = \"eller\",\n triggerText = \"Åpne filutforskeren\",\n onChange,\n accept,\n multiple = false,\n capture,\n value,\n maxFileSize,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const helpTextId = `${id}-help-text`;\n const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n const inputId = { id };\n const acceptedFileTypes = accept.split(\",\");\n\n useEffect(() => {\n if (value) {\n setFiles(value);\n }\n }, [value]);\n\n const validateFiles = (input: File[]) => {\n return input.map((file, index) => {\n const output: File | FileWithError = file;\n const errors: FileError[] = [];\n\n // TODO: accept wildcard [\"*\", \"image/*\"]\n // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n if (!acceptedFileTypes.includes(file.type)) {\n errors.push(\"type\");\n }\n\n if (maxFileSize && maxFileSize < file.size) {\n errors.push(\"size\");\n }\n\n // TODO: should first/last be without error\n // TODO: should this be accepted when file1 fails validation?\n if (!multiple && index > 0) {\n errors.push(\"multiple\");\n }\n\n if (errors.length > 0) {\n (output as FileWithError).error = errors;\n }\n\n return output;\n });\n };\n\n const handleOnChange = (input: File[]) => {\n const output = validateFiles(input);\n setFiles([...files, ...output]);\n onChange && onChange([...files, ...output]);\n };\n\n const handleOnDrop = (e: DropEvent) => {\n const handler = async () => {\n const filtered = e.items.filter((item) => item.kind === \"file\");\n return await Promise.all(\n filtered.map((item: FileDropItem) => item.getFile()),\n );\n };\n\n handler()\n .then(handleOnChange)\n .catch((err: unknown) => {\n console.error(err);\n throw err;\n });\n };\n\n const handleOnSelect = (e: FileList | null) => {\n if (!e) return;\n const input = Array.from(e);\n handleOnChange(input);\n };\n\n return (\n <FormField\n className={clsx(\n \"sds-input-file\",\n errorText && `sds-input-file--error`,\n className,\n )}\n label={label}\n errorText={errorText}\n helpText={helpText}\n htmlFor={id}\n helpTextId={helpTextId}\n >\n <DropZone\n className={clsx(\n \"sds-input-file__drop-zone\",\n Boolean(errorText) && \"sds-input-file__drop-zone--error\",\n )}\n onDrop={handleOnDrop}\n aria-label={ariaLabel}\n aria-describedby={(errorText ?? helpText) ? helpTextId : undefined}\n aria-invalid={Boolean(errorText)}\n aria-errormessage={errorText ? helpTextId : undefined}\n ref={ref}\n {...rest}\n >\n <div className=\"sds-input-file__drop-zone-icon\">\n <UploadSimpleIcon />\n </div>\n <Paragraph className=\"sds-input-file__placeholder\">\n {placeholder}\n {placeholderBridge && (\n <>\n <br />\n {placeholderBridge}\n </>\n )}\n </Paragraph>\n <FileTrigger\n {...inputId}\n onSelect={handleOnSelect}\n acceptedFileTypes={acceptedFileTypes}\n allowsMultiple={multiple}\n defaultCamera={capture}\n >\n <Button\n className={clsx(\n \"sds-button\",\n `sds-button--${errorText ? \"critical\" : \"subtle\"}`,\n )}\n >\n <span className=\"sds-button__label\">{triggerText}</span>\n </Button>\n </FileTrigger>\n </DropZone>\n </FormField>\n );\n },\n);\n\nInputFile.displayName = \"InputFile\";\n","import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport \"./file-list.pcss\";\n\nexport interface FileListProps extends HTMLAttributes<HTMLElement> {\n children: ReactNode;\n className?: string;\n figCaption?: string;\n}\n\nexport const FileList = ({\n children,\n className,\n figCaption,\n ...rest\n}: FileListProps) => {\n return (\n <figure className={clsx(\"sds-input-file-list\", className)} {...rest}>\n {figCaption && (\n <figcaption className=\"sds-input-file-list__caption sds-typography-heading--paragraph\">\n {figCaption}\n </figcaption>\n )}\n <ul className=\"sds-input-file-list__list\">{children}</ul>\n </figure>\n );\n};\n","import { Button, ButtonProps } from \"@sikt/sds-button\";\nimport { HelpText } from \"@sikt/sds-form\";\nimport { SpinnerIcon, TrashIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n children: ReactNode;\n errorText?: ReactNode;\n fileSize?: number;\n loading?: boolean;\n progressProps?: { label: string; value: number };\n removeActionProps?: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst getFileSize = (n: number) => {\n const round = (n: number) => Math.round(n * 100) / 100;\n\n if (n < 1e3) {\n return `${n}B`;\n } else if (n >= 1e3 && n < 1e6) {\n return `${round(n / 1e3)}KB`;\n } else {\n return `${round(n / 1e6)}MB`;\n }\n};\n\nexport const FileListItem = ({\n children,\n className,\n errorText,\n fileSize,\n loading = false,\n progressProps,\n removeActionProps,\n ...rest\n}: FileListItemProps) => {\n let icon = removeActionProps && <TrashIcon />;\n if (loading) {\n icon = <SpinnerIcon />;\n } else if (errorText) {\n icon = <XIcon />;\n }\n\n const size = fileSize && getFileSize(fileSize);\n\n return (\n <li\n className={clsx(\n \"sds-input-file-list__item\",\n Boolean(errorText) && \"sds-input-file-list__item--error\",\n \"ssds-typography-body--regular\",\n className,\n )}\n {...rest}\n >\n <div className=\"sds-input-file-list__item-start\">\n <div className=\"sds-input-file-list__item-name sds-typography-body--strong\">\n {children}\n </div>\n {size && <div>{size}</div>}\n {errorText && (\n <HelpText error className=\"sds-input-file-list__item-error\">\n {errorText}\n </HelpText>\n )}\n </div>\n <div className=\"sds-input-file-list__item-end\">\n {progressProps && (\n <div\n role=\"progressbar\"\n aria-valuenow={progressProps.value}\n aria-label={progressProps.label}\n >\n {progressProps.value}%\n </div>\n )}\n {!loading && removeActionProps && (\n <Button\n variant=\"transparent\"\n size=\"small\"\n iconVariant=\"only\"\n icon={icon}\n type={removeActionProps.type ?? \"button\"}\n {...removeActionProps}\n >\n {removeActionProps.label}\n </Button>\n )}\n {loading && (\n <div className=\"sds-input-file-list__item-icon\">\n <SpinnerIcon />\n </div>\n )}\n </div>\n </li>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["forwardRef","useId","useState","useEffect","accept","jsx","FormField","clsx","jsxs","DropZone","UploadSimpleIcon","Paragraph","Fragment","FileTrigger","Button","n","_a","TrashIcon","SpinnerIcon","XIcon","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { DropEvent } from \"@react-types/shared\";\nimport { Paragraph } from \"@sikt/sds-core\";\nimport { FormField } from \"@sikt/sds-form\";\nimport { UploadSimpleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, useEffect, useId, useState } from \"react\";\nimport {\n Button,\n DropZone,\n DropZoneProps,\n FileDropItem,\n FileTrigger,\n} from \"react-aria-components\";\nimport \"./input-file.pcss\";\n\nexport type FileError = \"type\" | \"size\" | \"multiple\";\n\nexport interface FileWithError extends File {\n error?: FileError[];\n}\n\nexport interface InputFileProps extends DropZoneProps {\n label: NonNullable<ReactNode>;\n \"aria-label\": string;\n errorText?: ReactNode;\n helpText?: ReactNode;\n className?: string;\n placeholder?: string;\n placeholderBridge?: string;\n triggerText?: ReactNode;\n onChange?: (newValue: (File | FileWithError)[]) => void;\n accept: string;\n multiple?: boolean;\n capture?: \"user\" | \"environment\";\n value?: File[];\n maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n (\n {\n label,\n \"aria-label\": ariaLabel,\n errorText,\n helpText,\n className,\n placeholder = \"Dra og slipp filer her,\",\n placeholderBridge = \"eller\",\n triggerText = \"Åpne filutforskeren\",\n onChange,\n accept,\n multiple = false,\n capture,\n value,\n maxFileSize,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const helpTextId = `${id}-help-text`;\n const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n const inputId = { id };\n const acceptedFileTypes = accept.split(\",\");\n\n useEffect(() => {\n if (value) {\n setFiles(value);\n }\n }, [value]);\n\n const validateFiles = (input: File[]) => {\n return input.map((file, index) => {\n const output: File | FileWithError = file;\n const errors: FileError[] = [];\n\n // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n if (\n !acceptedFileTypes.some((accept) =>\n file.type.match(\n accept.replaceAll(\"*\", \".*\").replaceAll(\"/\", \"/\\\\/\"),\n ),\n )\n ) {\n errors.push(\"type\");\n }\n\n if (maxFileSize && maxFileSize < file.size) {\n errors.push(\"size\");\n }\n\n // TODO: should this be accepted when file1 fails validation?\n if (!multiple && index > 0) {\n errors.push(\"multiple\");\n }\n\n if (errors.length > 0) {\n (output as FileWithError).error = errors;\n }\n\n return output;\n });\n };\n\n const handleOnChange = (input: File[]) => {\n const output = validateFiles(input);\n setFiles([...files, ...output]);\n onChange && onChange([...files, ...output]);\n };\n\n const handleOnDrop = (e: DropEvent) => {\n const handler = async () => {\n const filtered = e.items.filter((item) => item.kind === \"file\");\n return await Promise.all(\n filtered.map((item: FileDropItem) => item.getFile()),\n );\n };\n\n handler()\n .then(handleOnChange)\n .catch((err: unknown) => {\n console.error(err);\n throw err;\n });\n };\n\n const handleOnSelect = (e: FileList | null) => {\n if (!e) return;\n const input = Array.from(e);\n handleOnChange(input);\n };\n\n return (\n <FormField\n className={clsx(\n \"sds-input-file\",\n errorText && `sds-input-file--error`,\n className,\n )}\n label={label}\n errorText={errorText}\n helpText={helpText}\n htmlFor={id}\n helpTextId={helpTextId}\n >\n <DropZone\n className={clsx(\n \"sds-input-file__drop-zone\",\n Boolean(errorText) && \"sds-input-file__drop-zone--error\",\n )}\n onDrop={handleOnDrop}\n aria-label={ariaLabel}\n aria-describedby={(errorText ?? helpText) ? helpTextId : undefined}\n aria-invalid={Boolean(errorText)}\n aria-errormessage={errorText ? helpTextId : undefined}\n ref={ref}\n {...rest}\n >\n <div className=\"sds-input-file__drop-zone-icon\">\n <UploadSimpleIcon />\n </div>\n <Paragraph className=\"sds-input-file__placeholder\">\n {placeholder}\n {placeholderBridge && (\n <>\n <br />\n {placeholderBridge}\n </>\n )}\n </Paragraph>\n <FileTrigger\n {...inputId}\n onSelect={handleOnSelect}\n acceptedFileTypes={acceptedFileTypes}\n allowsMultiple={multiple}\n defaultCamera={capture}\n >\n <Button\n className={clsx(\n \"sds-button\",\n `sds-button--${errorText ? \"critical\" : \"subtle\"}`,\n )}\n >\n <span className=\"sds-button__label\">{triggerText}</span>\n </Button>\n </FileTrigger>\n </DropZone>\n </FormField>\n );\n },\n);\n\nInputFile.displayName = \"InputFile\";\n","import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport \"./file-list.pcss\";\n\nexport interface FileListProps extends HTMLAttributes<HTMLElement> {\n children: ReactNode;\n className?: string;\n figCaption?: string;\n}\n\nexport const FileList = ({\n children,\n className,\n figCaption,\n ...rest\n}: FileListProps) => {\n return (\n <figure className={clsx(\"sds-input-file-list\", className)} {...rest}>\n {figCaption && (\n <figcaption className=\"sds-input-file-list__caption sds-typography-heading--paragraph\">\n {figCaption}\n </figcaption>\n )}\n <ul className=\"sds-input-file-list__list\">{children}</ul>\n </figure>\n );\n};\n","import { Button, ButtonProps } from \"@sikt/sds-button\";\nimport { HelpText } from \"@sikt/sds-form\";\nimport { SpinnerIcon, TrashIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n children: ReactNode;\n errorText?: ReactNode;\n fileSize?: number;\n loading?: boolean;\n progressProps?: { label: string; value: number };\n removeActionProps?: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst getFileSize = (n: number) => {\n const round = (n: number) => Math.round(n * 100) / 100;\n\n if (n < 1e3) {\n return `${n}B`;\n } else if (n >= 1e3 && n < 1e6) {\n return `${round(n / 1e3)}KB`;\n } else {\n return `${round(n / 1e6)}MB`;\n }\n};\n\nexport const FileListItem = ({\n children,\n className,\n errorText,\n fileSize,\n loading = false,\n progressProps,\n removeActionProps,\n ...rest\n}: FileListItemProps) => {\n let icon = removeActionProps && <TrashIcon />;\n if (loading) {\n icon = <SpinnerIcon />;\n } else if (errorText) {\n icon = <XIcon />;\n }\n\n const size = fileSize && getFileSize(fileSize);\n\n return (\n <li\n className={clsx(\n \"sds-input-file-list__item\",\n Boolean(errorText) && \"sds-input-file-list__item--error\",\n \"ssds-typography-body--regular\",\n className,\n )}\n {...rest}\n >\n <div className=\"sds-input-file-list__item-start\">\n <div className=\"sds-input-file-list__item-name sds-typography-body--strong\">\n {children}\n </div>\n {size && <div>{size}</div>}\n {errorText && (\n <HelpText error className=\"sds-input-file-list__item-error\">\n {errorText}\n </HelpText>\n )}\n </div>\n <div className=\"sds-input-file-list__item-end\">\n {progressProps && (\n <div\n role=\"progressbar\"\n aria-valuenow={progressProps.value}\n aria-label={progressProps.label}\n >\n {progressProps.value}%\n </div>\n )}\n {!loading && removeActionProps && (\n <Button\n variant=\"transparent\"\n size=\"small\"\n iconVariant=\"only\"\n icon={icon}\n type={removeActionProps.type ?? \"button\"}\n {...removeActionProps}\n >\n {removeActionProps.label}\n </Button>\n )}\n {loading && (\n <div className=\"sds-input-file-list__item-icon\">\n <SpinnerIcon />\n </div>\n )}\n </div>\n </li>\n );\n};\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Paragraph as e}from"@sikt/sds-core";import{FormField as r,HelpText as l}from"@sikt/sds-form";import{UploadSimpleIcon as i,SpinnerIcon as t,TrashIcon as
|
|
1
|
+
import{Paragraph as e}from"@sikt/sds-core";import{FormField as r,HelpText as l}from"@sikt/sds-form";import{UploadSimpleIcon as i,SpinnerIcon as t,TrashIcon as a,XIcon as s}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{forwardRef as n,useId as c,useState as p,useEffect as d}from"react";import{DropZone as m,FileTrigger as u,Button as f}from"react-aria-components";import{jsx as h,jsxs as b,Fragment as g}from"react/jsx-runtime";import{Button as v}from"@sikt/sds-button";import{clsx as _}from"clsx";var y=Object.defineProperty,N=Object.defineProperties,x=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,O=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable,P=(e,r,l)=>r in e?y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[r]=l,B=(e,r)=>{for(var l in r||(r={}))O.call(r,l)&&P(e,l,r[l]);if(T)for(var l of T(r))z.call(r,l)&&P(e,l,r[l]);return e},w=(e,r)=>N(e,x(r)),j=(e,r)=>{var l={};for(var i in e)O.call(e,i)&&r.indexOf(i)<0&&(l[i]=e[i]);if(null!=e&&T)for(var i of T(e))r.indexOf(i)<0&&z.call(e,i)&&(l[i]=e[i]);return l},k=n(((l,t)=>{var a=l,{label:s,"aria-label":n,errorText:v,helpText:_,className:y,placeholder:N="Dra og slipp filer her,",placeholderBridge:x="eller",triggerText:T="Åpne filutforskeren",onChange:O,accept:z,multiple:P=!1,capture:k,value:F,maxFileSize:S}=a,A=j(a,["label","aria-label","errorText","helpText","className","placeholder","placeholderBridge","triggerText","onChange","accept","multiple","capture","value","maxFileSize"]);const C=c(),D="".concat(C,"-help-text"),[I,M]=p(null!=F?F:[]),E={id:C},K=z.split(",");d((()=>{F&&M(F)}),[F]);const V=e=>{const r=(e=>e.map(((e,r)=>{const l=e,i=[];return K.some((r=>e.type.match(r.replaceAll("*",".*").replaceAll("/","/\\/"))))||i.push("type"),S&&S<e.size&&i.push("size"),!P&&r>0&&i.push("multiple"),i.length>0&&(l.error=i),l})))(e);M([...I,...r]),O&&O([...I,...r])};return h(r,{className:o("sds-input-file",v&&"sds-input-file--error",y),label:s,errorText:v,helpText:_,htmlFor:C,helpTextId:D,children:b(m,w(B({className:o("sds-input-file__drop-zone",Boolean(v)&&"sds-input-file__drop-zone--error"),onDrop:e=>{(async()=>{const r=e.items.filter((e=>"file"===e.kind));return await Promise.all(r.map((e=>e.getFile())))})().then(V).catch((e=>{throw console.error(e),e}))},"aria-label":n,"aria-describedby":(null!=v?v:_)?D:void 0,"aria-invalid":Boolean(v),"aria-errormessage":v?D:void 0,ref:t},A),{children:[h("div",{className:"sds-input-file__drop-zone-icon",children:h(i,{})}),b(e,{className:"sds-input-file__placeholder",children:[N,x&&b(g,{children:[h("br",{}),x]})]}),h(u,w(B({},E),{onSelect:e=>{if(!e)return;const r=Array.from(e);V(r)},acceptedFileTypes:K,allowsMultiple:P,defaultCamera:k,children:h(f,{className:o("sds-button","sds-button--".concat(v?"critical":"subtle")),children:h("span",{className:"sds-button__label",children:T})})}))]}))})}));k.displayName="InputFile";var F=e=>{var r=e,{children:l,className:i,figCaption:t}=r,a=j(r,["children","className","figCaption"]);return b("figure",w(B({className:o("sds-input-file-list",i)},a),{children:[t&&h("figcaption",{className:"sds-input-file-list__caption sds-typography-heading--paragraph",children:t}),h("ul",{className:"sds-input-file-list__list",children:l})]}))},S=e=>{var r,i=e,{children:o,className:n,errorText:c,fileSize:p,loading:d=!1,progressProps:m,removeActionProps:u}=i,f=j(i,["children","className","errorText","fileSize","loading","progressProps","removeActionProps"]);let g=u&&h(a,{});d?g=h(t,{}):c&&(g=h(s,{}));const y=p&&(e=>{const r=e=>Math.round(100*e)/100;return e<1e3?"".concat(e,"B"):e>=1e3&&e<1e6?"".concat(r(e/1e3),"KB"):"".concat(r(e/1e6),"MB")})(p);return b("li",w(B({className:_("sds-input-file-list__item",Boolean(c)&&"sds-input-file-list__item--error","ssds-typography-body--regular",n)},f),{children:[b("div",{className:"sds-input-file-list__item-start",children:[h("div",{className:"sds-input-file-list__item-name sds-typography-body--strong",children:o}),y&&h("div",{children:y}),c&&h(l,{error:!0,className:"sds-input-file-list__item-error",children:c})]}),b("div",{className:"sds-input-file-list__item-end",children:[m&&b("div",{role:"progressbar","aria-valuenow":m.value,"aria-label":m.label,children:[m.value,"%"]}),!d&&u&&h(v,w(B({variant:"transparent",size:"small",iconVariant:"only",icon:g,type:null!=(r=u.type)?r:"button"},u),{children:u.label})),d&&h("div",{className:"sds-input-file-list__item-icon",children:h(t,{})})]})]}))};export{F as FileList,S as FileListItem,k as InputFile};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["jsxs","clsx","jsx","n","_a","Button"],"mappings":"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","file":"index.mjs","sourcesContent":["import { DropEvent } from \"@react-types/shared\";\nimport { Paragraph } from \"@sikt/sds-core\";\nimport { FormField } from \"@sikt/sds-form\";\nimport { UploadSimpleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, useEffect, useId, useState } from \"react\";\nimport {\n Button,\n DropZone,\n DropZoneProps,\n FileDropItem,\n FileTrigger,\n} from \"react-aria-components\";\nimport \"./input-file.pcss\";\n\nexport type FileError = \"type\" | \"size\" | \"multiple\";\n\nexport interface FileWithError extends File {\n error?: FileError[];\n}\n\nexport interface InputFileProps extends DropZoneProps {\n label: NonNullable<ReactNode>;\n \"aria-label\": string;\n errorText?: ReactNode;\n helpText?: ReactNode;\n className?: string;\n placeholder?: string;\n placeholderBridge?: string;\n triggerText?: ReactNode;\n onChange?: (newValue: (File | FileWithError)[]) => void;\n accept: string;\n multiple?: boolean;\n capture?: \"user\" | \"environment\";\n value?: File[];\n maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n (\n {\n label,\n \"aria-label\": ariaLabel,\n errorText,\n helpText,\n className,\n placeholder = \"Dra og slipp filer her,\",\n placeholderBridge = \"eller\",\n triggerText = \"Åpne filutforskeren\",\n onChange,\n accept,\n multiple = false,\n capture,\n value,\n maxFileSize,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const helpTextId = `${id}-help-text`;\n const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n const inputId = { id };\n const acceptedFileTypes = accept.split(\",\");\n\n useEffect(() => {\n if (value) {\n setFiles(value);\n }\n }, [value]);\n\n const validateFiles = (input: File[]) => {\n return input.map((file, index) => {\n const output: File | FileWithError = file;\n const errors: FileError[] = [];\n\n // TODO: accept wildcard [\"*\", \"image/*\"]\n // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n if (!acceptedFileTypes.includes(file.type)) {\n errors.push(\"type\");\n }\n\n if (maxFileSize && maxFileSize < file.size) {\n errors.push(\"size\");\n }\n\n // TODO: should first/last be without error\n // TODO: should this be accepted when file1 fails validation?\n if (!multiple && index > 0) {\n errors.push(\"multiple\");\n }\n\n if (errors.length > 0) {\n (output as FileWithError).error = errors;\n }\n\n return output;\n });\n };\n\n const handleOnChange = (input: File[]) => {\n const output = validateFiles(input);\n setFiles([...files, ...output]);\n onChange && onChange([...files, ...output]);\n };\n\n const handleOnDrop = (e: DropEvent) => {\n const handler = async () => {\n const filtered = e.items.filter((item) => item.kind === \"file\");\n return await Promise.all(\n filtered.map((item: FileDropItem) => item.getFile()),\n );\n };\n\n handler()\n .then(handleOnChange)\n .catch((err: unknown) => {\n console.error(err);\n throw err;\n });\n };\n\n const handleOnSelect = (e: FileList | null) => {\n if (!e) return;\n const input = Array.from(e);\n handleOnChange(input);\n };\n\n return (\n <FormField\n className={clsx(\n \"sds-input-file\",\n errorText && `sds-input-file--error`,\n className,\n )}\n label={label}\n errorText={errorText}\n helpText={helpText}\n htmlFor={id}\n helpTextId={helpTextId}\n >\n <DropZone\n className={clsx(\n \"sds-input-file__drop-zone\",\n Boolean(errorText) && \"sds-input-file__drop-zone--error\",\n )}\n onDrop={handleOnDrop}\n aria-label={ariaLabel}\n aria-describedby={(errorText ?? helpText) ? helpTextId : undefined}\n aria-invalid={Boolean(errorText)}\n aria-errormessage={errorText ? helpTextId : undefined}\n ref={ref}\n {...rest}\n >\n <div className=\"sds-input-file__drop-zone-icon\">\n <UploadSimpleIcon />\n </div>\n <Paragraph className=\"sds-input-file__placeholder\">\n {placeholder}\n {placeholderBridge && (\n <>\n <br />\n {placeholderBridge}\n </>\n )}\n </Paragraph>\n <FileTrigger\n {...inputId}\n onSelect={handleOnSelect}\n acceptedFileTypes={acceptedFileTypes}\n allowsMultiple={multiple}\n defaultCamera={capture}\n >\n <Button\n className={clsx(\n \"sds-button\",\n `sds-button--${errorText ? \"critical\" : \"subtle\"}`,\n )}\n >\n <span className=\"sds-button__label\">{triggerText}</span>\n </Button>\n </FileTrigger>\n </DropZone>\n </FormField>\n );\n },\n);\n\nInputFile.displayName = \"InputFile\";\n","import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport \"./file-list.pcss\";\n\nexport interface FileListProps extends HTMLAttributes<HTMLElement> {\n children: ReactNode;\n className?: string;\n figCaption?: string;\n}\n\nexport const FileList = ({\n children,\n className,\n figCaption,\n ...rest\n}: FileListProps) => {\n return (\n <figure className={clsx(\"sds-input-file-list\", className)} {...rest}>\n {figCaption && (\n <figcaption className=\"sds-input-file-list__caption sds-typography-heading--paragraph\">\n {figCaption}\n </figcaption>\n )}\n <ul className=\"sds-input-file-list__list\">{children}</ul>\n </figure>\n );\n};\n","import { Button, ButtonProps } from \"@sikt/sds-button\";\nimport { HelpText } from \"@sikt/sds-form\";\nimport { SpinnerIcon, TrashIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n children: ReactNode;\n errorText?: ReactNode;\n fileSize?: number;\n loading?: boolean;\n progressProps?: { label: string; value: number };\n removeActionProps?: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst getFileSize = (n: number) => {\n const round = (n: number) => Math.round(n * 100) / 100;\n\n if (n < 1e3) {\n return `${n}B`;\n } else if (n >= 1e3 && n < 1e6) {\n return `${round(n / 1e3)}KB`;\n } else {\n return `${round(n / 1e6)}MB`;\n }\n};\n\nexport const FileListItem = ({\n children,\n className,\n errorText,\n fileSize,\n loading = false,\n progressProps,\n removeActionProps,\n ...rest\n}: FileListItemProps) => {\n let icon = removeActionProps && <TrashIcon />;\n if (loading) {\n icon = <SpinnerIcon />;\n } else if (errorText) {\n icon = <XIcon />;\n }\n\n const size = fileSize && getFileSize(fileSize);\n\n return (\n <li\n className={clsx(\n \"sds-input-file-list__item\",\n Boolean(errorText) && \"sds-input-file-list__item--error\",\n \"ssds-typography-body--regular\",\n className,\n )}\n {...rest}\n >\n <div className=\"sds-input-file-list__item-start\">\n <div className=\"sds-input-file-list__item-name sds-typography-body--strong\">\n {children}\n </div>\n {size && <div>{size}</div>}\n {errorText && (\n <HelpText error className=\"sds-input-file-list__item-error\">\n {errorText}\n </HelpText>\n )}\n </div>\n <div className=\"sds-input-file-list__item-end\">\n {progressProps && (\n <div\n role=\"progressbar\"\n aria-valuenow={progressProps.value}\n aria-label={progressProps.label}\n >\n {progressProps.value}%\n </div>\n )}\n {!loading && removeActionProps && (\n <Button\n variant=\"transparent\"\n size=\"small\"\n iconVariant=\"only\"\n icon={icon}\n type={removeActionProps.type ?? \"button\"}\n {...removeActionProps}\n >\n {removeActionProps.label}\n </Button>\n )}\n {loading && (\n <div className=\"sds-input-file-list__item-icon\">\n <SpinnerIcon />\n </div>\n )}\n </div>\n </li>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/InputFile.tsx","../src/FileList.tsx","../src/FileListItem.tsx"],"names":["accept","jsxs","clsx","jsx","n","_a","Button"],"mappings":"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","file":"index.mjs","sourcesContent":["import { DropEvent } from \"@react-types/shared\";\nimport { Paragraph } from \"@sikt/sds-core\";\nimport { FormField } from \"@sikt/sds-form\";\nimport { UploadSimpleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { forwardRef, ReactNode, useEffect, useId, useState } from \"react\";\nimport {\n Button,\n DropZone,\n DropZoneProps,\n FileDropItem,\n FileTrigger,\n} from \"react-aria-components\";\nimport \"./input-file.pcss\";\n\nexport type FileError = \"type\" | \"size\" | \"multiple\";\n\nexport interface FileWithError extends File {\n error?: FileError[];\n}\n\nexport interface InputFileProps extends DropZoneProps {\n label: NonNullable<ReactNode>;\n \"aria-label\": string;\n errorText?: ReactNode;\n helpText?: ReactNode;\n className?: string;\n placeholder?: string;\n placeholderBridge?: string;\n triggerText?: ReactNode;\n onChange?: (newValue: (File | FileWithError)[]) => void;\n accept: string;\n multiple?: boolean;\n capture?: \"user\" | \"environment\";\n value?: File[];\n maxFileSize?: number;\n}\n\n// INFO: https://github.com/adobe/react-spectrum/issues/5394\n\nexport const InputFile = forwardRef<HTMLDivElement, InputFileProps>(\n (\n {\n label,\n \"aria-label\": ariaLabel,\n errorText,\n helpText,\n className,\n placeholder = \"Dra og slipp filer her,\",\n placeholderBridge = \"eller\",\n triggerText = \"Åpne filutforskeren\",\n onChange,\n accept,\n multiple = false,\n capture,\n value,\n maxFileSize,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const helpTextId = `${id}-help-text`;\n const [files, setFiles] = useState<(File | FileWithError)[]>(value ?? []);\n const inputId = { id };\n const acceptedFileTypes = accept.split(\",\");\n\n useEffect(() => {\n if (value) {\n setFiles(value);\n }\n }, [value]);\n\n const validateFiles = (input: File[]) => {\n return input.map((file, index) => {\n const output: File | FileWithError = file;\n const errors: FileError[] = [];\n\n // DropZone getDropOperation={(types) => types.has('image/png') ? 'copy' : 'cancel'} doesn't handle this\n if (\n !acceptedFileTypes.some((accept) =>\n file.type.match(\n accept.replaceAll(\"*\", \".*\").replaceAll(\"/\", \"/\\\\/\"),\n ),\n )\n ) {\n errors.push(\"type\");\n }\n\n if (maxFileSize && maxFileSize < file.size) {\n errors.push(\"size\");\n }\n\n // TODO: should this be accepted when file1 fails validation?\n if (!multiple && index > 0) {\n errors.push(\"multiple\");\n }\n\n if (errors.length > 0) {\n (output as FileWithError).error = errors;\n }\n\n return output;\n });\n };\n\n const handleOnChange = (input: File[]) => {\n const output = validateFiles(input);\n setFiles([...files, ...output]);\n onChange && onChange([...files, ...output]);\n };\n\n const handleOnDrop = (e: DropEvent) => {\n const handler = async () => {\n const filtered = e.items.filter((item) => item.kind === \"file\");\n return await Promise.all(\n filtered.map((item: FileDropItem) => item.getFile()),\n );\n };\n\n handler()\n .then(handleOnChange)\n .catch((err: unknown) => {\n console.error(err);\n throw err;\n });\n };\n\n const handleOnSelect = (e: FileList | null) => {\n if (!e) return;\n const input = Array.from(e);\n handleOnChange(input);\n };\n\n return (\n <FormField\n className={clsx(\n \"sds-input-file\",\n errorText && `sds-input-file--error`,\n className,\n )}\n label={label}\n errorText={errorText}\n helpText={helpText}\n htmlFor={id}\n helpTextId={helpTextId}\n >\n <DropZone\n className={clsx(\n \"sds-input-file__drop-zone\",\n Boolean(errorText) && \"sds-input-file__drop-zone--error\",\n )}\n onDrop={handleOnDrop}\n aria-label={ariaLabel}\n aria-describedby={(errorText ?? helpText) ? helpTextId : undefined}\n aria-invalid={Boolean(errorText)}\n aria-errormessage={errorText ? helpTextId : undefined}\n ref={ref}\n {...rest}\n >\n <div className=\"sds-input-file__drop-zone-icon\">\n <UploadSimpleIcon />\n </div>\n <Paragraph className=\"sds-input-file__placeholder\">\n {placeholder}\n {placeholderBridge && (\n <>\n <br />\n {placeholderBridge}\n </>\n )}\n </Paragraph>\n <FileTrigger\n {...inputId}\n onSelect={handleOnSelect}\n acceptedFileTypes={acceptedFileTypes}\n allowsMultiple={multiple}\n defaultCamera={capture}\n >\n <Button\n className={clsx(\n \"sds-button\",\n `sds-button--${errorText ? \"critical\" : \"subtle\"}`,\n )}\n >\n <span className=\"sds-button__label\">{triggerText}</span>\n </Button>\n </FileTrigger>\n </DropZone>\n </FormField>\n );\n },\n);\n\nInputFile.displayName = \"InputFile\";\n","import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport \"./file-list.pcss\";\n\nexport interface FileListProps extends HTMLAttributes<HTMLElement> {\n children: ReactNode;\n className?: string;\n figCaption?: string;\n}\n\nexport const FileList = ({\n children,\n className,\n figCaption,\n ...rest\n}: FileListProps) => {\n return (\n <figure className={clsx(\"sds-input-file-list\", className)} {...rest}>\n {figCaption && (\n <figcaption className=\"sds-input-file-list__caption sds-typography-heading--paragraph\">\n {figCaption}\n </figcaption>\n )}\n <ul className=\"sds-input-file-list__list\">{children}</ul>\n </figure>\n );\n};\n","import { Button, ButtonProps } from \"@sikt/sds-button\";\nimport { HelpText } from \"@sikt/sds-form\";\nimport { SpinnerIcon, TrashIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx\";\nimport { LiHTMLAttributes, ReactNode } from \"react\";\n\nexport interface FileListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n children: ReactNode;\n errorText?: ReactNode;\n fileSize?: number;\n loading?: boolean;\n progressProps?: { label: string; value: number };\n removeActionProps?: Pick<ButtonProps, \"onClick\" | \"type\"> & { label: string };\n}\n\nconst getFileSize = (n: number) => {\n const round = (n: number) => Math.round(n * 100) / 100;\n\n if (n < 1e3) {\n return `${n}B`;\n } else if (n >= 1e3 && n < 1e6) {\n return `${round(n / 1e3)}KB`;\n } else {\n return `${round(n / 1e6)}MB`;\n }\n};\n\nexport const FileListItem = ({\n children,\n className,\n errorText,\n fileSize,\n loading = false,\n progressProps,\n removeActionProps,\n ...rest\n}: FileListItemProps) => {\n let icon = removeActionProps && <TrashIcon />;\n if (loading) {\n icon = <SpinnerIcon />;\n } else if (errorText) {\n icon = <XIcon />;\n }\n\n const size = fileSize && getFileSize(fileSize);\n\n return (\n <li\n className={clsx(\n \"sds-input-file-list__item\",\n Boolean(errorText) && \"sds-input-file-list__item--error\",\n \"ssds-typography-body--regular\",\n className,\n )}\n {...rest}\n >\n <div className=\"sds-input-file-list__item-start\">\n <div className=\"sds-input-file-list__item-name sds-typography-body--strong\">\n {children}\n </div>\n {size && <div>{size}</div>}\n {errorText && (\n <HelpText error className=\"sds-input-file-list__item-error\">\n {errorText}\n </HelpText>\n )}\n </div>\n <div className=\"sds-input-file-list__item-end\">\n {progressProps && (\n <div\n role=\"progressbar\"\n aria-valuenow={progressProps.value}\n aria-label={progressProps.label}\n >\n {progressProps.value}%\n </div>\n )}\n {!loading && removeActionProps && (\n <Button\n variant=\"transparent\"\n size=\"small\"\n iconVariant=\"only\"\n icon={icon}\n type={removeActionProps.type ?? \"button\"}\n {...removeActionProps}\n >\n {removeActionProps.label}\n </Button>\n )}\n {loading && (\n <div className=\"sds-input-file-list__item-icon\">\n <SpinnerIcon />\n </div>\n )}\n </div>\n </li>\n );\n};\n"]}
|