hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

6
packages/react/src/components/MiniRepl.jsx
View file

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

2
tutorial/MiniRepl.jsx
View file

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