@soul-refiner/design-system 2.2.6 → 2.2.7
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/dist/components/actions/upload/upload.js +1 -1
- package/dist/components/actions/upload/validations.js +1 -0
- package/dist/src/components/actions/upload/upload.d.ts +8 -1
- package/dist/src/components/actions/upload/validations.d.ts +22 -0
- package/dist/src/utils/function.d.ts +1 -0
- package/dist/utils/function.js +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js"),box=require("../../atoms/box/box.js"),button=require("../button/button.js"),
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js"),box=require("../../atoms/box/box.js"),button=require("../button/button.js"),upload_audio=require("../../../icons/special/upload_audio.js"),upload_file=require("../../../icons/special/upload_file.js"),upload_image=require("../../../icons/special/upload_image.js"),upload_video=require("../../../icons/special/upload_video.js"),modal=require("../../surfaces/modal/modal.js"),heading=(require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js")),paragraph=require("../../atoms/typography/paragraph.js"),validations=(require("../../atoms/typography/typography.js"),require("./validations.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Upload=({background:e="hue-blue-3",borderColor:t="hue-blue-2",children:a,iconColor:l="primary-blue-2",multiple:i,onDrop:o,size:r="large",subtext:d,text:n,type:u,height:c,validation:s,validationMessage:p})=>{const f=React__default.default.useRef(null),[m,g]=React__default.default.useState(!1);const[_,h]=React__default.default.useState([]);var x={audio:{icon:{"fit-content":28,large:28,small:28},height:{"fit-content":281,large:281,small:75}},file:{icon:{"fit-content":68,large:68,small:57},height:{"fit-content":281,large:281,small:75}},image:{icon:{"fit-content":162,large:162,small:57},height:{"fit-content":281,large:281,small:75}},video:{icon:{"fit-content":140,large:140,small:57},height:{"fit-content":336,large:562,small:75}}},l={color:l,size:x[u].icon[r]},l={audio:React__default.default.createElement(upload_audio.UploadAudio,{...l}),file:React__default.default.createElement(upload_file.UploadFile,{...l}),image:React__default.default.createElement(upload_image.UploadImage,{...l}),video:React__default.default.createElement(upload_video.UploadVideo,{...l})};const $=(e,t)=>{0===e.length&&o?o(t):h(e)},v=()=>{f.current&&(f.current.value="")};return React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(modal.Modal,{controlledOpen:0<_.length},React__default.default.createElement(modal.Modal.Content,{footer:React__default.default.createElement(box.Box,{$display:"flex",$justify:"center",$gap:16,sx:"position: relative; width: 100%;"},React__default.default.createElement(button.Button,{fluid:!0,size:"small",type:"primary",onClick:()=>h([])},"Close")),header:React__default.default.createElement(heading.H,{$bold:!0,$color:"grey-2",$fontSize:20},"Can't read files")},React__default.default.createElement(box.Box,{$align:"flex-start",$display:"flex",$dir:"column",$gap:32,sx:"width: 500px"},React__default.default.createElement(paragraph.P,{$textClampLines:10},p)))),React__default.default.createElement(Wrapper,{$background:e,$borderColor:t,$draggingOver:m,$height:c||x[u].height[r],$size:r,onDragOver:e=>{e.preventDefault(),g(!0)},onDragLeave:e=>{e.preventDefault(),g(!1)},onDrop:e=>{e.preventDefault(),g(!1);e=e.dataTransfer.files;const t=new DataTransfer;Array.from(e).forEach(e=>{t.items.add(e)});e=f.current;null!==e&&(e.files=t.files,o)&&o(e.files)}},React__default.default.createElement(box.Box,{$align:"center",$borderRadius:"medium",$dir:"column",$display:"flex",$gap:16,$justify:"center",sx:"height: 100%; width: 100%; svg { flex-shrink: 0; };"},l[u],"small"!==r&&React__default.default.createElement(box.Box,{$align:"center",$dir:"column",$display:"flex",$gap:8,$justify:"center",sx:"width: 100%;"},React__default.default.createElement(paragraph.P,{$textAlign:"center",sx:"width: 100%;"},n,React__default.default.createElement(button.Button,{onClick:()=>f.current?.click(),size:"small",sx:"display: inline;",type:"text"},"Browse")),React__default.default.createElement(paragraph.P,{$textAlign:"center",sx:"width: 100%;"},d)),React__default.default.createElement(Input,{"data-testid":"dropzone-upload-input",ref:f,type:"file",multiple:i,accept:{video:"video/*",audio:"audio/*",image:"image/*",file:".xlsx, .xls, .doc, .docx, .ppt, .pptx, .txt, .pdf, application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, text/plain, application/pdf,"}[u],name:"Files",onChange:async()=>{var e=f.current;if(e?.files?.length){for(const r of e.files){var t=[];if(s){var{width:a,height:l,format:i,size:o}=s,i=await validations.validateFormat(r,i),i=(i&&t.push(i),await validations.validateSize(r,o)),o=(i&&t.push(i),await validations.validateDimensions(r,a,l));if(0<o.length&&t.push(...o),0<t.length)return void $(t,e.files)}}$([],e.files)}}}))),React__default.default.Children.map(a,e=>React__default.default.isValidElement(e)?React__default.default.cloneElement(e,{handleUpload:()=>f.current?.click(),removeFileFromState:v}):e))},Wrapper=styled.styled.div`
|
|
3
3
|
box-sizing: border-box;
|
|
4
4
|
width: ${({$size:e})=>"large"===e?"100%":"fit-content"===e?"fit-content":"134px"};
|
|
5
5
|
height: ${({$height:e})=>e}px;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var _function=require("../../../utils/function.js");const validateFormat=async(e,t)=>t&&!t.includes(e.type)?"format":null,validateSize=async(e,t)=>t&&e.size>await _function.toBytes(t)?"size":null,validateDimensions=async(i,a,s)=>new Promise(async e=>{if(a&&s){const t=new Image;t.src=URL.createObjectURL(i),t.onload=()=>{t.width>a||t.height>s?(URL.revokeObjectURL(t.src),e(["width","height"])):(URL.revokeObjectURL(t.src),e([]))}}else e([])});exports.validateDimensions=validateDimensions,exports.validateFormat=validateFormat,exports.validateSize=validateSize;
|
|
@@ -15,6 +15,13 @@ export interface UploadProps extends React.PropsWithChildren {
|
|
|
15
15
|
text?: React.ReactNode;
|
|
16
16
|
type: UploadTypes;
|
|
17
17
|
height?: number;
|
|
18
|
+
validation?: {
|
|
19
|
+
width: number;
|
|
20
|
+
height: number;
|
|
21
|
+
format: string[];
|
|
22
|
+
size: string;
|
|
23
|
+
};
|
|
24
|
+
validationMessage?: string;
|
|
18
25
|
}
|
|
19
|
-
export declare const Upload: ({ background, borderColor, children, iconColor, multiple, onDrop, size, subtext, text, type, height, }: UploadProps) => React.JSX.Element;
|
|
26
|
+
export declare const Upload: ({ background, borderColor, children, iconColor, multiple, onDrop, size, subtext, text, type, height, validation, validationMessage, }: UploadProps) => React.JSX.Element;
|
|
20
27
|
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Asynchronously validates the format of a given file against an array of acceptable MIME types.
|
|
3
|
+
* @param file The file object to be validated.
|
|
4
|
+
* @param format An array of strings representing acceptable MIME types.
|
|
5
|
+
* @returns A promise that resolves with 'format' if the file's MIME type is not in the provided list; otherwise, resolves with null.
|
|
6
|
+
*/
|
|
7
|
+
export declare const validateFormat: (file: File, format: string[]) => Promise<"format" | null>;
|
|
8
|
+
/**
|
|
9
|
+
* Asynchronously validates the size of a given file against a specified limit.
|
|
10
|
+
* @param file The file object to be validated.
|
|
11
|
+
* @param size A string representing the maximum file size (e.g., "10MB").
|
|
12
|
+
* @returns A promise that resolves with 'size' if the file exceeds the specified size; otherwise, resolves with null.
|
|
13
|
+
*/
|
|
14
|
+
export declare const validateSize: (file: File, size: string) => Promise<"size" | null>;
|
|
15
|
+
/**
|
|
16
|
+
* Asynchronously validates the dimensions of a given image file.
|
|
17
|
+
* @param file The image file object to be validated.
|
|
18
|
+
* @param width The maximum allowed width.
|
|
19
|
+
* @param height The maximum allowed height.
|
|
20
|
+
* @returns A promise that resolves with an array containing 'width' and/or 'height' if the dimensions exceed the specified limits; otherwise, resolves with an empty array.
|
|
21
|
+
*/
|
|
22
|
+
export declare const validateDimensions: (file: File, width: number, height: number) => Promise<string[]>;
|
package/dist/utils/function.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const callAll=(...
|
|
1
|
+
"use strict";const callAll=(...e)=>(...t)=>e.forEach(e=>e&&e(...t)),sizeMap={kb:1024,mb:1048576,gb:1073741824,tb:1099511627776};function toBytes(e){e=e.toLowerCase().replace(/\s+/g,""),e=new RegExp(/^(\d+(\.\d+)?)(kb|mb|gb|tb)$/).exec(e);if(!e)throw new Error("Invalid size format. Please ensure the format is like '1.5 mb', '2GB', etc.");var[,e,,t]=e,e=parseFloat(e),t=sizeMap[t];if(t)return e*t;throw new Error(`Unknown unit of size. Supported units are: ${Object.keys(sizeMap).join(", ")}.`)}exports.callAll=callAll,exports.toBytes=toBytes;
|