@soul-refiner/design-system 2.7.18 → 2.7.19
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,7 +1,7 @@
|
|
|
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:r,onDrop:
|
|
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"),paperclip=require("../../../icons/basic/paperclip.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:i,size:o="large",subtext:d,text:u,type:n,showOnlyUploadButton:c=!1,height:s,width:p,validation:f,validationMessage:_})=>{const m=React__default.default.useRef(null),[g,h]=React__default.default.useState(!1),[x,$]=React__default.default.useState([]);l={color:l,size:validations.heightLookup[n].icon[o]},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 y=(e,t)=>{0===e.length&&i?i(t):$(e)},R=()=>{m.current&&(m.current.value="")};return React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(modal.Modal,{controlledOpen:0<x.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:()=>$([])},"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},_)))),React__default.default.createElement(Wrapper,{$background:e,$borderColor:t,$draggingOver:g,$height:s||validations.heightLookup[n].height[o],$width:p??0,$size:o,onDragOver:e=>{e.preventDefault(),h(!0)},onDragLeave:e=>{e.preventDefault(),h(!1)},onDrop:async e=>{$([]),e.preventDefault(),h(!1);var t,e=e.dataTransfer.files,a=new DataTransfer,l=[];for(const r of Array.from(e))!f||0===(t=await validations.validateFile(r,f)).length?a.items.add(r):l.push(...t);e=m.current;null!==e&&(e.files=a.files,0<l.length?y(l,e.files):y([],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; };"},c?React__default.default.createElement(button.Button,{icon:React__default.default.createElement(paperclip.Paperclip,null),onClick:()=>m.current?.click(),size:"small",type:"secondary"},u):React__default.default.createElement(React__default.default.Fragment,null,l[n],"small"!==o&&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:()=>m.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:m,type:"file",multiple:r,accept:validations.fileTypeLookup[n],name:"Files",onChange:async()=>{$([]);var e=m.current;if(e?.files?.length){var t=[];for(const l of e.files)if(f){var a=await validations.validateFile(l,f);if(0<a.length){t.push(...a);break}}y(t,e.files)}}}))),React__default.default.Children.map(a,e=>React__default.default.isValidElement(e)?React__default.default.cloneElement(e,{handleUpload:()=>m.current?.click(),removeFileFromState:R}):e))},Wrapper=styled.styled.div`
|
|
3
3
|
box-sizing: border-box;
|
|
4
|
-
width: ${({$size:e})=>"large"===e?"100%":"fit-content"===e?"fit-content":"134px"};
|
|
4
|
+
width: ${({$size:e,$width:t})=>t?t+"px":"large"===e?"100%":"fit-content"===e?"fit-content":"134px"};
|
|
5
5
|
height: ${({$height:e})=>e}px;
|
|
6
6
|
padding: ${({$size:e})=>"large"===e?"64px 32px":"fit-content"===e?"64px 16px":"initial"};
|
|
7
7
|
background-color: ${({$background:e})=>colors.COLORS.includes(e)?`var(--color-${e})`:e};
|
|
@@ -15,12 +15,14 @@ export interface UploadProps extends React.PropsWithChildren {
|
|
|
15
15
|
subtext?: string;
|
|
16
16
|
text?: React.ReactNode;
|
|
17
17
|
type: UploadTypes;
|
|
18
|
+
showOnlyUploadButton?: boolean;
|
|
18
19
|
height?: number;
|
|
20
|
+
width?: number;
|
|
19
21
|
validation?: {
|
|
20
22
|
format?: string[];
|
|
21
23
|
size?: string;
|
|
22
24
|
} & DimensionOptions;
|
|
23
25
|
validationMessage?: string;
|
|
24
26
|
}
|
|
25
|
-
export declare const Upload: ({ background, borderColor, children, iconColor, multiple, onDrop, size, subtext, text, type, height, validation, validationMessage, }: UploadProps) => React.JSX.Element;
|
|
27
|
+
export declare const Upload: ({ background, borderColor, children, iconColor, multiple, onDrop, size, subtext, text, type, showOnlyUploadButton, height, width, validation, validationMessage, }: UploadProps) => React.JSX.Element;
|
|
26
28
|
export {};
|