@soul-refiner/design-system 2.4.6 → 2.4.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.
|
@@ -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"),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:
|
|
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:r,onDrop:o,size:i="large",subtext:d,text:u,type:n,height:s,validation:c,validationMessage:p})=>{const f=React__default.default.useRef(null),[_,g]=React__default.default.useState(!1),[m,h]=React__default.default.useState([]);l={color:l,size:validations.heightLookup[n].icon[i]},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 x=(e,t)=>{0===e.length&&o?o(t):h(e)},$=()=>{f.current&&(f.current.value="")};return React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(modal.Modal,{controlledOpen:0<m.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:_,$height:s||validations.heightLookup[n].height[i],$size:i,onDragOver:e=>{e.preventDefault(),g(!0)},onDragLeave:e=>{e.preventDefault(),g(!1)},onDrop:async e=>{h([]),e.preventDefault(),g(!1);var t,e=e.dataTransfer.files,a=new DataTransfer,l=[];for(const r of Array.from(e))!c||0===(t=await validations.validateFile(r,c)).length?a.items.add(r):l.push(...t);e=f.current;null!==e&&(e.files=a.files,0<l.length?x(l,e.files):x([],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[n],"small"!==i&&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%;"},u,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:r,accept:validations.fileTypeLookup[n],name:"Files",onChange:async()=>{h([]);var e=f.current;if(e?.files?.length){var t=[];for(const l of e.files)if(c){var a=await validations.validateFile(l,c);if(0<a.length){t.push(...a);break}}x(t,e.files)}}}))),React__default.default.Children.map(a,e=>React__default.default.isValidElement(e)?React__default.default.cloneElement(e,{handleUpload:()=>f.current?.click(),removeFileFromState:$}):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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";require("../../../common/date.js");var file=require("../../../utils/file.js");const validateFormat=async(i,e)=>e&&!e.includes(i.type)?"format":null,validateSize=async(i,e)=>e&&i.size>file.toBytes(e)?"size":null,validateDimensions=async(i,a)=>new Promise(e=>{const t=new Image;t.src=URL.createObjectURL(i),t.onload=()=>{var i=[];a.width&&t.width!==a.width&&i.push("width"),a.height&&t.height!==a.height&&i.push("height"),a.maxWidth&&t.width>a.maxWidth&&i.push("maxWidth"),a.minWidth&&t.width<a.minWidth&&i.push("minWidth"),a.maxHeight&&t.height>a.maxHeight&&i.push("maxHeight"),a.minHeight&&t.height<a.minHeight&&i.push("minHeight"),URL.revokeObjectURL(t.src),e(i)},t.onerror=()=>{URL.revokeObjectURL(t.src),e(["error loading image"])}});exports.validateDimensions=validateDimensions,exports.validateFormat=validateFormat,exports.validateSize=validateSize;
|
|
1
|
+
"use strict";require("../../../common/date.js");var file=require("../../../utils/file.js");const validateFormat=async(i,e)=>e&&!e.includes(i.type)?"format":null,validateSize=async(i,e)=>e&&i.size>file.toBytes(e)?"size":null,validateDimensions=async(i,a)=>new Promise(e=>{const t=new Image;t.src=URL.createObjectURL(i),t.onload=()=>{var i=[];a.width&&t.width!==a.width&&i.push("width"),a.height&&t.height!==a.height&&i.push("height"),a.maxWidth&&t.width>a.maxWidth&&i.push("maxWidth"),a.minWidth&&t.width<a.minWidth&&i.push("minWidth"),a.maxHeight&&t.height>a.maxHeight&&i.push("maxHeight"),a.minHeight&&t.height<a.minHeight&&i.push("minHeight"),URL.revokeObjectURL(t.src),e(i)},t.onerror=()=>{URL.revokeObjectURL(t.src),e(["error loading image"])}}),validateFile=async(i,e)=>{var t=[],{format:a,size:o}=e,o=(a&&(a=await validateFormat(i,a))&&t.push(a),o&&(a=await validateSize(i,o))&&t.push(a),await validateDimensions(i,e));return t.push(...o),t},heightLookup={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}}},fileTypeLookup={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,"};exports.fileTypeLookup=fileTypeLookup,exports.heightLookup=heightLookup,exports.validateDimensions=validateDimensions,exports.validateFile=validateFile,exports.validateFormat=validateFormat,exports.validateSize=validateSize;
|
|
@@ -27,3 +27,15 @@ export interface DimensionOptions {
|
|
|
27
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
28
|
*/
|
|
29
29
|
export declare const validateDimensions: (file: File, options: DimensionOptions) => Promise<string[]>;
|
|
30
|
+
export declare const validateFile: (file: File, validation: {
|
|
31
|
+
format?: string[];
|
|
32
|
+
size?: string;
|
|
33
|
+
} & DimensionOptions) => Promise<string[]>;
|
|
34
|
+
export type UploadTypes = 'audio' | 'image' | 'file' | 'video';
|
|
35
|
+
export declare const heightLookup: Record<UploadTypes, Record<'height' | 'icon', Record<'small' | 'fit-content' | 'large', number>>>;
|
|
36
|
+
export declare const fileTypeLookup: {
|
|
37
|
+
video: string;
|
|
38
|
+
audio: string;
|
|
39
|
+
image: string;
|
|
40
|
+
file: string;
|
|
41
|
+
};
|