@soul-refiner/design-system 2.2.6 → 2.2.8
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 +7 -1
- package/dist/src/components/actions/upload/validations.d.ts +29 -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 i of e.files){var t=[];if(s){var{format:a,size:l}=s,l=(a&&(a=await validations.validateFormat(i,a))&&t.push(a),l&&(a=await validations.validateSize(i,l))&&t.push(a),await validations.validateDimensions(i,s));if(0<l.length&&t.push(...l),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(i,t)=>t&&!t.includes(i.type)?"format":null,validateSize=async(i,t)=>t&&i.size>_function.toBytes(t)?"size":null,validateDimensions=async(i,a)=>new Promise(t=>{const e=new Image;e.src=URL.createObjectURL(i),e.onload=()=>{var i=[];a.width&&e.width!==a.width&&i.push("width"),a.height&&e.height!==a.height&&i.push("height"),a.maxWidth&&e.width>a.maxWidth&&i.push("maxWidth"),a.minWidth&&e.width<a.minWidth&&i.push("minWidth"),a.maxHeight&&e.height>a.maxHeight&&i.push("maxHeight"),a.minHeight&&e.height<a.minHeight&&i.push("minHeight"),URL.revokeObjectURL(e.src),t(i)},e.onerror=()=>{URL.revokeObjectURL(e.src),t(["error loading image"])}});exports.validateDimensions=validateDimensions,exports.validateFormat=validateFormat,exports.validateSize=validateSize;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { COLORS } from '../../../common/colors';
|
|
3
|
+
import { DimensionOptions } from './validations';
|
|
3
4
|
type UploadTypes = 'audio' | 'image' | 'file' | 'video';
|
|
4
5
|
export interface UploadProps extends React.PropsWithChildren {
|
|
5
6
|
/**
|
|
@@ -15,6 +16,11 @@ export interface UploadProps extends React.PropsWithChildren {
|
|
|
15
16
|
text?: React.ReactNode;
|
|
16
17
|
type: UploadTypes;
|
|
17
18
|
height?: number;
|
|
19
|
+
validation?: {
|
|
20
|
+
format?: string[];
|
|
21
|
+
size?: string;
|
|
22
|
+
} & DimensionOptions;
|
|
23
|
+
validationMessage?: string;
|
|
18
24
|
}
|
|
19
|
-
export declare const Upload: ({ background, borderColor, children, iconColor, multiple, onDrop, size, subtext, text, type, height, }: UploadProps) => React.JSX.Element;
|
|
25
|
+
export declare const Upload: ({ background, borderColor, children, iconColor, multiple, onDrop, size, subtext, text, type, height, validation, validationMessage, }: UploadProps) => React.JSX.Element;
|
|
20
26
|
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
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
|
+
export interface DimensionOptions {
|
|
16
|
+
width?: number;
|
|
17
|
+
height?: number;
|
|
18
|
+
minWidth?: number;
|
|
19
|
+
maxWidth?: number;
|
|
20
|
+
minHeight?: number;
|
|
21
|
+
maxHeight?: number;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Asynchronously validates the dimensions of a given image file against specified constraints.
|
|
25
|
+
* @param file The image file object to be validated.
|
|
26
|
+
* @param options The dimension constraints including minimum and maximum widths and heights.
|
|
27
|
+
* @returns A promise that resolves with an array of strings identifying which dimension limits were exceeded or not met, if any; otherwise, resolves with an empty array.
|
|
28
|
+
*/
|
|
29
|
+
export declare const validateDimensions: (file: File, options: DimensionOptions) => 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;
|