@soul-refiner/design-system 2.7.17 → 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};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),pause_solid=require("../../../icons/audio_video/pause_solid.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),time=require("../../../utils/time.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-h5-audio-player/lib/styles.css");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const PlaylistItem=({darkMode:e=!0,duration:t,onPause:a,onPlay:r,playing:l,isPaidUser:o,progress:i,thumbnail:d,title:u})=>{var n=l?a:r,s=e?"white":"grey-3";return React__default.default.createElement(ItemWrapper,{$darkMode:e,$playing:l,onClick:n},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:d,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 1 1 250px; width: 250px;"},o&&(l?React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(pause_solid.PauseSolid,{color:s,size:24})):React__default.default.createElement(Button,{onClick:r},React__default.default.createElement(play_solid.PlaySolid,{color:s,size:24}))),React__default.default.createElement(paragraph.P,{$bold:!0,$color:s,$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},u))),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 3; margin-left: auto;"},React__default.default.createElement(paragraph.P,{$color:e?"grey-9":"grey-3",$fontSize:10,$lineHeight:14,$sx:"flex: 0; width: fit-content; min-width: 56px;"},time.secondsToTimestamp(t)),React__default.default.createElement(progressBar.AudioProgressBar,{duration:t||0,progress:l?i:0})))},ItemWrapper=styled__default.default.button`
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),pause_solid=require("../../../icons/audio_video/pause_solid.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),time=require("../../../utils/time.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-h5-audio-player/lib/styles.css");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const PlaylistItem=({darkMode:e=!0,duration:t,onPause:a,onPlay:r,playing:l,isPaidUser:o,progress:i,thumbnail:d,title:u})=>{var n=l?a:r,s=e?"white":"grey-3";return React__default.default.createElement(ItemWrapper,{$darkMode:e,$playing:l,onClick:n},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:d,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 1 1 250px; width: 250px;"},o&&(l?React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(pause_solid.PauseSolid,{color:s,size:24})):React__default.default.createElement(Button,{onClick:r},React__default.default.createElement(play_solid.PlaySolid,{color:s,size:24}))),React__default.default.createElement(paragraph.P,{$bold:!0,$color:s,$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},u))),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 3; margin-left: auto;"},React__default.default.createElement(paragraph.P,{$color:e?"grey-9":"grey-3",$fontSize:10,$lineHeight:14,$sx:"flex: 0; width: fit-content; min-width: 56px;"},time.secondsToTimestamp(t)),React__default.default.createElement(progressBar.AudioProgressBar,{sx:"margin-right: auto;",duration:t||0,progress:l?i:0})))},ItemWrapper=styled__default.default.button`
|
|
3
3
|
padding: 16px 32px;
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: row;
|
|
@@ -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 {};
|