@fremtind/jokul 0.27.5 → 0.28.0
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/build/build-stats.html +1 -1
- package/build/cjs/components/file-input/File.cjs +2 -0
- package/build/cjs/components/file-input/File.cjs.map +1 -0
- package/build/cjs/components/file-input/File.d.cts +15 -0
- package/build/cjs/components/file-input/FileInput.cjs +2 -0
- package/build/cjs/components/file-input/FileInput.cjs.map +1 -0
- package/build/cjs/components/file-input/FileInput.d.cts +26 -0
- package/build/cjs/components/file-input/index.cjs +2 -0
- package/build/cjs/components/file-input/index.cjs.map +1 -0
- package/build/cjs/components/file-input/index.d.cts +4 -0
- package/build/cjs/components/file-input/internal/Dropzone.cjs +2 -0
- package/build/cjs/components/file-input/internal/Dropzone.cjs.map +1 -0
- package/build/cjs/components/file-input/internal/Dropzone.d.cts +6 -0
- package/build/cjs/components/file-input/internal/Input.cjs +2 -0
- package/build/cjs/components/file-input/internal/Input.cjs.map +1 -0
- package/build/cjs/components/file-input/internal/Input.d.cts +8 -0
- package/build/cjs/components/file-input/internal/Thumbnail.cjs +2 -0
- package/build/cjs/components/file-input/internal/Thumbnail.cjs.map +1 -0
- package/build/cjs/components/file-input/internal/Thumbnail.d.cts +11 -0
- package/build/cjs/components/file-input/internal/fileInputContext.cjs +2 -0
- package/build/cjs/components/file-input/internal/fileInputContext.cjs.map +1 -0
- package/build/cjs/components/file-input/internal/fileInputContext.d.cts +15 -0
- package/build/cjs/components/file-input/internal/validateFile.cjs +2 -0
- package/build/cjs/components/file-input/internal/validateFile.cjs.map +1 -0
- package/build/cjs/components/file-input/internal/validateFile.d.cts +2 -0
- package/build/cjs/components/file-input/types.cjs +2 -0
- package/build/cjs/components/file-input/types.cjs.map +1 -0
- package/build/cjs/components/file-input/types.d.cts +11 -0
- package/build/cjs/components/file-input/utils.cjs +2 -0
- package/build/cjs/components/file-input/utils.cjs.map +1 -0
- package/build/cjs/components/file-input/utils.d.cts +11 -0
- package/build/cjs/components/loader/skeletons/SkeletonInput.cjs.map +1 -1
- package/build/cjs/components/loader/skeletons/SkeletonInput.d.cts +1 -1
- package/build/es/components/file-input/File.d.ts +15 -0
- package/build/es/components/file-input/File.js +2 -0
- package/build/es/components/file-input/File.js.map +1 -0
- package/build/es/components/file-input/FileInput.d.ts +26 -0
- package/build/es/components/file-input/FileInput.js +2 -0
- package/build/es/components/file-input/FileInput.js.map +1 -0
- package/build/es/components/file-input/index.d.ts +4 -0
- package/build/es/components/file-input/index.js +2 -0
- package/build/es/components/file-input/index.js.map +1 -0
- package/build/es/components/file-input/internal/Dropzone.d.ts +6 -0
- package/build/es/components/file-input/internal/Dropzone.js +2 -0
- package/build/es/components/file-input/internal/Dropzone.js.map +1 -0
- package/build/es/components/file-input/internal/Input.d.ts +8 -0
- package/build/es/components/file-input/internal/Input.js +2 -0
- package/build/es/components/file-input/internal/Input.js.map +1 -0
- package/build/es/components/file-input/internal/Thumbnail.d.ts +11 -0
- package/build/es/components/file-input/internal/Thumbnail.js +2 -0
- package/build/es/components/file-input/internal/Thumbnail.js.map +1 -0
- package/build/es/components/file-input/internal/fileInputContext.d.ts +15 -0
- package/build/es/components/file-input/internal/fileInputContext.js +2 -0
- package/build/es/components/file-input/internal/fileInputContext.js.map +1 -0
- package/build/es/components/file-input/internal/validateFile.d.ts +2 -0
- package/build/es/components/file-input/internal/validateFile.js +2 -0
- package/build/es/components/file-input/internal/validateFile.js.map +1 -0
- package/build/es/components/file-input/types.d.ts +11 -0
- package/build/es/components/file-input/types.js +2 -0
- package/build/es/components/file-input/types.js.map +1 -0
- package/build/es/components/file-input/utils.d.ts +11 -0
- package/build/es/components/file-input/utils.js +2 -0
- package/build/es/components/file-input/utils.js.map +1 -0
- package/build/es/components/loader/skeletons/SkeletonInput.d.ts +1 -1
- package/build/es/components/loader/skeletons/SkeletonInput.js.map +1 -1
- package/package.json +12 -2
- package/styles/components/button/button.css +2 -2
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/checkbox/checkbox.css +4 -4
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/_file.scss +172 -0
- package/styles/components/file-input/_index.scss +1 -0
- package/styles/components/file-input/file-input.css +290 -0
- package/styles/components/file-input/file-input.min.css +1 -0
- package/styles/components/file-input/file-input.scss +119 -0
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +5 -5
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +2 -2
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +2 -2
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-panel/radio-panel.css +2 -2
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/styles.css +35 -35
- package/styles/styles.min.css +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("classnames");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs");const c=require("../icon/icons/SuccessIcon.cjs");require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs");const n=require("../icon/icons/TrashCanIcon.cjs");require("../icon/icons/PenIcon.cjs");const o=require("../icon-button/IconButton.cjs"),r=require("../input-group/SupportLabel.cjs"),s=require("../../hooks/useId/useId.cjs"),l=require("../../utilities/formatters/bytes/formatBytes.cjs"),t=require("./internal/fileInputContext.cjs"),u=require("./internal/Thumbnail.cjs");exports.File=a=>{const{children:j,fileName:q,fileType:I,fileSize:p,path:d,file:h,supportLabel:m,supportLabelType:f,state:b,onRemove:x}=a,k=s.useId("jkl-file-preview"),_=k+"-support",C=t.useFileInputContext(),w=d?"a":"div",v="error"===f||"warning"===f,g="success"===f,y=e.jsxs("div",{id:k,className:"jkl-file",children:[e.jsxs(w,{className:i("jkl-file__content",{"jkl-file__content--error":"error"===f,"jkl-file__content--warning":"warning"===f}),href:d,target:d?"_blank":void 0,children:[e.jsx(u.Thumbnail,{fileName:q,fileType:I,file:h,path:d,state:b,children:j}),e.jsxs("div",{children:[e.jsx("p",{className:"jkl-file__name",children:q}),e.jsxs("p",{className:"jkl-file__description",children:[e.jsx("span",{children:l.formatBytes(p)}),v||g?g?e.jsx(c.SuccessIcon,{variant:"small","aria-label":"Filen ble lastet opp uten feil"}):null:e.jsx(r.SupportLabel,{className:"jkl-file__support-label jkl-body",id:_,label:m,labelType:f})]}),m&&v&&e.jsx(r.SupportLabel,{className:"jkl-file__support-label",id:_,label:m,labelType:f})]})]}),x&&e.jsx(o.IconButton,{className:"jkl-file__delete",onClick:x,title:`Fjern ${q}`,children:e.jsx(n.TrashCanIcon,{})})]});return C?e.jsx("li",{children:y}):y};
|
|
2
|
+
//# sourceMappingURL=File.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"File.cjs","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { FC, MouseEvent } from \"react\";\nimport { TrashCanIcon, SuccessIcon } from \"../../components/icon/index.js\";\nimport { IconButton } from \"../../components/icon-button/IconButton.js\";\nimport { SupportLabel } from \"../../components/input-group/SupportLabel.js\";\nimport { type WithOptionalChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { formatBytes } from \"../../utilities/formatters/bytes/formatBytes.js\";\nimport { useFileInputContext } from \"./internal/fileInputContext.js\";\nimport { Thumbnail } from \"./internal/Thumbnail.js\";\nimport { FileInputFileState } from \"./types.js\";\n\nexport interface FileProps extends WithOptionalChildren {\n fileName: string;\n fileType: string;\n fileSize: number;\n path?: string;\n file?: File;\n supportLabel?: string;\n supportLabelType?: \"help\" | \"error\" | \"warning\" | \"success\";\n state?: FileInputFileState;\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const File: FC<FileProps> = (props) => {\n const {\n children,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n supportLabel,\n supportLabelType,\n state,\n onRemove,\n } = props;\n\n const id = useId(\"jkl-file-preview\");\n const supportId = id + \"-support\";\n\n const context = useFileInputContext();\n\n const Component = path ? \"a\" : \"div\";\n\n const hasErrorOrWarning =\n supportLabelType === \"error\" || supportLabelType === \"warning\";\n const hasSuccess = supportLabelType === \"success\";\n\n const renderFeedbackElement = () => {\n if (!hasErrorOrWarning && !hasSuccess) {\n return (\n <SupportLabel\n className=\"jkl-file__support-label jkl-body\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n );\n }\n\n if (hasSuccess)\n return (\n <SuccessIcon\n variant=\"small\"\n aria-label=\"Filen ble lastet opp uten feil\"\n />\n );\n\n return null;\n };\n\n const fileComponent = (\n <div id={id} className=\"jkl-file\">\n <Component\n className={cn(\"jkl-file__content\", {\n \"jkl-file__content--error\": supportLabelType === \"error\",\n \"jkl-file__content--warning\":\n supportLabelType === \"warning\",\n })}\n href={path}\n target={path ? \"_blank\" : undefined}\n >\n <Thumbnail\n fileName={fileName}\n fileType={fileType}\n file={file}\n path={path}\n state={state}\n >\n {children}\n </Thumbnail>\n <div>\n <p className=\"jkl-file__name\">{fileName}</p>\n <p className=\"jkl-file__description\">\n <span>{formatBytes(fileSize)}</span>\n {renderFeedbackElement()}\n </p>\n {supportLabel && hasErrorOrWarning && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n )}\n </div>\n </Component>\n {onRemove && (\n <IconButton\n className=\"jkl-file__delete\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n >\n <TrashCanIcon />\n </IconButton>\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["props","children","fileName","fileType","fileSize","path","file","supportLabel","supportLabelType","state","onRemove","id","useId","supportId","context","useFileInputContext","Component","hasErrorOrWarning","hasSuccess","fileComponent","jsxs","className","cn","href","target","jsx","Thumbnail","formatBytes","SuccessIcon","variant","SupportLabel","label","labelType","IconButton","onClick","title","TrashCanIcon"],"mappings":"i5DAwBoCA,IAC1B,MACFC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,MAAAA,EACAC,SAAAA,GACAV,EAEEW,EAAKC,QAAM,oBACXC,EAAYF,EAAK,WAEjBG,EAAUC,EAAAA,sBAEVC,EAAYX,EAAO,IAAM,MAEzBY,EACmB,UAArBT,GAAqD,YAArBA,EAC9BU,EAAkC,YAArBV,EAyBbW,EACFC,EAAAA,KAAC,MAAI,CAAAT,GAAAA,EAAQU,UAAU,WACnBpB,SAAA,CAAAmB,EAAAA,KAACJ,EAAA,CACGK,UAAWC,EAAG,oBAAqB,CAC/B,2BAAiD,UAArBd,EAC5B,6BACyB,YAArBA,IAERe,KAAMlB,EACNmB,OAAQnB,EAAO,cAAW,EAE1BJ,SAAA,CAAAwB,EAAAA,IAACC,EAAAA,UAAA,CACGxB,SAAAA,EACAC,SAAAA,EACAG,KAAAA,EACAD,KAAAA,EACAI,MAAAA,EAECR,SAAAA,WAEJ,MACG,CAAAA,SAAA,CAACwB,EAAAA,IAAA,IAAA,CAAEJ,UAAU,iBAAkBpB,SAASC,IACxCkB,EAAAA,KAAC,IAAE,CAAAC,UAAU,wBACTpB,SAAA,CAACwB,EAAAA,IAAA,OAAA,CAAMxB,SAAY0B,EAAAA,YAAAvB,KA7C9Ba,GAAsBC,EAWvBA,EAEIO,EAAAA,IAACG,EAAAA,YAAA,CACGC,QAAQ,QACR,aAAW,mCAIhB,KAjBCJ,EAAAA,IAACK,EAAAA,aAAA,CACGT,UAAU,mCACVV,GAAIE,EACJkB,MAAOxB,EACPyB,UAAWxB,OA0CVD,GAAgBU,GACbQ,EAAAA,IAACK,EAAAA,aAAA,CACGT,UAAU,0BACVV,GAAIE,EACJkB,MAAOxB,EACPyB,UAAWxB,UAK1BE,GACGe,EAAAA,IAACQ,EAAAA,WAAA,CACGZ,UAAU,mBACVa,QAASxB,EACTyB,MAAO,SAASjC,IAEhBD,eAACmC,EAAaA,aAAA,SAM9B,OAAOtB,EAAUW,EAAAA,IAAC,KAAI,CAAAxB,SAAAkB,IAAsBA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FC, MouseEvent } from 'react';
|
|
2
|
+
import { WithOptionalChildren } from '../../core/types.cjs';
|
|
3
|
+
import { FileInputFileState } from './types.cjs';
|
|
4
|
+
export interface FileProps extends WithOptionalChildren {
|
|
5
|
+
fileName: string;
|
|
6
|
+
fileType: string;
|
|
7
|
+
fileSize: number;
|
|
8
|
+
path?: string;
|
|
9
|
+
file?: File;
|
|
10
|
+
supportLabel?: string;
|
|
11
|
+
supportLabelType?: "help" | "error" | "warning" | "success";
|
|
12
|
+
state?: FileInputFileState;
|
|
13
|
+
onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
14
|
+
}
|
|
15
|
+
export declare const File: FC<FileProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("classnames"),i=require("react"),t=require("../input-group/FieldGroup.cjs"),n=require("./internal/Dropzone.cjs"),s=require("./internal/fileInputContext.cjs"),r=require("./internal/Input.cjs"),a=i.forwardRef(((i,a)=>{const{accept:c,className:u,children:o,id:p,value:d,density:j,multiple:f=!0,maxSizeBytes:x,onChange:m,variant:h,...g}=i,y=d.length>0;return"small"===h?e.jsx(s.FileInputContextProvider,{context:{accept:c,onChange:m,maxSizeBytes:x,files:d},children:e.jsxs(t.FieldGroup,{className:l("jkl-file-input","jkl-file-input--small",u,{"jkl-file-input--has-files":y}),"data-layout-density":j||"compact",...g,children:[e.jsx(n.Dropzone,{children:e.jsx("div",{className:"jkl-file-input__call-to-action",children:e.jsx(r.Input,{id:p,label:"Legg til fil",multiple:f,ref:a})})}),d.length>0&&e.jsx("ul",{className:"jkl-file-input__files",children:o})]})}):e.jsx(s.FileInputContextProvider,{context:{accept:c,onChange:m,maxSizeBytes:x,files:d},children:e.jsx(t.FieldGroup,{className:l("jkl-file-input",u,{"jkl-file-input--has-files":y}),"data-layout-density":j,...g,children:e.jsxs(n.Dropzone,{children:[d.length>0&&e.jsx("ul",{className:"jkl-file-input__files",children:o}),e.jsx("div",{className:"jkl-file-input__call-to-action",children:e.jsx(r.Input,{id:p,label:f&&y?"Legg til flere filer":"Legg til fil",multiple:f,ref:a})})]})})})}));a.displayName="FileInput",exports.FileInput=a;
|
|
2
|
+
//# sourceMappingURL=FileInput.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileInput.cjs","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { forwardRef } from \"react\";\nimport {\n FieldGroup,\n type FieldGroupProps,\n} from \"../../components/input-group/FieldGroup.js\";\nimport { type Density } from \"../../core/types.js\";\nimport { Dropzone } from \"./internal/Dropzone.js\";\nimport { FileInputContextProvider } from \"./internal/fileInputContext.js\";\nimport { Input } from \"./internal/Input.js\";\nimport { FileInputFile } from \"./types.js\";\n\nexport interface FileInputProps extends Omit<FieldGroupProps, \"onChange\"> {\n className?: string;\n id?: string;\n density?: Density;\n /**\n * En string som begrenser hvilke filtyper som kan velges.\n *\n * Flere filtyper kan defineres som en kommaseparert liste.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept\n */\n accept?: \"image/*\" | \".pdf\" | \"image/*,.pdf\" | HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n /**\n * @default true\n */\n multiple?: boolean;\n value: FileInputFile[];\n variant?: \"flexible\" | \"small\";\n onChange: (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const {\n accept,\n className,\n children,\n id,\n value,\n density,\n multiple = true,\n maxSizeBytes,\n onChange,\n variant,\n ...rest\n } = props;\n\n const hasFiles = value.length > 0;\n\n if (variant === \"small\") {\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={cn(\n \"jkl-file-input\",\n \"jkl-file-input--small\",\n className,\n {\n \"jkl-file-input--has-files\": hasFiles,\n },\n )}\n data-layout-density={density ? density : \"compact\"}\n {...rest}\n >\n <Dropzone>\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label=\"Legg til fil\"\n multiple={multiple}\n ref={ref}\n />\n </div>\n </Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n </FieldGroup>\n </FileInputContextProvider>\n );\n }\n\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={cn(\"jkl-file-input\", className, {\n \"jkl-file-input--has-files\": hasFiles,\n })}\n data-layout-density={density}\n {...rest}\n >\n <Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label={\n multiple && hasFiles\n ? \"Legg til flere filer\"\n : \"Legg til fil\"\n }\n multiple={multiple}\n ref={ref}\n />\n </div>\n </Dropzone>\n </FieldGroup>\n </FileInputContextProvider>\n );\n },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","cn","Dropzone","Input","label","displayName"],"mappings":"+TAuCaA,EAAYC,EAAAA,YACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAEhC,MAAgB,UAAZH,EAEII,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEf,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcS,MAAOZ,GAElDF,SAAAe,EAAAA,KAACC,EAAAA,WAAA,CACGjB,UAAWkB,EACP,iBACA,wBACAlB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAW,MAACO,EAAAA,SACG,CAAAlB,SAAAW,EAAAA,IAAC,MAAI,CAAAZ,UAAU,iCACXC,SAAAW,EAAAA,IAACQ,EAAAA,MAAA,CACGlB,GAAAA,EACAmB,MAAM,eACNhB,SAAAA,EACAP,IAAAA,QAIXK,EAAMQ,OAAS,SACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,SASrBW,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEf,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcS,MAAOZ,GAElDF,SAAAW,EAAAA,IAACK,EAAAA,WAAA,CACGjB,UAAWkB,EAAG,iBAAkBlB,EAAW,CACvC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,gBAACkB,WACI,CAAAlB,SAAA,CAAAE,EAAMQ,OAAS,GACZC,EAAAA,IAAC,KAAG,CAAAZ,UAAU,wBACTC,SAAAA,IAGTW,EAAAA,IAAC,MAAI,CAAAZ,UAAU,iCACXC,SAAAW,EAAAA,IAACQ,EAAAA,MAAA,CACGlB,GAAAA,EACAmB,MACIhB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,YAIhB,IAMhBH,EAAU2B,YAAc"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { FieldGroupProps } from '../../components/input-group/FieldGroup.cjs';
|
|
3
|
+
import { Density } from '../../core/types.cjs';
|
|
4
|
+
import { FileInputFile } from './types.cjs';
|
|
5
|
+
export interface FileInputProps extends Omit<FieldGroupProps, "onChange"> {
|
|
6
|
+
className?: string;
|
|
7
|
+
id?: string;
|
|
8
|
+
density?: Density;
|
|
9
|
+
/**
|
|
10
|
+
* En string som begrenser hvilke filtyper som kan velges.
|
|
11
|
+
*
|
|
12
|
+
* Flere filtyper kan defineres som en kommaseparert liste.
|
|
13
|
+
*
|
|
14
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
|
|
15
|
+
*/
|
|
16
|
+
accept?: "image/*" | ".pdf" | "image/*,.pdf" | HTMLInputElement["accept"];
|
|
17
|
+
maxSizeBytes?: number;
|
|
18
|
+
/**
|
|
19
|
+
* @default true
|
|
20
|
+
*/
|
|
21
|
+
multiple?: boolean;
|
|
22
|
+
value: FileInputFile[];
|
|
23
|
+
variant?: "flexible" | "small";
|
|
24
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>, files: FileInputFile[]) => void;
|
|
25
|
+
}
|
|
26
|
+
export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("classnames"),t=require("react"),n=require("./fileInputContext.cjs"),a=require("./validateFile.cjs"),i=t.forwardRef(((i,o)=>{const{children:l,...s}=i,[p,u]=t.useState(""),d=n.useFileInputContext();if(!d)return e.jsx("p",{children:"Dropzone must be placed inside a FileInputContextProvider."});const{maxSizeBytes:f,accept:c,onChange:v}=d;return e.jsx("div",{...s,ref:o,className:r("jkl-file-input__dropzone",p),onDragEnter:e=>{u("jkl-file-input__dropzone--enter"),e.preventDefault()},onDragOver:e=>{u("jkl-file-input__dropzone--enter"),e.preventDefault()},onDrop:e=>{e.preventDefault(),u(""),e.dataTransfer.files&&v(e,[...e.dataTransfer.files].map((e=>({file:e,state:"SELECTED",validation:a.validateFile(e,c,f),uploadProgress:0}))))},onDragLeave:e=>{u(""),e.preventDefault()},children:l})}));i.displayName="Dropzone",exports.Dropzone=i;
|
|
2
|
+
//# sourceMappingURL=Dropzone.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropzone.cjs","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { forwardRef, useState } from \"react\";\nimport { WithChildren } from \"../../../core/types.js\";\nimport { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n (props, ref) => {\n const { children, ...rest } = props;\n const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>\n Dropzone must be placed inside a FileInputContextProvider.\n </p>\n );\n }\n const { maxSizeBytes, accept, onChange } = context;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={cn(\"jkl-file-input__dropzone\", onDragClassName)}\n onDragEnter={(e) => {\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDragOver={(e) => {\n /* Prevent browser from opening file in a new tab */\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDrop={(e) => {\n e.preventDefault();\n setOnDragClassName(\"\");\n\n if (e.dataTransfer.files) {\n onChange(\n e,\n [...e.dataTransfer.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n onDragLeave={(e) => {\n setOnDragClassName(\"\");\n e.preventDefault();\n }}\n >\n {children}\n </div>\n );\n },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","cn","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFile","uploadProgress","onDragLeave","displayName"],"mappings":"oOASaA,EAAWC,EAAAA,YACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,WAAiB,IAEzDC,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAAA,IAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAG,2BAA4BV,GAC1CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAAA,CACGA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EAAAA,aACRH,EACAZ,EACAD,GAEJiB,eAAgB,MAExB,EAIZC,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,GAAA,IAMjBJ,EAAS+B,YAAc"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { WithChildren } from '../../../core/types.cjs';
|
|
3
|
+
interface DropzoneProps extends WithChildren {
|
|
4
|
+
}
|
|
5
|
+
export declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),i=require("../../../hooks/useId/useId.cjs"),r=require("../../../utilities/formatters/bytes/formatBytes.cjs"),s=require("./fileInputContext.cjs"),l=require("./validateFile.cjs"),a=t.forwardRef(((t,a)=>{const{multiple:n,id:u,label:o,...d}=t,p=i.useId(u||"jkl-file-input",{generateSuffix:!u}),c=p+"-description",f=n?"filer":"fil",j=s.useFileInputContext();if(!j)return e.jsx("p",{children:"Input must be placed inside a FileInputContextProvider."});const{accept:m,maxSizeBytes:x,onChange:y,files:h}=j;return e.jsxs(e.Fragment,{children:[e.jsx("label",{className:"jkl-button jkl-button--secondary",htmlFor:p,children:o}),e.jsx("input",{...d,ref:a,id:p,accept:m,"aria-describedby":x?c:void 0,className:"jkl-sr-only",type:"file",multiple:n,onChange:e=>{e.target.files&&y(e,[...e.target.files].map((e=>({file:e,state:"SELECTED",validation:l.validateFile(e,m,x),uploadProgress:0}))))}}),0===h.length&&e.jsxs("p",{children:["eller slipp ",f," her"]}),typeof x<"u"&&e.jsxs("div",{id:c,className:"jkl-file-input__max-size-text",children:["Maks ",r.formatBytes(x)," per fil"]})]})}));a.displayName="Input",exports.Input=a;
|
|
2
|
+
//# sourceMappingURL=Input.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.cjs","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../../hooks/useId/useId.js\";\nimport { formatBytes } from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface FileInputProps {\n id?: string;\n label: string;\n multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const { multiple, id: idProp, label, ...rest } = props;\n\n const id = useId(idProp || \"jkl-file-input\", {\n generateSuffix: !idProp,\n });\n const maxSizeDescriptionId = id + \"-description\";\n const descriptor = multiple ? \"filer\" : \"fil\";\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>Input must be placed inside a FileInputContextProvider.</p>\n );\n }\n const { accept, maxSizeBytes, onChange, files } = context;\n\n return (\n <>\n <label\n className=\"jkl-button jkl-button--secondary\"\n htmlFor={id}\n >\n {label}\n </label>\n <input\n {...rest}\n ref={ref}\n id={id}\n accept={accept}\n aria-describedby={\n maxSizeBytes ? maxSizeDescriptionId : undefined\n }\n className=\"jkl-sr-only\"\n type=\"file\"\n multiple={multiple}\n onChange={(e) => {\n if (e.target.files) {\n onChange(\n e,\n [...e.target.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n />\n {files.length === 0 && <p>eller slipp {descriptor} her</p>}\n {typeof maxSizeBytes !== \"undefined\" && (\n <div\n id={maxSizeDescriptionId}\n className=\"jkl-file-input__max-size-text\"\n >\n Maks {formatBytes(maxSizeBytes)} per fil\n </div>\n )}\n </>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","idProp","label","rest","useId","generateSuffix","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","files","jsxs","Fragment","className","htmlFor","type","e","target","map","file","state","validation","validateFile","uploadProgress","length","formatBytes","displayName"],"mappings":"yTAaaA,EAAQC,EAAAA,YACjB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,EAAUC,GAAIC,EAAQC,MAAAA,KAAUC,GAASN,EAE3CG,EAAKI,EAAAA,MAAMH,GAAU,iBAAkB,CACzCI,gBAAiBJ,IAEfK,EAAuBN,EAAK,eAC5BO,EAAaR,EAAW,QAAU,MAElCS,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEC,SAAuD,4DAGlE,MAAQC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,EAAUC,MAAAA,GAAUP,EAElD,OAEQQ,EAAAA,KAAAC,WAAA,CAAAN,SAAA,CAAAD,EAAAA,IAAC,QAAA,CACGQ,UAAU,mCACVC,QAASnB,EAERW,SAAAT,IAELQ,EAAAA,IAAC,QAAA,IACOP,EACJL,IAAAA,EACAE,GAAAA,EACAY,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLrB,SAAAA,EACAe,SAAWO,IACHA,EAAEC,OAAOP,OACTD,EACIO,EACA,IAAIA,EAAEC,OAAOP,OAAOQ,KACfC,IAAU,CACPA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EAAAA,aACRH,EACAZ,EACAC,GAEJe,eAAgB,MAExB,IAKE,IAAjBb,EAAMc,QAAgBb,EAAAA,KAAC,IAAE,CAAAL,SAAA,CAAA,eAAaJ,EAAW,iBAC1CM,EAAiB,KACrBG,EAAAA,KAAC,MAAA,CACGhB,GAAIM,EACJY,UAAU,gCACbP,SAAA,CAAA,QACSmB,EAAAA,YAAYjB,GAAc,gBAG5C,IAKZlB,EAAMoC,YAAc"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("classnames");exports.Thumbnail=i=>{const{fileName:t,fileType:s,path:a,file:r,state:c,children:n}=i,m=l("jkl-file__thumbnail",{"jkl-file__thumbnail--selected":"SELECTED"===c,"jkl-file__thumbnail--uploading":"UPLOADING"===c});return s.startsWith("image/")?e.jsxs("div",{className:"jkl-file__thumbnail-wrapper",children:[e.jsx("img",{className:m,src:r?URL.createObjectURL(r):a,alt:""}),n]}):e.jsx("div",{className:m,children:e.jsx("p",{children:t.split(".").at(-1)})})};
|
|
2
|
+
//# sourceMappingURL=Thumbnail.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Thumbnail.cjs","sources":["../../../../../src/components/file-input/internal/Thumbnail.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { FC } from \"react\";\nimport type { WithOptionalChildren } from \"../../../core/types.js\";\nimport { FileInputFileState } from \"../types.js\";\n\nexport interface ThumbnailProps extends WithOptionalChildren {\n fileName: string;\n fileType: string;\n path?: string;\n file?: File;\n state?: FileInputFileState;\n}\n\nexport const Thumbnail: FC<ThumbnailProps> = (props) => {\n const { fileName, fileType, path, file, state, children } = props;\n\n const classNames = cn(\"jkl-file__thumbnail\", {\n \"jkl-file__thumbnail--selected\": state === \"SELECTED\",\n \"jkl-file__thumbnail--uploading\": state === \"UPLOADING\",\n });\n\n if (fileType.startsWith(\"image/\")) {\n return (\n <div className=\"jkl-file__thumbnail-wrapper\">\n <img\n className={classNames}\n src={file ? URL.createObjectURL(file) : path}\n alt=\"\"\n />\n {children}\n </div>\n );\n }\n\n return (\n <div className={classNames}>\n <p>{fileName.split(\".\").at(-1)}</p>\n </div>\n );\n};\n"],"names":["props","fileName","fileType","path","file","state","children","classNames","cn","startsWith","jsxs","className","jsx","src","URL","createObjectURL","alt","split","at"],"mappings":"+JAa8CA,IAC1C,MAAQC,SAAAA,EAAUC,SAAAA,EAAUC,KAAAA,EAAMC,KAAAA,EAAMC,MAAAA,EAAOC,SAAAA,GAAaN,EAEtDO,EAAaC,EAAG,sBAAuB,CACzC,gCAA2C,aAAVH,EACjC,iCAA4C,cAAVA,IAGlC,OAAAH,EAASO,WAAW,UAEhBC,EAAAA,KAAC,MAAI,CAAAC,UAAU,8BACXL,SAAA,CAAAM,EAAAA,IAAC,MAAA,CACGD,UAAWJ,EACXM,IAAKT,EAAOU,IAAIC,gBAAgBX,GAAQD,EACxCa,IAAI,KAEPV,KAMRM,EAAAA,IAAA,MAAA,CAAID,UAAWJ,EACZD,SAACM,EAAAA,IAAA,IAAA,CAAGN,SAASL,EAAAgB,MAAM,KAAKC,IAAG,MAC/B"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { WithOptionalChildren } from '../../../core/types.cjs';
|
|
3
|
+
import { FileInputFileState } from '../types.cjs';
|
|
4
|
+
export interface ThumbnailProps extends WithOptionalChildren {
|
|
5
|
+
fileName: string;
|
|
6
|
+
fileType: string;
|
|
7
|
+
path?: string;
|
|
8
|
+
file?: File;
|
|
9
|
+
state?: FileInputFileState;
|
|
10
|
+
}
|
|
11
|
+
export declare const Thumbnail: FC<ThumbnailProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=t.createContext(null);exports.FileInputContextProvider=({context:t,children:o})=>e.jsx(r.Provider,{value:t,children:o}),exports.useFileInputContext=()=>t.useContext(r);
|
|
2
|
+
//# sourceMappingURL=fileInputContext.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fileInputContext.cjs","sources":["../../../../../src/components/file-input/internal/fileInputContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { WithChildren } from \"../../../core/types.js\";\nimport { FileInputFile } from \"../types.js\";\n\ntype FileInputContext = {\n accept?: \"image/*\" | \".pdf\" | \"image/*,.pdf\" | HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n files: FileInputFile[];\n onChange: (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n};\n\nconst fileInputContext = createContext<FileInputContext | null>(null);\n\nexport const useFileInputContext = (): FileInputContext | null =>\n useContext(fileInputContext);\n\nexport interface FileInputContextProviderProps extends WithChildren {\n context: FileInputContext;\n}\n\nexport const FileInputContextProvider: React.FC<\n FileInputContextProviderProps\n> = ({ context, children }) => (\n <fileInputContext.Provider value={context}>\n {children}\n </fileInputContext.Provider>\n);\n"],"names":["fileInputContext","createContext","context","children","jsx","Provider","value","useContext"],"mappings":"wIAgBMA,EAAmBC,EAAAA,cAAuC,uCAW5D,EAAGC,QAAAA,EAASC,SAAAA,KACXC,EAAAA,IAAAJ,EAAiBK,SAAjB,CAA0BC,MAAOJ,EAC7BC,SAAAA,gCAX0B,IAC/BI,EAAAA,WAAWP"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { WithChildren } from '../../../core/types.cjs';
|
|
3
|
+
import { FileInputFile } from '../types.cjs';
|
|
4
|
+
type FileInputContext = {
|
|
5
|
+
accept?: "image/*" | ".pdf" | "image/*,.pdf" | HTMLInputElement["accept"];
|
|
6
|
+
maxSizeBytes?: number;
|
|
7
|
+
files: FileInputFile[];
|
|
8
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>, files: FileInputFile[]) => void;
|
|
9
|
+
};
|
|
10
|
+
export declare const useFileInputContext: () => FileInputContext | null;
|
|
11
|
+
export interface FileInputContextProviderProps extends WithChildren {
|
|
12
|
+
context: FileInputContext;
|
|
13
|
+
}
|
|
14
|
+
export declare const FileInputContextProvider: React.FC<FileInputContextProviderProps>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../utilities/formatters/bytes/formatBytes.cjs");exports.validateFile=function(t,s="",i){var r;const a=s.split(",").map((e=>e.toLowerCase())).map((e=>e.replaceAll("*",""))).map((e=>e.trim()));let l=0===a.length;return l=a.reduce(((e,s)=>e||t.type.includes(s)||t.name.endsWith(s)),l),l?typeof i<"u"&&t.size>i?{type:"TOO_LARGE",message:`Filen er ${e.formatBytes(t.size)}, men kan maksimalt være ${e.formatBytes(i)}`}:void 0:{type:"WRONG_TYPE",message:`Filtypen ${(null==(r=t.name)?void 0:r.split(".")[1])||""} støttes ikke`}};
|
|
2
|
+
//# sourceMappingURL=validateFile.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validateFile.cjs","sources":["../../../../../src/components/file-input/internal/validateFile.ts"],"sourcesContent":["import { formatBytes } from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport type { FileInputFileValidation } from \"../types.js\";\n\nexport function validateFile(\n file: File,\n accept = \"\",\n maxSizeBytes?: number,\n): FileInputFileValidation | undefined {\n const acceptStrings = accept\n .split(\",\")\n .map((s) => s.toLowerCase())\n .map((s) => s.replaceAll(\"*\", \"\"))\n .map((s) => s.trim());\n\n let isValidFormat = acceptStrings.length === 0;\n\n isValidFormat = acceptStrings.reduce(\n (found, acceptString) =>\n found ||\n file.type.includes(acceptString) ||\n file.name.endsWith(acceptString),\n isValidFormat,\n );\n\n if (!isValidFormat) {\n return {\n type: \"WRONG_TYPE\",\n message: `Filtypen ${file.name?.split(\".\")[1] || \"\"} støttes ikke`,\n };\n }\n\n if (typeof maxSizeBytes != \"undefined\" && file.size > maxSizeBytes) {\n return {\n type: \"TOO_LARGE\",\n message: `Filen er ${formatBytes(\n file.size,\n )}, men kan maksimalt være ${formatBytes(maxSizeBytes)}`,\n };\n }\n\n return undefined;\n}\n"],"names":["file","accept","maxSizeBytes","acceptStrings","split","map","s","toLowerCase","replaceAll","trim","isValidFormat","length","reduce","found","acceptString","type","includes","name","endsWith","size","message","formatBytes","_a"],"mappings":"4KAGO,SACHA,EACAC,EAAS,GACTC,SAEM,MAAAC,EAAgBF,EACjBG,MAAM,KACNC,KAAKC,GAAMA,EAAEC,gBACbF,KAAKC,GAAMA,EAAEE,WAAW,IAAK,MAC7BH,KAAKC,GAAMA,EAAEG,SAEd,IAAAC,EAAyC,IAAzBP,EAAcQ,OAUlC,OARAD,EAAgBP,EAAcS,QAC1B,CAACC,EAAOC,IACJD,GACAb,EAAKe,KAAKC,SAASF,IACnBd,EAAKiB,KAAKC,SAASJ,IACvBJ,GAGCA,SAOMR,EAAgB,KAAeF,EAAKmB,KAAOjB,EAC3C,CACHa,KAAM,YACNK,QAAS,YAAYC,EAAAA,YACjBrB,EAAKmB,iCACoBE,EAAAA,YAAYnB,WALjD,EANW,CACHa,KAAM,aACNK,QAAS,aAAY,OAAAE,EAAAtB,EAAKiB,WAALK,EAAAA,EAAWlB,MAAM,KAAK,KAAM,kBAc7D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface FileInputFileValidation {
|
|
2
|
+
type: "TOO_LARGE" | "WRONG_TYPE";
|
|
3
|
+
message: string;
|
|
4
|
+
}
|
|
5
|
+
export type FileInputFileState = "SELECTED" | "UPLOADING" | "UPLOAD_ERROR" | "UPLOAD_SUCCESS";
|
|
6
|
+
export interface FileInputFile {
|
|
7
|
+
file: File;
|
|
8
|
+
validation?: FileInputFileValidation;
|
|
9
|
+
state: FileInputFileState;
|
|
10
|
+
uploadProgress: number;
|
|
11
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.upload=async function(e,t,r,s){const n=new XMLHttpRequest;return new Promise(((o,a)=>{n.upload.addEventListener("progress",(e=>{e.lengthComputable&&r&&r(e.loaded/e.total*100)})),n.addEventListener("load",(e=>{n.status>=400&&a(e),o(e)})),n.addEventListener("error",(e=>{a(e)})),n.addEventListener("abort",(e=>{a(e)})),n.open("POST",e),Object.entries(s||{}).forEach((([e,t])=>{n.setRequestHeader(e,t)})),n.send(t)})).then((e=>JSON.parse(n.responseText)),(()=>{throw new Error(n.statusText)}))};
|
|
2
|
+
//# sourceMappingURL=utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/file-input/utils.ts"],"sourcesContent":["/**\n * Hjelpefunksjon for å laste opp filer med progress-bar\n *\n * @param {string} url Endepunktet som skal lastes opp til\n * @param {FormData} data FormData med filen som skal lastes opp\n * @param progress Callback som blir kalt med oppdatert progresjon\n * @param {Record<string, string>} headers Eventuelle headers som skal sendes\n * med opplasingen. Her kan du f.eks. sende med CSRF-verdier.\n * @returns {T} Svaret fra endepunktet\n */\nexport async function upload<T>(\n url: string,\n data: FormData,\n progress: (progress: number) => void,\n headers?: Record<string, string>,\n): Promise<T> {\n // I skrivende stund er det ikke mulig å hente progress med fetch. Derfor bruker vi XMLHttpRequest.\n const xhr = new XMLHttpRequest();\n const request = new Promise<ProgressEvent<XMLHttpRequestEventTarget>>(\n (resolve, reject) => {\n xhr.upload.addEventListener(\"progress\", (e) => {\n if (e.lengthComputable && progress) {\n progress((e.loaded / e.total) * 100);\n }\n });\n\n xhr.addEventListener(\"load\", (e) => {\n if (xhr.status >= 400) {\n reject(e);\n }\n resolve(e);\n });\n\n xhr.addEventListener(\"error\", (e) => {\n reject(e);\n });\n\n xhr.addEventListener(\"abort\", (e) => {\n reject(e);\n });\n\n xhr.open(\"POST\", url);\n\n Object.entries(headers || {}).forEach(([header, value]) => {\n xhr.setRequestHeader(header, value);\n });\n\n xhr.send(data);\n },\n ).then(\n (e) => {\n const response: T = JSON.parse(xhr.responseText);\n return response;\n },\n () => {\n throw new Error(xhr.statusText);\n },\n );\n\n return request;\n}\n"],"names":["async","url","data","progress","headers","xhr","XMLHttpRequest","Promise","resolve","reject","upload","addEventListener","e","lengthComputable","loaded","total","status","open","Object","entries","forEach","header","value","setRequestHeader","send","then","JSON","parse","responseText","Error","statusText"],"mappings":"+FAUAA,eACIC,EACAC,EACAC,EACAC,GAGM,MAAAC,EAAM,IAAIC,eA0CT,OAzCS,IAAIC,SAChB,CAACC,EAASC,KACNJ,EAAIK,OAAOC,iBAAiB,YAAaC,IACjCA,EAAEC,kBAAoBV,GACtBA,EAAUS,EAAEE,OAASF,EAAEG,MAAS,IAAG,IAIvCV,EAAAM,iBAAiB,QAASC,IACtBP,EAAIW,QAAU,KACdP,EAAOG,GAEXJ,EAAQI,EAAC,IAGTP,EAAAM,iBAAiB,SAAUC,IAC3BH,EAAOG,EAAC,IAGRP,EAAAM,iBAAiB,SAAUC,IAC3BH,EAAOG,EAAC,IAGRP,EAAAY,KAAK,OAAQhB,GAEViB,OAAAC,QAAQf,GAAW,CAAE,GAAEgB,SAAQ,EAAEC,EAAQC,MACxCjB,EAAAkB,iBAAiBF,EAAQC,EAAK,IAGtCjB,EAAImB,KAAKtB,EAAI,IAEnBuB,MACGb,GACuBc,KAAKC,MAAMtB,EAAIuB,gBAGvC,KACU,MAAA,IAAIC,MAAMxB,EAAIyB,WAAU,GAK1C"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hjelpefunksjon for å laste opp filer med progress-bar
|
|
3
|
+
*
|
|
4
|
+
* @param {string} url Endepunktet som skal lastes opp til
|
|
5
|
+
* @param {FormData} data FormData med filen som skal lastes opp
|
|
6
|
+
* @param progress Callback som blir kalt med oppdatert progresjon
|
|
7
|
+
* @param {Record<string, string>} headers Eventuelle headers som skal sendes
|
|
8
|
+
* med opplasingen. Her kan du f.eks. sende med CSRF-verdier.
|
|
9
|
+
* @returns {T} Svaret fra endepunktet
|
|
10
|
+
*/
|
|
11
|
+
export declare function upload<T>(url: string, data: FormData, progress: (progress: number) => void, headers?: Record<string, string>): Promise<T>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonInput.cjs","sources":["../../../../../src/components/loader/skeletons/SkeletonInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport
|
|
1
|
+
{"version":3,"file":"SkeletonInput.cjs","sources":["../../../../../src/components/loader/skeletons/SkeletonInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Density } from \"../../../core/types.js\";\nimport { SkeletonElementProps, SkeletonElement } from \"./SkeletonElement.js\";\nimport { SkeletonLabel, SkeletonLabelProps } from \"./SkeletonLabel.js\";\n\nexport interface SkeletonInputProps {\n className?: string;\n density?: Density;\n labelProps?: SkeletonLabelProps;\n inputProps?: SkeletonElementProps;\n}\n\nexport const SkeletonInput = ({\n className,\n density,\n labelProps,\n inputProps,\n ...rest\n}: SkeletonInputProps) => {\n const compact = density === \"compact\";\n return (\n <div className={clsx(\"jkl-skeleton-input\", className)} {...rest}>\n <SkeletonLabel density={density} {...labelProps} />\n <SkeletonElement\n width={compact ? 301 : 316}\n height={compact ? 32 : 48}\n {...inputProps}\n />\n </div>\n );\n};\n"],"names":["className","density","labelProps","inputProps","rest","compact","jsxs","clsx","children","jsx","SkeletonLabel","SkeletonElement","width","height"],"mappings":"0PAa6B,EACzBA,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,WAAAA,KACGC,MAEH,MAAMC,EAAsB,YAAZJ,EAEZ,OAAAK,EAAAA,KAAC,OAAIN,UAAWO,EAAAA,KAAK,qBAAsBP,MAAgBI,EACvDI,SAAA,CAACC,EAAAA,IAAAC,EAAAA,cAAA,CAAcT,QAAAA,KAAsBC,IACrCO,EAAAA,IAACE,EAAAA,gBAAA,CACGC,MAAOP,EAAU,IAAM,IACvBQ,OAAQR,EAAU,GAAK,MACnBF,MAEZ"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { SkeletonElementProps } from 'packages/loader-react/build/index.cjs';
|
|
2
1
|
import { default as React } from 'react';
|
|
3
2
|
import { Density } from '../../../core/types.cjs';
|
|
3
|
+
import { SkeletonElementProps } from './SkeletonElement.cjs';
|
|
4
4
|
import { SkeletonLabelProps } from './SkeletonLabel.cjs';
|
|
5
5
|
export interface SkeletonInputProps {
|
|
6
6
|
className?: string;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FC, MouseEvent } from 'react';
|
|
2
|
+
import { WithOptionalChildren } from '../../core/types.js';
|
|
3
|
+
import { FileInputFileState } from './types.js';
|
|
4
|
+
export interface FileProps extends WithOptionalChildren {
|
|
5
|
+
fileName: string;
|
|
6
|
+
fileType: string;
|
|
7
|
+
fileSize: number;
|
|
8
|
+
path?: string;
|
|
9
|
+
file?: File;
|
|
10
|
+
supportLabel?: string;
|
|
11
|
+
supportLabelType?: "help" | "error" | "warning" | "success";
|
|
12
|
+
state?: FileInputFileState;
|
|
13
|
+
onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
14
|
+
}
|
|
15
|
+
export declare const File: FC<FileProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as o,jsx as i}from"react/jsx-runtime";import n from"classnames";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import{SuccessIcon as s}from"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import{TrashCanIcon as c}from"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{IconButton as r}from"../icon-button/IconButton.js";import{SupportLabel as e}from"../input-group/SupportLabel.js";import{useId as t}from"../../hooks/useId/useId.js";import{formatBytes as l}from"../../utilities/formatters/bytes/formatBytes.js";import{useFileInputContext as a}from"./internal/fileInputContext.js";import{Thumbnail as m}from"./internal/Thumbnail.js";const p=p=>{const{children:j,fileName:I,fileType:f,fileSize:u,path:d,file:h,supportLabel:b,supportLabelType:k,state:_,onRemove:C}=p,w=t("jkl-file-preview"),v=w+"-support",T=a(),g="error"===k||"warning"===k,y="success"===k,A=o("div",{id:w,className:"jkl-file",children:[o(d?"a":"div",{className:n("jkl-file__content",{"jkl-file__content--error":"error"===k,"jkl-file__content--warning":"warning"===k}),href:d,target:d?"_blank":void 0,children:[i(m,{fileName:I,fileType:f,file:h,path:d,state:_,children:j}),o("div",{children:[i("p",{className:"jkl-file__name",children:I}),o("p",{className:"jkl-file__description",children:[i("span",{children:l(u)}),g||y?y?i(s,{variant:"small","aria-label":"Filen ble lastet opp uten feil"}):null:i(e,{className:"jkl-file__support-label jkl-body",id:v,label:b,labelType:k})]}),b&&g&&i(e,{className:"jkl-file__support-label",id:v,label:b,labelType:k})]})]}),C&&i(r,{className:"jkl-file__delete",onClick:C,title:`Fjern ${I}`,children:i(c,{})})]});return T?i("li",{children:A}):A};export{p as File};
|
|
2
|
+
//# sourceMappingURL=File.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"File.js","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { FC, MouseEvent } from \"react\";\nimport { TrashCanIcon, SuccessIcon } from \"../../components/icon/index.js\";\nimport { IconButton } from \"../../components/icon-button/IconButton.js\";\nimport { SupportLabel } from \"../../components/input-group/SupportLabel.js\";\nimport { type WithOptionalChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { formatBytes } from \"../../utilities/formatters/bytes/formatBytes.js\";\nimport { useFileInputContext } from \"./internal/fileInputContext.js\";\nimport { Thumbnail } from \"./internal/Thumbnail.js\";\nimport { FileInputFileState } from \"./types.js\";\n\nexport interface FileProps extends WithOptionalChildren {\n fileName: string;\n fileType: string;\n fileSize: number;\n path?: string;\n file?: File;\n supportLabel?: string;\n supportLabelType?: \"help\" | \"error\" | \"warning\" | \"success\";\n state?: FileInputFileState;\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const File: FC<FileProps> = (props) => {\n const {\n children,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n supportLabel,\n supportLabelType,\n state,\n onRemove,\n } = props;\n\n const id = useId(\"jkl-file-preview\");\n const supportId = id + \"-support\";\n\n const context = useFileInputContext();\n\n const Component = path ? \"a\" : \"div\";\n\n const hasErrorOrWarning =\n supportLabelType === \"error\" || supportLabelType === \"warning\";\n const hasSuccess = supportLabelType === \"success\";\n\n const renderFeedbackElement = () => {\n if (!hasErrorOrWarning && !hasSuccess) {\n return (\n <SupportLabel\n className=\"jkl-file__support-label jkl-body\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n );\n }\n\n if (hasSuccess)\n return (\n <SuccessIcon\n variant=\"small\"\n aria-label=\"Filen ble lastet opp uten feil\"\n />\n );\n\n return null;\n };\n\n const fileComponent = (\n <div id={id} className=\"jkl-file\">\n <Component\n className={cn(\"jkl-file__content\", {\n \"jkl-file__content--error\": supportLabelType === \"error\",\n \"jkl-file__content--warning\":\n supportLabelType === \"warning\",\n })}\n href={path}\n target={path ? \"_blank\" : undefined}\n >\n <Thumbnail\n fileName={fileName}\n fileType={fileType}\n file={file}\n path={path}\n state={state}\n >\n {children}\n </Thumbnail>\n <div>\n <p className=\"jkl-file__name\">{fileName}</p>\n <p className=\"jkl-file__description\">\n <span>{formatBytes(fileSize)}</span>\n {renderFeedbackElement()}\n </p>\n {supportLabel && hasErrorOrWarning && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n )}\n </div>\n </Component>\n {onRemove && (\n <IconButton\n className=\"jkl-file__delete\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n >\n <TrashCanIcon />\n </IconButton>\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["File","props","children","fileName","fileType","fileSize","path","file","supportLabel","supportLabelType","state","onRemove","id","useId","supportId","context","useFileInputContext","hasErrorOrWarning","hasSuccess","fileComponent","jsxs","className","cn","href","target","jsx","Thumbnail","formatBytes","SuccessIcon","variant","SupportLabel","label","labelType","IconButton","onClick","title","TrashCanIcon"],"mappings":"8yDAwBa,MAAAA,EAAuBC,IAC1B,MACFC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,MAAAA,EACAC,SAAAA,GACAV,EAEEW,EAAKC,EAAM,oBACXC,EAAYF,EAAK,WAEjBG,EAAUC,IAIVC,EACmB,UAArBR,GAAqD,YAArBA,EAC9BS,EAAkC,YAArBT,EAyBbU,EACFC,EAAC,MAAI,CAAAR,GAAAA,EAAQS,UAAU,WACnBnB,SAAA,CAAAkB,EA/BUd,EAAO,IAAM,MA+BtB,CACGe,UAAWC,EAAG,oBAAqB,CAC/B,2BAAiD,UAArBb,EAC5B,6BACyB,YAArBA,IAERc,KAAMjB,EACNkB,OAAQlB,EAAO,cAAW,EAE1BJ,SAAA,CAAAuB,EAACC,EAAA,CACGvB,SAAAA,EACAC,SAAAA,EACAG,KAAAA,EACAD,KAAAA,EACAI,MAAAA,EAECR,SAAAA,MAEJ,MACG,CAAAA,SAAA,CAACuB,EAAA,IAAA,CAAEJ,UAAU,iBAAkBnB,SAASC,IACxCiB,EAAC,IAAE,CAAAC,UAAU,wBACTnB,SAAA,CAACuB,EAAA,OAAA,CAAMvB,SAAYyB,EAAAtB,KA7C9BY,GAAsBC,EAWvBA,EAEIO,EAACG,EAAA,CACGC,QAAQ,QACR,aAAW,mCAIhB,KAjBCJ,EAACK,EAAA,CACGT,UAAU,mCACVT,GAAIE,EACJiB,MAAOvB,EACPwB,UAAWvB,OA0CVD,GAAgBS,GACbQ,EAACK,EAAA,CACGT,UAAU,0BACVT,GAAIE,EACJiB,MAAOvB,EACPwB,UAAWvB,UAK1BE,GACGc,EAACQ,EAAA,CACGZ,UAAU,mBACVa,QAASvB,EACTwB,MAAO,SAAShC,IAEhBD,WAACkC,EAAa,SAMvBrB,OAAAA,EAAUU,EAAC,KAAI,CAAAvB,SAAAiB,IAAsBA,CAAAA"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { FieldGroupProps } from '../../components/input-group/FieldGroup.js';
|
|
3
|
+
import { Density } from '../../core/types.js';
|
|
4
|
+
import { FileInputFile } from './types.js';
|
|
5
|
+
export interface FileInputProps extends Omit<FieldGroupProps, "onChange"> {
|
|
6
|
+
className?: string;
|
|
7
|
+
id?: string;
|
|
8
|
+
density?: Density;
|
|
9
|
+
/**
|
|
10
|
+
* En string som begrenser hvilke filtyper som kan velges.
|
|
11
|
+
*
|
|
12
|
+
* Flere filtyper kan defineres som en kommaseparert liste.
|
|
13
|
+
*
|
|
14
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
|
|
15
|
+
*/
|
|
16
|
+
accept?: "image/*" | ".pdf" | "image/*,.pdf" | HTMLInputElement["accept"];
|
|
17
|
+
maxSizeBytes?: number;
|
|
18
|
+
/**
|
|
19
|
+
* @default true
|
|
20
|
+
*/
|
|
21
|
+
multiple?: boolean;
|
|
22
|
+
value: FileInputFile[];
|
|
23
|
+
variant?: "flexible" | "small";
|
|
24
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>, files: FileInputFile[]) => void;
|
|
25
|
+
}
|
|
26
|
+
export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import i from"classnames";import{forwardRef as t}from"react";import{FieldGroup as a}from"../input-group/FieldGroup.js";import{Dropzone as n}from"./internal/Dropzone.js";import{FileInputContextProvider as s}from"./internal/fileInputContext.js";import{Input as r}from"./internal/Input.js";const o=t(((t,o)=>{const{accept:c,className:p,children:m,id:f,value:u,density:d,multiple:h=!0,maxSizeBytes:j,onChange:g,variant:x,...k}=t,y=u.length>0;return e(s,"small"===x?{context:{accept:c,onChange:g,maxSizeBytes:j,files:u},children:l(a,{className:i("jkl-file-input","jkl-file-input--small",p,{"jkl-file-input--has-files":y}),"data-layout-density":d||"compact",...k,children:[e(n,{children:e("div",{className:"jkl-file-input__call-to-action",children:e(r,{id:f,label:"Legg til fil",multiple:h,ref:o})})}),u.length>0&&e("ul",{className:"jkl-file-input__files",children:m})]})}:{context:{accept:c,onChange:g,maxSizeBytes:j,files:u},children:e(a,{className:i("jkl-file-input",p,{"jkl-file-input--has-files":y}),"data-layout-density":d,...k,children:l(n,{children:[u.length>0&&e("ul",{className:"jkl-file-input__files",children:m}),e("div",{className:"jkl-file-input__call-to-action",children:e(r,{id:f,label:h&&y?"Legg til flere filer":"Legg til fil",multiple:h,ref:o})})]})})})}));o.displayName="FileInput";export{o as FileInput};
|
|
2
|
+
//# sourceMappingURL=FileInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileInput.js","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { forwardRef } from \"react\";\nimport {\n FieldGroup,\n type FieldGroupProps,\n} from \"../../components/input-group/FieldGroup.js\";\nimport { type Density } from \"../../core/types.js\";\nimport { Dropzone } from \"./internal/Dropzone.js\";\nimport { FileInputContextProvider } from \"./internal/fileInputContext.js\";\nimport { Input } from \"./internal/Input.js\";\nimport { FileInputFile } from \"./types.js\";\n\nexport interface FileInputProps extends Omit<FieldGroupProps, \"onChange\"> {\n className?: string;\n id?: string;\n density?: Density;\n /**\n * En string som begrenser hvilke filtyper som kan velges.\n *\n * Flere filtyper kan defineres som en kommaseparert liste.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept\n */\n accept?: \"image/*\" | \".pdf\" | \"image/*,.pdf\" | HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n /**\n * @default true\n */\n multiple?: boolean;\n value: FileInputFile[];\n variant?: \"flexible\" | \"small\";\n onChange: (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const {\n accept,\n className,\n children,\n id,\n value,\n density,\n multiple = true,\n maxSizeBytes,\n onChange,\n variant,\n ...rest\n } = props;\n\n const hasFiles = value.length > 0;\n\n if (variant === \"small\") {\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={cn(\n \"jkl-file-input\",\n \"jkl-file-input--small\",\n className,\n {\n \"jkl-file-input--has-files\": hasFiles,\n },\n )}\n data-layout-density={density ? density : \"compact\"}\n {...rest}\n >\n <Dropzone>\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label=\"Legg til fil\"\n multiple={multiple}\n ref={ref}\n />\n </div>\n </Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n </FieldGroup>\n </FileInputContextProvider>\n );\n }\n\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={cn(\"jkl-file-input\", className, {\n \"jkl-file-input--has-files\": hasFiles,\n })}\n data-layout-density={density}\n {...rest}\n >\n <Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label={\n multiple && hasFiles\n ? \"Legg til flere filer\"\n : \"Legg til fil\"\n }\n multiple={multiple}\n ref={ref}\n />\n </div>\n </Dropzone>\n </FieldGroup>\n </FileInputContextProvider>\n );\n },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","cn","Dropzone","Input","label","displayName"],"mappings":"iVAuCO,MAAMA,EAAYC,GACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAE5BH,OAEII,EAACC,EAFO,UAAZL,EAEK,CACGM,QAAS,CAAEf,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcS,MAAOZ,GAElDF,SAAAe,EAACC,EAAA,CACGjB,UAAWkB,EACP,iBACA,wBACAlB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAW,EAACO,EACG,CAAAlB,SAAAW,EAAC,MAAI,CAAAZ,UAAU,iCACXC,SAAAW,EAACQ,EAAA,CACGlB,GAAAA,EACAmB,MAAM,eACNhB,SAAAA,EACAP,IAAAA,QAIXK,EAAMQ,OAAS,KACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,QASpB,CACGa,QAAS,CAAEf,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcS,MAAOZ,GAElDF,SAAAW,EAACK,EAAA,CACGjB,UAAWkB,EAAG,iBAAkBlB,EAAW,CACvC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,WAACkB,EACI,CAAAlB,SAAA,CAAAE,EAAMQ,OAAS,GACZC,EAAC,KAAG,CAAAZ,UAAU,wBACTC,SAAAA,IAGTW,EAAC,MAAI,CAAAZ,UAAU,iCACXC,SAAAW,EAACQ,EAAA,CACGlB,GAAAA,EACAmB,MACIhB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,YAIhB,IAMhBH,EAAU2B,YAAc"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { WithChildren } from '../../../core/types.js';
|
|
3
|
+
interface DropzoneProps extends WithChildren {
|
|
4
|
+
}
|
|
5
|
+
export declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import r from"classnames";import{forwardRef as t,useState as a}from"react";import{useFileInputContext as n}from"./fileInputContext.js";import{validateFile as o}from"./validateFile.js";const i=t(((t,i)=>{const{children:s,...l}=t,[p,f]=a(""),d=n();if(!d)return e("p",{children:"Dropzone must be placed inside a FileInputContextProvider."});const{maxSizeBytes:m,accept:u,onChange:c}=d;return e("div",{...l,ref:i,className:r("jkl-file-input__dropzone",p),onDragEnter:e=>{f("jkl-file-input__dropzone--enter"),e.preventDefault()},onDragOver:e=>{f("jkl-file-input__dropzone--enter"),e.preventDefault()},onDrop:e=>{e.preventDefault(),f(""),e.dataTransfer.files&&c(e,[...e.dataTransfer.files].map((e=>({file:e,state:"SELECTED",validation:o(e,u,m),uploadProgress:0}))))},onDragLeave:e=>{f(""),e.preventDefault()},children:s})}));i.displayName="Dropzone";export{i as Dropzone};
|
|
2
|
+
//# sourceMappingURL=Dropzone.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropzone.js","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { forwardRef, useState } from \"react\";\nimport { WithChildren } from \"../../../core/types.js\";\nimport { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n (props, ref) => {\n const { children, ...rest } = props;\n const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>\n Dropzone must be placed inside a FileInputContextProvider.\n </p>\n );\n }\n const { maxSizeBytes, accept, onChange } = context;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={cn(\"jkl-file-input__dropzone\", onDragClassName)}\n onDragEnter={(e) => {\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDragOver={(e) => {\n /* Prevent browser from opening file in a new tab */\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDrop={(e) => {\n e.preventDefault();\n setOnDragClassName(\"\");\n\n if (e.dataTransfer.files) {\n onChange(\n e,\n [...e.dataTransfer.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n onDragLeave={(e) => {\n setOnDragClassName(\"\");\n e.preventDefault();\n }}\n >\n {children}\n </div>\n );\n },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","cn","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFile","uploadProgress","onDragLeave","displayName"],"mappings":"gOASO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,EAAiB,IAEzDC,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAG,2BAA4BV,GAC1CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAU,CACPA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EACRH,EACAZ,EACAD,GAEJiB,eAAgB,MAExB,EAIZC,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,GAAA,IAMjBJ,EAAS+B,YAAc"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{forwardRef as s}from"react";import{useId as a}from"../../../hooks/useId/useId.js";import{formatBytes as r}from"../../../utilities/formatters/bytes/formatBytes.js";import{useFileInputContext as l}from"./fileInputContext.js";import{validateFile as o}from"./validateFile.js";const n=s(((s,n)=>{const{multiple:p,id:m,label:f,...d}=s,u=a(m||"jkl-file-input",{generateSuffix:!m}),c=u+"-description",j=p?"filer":"fil",h=l();if(!h)return e("p",{children:"Input must be placed inside a FileInputContextProvider."});const{accept:x,maxSizeBytes:y,onChange:I,files:b}=h;return t(i,{children:[e("label",{className:"jkl-button jkl-button--secondary",htmlFor:u,children:f}),e("input",{...d,ref:n,id:u,accept:x,"aria-describedby":y?c:void 0,className:"jkl-sr-only",type:"file",multiple:p,onChange:e=>{e.target.files&&I(e,[...e.target.files].map((e=>({file:e,state:"SELECTED",validation:o(e,x,y),uploadProgress:0}))))}}),0===b.length&&t("p",{children:["eller slipp ",j," her"]}),typeof y<"u"&&t("div",{id:c,className:"jkl-file-input__max-size-text",children:["Maks ",r(y)," per fil"]})]})}));n.displayName="Input";export{n as Input};
|
|
2
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../../hooks/useId/useId.js\";\nimport { formatBytes } from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface FileInputProps {\n id?: string;\n label: string;\n multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const { multiple, id: idProp, label, ...rest } = props;\n\n const id = useId(idProp || \"jkl-file-input\", {\n generateSuffix: !idProp,\n });\n const maxSizeDescriptionId = id + \"-description\";\n const descriptor = multiple ? \"filer\" : \"fil\";\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>Input must be placed inside a FileInputContextProvider.</p>\n );\n }\n const { accept, maxSizeBytes, onChange, files } = context;\n\n return (\n <>\n <label\n className=\"jkl-button jkl-button--secondary\"\n htmlFor={id}\n >\n {label}\n </label>\n <input\n {...rest}\n ref={ref}\n id={id}\n accept={accept}\n aria-describedby={\n maxSizeBytes ? maxSizeDescriptionId : undefined\n }\n className=\"jkl-sr-only\"\n type=\"file\"\n multiple={multiple}\n onChange={(e) => {\n if (e.target.files) {\n onChange(\n e,\n [...e.target.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n />\n {files.length === 0 && <p>eller slipp {descriptor} her</p>}\n {typeof maxSizeBytes !== \"undefined\" && (\n <div\n id={maxSizeDescriptionId}\n className=\"jkl-file-input__max-size-text\"\n >\n Maks {formatBytes(maxSizeBytes)} per fil\n </div>\n )}\n </>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","idProp","label","rest","useId","generateSuffix","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","files","jsxs","Fragment","className","htmlFor","type","e","target","map","file","state","validation","validateFile","uploadProgress","length","formatBytes","displayName"],"mappings":"uVAaO,MAAMA,EAAQC,GACjB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,EAAUC,GAAIC,EAAQC,MAAAA,KAAUC,GAASN,EAE3CG,EAAKI,EAAMH,GAAU,iBAAkB,CACzCI,gBAAiBJ,IAEfK,EAAuBN,EAAK,eAC5BO,EAAaR,EAAW,QAAU,MAElCS,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEC,SAAuD,4DAG5D,MAAEC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,EAAUC,MAAAA,GAAUP,EAElD,OAEQQ,EAAAC,EAAA,CAAAN,SAAA,CAAAD,EAAC,QAAA,CACGQ,UAAU,mCACVC,QAASnB,EAERW,SAAAT,IAELQ,EAAC,QAAA,IACOP,EACJL,IAAAA,EACAE,GAAAA,EACAY,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLrB,SAAAA,EACAe,SAAWO,IACHA,EAAEC,OAAOP,OACTD,EACIO,EACA,IAAIA,EAAEC,OAAOP,OAAOQ,KACfC,IAAU,CACPA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EACRH,EACAZ,EACAC,GAEJe,eAAgB,MAExB,IAKE,IAAjBb,EAAMc,QAAgBb,EAAC,IAAE,CAAAL,SAAA,CAAA,eAAaJ,EAAW,iBAC1CM,EAAiB,KACrBG,EAAC,MAAA,CACGhB,GAAIM,EACJY,UAAU,gCACbP,SAAA,CAAA,QACSmB,EAAYjB,GAAc,gBAG5C,IAKZlB,EAAMoC,YAAc"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { WithOptionalChildren } from '../../../core/types.js';
|
|
3
|
+
import { FileInputFileState } from '../types.js';
|
|
4
|
+
export interface ThumbnailProps extends WithOptionalChildren {
|
|
5
|
+
fileName: string;
|
|
6
|
+
fileType: string;
|
|
7
|
+
path?: string;
|
|
8
|
+
file?: File;
|
|
9
|
+
state?: FileInputFileState;
|
|
10
|
+
}
|
|
11
|
+
export declare const Thumbnail: FC<ThumbnailProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as e,jsx as l}from"react/jsx-runtime";import a from"classnames";const i=i=>{const{fileName:s,fileType:t,path:r,file:m,state:c,children:n}=i,h=a("jkl-file__thumbnail",{"jkl-file__thumbnail--selected":"SELECTED"===c,"jkl-file__thumbnail--uploading":"UPLOADING"===c});return t.startsWith("image/")?e("div",{className:"jkl-file__thumbnail-wrapper",children:[l("img",{className:h,src:m?URL.createObjectURL(m):r,alt:""}),n]}):l("div",{className:h,children:l("p",{children:s.split(".").at(-1)})})};export{i as Thumbnail};
|
|
2
|
+
//# sourceMappingURL=Thumbnail.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Thumbnail.js","sources":["../../../../../src/components/file-input/internal/Thumbnail.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, { FC } from \"react\";\nimport type { WithOptionalChildren } from \"../../../core/types.js\";\nimport { FileInputFileState } from \"../types.js\";\n\nexport interface ThumbnailProps extends WithOptionalChildren {\n fileName: string;\n fileType: string;\n path?: string;\n file?: File;\n state?: FileInputFileState;\n}\n\nexport const Thumbnail: FC<ThumbnailProps> = (props) => {\n const { fileName, fileType, path, file, state, children } = props;\n\n const classNames = cn(\"jkl-file__thumbnail\", {\n \"jkl-file__thumbnail--selected\": state === \"SELECTED\",\n \"jkl-file__thumbnail--uploading\": state === \"UPLOADING\",\n });\n\n if (fileType.startsWith(\"image/\")) {\n return (\n <div className=\"jkl-file__thumbnail-wrapper\">\n <img\n className={classNames}\n src={file ? URL.createObjectURL(file) : path}\n alt=\"\"\n />\n {children}\n </div>\n );\n }\n\n return (\n <div className={classNames}>\n <p>{fileName.split(\".\").at(-1)}</p>\n </div>\n );\n};\n"],"names":["Thumbnail","props","fileName","fileType","path","file","state","children","classNames","cn","startsWith","jsxs","className","jsx","src","URL","createObjectURL","alt","split","at"],"mappings":"4EAaa,MAAAA,EAAiCC,IAC1C,MAAQC,SAAAA,EAAUC,SAAAA,EAAUC,KAAAA,EAAMC,KAAAA,EAAMC,MAAAA,EAAOC,SAAAA,GAAaN,EAEtDO,EAAaC,EAAG,sBAAuB,CACzC,gCAA2C,aAAVH,EACjC,iCAA4C,cAAVA,IAGlCH,OAAAA,EAASO,WAAW,UAEhBC,EAAC,MAAI,CAAAC,UAAU,8BACXL,SAAA,CAAAM,EAAC,MAAA,CACGD,UAAWJ,EACXM,IAAKT,EAAOU,IAAIC,gBAAgBX,GAAQD,EACxCa,IAAI,KAEPV,KAMRM,EAAA,MAAA,CAAID,UAAWJ,EACZD,SAACM,EAAA,IAAA,CAAGN,SAASL,EAAAgB,MAAM,KAAKC,IAAK,MACjC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { WithChildren } from '../../../core/types.js';
|
|
3
|
+
import { FileInputFile } from '../types.js';
|
|
4
|
+
type FileInputContext = {
|
|
5
|
+
accept?: "image/*" | ".pdf" | "image/*,.pdf" | HTMLInputElement["accept"];
|
|
6
|
+
maxSizeBytes?: number;
|
|
7
|
+
files: FileInputFile[];
|
|
8
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>, files: FileInputFile[]) => void;
|
|
9
|
+
};
|
|
10
|
+
export declare const useFileInputContext: () => FileInputContext | null;
|
|
11
|
+
export interface FileInputContextProviderProps extends WithChildren {
|
|
12
|
+
context: FileInputContext;
|
|
13
|
+
}
|
|
14
|
+
export declare const FileInputContextProvider: React.FC<FileInputContextProviderProps>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{createContext as t,useContext as r}from"react";const o=t(null),n=()=>r(o),s=({context:t,children:r})=>e(o.Provider,{value:t,children:r});export{s as FileInputContextProvider,n as useFileInputContext};
|
|
2
|
+
//# sourceMappingURL=fileInputContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fileInputContext.js","sources":["../../../../../src/components/file-input/internal/fileInputContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { WithChildren } from \"../../../core/types.js\";\nimport { FileInputFile } from \"../types.js\";\n\ntype FileInputContext = {\n accept?: \"image/*\" | \".pdf\" | \"image/*,.pdf\" | HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n files: FileInputFile[];\n onChange: (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n};\n\nconst fileInputContext = createContext<FileInputContext | null>(null);\n\nexport const useFileInputContext = (): FileInputContext | null =>\n useContext(fileInputContext);\n\nexport interface FileInputContextProviderProps extends WithChildren {\n context: FileInputContext;\n}\n\nexport const FileInputContextProvider: React.FC<\n FileInputContextProviderProps\n> = ({ context, children }) => (\n <fileInputContext.Provider value={context}>\n {children}\n </fileInputContext.Provider>\n);\n"],"names":["fileInputContext","createContext","useFileInputContext","useContext","FileInputContextProvider","context","children","jsx","Provider","value"],"mappings":"8FAgBA,MAAMA,EAAmBC,EAAuC,MAEnDC,EAAsB,IAC/BC,EAAWH,GAMFI,EAET,EAAGC,QAAAA,EAASC,SAAAA,KACXC,EAAAP,EAAiBQ,SAAjB,CAA0BC,MAAOJ,EAC7BC,SAAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{formatBytes as e}from"../../../utilities/formatters/bytes/formatBytes.js";function t(t,s="",a){var i;const l=s.split(",").map((e=>e.toLowerCase())).map((e=>e.replaceAll("*",""))).map((e=>e.trim()));let m=0===l.length;return m=l.reduce(((e,s)=>e||t.type.includes(s)||t.name.endsWith(s)),m),m?typeof a<"u"&&t.size>a?{type:"TOO_LARGE",message:`Filen er ${e(t.size)}, men kan maksimalt være ${e(a)}`}:void 0:{type:"WRONG_TYPE",message:`Filtypen ${(null==(i=t.name)?void 0:i.split(".")[1])||""} støttes ikke`}}export{t as validateFile};
|
|
2
|
+
//# sourceMappingURL=validateFile.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validateFile.js","sources":["../../../../../src/components/file-input/internal/validateFile.ts"],"sourcesContent":["import { formatBytes } from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport type { FileInputFileValidation } from \"../types.js\";\n\nexport function validateFile(\n file: File,\n accept = \"\",\n maxSizeBytes?: number,\n): FileInputFileValidation | undefined {\n const acceptStrings = accept\n .split(\",\")\n .map((s) => s.toLowerCase())\n .map((s) => s.replaceAll(\"*\", \"\"))\n .map((s) => s.trim());\n\n let isValidFormat = acceptStrings.length === 0;\n\n isValidFormat = acceptStrings.reduce(\n (found, acceptString) =>\n found ||\n file.type.includes(acceptString) ||\n file.name.endsWith(acceptString),\n isValidFormat,\n );\n\n if (!isValidFormat) {\n return {\n type: \"WRONG_TYPE\",\n message: `Filtypen ${file.name?.split(\".\")[1] || \"\"} støttes ikke`,\n };\n }\n\n if (typeof maxSizeBytes != \"undefined\" && file.size > maxSizeBytes) {\n return {\n type: \"TOO_LARGE\",\n message: `Filen er ${formatBytes(\n file.size,\n )}, men kan maksimalt være ${formatBytes(maxSizeBytes)}`,\n };\n }\n\n return undefined;\n}\n"],"names":["validateFile","file","accept","maxSizeBytes","acceptStrings","split","map","s","toLowerCase","replaceAll","trim","isValidFormat","length","reduce","found","acceptString","type","includes","name","endsWith","size","message","formatBytes","_a"],"mappings":"iFAGO,SAASA,EACZC,EACAC,EAAS,GACTC,SAEMC,MAAAA,EAAgBF,EACjBG,MAAM,KACNC,KAAKC,GAAMA,EAAEC,gBACbF,KAAKC,GAAMA,EAAEE,WAAW,IAAK,MAC7BH,KAAKC,GAAMA,EAAEG,SAEdC,IAAAA,EAAyC,IAAzBP,EAAcQ,OAUlC,OARAD,EAAgBP,EAAcS,QAC1B,CAACC,EAAOC,IACJD,GACAb,EAAKe,KAAKC,SAASF,IACnBd,EAAKiB,KAAKC,SAASJ,IACvBJ,GAGCA,SAOMR,EAAgB,KAAeF,EAAKmB,KAAOjB,EAC3C,CACHa,KAAM,YACNK,QAAS,YAAYC,EACjBrB,EAAKmB,iCACoBE,EAAYnB,WALjD,EANW,CACHa,KAAM,aACNK,QAAS,aAAY,OAAAE,EAAAtB,EAAKiB,aAALK,EAAWlB,MAAM,KAAK,KAAM,kBAc7D"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface FileInputFileValidation {
|
|
2
|
+
type: "TOO_LARGE" | "WRONG_TYPE";
|
|
3
|
+
message: string;
|
|
4
|
+
}
|
|
5
|
+
export type FileInputFileState = "SELECTED" | "UPLOADING" | "UPLOAD_ERROR" | "UPLOAD_SUCCESS";
|
|
6
|
+
export interface FileInputFile {
|
|
7
|
+
file: File;
|
|
8
|
+
validation?: FileInputFileValidation;
|
|
9
|
+
state: FileInputFileState;
|
|
10
|
+
uploadProgress: number;
|
|
11
|
+
}
|