elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-14 07:08:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

MiniRepl: hideOutsideView flag

Browse Source
This commit is contained in:
Felix Roos 2022-05-19 08:39:51 +02:00
parent 44ba1f85c3
commit ae81f6d573
4 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/dist/index.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

6
packages/react/dist/index.es.js vendored
View File

@ -532,7 +532,7 @@ function Icon({ type }) {
}[type]);
}
function MiniRepl({ tune, defaultSynth }) {
function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
tune,
defaultSynth,
@ -544,11 +544,11 @@ function MiniRepl({ tune, defaultSynth }) {
});
const wasVisible = useRef();
const show = useMemo(() => {
if (isVisible) {
if (isVisible || !hideOutsideView) {
wasVisible.current = true;
}
return isVisible || wasVisible.current;
}, [isVisible]);
}, [isVisible, hideOutsideView]);
useHighlighting({ view, pattern, active: cycle.started });
return /* @__PURE__ */ React.createElement("div", {
className: styles.container,

8
packages/react/src/components/MiniRepl.jsx
View File

@ -8,7 +8,7 @@ import 'tailwindcss/tailwind.css';
import styles from './MiniRepl.module.css';
import { Icon } from './Icon';
export function MiniRepl({ tune, defaultSynth }) {
export function MiniRepl({ tune, defaultSynth, hideOutsideView = false }) {
const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
tune,
defaultSynth,
@ -20,11 +20,11 @@ export function MiniRepl({ tune, defaultSynth }) {
});
const wasVisible = useRef();
const show = useMemo(() => {
if (isVisible) {
if (isVisible || !hideOutsideView) {
wasVisible.current = true;
}
return isVisible || wasVisible.current;
}, [isVisible]);
}, [isVisible, hideOutsideView]);
useHighlighting({ view, pattern, active: cycle.started });
return (
<div className={styles.container} ref={ref}>
@ -39,7 +39,7 @@ export function MiniRepl({ tune, defaultSynth }) {
</div>
{error && <div className={styles.error}>{error.message}</div>}
</div>
<div className={styles.body}>
<div className={styles.body} >
{show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />}
</div>
</div>

2
tutorial/MiniRepl.jsx
View File

@ -21,5 +21,5 @@ evalScope(
);
export function MiniRepl({ tune }) {
return <_MiniRepl tune={tune} defaultSynth={defaultSynth} />;
return <_MiniRepl tune={tune} defaultSynth={defaultSynth} hideOutsideView={true} />;
}