uangcermat-web-toolkit-v2 0.2.12 → 0.2.13
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("../../../node_modules/classnames/index.js"),s=require("../../../node_modules/js-file-downloader/dist/js-file-downloader.js"),l=require("react");require("../../../node_modules/react-pdf/dist/esm/index.js");var a=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var i=require("../Text/BaseText.js");require("../Text/Text.js");var n=require("../Badge/BaseBadgeRequired.js"),o=require("../Icon/Icon.js"),d=require("../../../node_modules/react-pdf/dist/esm/pdfjs.js"),c=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),u=require("../../../node_modules/@headlessui/react/dist/components/menu/menu.js"),f=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");d.GlobalWorkerOptions.workerSrc=`//cdnjs.cloudflare.com/ajax/libs/pdf.js/${d.version}/pdf.worker.min.js`;const m=l.forwardRef((({value:m,label:g,labelStyles:x,containerStyles:j,onFileSelected:w,moreData:b,moreItemsContainerStyles:h,moreItemContainerStyles:
|
|
1
|
+
"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("../../../node_modules/classnames/index.js"),s=require("../../../node_modules/js-file-downloader/dist/js-file-downloader.js"),l=require("react");require("../../../node_modules/react-pdf/dist/esm/index.js");var a=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var i=require("../Text/BaseText.js");require("../Text/Text.js");var n=require("../Badge/BaseBadgeRequired.js"),o=require("../Icon/Icon.js"),d=require("../../../node_modules/react-pdf/dist/esm/pdfjs.js"),c=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),u=require("../../../node_modules/@headlessui/react/dist/components/menu/menu.js"),f=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");d.GlobalWorkerOptions.workerSrc=`//cdnjs.cloudflare.com/ajax/libs/pdf.js/${d.version}/pdf.worker.min.js`;const m=l.forwardRef((({value:m,label:g,labelStyles:x,containerStyles:j,onFileSelected:w,moreData:b,moreItemsContainerStyles:h,moreItemContainerStyles:p,isReadOnly:v,isRequired:y,type:q="image",isError:S,errorMessage:_,errorMessageStyles:k,helperMessage:N,helperMessageStyles:R,labelRequired:M,labelRequiredStyles:O,containerRequiredStyles:C,labelContainerStyles:F,onClickThumbnail:I,onClickUpload:L},B)=>{const T=l.useRef(null),U=l.useRef(null),[z,E]=l.useState(""),[A,D]=l.useState(""),[G,$]=l.useState(null),[H,P]=l.useState(m);l.useImperativeHandle(B,(()=>({reuploadFile(){return e.__awaiter(this,void 0,void 0,(function*(){V()}))},removeFile(t){return e.__awaiter(this,void 0,void 0,(function*(){P(null!=t?t:"")}))},previewFile(){return e.__awaiter(this,void 0,void 0,(function*(){try{const e=yield fetch(H).then((e=>e.blob())),t=window.URL.createObjectURL(e);window.open(t)}catch(e){window.open(H)}}))},downloadFile(){return e.__awaiter(this,void 0,void 0,(function*(){new s({url:`${H}?x-request=xhr`}).catch((()=>{window.open(H)}))}))}})));const V=()=>{L?L():T.current&&T.current.click()},W=e=>{const t="string"!=typeof e?e.name:e,r=t.lastIndexOf("."),s=t.substring(0,r),l=t.substring(r+1);E(s),D(l)};return l.useEffect((()=>{H&&"document"===q?(e.__awaiter(void 0,void 0,void 0,(function*(){const t=new FileReader;t.onload=t=>e.__awaiter(void 0,void 0,void 0,(function*(){const e=new Uint8Array(t.target.result);$(e)}));const r=yield fetch(H).then((e=>e.blob()));t.readAsArrayBuffer(r)})),W(H)):W(H)}),[H]),l.useEffect((()=>{if(G){const e=U.current;if(e){const t=1,r=e.getContext("2d");d.getDocument(G).promise.then((s=>{s.getPage(1).then((s=>{const l=s.getViewport({scale:t});e.width=l.width,e.height=l.height,s.render({canvasContext:r,viewport:l})}))}))}}}),[G]),t.jsxs(t.Fragment,{children:[t.jsxs("div",Object.assign({className:c.twMerge(r.default("rounded-lg bg-light-whiteSolid p-2 border border-solid border-dark-solitude flex flex-col gap-y-2",S&&"border-red-fireEngineRed"))},{children:[t.jsxs("div",Object.assign({className:c.twMerge("flex flex-row items-center gap-x-1 h-4",r.default(F,j?a(j,"w-"):void 0))},{children:[t.jsxs("div",Object.assign({className:"flex flex-1 flex-row gap-x-1"},{children:[!!g&&t.jsx(i.default,{label:g||"",className:c.twMerge("text-dark-blackCoral font-normal text-[10px] line-clamp-1",x)}),y&&t.jsx(n,{labelRequired:M,labelRequiredStyles:O,containerRequiredStyles:C})]})),!!H&&t.jsxs(u.Menu,Object.assign({as:"div",className:"relative inline-block"},{children:[t.jsx("div",{children:t.jsx(u.MenuButton,Object.assign({className:"p-0 bg-transparent"},{children:t.jsx(o,{name:"more",className:"fill-dark-blackCoral w-[10px] h-[10px]"})}))}),t.jsx(f.Transition,Object.assign({as:l.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:t.jsx(u.MenuItems,Object.assign({className:c.twMerge("absolute rounded min-w-full bg-white flex flex-col overflow-hidden border border-solid border-dark-silver right-0 z-50",h)},{children:t.jsx("div",Object.assign({className:"p-0 bg-transparent overflow-auto"},{children:b.map(((e,r)=>t.jsx(u.MenuItem,{children:t.jsx("button",Object.assign({className:c.twMerge("flex justify-start w-full px-4 py-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even",p),onClick:()=>{var t;return null===(t=e.onSelectItem)||void 0===t?void 0:t.call(e,H)}},{children:t.jsx(i.default,{label:e.label,variant:"small",className:c.twMerge("text-dropdownList-text-default hover:text-dropdownList-text-hover hover:font-semibold text-left",e.labelStyles)})}))},r)))}))}))}))]}))]})),t.jsxs("div",Object.assign({className:c.twMerge("relative w-[158px] h-[158px] overflow-hidden",j)},{children:[t.jsx("div",Object.assign({className:r.default("absolute top-0 left-0 flex items-center justify-center w-full h-full bg-dark-silver rounded-lg cursor-pointer",H?"-z-10":"z-10"),onClick:()=>{v||V()}},{children:t.jsx(o,{name:v?"photo":"addCircleLine",className:"fill-light-whiteSolid w-12 h-12"})})),t.jsx("div",Object.assign({className:r.default("absolute top-0 left-0 w-full h-full",H?"z-20":"z-0",I?"cursor-pointer":"cursor-default"),onClick:()=>{null==I||I(H)}},{children:"image"===q&&H?t.jsx("img",{src:H,className:"w-full h-full object-cover rounded-lg"}):t.jsx("canvas",{ref:U,className:"w-full h-full rounded-lg"})}))]})),N&&!S&&t.jsx(i.default,{label:N,className:c.twMerge(r.default("font-normal text-dark-bermudaGray text-[10px]",j?a(j,"w-"):void 0),R)}),S&&!!_&&t.jsx(i.default,{label:_,className:c.twMerge(r.default("font-normal text-red-fireEngineRed text-[10px]",j?a(j,"w-"):void 0),k)})]})),t.jsx("input",{type:"file",accept:"image"===q?"image/*":"application/pdf",ref:T,onChange:e=>(e=>{W(e.target.files[0]),P(window.URL.createObjectURL(e.target.files[0])),null==w||w(e)})(e),className:"hidden"})]})}));module.exports=m;
|
|
2
2
|
//# sourceMappingURL=BaseUploader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseUploader.js","sources":["../../../../src/components/Uploader/BaseUploader.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';\nimport classNames from 'classnames';\nimport JsFileDownloader from 'js-file-downloader';\nimport {\n ChangeEvent,\n forwardRef,\n Fragment,\n useEffect,\n useImperativeHandle,\n useRef,\n useState\n} from 'react';\nimport { pdfjs } from 'react-pdf';\nimport { twMerge } from 'tailwind-merge';\n\nimport extractClasses from '../../utils/extractClasses';\nimport { BaseBadgeRequired } from '../Badge';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport { BaseUploaderInterface, BaseUploaderRefInterface } from './BaseUploader.type';\n\npdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;\n\nconst BaseUploader = forwardRef<BaseUploaderRefInterface, BaseUploaderInterface>(\n (\n {\n value,\n label,\n labelStyles,\n containerStyles,\n onFileSelected,\n moreData,\n moreItemsContainerStyles,\n moreItemContainerStyles,\n isReadOnly,\n isRequired,\n type = 'image',\n isError,\n errorMessage,\n errorMessageStyles,\n helperMessage,\n helperMessageStyles,\n labelRequired,\n labelRequiredStyles,\n containerRequiredStyles,\n labelContainerStyles,\n onClickThumbnail\n },\n ref\n // eslint-disable-next-line sonarjs/cognitive-complexity\n ) => {\n const inputFileRef = useRef(null);\n const canvasRef = useRef(null);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const [fileName, setFileName] = useState('');\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const [fileExtension, setFileExtension] = useState('');\n const [pdfData, setPdfData] = useState(null);\n const [file, setFile] = useState<string>(value);\n\n useImperativeHandle(ref, () => ({\n async reuploadFile() {\n onSelectFile();\n },\n async removeFile(val) {\n setFile(val ?? '');\n },\n async previewFile() {\n try {\n const blob = await fetch(file).then((r) => r.blob());\n const fileURL = window.URL.createObjectURL(blob);\n window.open(fileURL);\n } catch {\n window.open(file);\n }\n },\n async downloadFile() {\n new JsFileDownloader({\n url: `${file}?x-request=xhr`\n }).catch(() => {\n window.open(file);\n });\n }\n }));\n\n const onSelectFile = () => {\n if (inputFileRef.current) {\n (inputFileRef.current as HTMLInputElement).click();\n }\n };\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n getNameAndExtension(e.target.files[0]);\n setFile(window.URL.createObjectURL(e.target.files[0]));\n\n onFileSelected?.(e);\n };\n\n const getNameAndExtension = (file: string | File) => {\n const name = typeof file !== 'string' ? file.name : file;\n\n const lastDot = name.lastIndexOf('.');\n\n const fileName = name.substring(0, lastDot);\n const ext = name.substring(lastDot + 1);\n\n setFileName(fileName);\n setFileExtension(ext);\n };\n\n useEffect(() => {\n const getFile = async () => {\n const reader = new FileReader();\n reader.onload = async (event) => {\n const pdfData = new Uint8Array(event.target.result as ArrayBufferLike);\n setPdfData(pdfData);\n };\n const blob = await fetch(file).then((r) => r.blob());\n reader.readAsArrayBuffer(blob);\n };\n\n if (file && type === 'document') {\n getFile();\n getNameAndExtension(file);\n } else {\n getNameAndExtension(file);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [file]);\n\n useEffect(() => {\n if (pdfData) {\n const canvas = canvasRef.current;\n if (canvas) {\n const scale = 1;\n const context = canvas.getContext('2d');\n pdfjs.getDocument(pdfData).promise.then((pdf) => {\n pdf.getPage(1).then((page) => {\n const viewport = page.getViewport({ scale });\n canvas.width = viewport.width;\n canvas.height = viewport.height;\n page.render({\n canvasContext: context,\n viewport: viewport\n });\n });\n });\n }\n }\n }, [pdfData]);\n\n return (\n <>\n <div\n className={twMerge(\n classNames(\n 'rounded-lg bg-light-whiteSolid p-2 border border-solid border-dark-solitude flex flex-col gap-y-2',\n isError && 'border-red-fireEngineRed'\n )\n )}\n >\n <div\n className={twMerge(\n 'flex flex-row items-center gap-x-1 h-4',\n classNames(\n labelContainerStyles,\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n )\n )}\n >\n <div className='flex flex-1 flex-row gap-x-1'>\n {!!label && (\n <BaseText\n label={label || ''}\n className={twMerge(\n 'text-dark-blackCoral font-normal text-[10px] line-clamp-1',\n labelStyles\n )}\n />\n )}\n {isRequired && (\n <BaseBadgeRequired\n labelRequired={labelRequired}\n labelRequiredStyles={labelRequiredStyles}\n containerRequiredStyles={containerRequiredStyles}\n />\n )}\n </div>\n {!!file && (\n <Menu as='div' className='relative inline-block'>\n <div>\n <MenuButton className='p-0 bg-transparent'>\n <Icon name='more' className='fill-dark-blackCoral w-[10px] h-[10px]' />\n </MenuButton>\n </div>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <MenuItems\n className={twMerge(\n 'absolute rounded min-w-full bg-white flex flex-col overflow-hidden border border-solid border-dark-silver right-0 z-50',\n moreItemsContainerStyles\n )}\n >\n <div className='p-0 bg-transparent overflow-auto'>\n {moreData.map((item, index) => (\n <MenuItem key={index}>\n <button\n className={twMerge(\n 'flex justify-start w-full px-4 py-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even',\n moreItemContainerStyles\n )}\n onClick={() => item.onSelectItem?.(file)}\n >\n <BaseText\n label={item.label}\n variant='small'\n className={twMerge(\n 'text-dropdownList-text-default hover:text-dropdownList-text-hover hover:font-semibold text-left',\n item.labelStyles\n )}\n />\n </button>\n </MenuItem>\n ))}\n </div>\n </MenuItems>\n </Transition>\n </Menu>\n )}\n </div>\n <div className={twMerge('relative w-[158px] h-[158px] overflow-hidden', containerStyles)}>\n <div\n className={classNames(\n 'absolute top-0 left-0 flex items-center justify-center w-full h-full bg-dark-silver rounded-lg cursor-pointer',\n file ? '-z-10' : 'z-10'\n )}\n onClick={() => {\n if (!isReadOnly) onSelectFile();\n }}\n >\n <Icon\n name={isReadOnly ? 'photo' : 'addCircleLine'}\n className='fill-light-whiteSolid w-12 h-12'\n />\n </div>\n\n <div\n className={classNames(\n 'absolute top-0 left-0 w-full h-full',\n file ? 'z-20' : 'z-0',\n onClickThumbnail ? 'cursor-pointer' : 'cursor-default'\n )}\n onClick={() => {\n onClickThumbnail?.(file);\n }}\n >\n {type === 'image' && file ? (\n <img src={file} className='w-full h-full object-cover rounded-lg' />\n ) : (\n <canvas ref={canvasRef} className='w-full h-full rounded-lg' />\n )}\n </div>\n </div>\n {helperMessage && !isError && (\n <BaseText\n label={helperMessage}\n className={twMerge(\n classNames(\n 'font-normal text-dark-bermudaGray text-[10px]',\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n ),\n helperMessageStyles\n )}\n />\n )}\n {isError && !!errorMessage && (\n <BaseText\n label={errorMessage}\n className={twMerge(\n classNames(\n 'font-normal text-red-fireEngineRed text-[10px]',\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n ),\n errorMessageStyles\n )}\n />\n )}\n </div>\n <input\n type='file'\n accept={type === 'image' ? 'image/*' : 'application/pdf'}\n ref={inputFileRef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => handleChange(e)}\n className='hidden'\n />\n </>\n );\n }\n);\n\nexport default BaseUploader;\n"],"names":["pdfjs","GlobalWorkerOptions","workerSrc","version","BaseUploader","forwardRef","value","label","labelStyles","containerStyles","onFileSelected","moreData","moreItemsContainerStyles","moreItemContainerStyles","isReadOnly","isRequired","type","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","labelRequired","labelRequiredStyles","containerRequiredStyles","labelContainerStyles","onClickThumbnail","ref","inputFileRef","useRef","canvasRef","fileName","setFileName","useState","fileExtension","setFileExtension","pdfData","setPdfData","file","setFile","useImperativeHandle","reuploadFile","onSelectFile","removeFile","val","previewFile","blob","fetch","then","r","fileURL","window","URL","createObjectURL","open","_a","downloadFile","JsFileDownloader","url","catch","current","click","getNameAndExtension","name","lastDot","lastIndexOf","substring","ext","useEffect","__awaiter","reader","FileReader","onload","event","Uint8Array","target","result","readAsArrayBuffer","canvas","scale","context","getContext","getDocument","promise","pdf","getPage","page","viewport","getViewport","width","height","render","canvasContext","_jsxs","jsxs","_Fragment","Fragment","children","Object","assign","className","twMerge","classNames","extractClasses","undefined","_jsx","BaseText","BaseBadgeRequired","Menu","as","MenuButton","jsx","Icon","Transition","leave","leaveFrom","leaveTo","MenuItems","map","item","index","MenuItem","onClick","onSelectItem","call","variant","src","accept","onChange","e","files","handleChange"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BaseUploader.js","sources":["../../../../src/components/Uploader/BaseUploader.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';\nimport classNames from 'classnames';\nimport JsFileDownloader from 'js-file-downloader';\nimport {\n ChangeEvent,\n forwardRef,\n Fragment,\n useEffect,\n useImperativeHandle,\n useRef,\n useState\n} from 'react';\nimport { pdfjs } from 'react-pdf';\nimport { twMerge } from 'tailwind-merge';\n\nimport extractClasses from '../../utils/extractClasses';\nimport { BaseBadgeRequired } from '../Badge';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport { BaseUploaderInterface, BaseUploaderRefInterface } from './BaseUploader.type';\n\npdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;\n\nconst BaseUploader = forwardRef<BaseUploaderRefInterface, BaseUploaderInterface>(\n (\n {\n value,\n label,\n labelStyles,\n containerStyles,\n onFileSelected,\n moreData,\n moreItemsContainerStyles,\n moreItemContainerStyles,\n isReadOnly,\n isRequired,\n type = 'image',\n isError,\n errorMessage,\n errorMessageStyles,\n helperMessage,\n helperMessageStyles,\n labelRequired,\n labelRequiredStyles,\n containerRequiredStyles,\n labelContainerStyles,\n onClickThumbnail,\n onClickUpload\n },\n ref\n // eslint-disable-next-line sonarjs/cognitive-complexity\n ) => {\n const inputFileRef = useRef(null);\n const canvasRef = useRef(null);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const [fileName, setFileName] = useState('');\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const [fileExtension, setFileExtension] = useState('');\n const [pdfData, setPdfData] = useState(null);\n const [file, setFile] = useState<string>(value);\n\n useImperativeHandle(ref, () => ({\n async reuploadFile() {\n onSelectFile();\n },\n async removeFile(val) {\n setFile(val ?? '');\n },\n async previewFile() {\n try {\n const blob = await fetch(file).then((r) => r.blob());\n const fileURL = window.URL.createObjectURL(blob);\n window.open(fileURL);\n } catch {\n window.open(file);\n }\n },\n async downloadFile() {\n new JsFileDownloader({\n url: `${file}?x-request=xhr`\n }).catch(() => {\n window.open(file);\n });\n }\n }));\n\n const onSelectFile = () => {\n if (onClickUpload) {\n onClickUpload();\n } else if (inputFileRef.current) {\n (inputFileRef.current as HTMLInputElement).click();\n }\n };\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n getNameAndExtension(e.target.files[0]);\n setFile(window.URL.createObjectURL(e.target.files[0]));\n\n onFileSelected?.(e);\n };\n\n const getNameAndExtension = (file: string | File) => {\n const name = typeof file !== 'string' ? file.name : file;\n\n const lastDot = name.lastIndexOf('.');\n\n const fileName = name.substring(0, lastDot);\n const ext = name.substring(lastDot + 1);\n\n setFileName(fileName);\n setFileExtension(ext);\n };\n\n useEffect(() => {\n const getFile = async () => {\n const reader = new FileReader();\n reader.onload = async (event) => {\n const pdfData = new Uint8Array(event.target.result as ArrayBufferLike);\n setPdfData(pdfData);\n };\n const blob = await fetch(file).then((r) => r.blob());\n reader.readAsArrayBuffer(blob);\n };\n\n if (file && type === 'document') {\n getFile();\n getNameAndExtension(file);\n } else {\n getNameAndExtension(file);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [file]);\n\n useEffect(() => {\n if (pdfData) {\n const canvas = canvasRef.current;\n if (canvas) {\n const scale = 1;\n const context = canvas.getContext('2d');\n pdfjs.getDocument(pdfData).promise.then((pdf) => {\n pdf.getPage(1).then((page) => {\n const viewport = page.getViewport({ scale });\n canvas.width = viewport.width;\n canvas.height = viewport.height;\n page.render({\n canvasContext: context,\n viewport: viewport\n });\n });\n });\n }\n }\n }, [pdfData]);\n\n return (\n <>\n <div\n className={twMerge(\n classNames(\n 'rounded-lg bg-light-whiteSolid p-2 border border-solid border-dark-solitude flex flex-col gap-y-2',\n isError && 'border-red-fireEngineRed'\n )\n )}\n >\n <div\n className={twMerge(\n 'flex flex-row items-center gap-x-1 h-4',\n classNames(\n labelContainerStyles,\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n )\n )}\n >\n <div className='flex flex-1 flex-row gap-x-1'>\n {!!label && (\n <BaseText\n label={label || ''}\n className={twMerge(\n 'text-dark-blackCoral font-normal text-[10px] line-clamp-1',\n labelStyles\n )}\n />\n )}\n {isRequired && (\n <BaseBadgeRequired\n labelRequired={labelRequired}\n labelRequiredStyles={labelRequiredStyles}\n containerRequiredStyles={containerRequiredStyles}\n />\n )}\n </div>\n {!!file && (\n <Menu as='div' className='relative inline-block'>\n <div>\n <MenuButton className='p-0 bg-transparent'>\n <Icon name='more' className='fill-dark-blackCoral w-[10px] h-[10px]' />\n </MenuButton>\n </div>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <MenuItems\n className={twMerge(\n 'absolute rounded min-w-full bg-white flex flex-col overflow-hidden border border-solid border-dark-silver right-0 z-50',\n moreItemsContainerStyles\n )}\n >\n <div className='p-0 bg-transparent overflow-auto'>\n {moreData.map((item, index) => (\n <MenuItem key={index}>\n <button\n className={twMerge(\n 'flex justify-start w-full px-4 py-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even',\n moreItemContainerStyles\n )}\n onClick={() => item.onSelectItem?.(file)}\n >\n <BaseText\n label={item.label}\n variant='small'\n className={twMerge(\n 'text-dropdownList-text-default hover:text-dropdownList-text-hover hover:font-semibold text-left',\n item.labelStyles\n )}\n />\n </button>\n </MenuItem>\n ))}\n </div>\n </MenuItems>\n </Transition>\n </Menu>\n )}\n </div>\n <div className={twMerge('relative w-[158px] h-[158px] overflow-hidden', containerStyles)}>\n <div\n className={classNames(\n 'absolute top-0 left-0 flex items-center justify-center w-full h-full bg-dark-silver rounded-lg cursor-pointer',\n file ? '-z-10' : 'z-10'\n )}\n onClick={() => {\n if (!isReadOnly) onSelectFile();\n }}\n >\n <Icon\n name={isReadOnly ? 'photo' : 'addCircleLine'}\n className='fill-light-whiteSolid w-12 h-12'\n />\n </div>\n\n <div\n className={classNames(\n 'absolute top-0 left-0 w-full h-full',\n file ? 'z-20' : 'z-0',\n onClickThumbnail ? 'cursor-pointer' : 'cursor-default'\n )}\n onClick={() => {\n onClickThumbnail?.(file);\n }}\n >\n {type === 'image' && file ? (\n <img src={file} className='w-full h-full object-cover rounded-lg' />\n ) : (\n <canvas ref={canvasRef} className='w-full h-full rounded-lg' />\n )}\n </div>\n </div>\n {helperMessage && !isError && (\n <BaseText\n label={helperMessage}\n className={twMerge(\n classNames(\n 'font-normal text-dark-bermudaGray text-[10px]',\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n ),\n helperMessageStyles\n )}\n />\n )}\n {isError && !!errorMessage && (\n <BaseText\n label={errorMessage}\n className={twMerge(\n classNames(\n 'font-normal text-red-fireEngineRed text-[10px]',\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n ),\n errorMessageStyles\n )}\n />\n )}\n </div>\n <input\n type='file'\n accept={type === 'image' ? 'image/*' : 'application/pdf'}\n ref={inputFileRef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => handleChange(e)}\n className='hidden'\n />\n </>\n );\n }\n);\n\nexport default BaseUploader;\n"],"names":["pdfjs","GlobalWorkerOptions","workerSrc","version","BaseUploader","forwardRef","value","label","labelStyles","containerStyles","onFileSelected","moreData","moreItemsContainerStyles","moreItemContainerStyles","isReadOnly","isRequired","type","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","labelRequired","labelRequiredStyles","containerRequiredStyles","labelContainerStyles","onClickThumbnail","onClickUpload","ref","inputFileRef","useRef","canvasRef","fileName","setFileName","useState","fileExtension","setFileExtension","pdfData","setPdfData","file","setFile","useImperativeHandle","reuploadFile","onSelectFile","removeFile","val","previewFile","blob","fetch","then","r","fileURL","window","URL","createObjectURL","open","_a","downloadFile","JsFileDownloader","url","catch","current","click","getNameAndExtension","name","lastDot","lastIndexOf","substring","ext","useEffect","__awaiter","reader","FileReader","onload","event","Uint8Array","target","result","readAsArrayBuffer","canvas","scale","context","getContext","getDocument","promise","pdf","getPage","page","viewport","getViewport","width","height","render","canvasContext","_jsxs","jsxs","_Fragment","Fragment","children","Object","assign","className","twMerge","classNames","extractClasses","undefined","_jsx","BaseText","BaseBadgeRequired","Menu","as","MenuButton","jsx","Icon","Transition","leave","leaveFrom","leaveTo","MenuItems","map","item","index","MenuItem","onClick","onSelectItem","call","variant","src","accept","onChange","e","files","handleChange"],"mappings":"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"}
|
|
@@ -25,6 +25,7 @@ export type BaseUploaderInterface = {
|
|
|
25
25
|
helperMessageStyles?: string;
|
|
26
26
|
labelContainerStyles?: string;
|
|
27
27
|
onClickThumbnail?: (val: string) => void;
|
|
28
|
+
onClickUpload?: () => void;
|
|
28
29
|
} & BaseBadgeRequiredInterface & React.HTMLProps<HTMLInputElement>;
|
|
29
30
|
export type BaseUploaderRefInterface = {
|
|
30
31
|
reuploadFile: () => void;
|