Mirrors
/
vizality
mirror of https://github.com/vizality/vizality
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update my Test playground

Browse Source
pull/95/head
dperolio 2 years ago
parent c3185d703a
commit db530900d5
No known key found for this signature in database
GPG Key ID: 4191689562D51409
1 changed files with 60 additions and 93 deletions
Show Stats Download Patch File Download Diff File

153
renderer/src/builtins/dashboard/pages/Test.jsx
Unescape View File

@ -1,42 +1,76 @@
import React, { memo, useState, useEffect } from 'react';
import React, { memo, useState, useEffect, useRef, createRef, useMemo } from 'react';
import { UserProfile, UserPopout, Icon, SearchBar, KeyboardShortcut, KeybindRecorder, Text, HeaderBarContainer, CarouselWithPreview, ApplicationStoreListingCarousel, FormNotice, Notice, NumberBadge, TextBadge, IconBadge, ProgressBar } from '@vizality/components';
import { getModuleByDisplayName, getModule } from '@vizality/webpack';
import { UserProfile, UserPopout, Icon, SearchBar, KeyboardShortcut, KeybindRecorder, Text, HeaderBarContainer, FormNotice, Notice, Avatar, NumberBadge, TextBadge, IconBadge, ProgressBar, ErrorBoundary } from '@vizality/components';
import { getModuleByDisplayName, getModule, getModulesByKeyword } from '@vizality/webpack';
const TransitionGroup = getModuleByDisplayName('TransitionGroup');
const SlideIn = getModuleByDisplayName('SlideIn');
const { getCurrentUser } = getModule('getCurrentUser');
// const { PremiumPaymentGuildAnimation } = getModule('PremiumPaymentGuildAnimation');
// const { usePaymentModalAnimationScene } = getModule('usePaymentModalAnimationScene');
/*
* const { PremiumPaymentGuildAnimation } = getModule('PremiumPaymentGuildAnimation');
* const { usePaymentModalAnimationScene } = getModule('usePaymentModalAnimationScene');
*/
export default memo(() => {
const [ completed, setCompleted ] = useState(0);
const refs = useRef([]);
const [ showOrHide, setShowOrHide ] = useState([]);
useEffect(() => {
refs.current.forEach(ref => {
setShowOrHide(oldArray => [ ...oldArray, getComputedStyle(ref)?.backgroundImage?.startsWith('url') ? 'block' : 'none' ]);
});
setInterval(() => setCompleted(Math.floor(Math.random() * 100) + 1), 2000);
}, []);
const imageClasses = [];
getModulesByKeyword('image').forEach(mdl => {
Object.keys(mdl).forEach(m => {
if (typeof m === 'string' && m.toLowerCase().includes('image')) {
if (typeof mdl[m] === 'string') {
imageClasses.push(mdl[m]);
}
}
});
});
return (
<>
<ErrorBoundary>
<div class='discord-images-test' style={ { columnCount: 5, columnGap: 40, columnWidth: 200 } }>
{imageClasses.map((image, index) => (
<div class='discord-images-test-image-wrapper' style={ { position: 'relative', width: 200, height: 200, breakInside: 'avoid-column', display: showOrHide[index], marginBottom: 40 } }>
<div className={image} ref={element => refs.current[index] = element} style={
{
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain',
width: '100%',
height: '100%',
position: 'relative',
inset: 'unset'
}
} />
</div>
))}
</div>
{/* e.WAITING = "WAITING",
e.PURCHASING = "PURCHASING",
e.FAIL = "FAIL",
e.COMPLETED = "COMPLETED" */}
e.PURCHASING = "PURCHASING",
e.FAIL = "FAIL",
e.COMPLETED = "COMPLETED" */}
{/* <PremiumPaymentGuildAnimation
nextScene={
usePaymentModalAnimationScene({
purchaseState: 'PURCHASING',
currentStep: 'confirm',
initialScene: PremiumPaymentGuildAnimation.Scenes.ENTRY,
purchaseScene: PremiumPaymentGuildAnimation.Scenes.STARS,
errorScene: PremiumPaymentGuildAnimation.Scenes.ERROR,
successScene: PremiumPaymentGuildAnimation.Scenes.SUCCESS
})[0]
}
onScenePlay={PremiumPaymentGuildAnimation.getNextScene}
pauseWhileUnfocused={false}
/> */}
nextScene={
usePaymentModalAnimationScene({
purchaseState: 'PURCHASING',
currentStep: 'confirm',
initialScene: PremiumPaymentGuildAnimation.Scenes.ENTRY,
purchaseScene: PremiumPaymentGuildAnimation.Scenes.STARS,
errorScene: PremiumPaymentGuildAnimation.Scenes.ERROR,
successScene: PremiumPaymentGuildAnimation.Scenes.SUCCESS
})[0]
}
onScenePlay={PremiumPaymentGuildAnimation.getNextScene}
pauseWhileUnfocused={false}
/> */}
<ProgressBar completed={completed} />
<SearchBar query='bob' size={SearchBar.Sizes.SMALL} />
<SearchBar query='bob' size={SearchBar.Sizes.MEDIUM} />
@ -45,7 +79,7 @@ export default memo(() => {
<SearchBar query='bob' isLoading />
{/* "icon", "color", "shape", "disableColor", "className" */}
<NumberBadge count='40' color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
<IconBadge icon={() => <Icon name='Activity' />} color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
<IconBadge icon={() => <Icon name='activity' />} color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
<TextBadge text='Coolio' color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
<Notice color={Notice.Colors.DANGER} />
<UserPopout user={getCurrentUser()} />
@ -53,7 +87,7 @@ export default memo(() => {
<HeaderBarContainer>
<Text>I like pie</Text>
</HeaderBarContainer>
<TransitionGroup>
<TransitionGroup style={{ position: 'relative', height: 100 }}>
<SlideIn>
<FormNotice
className='poo'
@ -63,73 +97,6 @@ export default memo(() => {
/>
</SlideIn>
</TransitionGroup>
<ApplicationStoreListingCarousel
className='poog'
autoplayInterval={8000}
pageSize='small'
paused='false'
items={[
{
src: 'vizality://plugins/example-plugin-settings/screenshots/preview-1.png',
type: 1
},
{
src: 'vizality://plugins/copy-raw-message/screenshots/preview-1.png',
type: 1
},
{
src: 'vizality://plugins/channel-members-activity-icons/screenshots/preview-1.png',
type: 1
},
{
src: 'vizality://plugins/heyzere/screenshots/preview-1.png',
type: 1
}
]}
/>
{/* <CarouselWithPreview
align={CarouselWithPreview.Alignment.CENTER}
animate={true}
currentIndex={1}
edgeItems={0}
gutter={0}
height={360}
hideOverflow={true}
width='100%'
itemSize={{
height: 495,
margin: 20,
width: 880
}}
items={[
{
height: 720,
src: 'https://cdn.discordapp.com/app-assets/557494559257526272/store/557680775231963146.mp4',
thumbnailSrc: 'https://cdn.discordapp.com/app-assets/557494559257526272/store/557680775231963146.png?size=1024',
type: 3,
width: 1280
},
{
height: 720,
src: 'https://cdn.discordapp.com/app-assets/557494559257526272/store/557581646803763205.png?size=1024',
type: 1,
width: 1280
},
{
height: 720,
src: 'https://cdn.discordapp.com/app-assets/557494559257526272/store/557681753020563464.png?size=1024',
type: 1,
width: 1280
},
{
height: 720,
src: 'https://cdn.discordapp.com/app-assets/557494559257526272/store/557681895693877258.png?size=1024',
type: 1,
width: 1280
}
]}
renderItem={handleRender}
/> */}
<Avatar
isTyping={true}
isMobile={true}
@ -141,11 +108,11 @@ export default memo(() => {
<video autoPlay loop autoPictureInPicture controls={false}>
<source src="https://www.kelp.agency/wp-content/uploads/2020/06/orbit_1_1.webm" type="video/webm" />
</video>
<KeybindRecorder defaultValue={[]} />
<KeybindRecorder defaultValue={[ [ 0, 162 ], [ 0, 66 ] ]} />
<KeyboardShortcut shortcut='ctrl+p' />
<KeyboardShortcut shortcut='ctrl+l' />
<KeyboardShortcut shortcut='ctrl+a' />
<KeyboardShortcut shortcut='ctrl+y' />
</>
</ErrorBoundary>
);
});

Write Preview
Loading…
Cancel
Save