mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-14 05:24:04 +00:00
* portals all the way * CI for mobile JS * whoops * do install plz * Solid JSX on mobile * Cleanup portals + file structure * wip * reset explorer changes * fail * make it work betterer * cleanup * It's not a `useEffect` bug, no way * Fix `useSubscribeToThemeStore`
74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { WithSolid } from '@sd/client';
|
|
|
|
import { Demo3, demoCtx, SolidSquare } from './demo.solid';
|
|
|
|
export function Demo(props: { demo: string }) {
|
|
const [count, setCount] = useState(0);
|
|
const ctx = demoCtx.useContext();
|
|
|
|
return (
|
|
<div className="bg-green-500 p-2">
|
|
<demoCtx.Provider value="set in react">
|
|
<>
|
|
<button onClick={() => setCount((count) => count + 1)} className="border p-1">
|
|
Click me
|
|
</button>
|
|
<div>Hello from React: {count}</div>
|
|
<div>{props.demo}</div>
|
|
<div>CTX: {ctx()}</div>
|
|
<Inner />
|
|
<WithSolid root={Demo3} demo={count.toString()} />
|
|
</>
|
|
</demoCtx.Provider>
|
|
<WithSolid root={Demo3} demo={count.toString()} />
|
|
<SolidSquareManager />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Inner() {
|
|
const ctx = demoCtx.useContext();
|
|
return null;
|
|
}
|
|
|
|
export function Demo2() {
|
|
return null;
|
|
}
|
|
|
|
export function ReactSquare(props: { x: number; y: number }) {
|
|
return (
|
|
<div
|
|
className="absolute z-[999999999] border bg-red-500"
|
|
style={{ width: '30px', height: '30px', left: props.x + 'px', top: props.y + 'px' }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function SolidSquareManager() {
|
|
const [pos, setPos] = useState({ x: 75, y: 0, enabled: true });
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(
|
|
() =>
|
|
setPos((p) => {
|
|
if (!p.enabled) return p;
|
|
if (p.x > window.innerWidth) return { x: 100, y: 0, enabled: true };
|
|
if (p.y > window.innerHeight) return { x: 0, y: 0, enabled: true };
|
|
return { x: p.x + 1, y: p.y + 1, enabled: true };
|
|
}),
|
|
10
|
|
);
|
|
return () => clearInterval(interval);
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<button onClick={() => setPos((p) => ({ ...p, enabled: !p.enabled }))}>
|
|
Toggle Solid (blue)
|
|
</button>
|
|
<WithSolid root={SolidSquare} x={pos.x} y={pos.y} />
|
|
</>
|
|
);
|
|
}
|