uangcermat-web-toolkit-v2 0.2.11 → 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.
- package/README.md +8 -0
- package/build/src/components/SwitchPicker/BaseSwitchPicker.d.ts +1 -1
- package/build/src/components/SwitchPicker/BaseSwitchPicker.js +1 -1
- package/build/src/components/SwitchPicker/BaseSwitchPicker.js.map +1 -1
- package/build/src/components/SwitchPicker/BaseSwitchPicker.type.d.ts +1 -0
- package/build/src/components/Uploader/BaseUploader.js +1 -1
- package/build/src/components/Uploader/BaseUploader.js.map +1 -1
- package/build/src/components/Uploader/BaseUploader.type.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
1
|
# UangCermat Web Toolkit v2
|
|
2
2
|
|
|
3
3
|
TODO: add jest and commit lint
|
|
4
|
+
|
|
5
|
+
WARN : If you get an error below
|
|
6
|
+
|
|
7
|
+
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
|
|
8
|
+
|
|
9
|
+
then increase max_old_space_size by modify dev script:
|
|
10
|
+
|
|
11
|
+
"dev": "NODE_OPTIONS=--max_old_space_size=8129 yarn storybook", //use 8gb of ram
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { BaseSwitchPickerInterface } from './BaseSwitchPicker.type';
|
|
2
|
-
declare const BaseSwitchPicker: ({ containerStyles, iconName, iconStyles, itemContainerStyles, itemsContainerStyles, tableLabel, tableStyles, position, isAutoFlip, selectedItems, onSelectItem, data, activeItemTextStyles }: BaseSwitchPickerInterface) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const BaseSwitchPicker: ({ containerStyles, iconName, iconStyles, itemContainerStyles, itemsContainerStyles, tableLabel, tableStyles, position, isAutoFlip, selectedItems, onSelectItem, data, activeItemTextStyles, inactiveItemTextStyles }: BaseSwitchPickerInterface) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default BaseSwitchPicker;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),s=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),t=require("../../../node_modules/classnames/index.js"),l=require("react"),i=require("../Icon/Icon.js"),a=require("../Switch/BaseSwitch.js"),r=require("../Text/BaseText.js");require("../Text/Text.js");var o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),n=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=({containerStyles:c,iconName:x,iconStyles:u,itemContainerStyles:b,itemsContainerStyles:m,tableLabel:j,tableStyles:f,position:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),s=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),t=require("../../../node_modules/classnames/index.js"),l=require("react"),i=require("../Icon/Icon.js"),a=require("../Switch/BaseSwitch.js"),r=require("../Text/BaseText.js");require("../Text/Text.js");var o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),n=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=({containerStyles:c,iconName:x,iconStyles:u,itemContainerStyles:b,itemsContainerStyles:m,tableLabel:j,tableStyles:f,position:g,isAutoFlip:h,selectedItems:p,onSelectItem:w,data:v,activeItemTextStyles:S,inactiveItemTextStyles:O})=>e.jsx(n.Listbox,Object.assign({multiple:!0},{children:e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(s.Float,Object.assign({placement:g,flip:h},{children:[e.jsx(n.ListboxButton,Object.assign({className:o.twMerge("bg-light-aliceBlue border-none p-0 w-[30px] h-[30px] flex items-center justify-center rounded",c)},{children:e.jsx("div",Object.assign({className:"w-full h-full flex items-center justify-center"},{children:e.jsx(i,{name:x||"configuration",className:o.twMerge("fill-dark-blackCoral w-5 h-5",u)})}))})),e.jsx(d.Transition,Object.assign({as:l.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(n.ListboxOptions,Object.assign({className:o.twMerge("rounded min-w-[224px] bg-white flex flex-col overflow-hidden p-3 list-none",m)},{children:e.jsxs("div",Object.assign({className:"flex flex-col border border-solid border-dark-solitude rounded overflow-hidden"},{children:[e.jsx("div",Object.assign({className:"p-2 border-b-[1px]"},{children:e.jsx(r.default,{label:j||"Show Column",className:"text-[10px] font-normal text-dark-gumbo"})})),e.jsx("div",Object.assign({className:o.twMerge("flex flex-1 flex-col overflow-auto scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",f)},{children:v.map(((s,l)=>e.jsx(n.ListboxOption,Object.assign({className:o.twMerge("relative cursor-default select-none p-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even",b),value:s},{children:({active:l})=>{const i=p.some((e=>e.id===s.id));return e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-1 cursor-pointer text-xs text-dropdownList-text-default"},{children:[e.jsx(a,{isSelected:i,isDisabled:s.isDisabled,customStyles:s.switchCustomStyles,onClickSwitch:()=>{w(i?p.filter((e=>e.id!==s.id)):[...p,s])}}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(r.default,{label:s.name,className:t.default("text-xs text-dark-blackCoral",`${s.isDisabled&&"text-dropdownList-text-default cursor-not-allowed"}`,`${l&&!s.isDisabled?o.twMerge("font-semibold text-dropdownList-text-hover",S):o.twMerge("font-normal",O)}`,i&&!s.isDisabled&&s.labelCustomStyles,i&&s.isDisabled&&"text-dropdownList-text-disable")})}))]}))}}),`list-box-option-${l}`)))}))]}))}))}))]}))}))}));
|
|
2
2
|
//# sourceMappingURL=BaseSwitchPicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSwitchPicker.js","sources":["../../../../src/components/SwitchPicker/BaseSwitchPicker.tsx"],"sourcesContent":["import {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Transition\n} from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { Icon } from '../Icon';\nimport BaseSwitch from '../Switch/BaseSwitch';\nimport { BaseText } from '../Text';\nimport { BaseSwitchPickerInterface } from './BaseSwitchPicker.type';\n\nconst BaseSwitchPicker = ({\n containerStyles,\n iconName,\n iconStyles,\n itemContainerStyles,\n itemsContainerStyles,\n tableLabel,\n tableStyles,\n position,\n isAutoFlip,\n selectedItems,\n onSelectItem,\n data,\n activeItemTextStyles\n}: BaseSwitchPickerInterface) => {\n const scrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n return (\n <Listbox multiple>\n <div className='relative inline-block'>\n <Float placement={position} flip={isAutoFlip}>\n <ListboxButton\n className={twMerge(\n 'bg-light-aliceBlue border-none p-0 w-[30px] h-[30px] flex items-center justify-center rounded',\n containerStyles\n )}\n >\n <div className='w-full h-full flex items-center justify-center'>\n <Icon\n name={iconName || 'configuration'}\n className={twMerge('fill-dark-blackCoral w-5 h-5', iconStyles)}\n />\n </div>\n </ListboxButton>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <ListboxOptions\n className={twMerge(\n 'rounded min-w-[224px] bg-white flex flex-col overflow-hidden p-3 list-none',\n itemsContainerStyles\n )}\n >\n <div className='flex flex-col border border-solid border-dark-solitude rounded overflow-hidden'>\n <div className='p-2 border-b-[1px]'>\n <BaseText\n label={tableLabel || 'Show Column'}\n className='text-[10px] font-normal text-dark-gumbo'\n />\n </div>\n <div\n className={twMerge(\n `flex flex-1 flex-col overflow-auto ${scrollbarStyles}`,\n tableStyles\n )}\n >\n {data.map((item, index) => (\n <ListboxOption\n key={`list-box-option-${index}`}\n className={twMerge(\n 'relative cursor-default select-none p-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even',\n itemContainerStyles\n )}\n value={item}\n >\n {({ active }) => {\n const selected = selectedItems.some((i) => i.id === item.id);\n return (\n <div className='flex flex-row items-center gap-x-1 cursor-pointer text-xs text-dropdownList-text-default'>\n <BaseSwitch\n isSelected={selected}\n isDisabled={item.isDisabled}\n customStyles={item.switchCustomStyles}\n onClickSwitch={() => {\n if (selected) {\n onSelectItem(selectedItems.filter((i) => i.id !== item.id));\n } else {\n onSelectItem([...selectedItems, item]);\n }\n }}\n />\n\n <div className='flex flex-1'>\n <BaseText\n label={item.name}\n className={classNames(\n 'text-xs',\n `${\n item.isDisabled &&\n 'text-dropdownList-text-default cursor-not-allowed'\n }`,\n `${\n active && !item.isDisabled\n ? twMerge(\n 'font-semibold text-dropdownList-text-hover',\n activeItemTextStyles\n )\n : 'font-normal'\n }`,\n selected && !item.isDisabled && item.labelCustomStyles,\n selected && item.isDisabled && 'text-dropdownList-text-disable'\n )}\n />\n </div>\n </div>\n );\n }}\n </ListboxOption>\n ))}\n </div>\n </div>\n </ListboxOptions>\n </Transition>\n </Float>\n </div>\n </Listbox>\n );\n};\n\nexport default BaseSwitchPicker;\n"],"names":["containerStyles","iconName","iconStyles","itemContainerStyles","itemsContainerStyles","tableLabel","tableStyles","position","isAutoFlip","selectedItems","onSelectItem","data","activeItemTextStyles","_jsx","Listbox","Object","assign","multiple","jsx","className","_jsxs","jsxs","Float","placement","flip","children","ListboxButton","twMerge","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","BaseText","label","map","item","index","ListboxOption","value","active","selected","some","i","id","BaseSwitch","isSelected","isDisabled","customStyles","switchCustomStyles","onClickSwitch","filter","classNames","labelCustomStyles"],"mappings":"omBAiByB,EACvBA,kBACAC,WACAC,aACAC,sBACAC,uBACAC,aACAC,cACAC,WACAC,aACAC,gBACAC,eACAC,OACAC,
|
|
1
|
+
{"version":3,"file":"BaseSwitchPicker.js","sources":["../../../../src/components/SwitchPicker/BaseSwitchPicker.tsx"],"sourcesContent":["import {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Transition\n} from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { Icon } from '../Icon';\nimport BaseSwitch from '../Switch/BaseSwitch';\nimport { BaseText } from '../Text';\nimport { BaseSwitchPickerInterface } from './BaseSwitchPicker.type';\n\nconst BaseSwitchPicker = ({\n containerStyles,\n iconName,\n iconStyles,\n itemContainerStyles,\n itemsContainerStyles,\n tableLabel,\n tableStyles,\n position,\n isAutoFlip,\n selectedItems,\n onSelectItem,\n data,\n activeItemTextStyles,\n inactiveItemTextStyles\n}: BaseSwitchPickerInterface) => {\n const scrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n return (\n <Listbox multiple>\n <div className='relative inline-block'>\n <Float placement={position} flip={isAutoFlip}>\n <ListboxButton\n className={twMerge(\n 'bg-light-aliceBlue border-none p-0 w-[30px] h-[30px] flex items-center justify-center rounded',\n containerStyles\n )}\n >\n <div className='w-full h-full flex items-center justify-center'>\n <Icon\n name={iconName || 'configuration'}\n className={twMerge('fill-dark-blackCoral w-5 h-5', iconStyles)}\n />\n </div>\n </ListboxButton>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <ListboxOptions\n className={twMerge(\n 'rounded min-w-[224px] bg-white flex flex-col overflow-hidden p-3 list-none',\n itemsContainerStyles\n )}\n >\n <div className='flex flex-col border border-solid border-dark-solitude rounded overflow-hidden'>\n <div className='p-2 border-b-[1px]'>\n <BaseText\n label={tableLabel || 'Show Column'}\n className='text-[10px] font-normal text-dark-gumbo'\n />\n </div>\n <div\n className={twMerge(\n `flex flex-1 flex-col overflow-auto ${scrollbarStyles}`,\n tableStyles\n )}\n >\n {data.map((item, index) => (\n <ListboxOption\n key={`list-box-option-${index}`}\n className={twMerge(\n 'relative cursor-default select-none p-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even',\n itemContainerStyles\n )}\n value={item}\n >\n {({ active }) => {\n const selected = selectedItems.some((i) => i.id === item.id);\n return (\n <div className='flex flex-row items-center gap-x-1 cursor-pointer text-xs text-dropdownList-text-default'>\n <BaseSwitch\n isSelected={selected}\n isDisabled={item.isDisabled}\n customStyles={item.switchCustomStyles}\n onClickSwitch={() => {\n if (selected) {\n onSelectItem(selectedItems.filter((i) => i.id !== item.id));\n } else {\n onSelectItem([...selectedItems, item]);\n }\n }}\n />\n\n <div className='flex flex-1'>\n <BaseText\n label={item.name}\n className={classNames(\n 'text-xs text-dark-blackCoral',\n `${\n item.isDisabled &&\n 'text-dropdownList-text-default cursor-not-allowed'\n }`,\n `${\n active && !item.isDisabled\n ? twMerge(\n 'font-semibold text-dropdownList-text-hover',\n activeItemTextStyles\n )\n : twMerge('font-normal', inactiveItemTextStyles)\n }`,\n selected && !item.isDisabled && item.labelCustomStyles,\n selected && item.isDisabled && 'text-dropdownList-text-disable'\n )}\n />\n </div>\n </div>\n );\n }}\n </ListboxOption>\n ))}\n </div>\n </div>\n </ListboxOptions>\n </Transition>\n </Float>\n </div>\n </Listbox>\n );\n};\n\nexport default BaseSwitchPicker;\n"],"names":["containerStyles","iconName","iconStyles","itemContainerStyles","itemsContainerStyles","tableLabel","tableStyles","position","isAutoFlip","selectedItems","onSelectItem","data","activeItemTextStyles","inactiveItemTextStyles","_jsx","Listbox","Object","assign","multiple","jsx","className","_jsxs","jsxs","Float","placement","flip","children","ListboxButton","twMerge","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","BaseText","label","map","item","index","ListboxOption","value","active","selected","some","i","id","BaseSwitch","isSelected","isDisabled","customStyles","switchCustomStyles","onClickSwitch","filter","classNames","labelCustomStyles"],"mappings":"omBAiByB,EACvBA,kBACAC,WACAC,aACAC,sBACAC,uBACAC,aACAC,cACAC,WACAC,aACAC,gBACAC,eACAC,OACAC,uBACAC,4BAMEC,EAAAA,IAACC,EAAAA,QAAQC,OAAAC,OAAA,CAAAC,uBACPJ,EAAKK,IAAA,MAAAH,OAAAC,OAAA,CAAAG,UAAU,mCACbC,EAACC,KAAAC,EAAKA,MAACP,OAAAC,OAAA,CAAAO,UAAWjB,EAAUkB,KAAMjB,GAChC,CAAAkB,SAAA,CAAAZ,EAAAA,IAACa,EAAAA,cAAaX,OAAAC,OAAA,CACZG,UAAWQ,EAAOA,QAChB,gGACA5B,cAGFc,MAAK,MAAAE,OAAAC,OAAA,CAAAG,UAAU,kDAAgD,CAAAM,SAC7DZ,EAAAA,IAACe,GACCC,KAAM7B,GAAY,gBAClBmB,UAAWQ,EAAAA,QAAQ,+BAAgC1B,WAIzDY,EAAAK,IAACY,aACCf,OAAAC,OAAA,CAAAe,GAAIC,WACJC,MAAM,kCACNC,UAAU,cACVC,QAAQ,aAER,CAAAV,SAAAZ,EAAAA,IAACuB,EAAcA,eAAArB,OAAAC,OAAA,CACbG,UAAWQ,EAAOA,QAChB,6EACAxB,IAGF,CAAAsB,SAAAL,EAAAC,KAAA,MAAAN,OAAAC,OAAA,CAAKG,UAAU,kFACb,CAAAM,SAAA,CAAAZ,EAAAA,IAAA,MAAAE,OAAAC,OAAA,CAAKG,UAAU,sBACb,CAAAM,SAAAZ,MAACwB,EAAAA,QACC,CAAAC,MAAOlC,GAAc,cACrBe,UAAU,+CAGdN,EACEK,IAAA,MAAAH,OAAAC,OAAA,CAAAG,UAAWQ,EAAOA,QAChB,sKACAtB,IACD,CAAAoB,SAEAf,EAAK6B,KAAI,CAACC,EAAMC,IACf5B,MAAC6B,EAAAA,cAEC3B,OAAAC,OAAA,CAAAG,UAAWQ,EAAOA,QAChB,kHACAzB,GAEFyC,MAAOH,GAEN,CAAAf,SAAA,EAAGmB,aACF,MAAMC,EAAWrC,EAAcsC,MAAMC,GAAMA,EAAEC,KAAOR,EAAKQ,KACzD,OACE5B,EAAAC,KAAA,MAAAN,OAAAC,OAAA,CAAKG,UAAU,4FAA0F,CAAAM,SAAA,CACvGZ,EAACK,IAAA+B,EACC,CAAAC,WAAYL,EACZM,WAAYX,EAAKW,WACjBC,aAAcZ,EAAKa,mBACnBC,cAAe,KAEX7C,EADEoC,EACWrC,EAAc+C,QAAQR,GAAMA,EAAEC,KAAOR,EAAKQ,KAE1C,IAAIxC,EAAegC,GACjC,IAIL3B,MAAA,MAAAE,OAAAC,OAAA,CAAKG,UAAU,eACb,CAAAM,SAAAZ,EAAAK,IAACmB,UAAQ,CACPC,MAAOE,EAAKX,KACZV,UAAWqC,EAAAA,QACT,+BACA,GACEhB,EAAKW,YACL,sDAEF,GACEP,IAAWJ,EAAKW,WACZxB,EAAOA,QACL,6CACAhB,GAEFgB,UAAQ,cAAef,KAE7BiC,IAAaL,EAAKW,YAAcX,EAAKiB,kBACrCZ,GAAYL,EAAKW,YAAc,0CAKvC,IA/CC,mBAAmBV"}
|
|
@@ -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;
|