From cb5f8e5a8c5339b85cf16e60176741bc76de4bf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Wed, 18 May 2022 15:27:10 +0200
Subject: [PATCH] [ivette] introduce sandbox to test q-split
---
ivette/src/ivette/sandbox.tsx | 85 ++++++++++++++++++++++++++++++++++-
1 file changed, 83 insertions(+), 2 deletions(-)
diff --git a/ivette/src/ivette/sandbox.tsx b/ivette/src/ivette/sandbox.tsx
index 23d89ccb4c5..f4f6c9e685c 100644
--- a/ivette/src/ivette/sandbox.tsx
+++ b/ivette/src/ivette/sandbox.tsx
@@ -27,8 +27,89 @@
/* -------------------------------------------------------------------------- */
import React from 'react';
-import { Label } from 'dome/controls/labels';
+import * as Ctrl from 'dome/controls/buttons';
+import * as Disp from 'dome/controls/displays';
+import * as Box from 'dome/layout/boxes';
+import { QSplit, QPane } from 'dome/layout/qsplit';
+
+function Quarter(props: {
+ value?: string,
+ setValue: (v: string | undefined) => void,
+}): JSX.Element {
+ const onChange = (s?: string): void => props.setValue(s ? s : undefined);
+ return (
+ <Ctrl.Select value={props.value ?? ''} onChange={onChange}>
+ <option value=''>-</option>
+ <option value='A'>A</option>
+ <option value='B'>B</option>
+ <option value='C'>C</option>
+ <option value='D'>D</option>
+ <option value='E'>E</option>
+ </Ctrl.Select>
+ );
+}
+
+function Pane(props: { id: string, background: string }): JSX.Element {
+ const { id, background } = props;
+ const css: React.CSSProperties = {
+ width: '100%',
+ height: '100%',
+ textAlign: 'center',
+ background,
+ };
+ return (
+ <QPane id={id}><div style={css}>{id}</div></QPane>
+ );
+}
+
+const round = (r: number): number => Math.round(r * 100) / 100;
export default function Sandbox(): JSX.Element {
- return <Label>Hello World!</Label>;
+ const [H, setH] = React.useState(0.5);
+ const [V, setV] = React.useState(0.5);
+ const [A, setA] = React.useState<string | undefined>('A');
+ const [B, setB] = React.useState<string | undefined>('B');
+ const [C, setC] = React.useState<string | undefined>('C');
+ const [D, setD] = React.useState<string | undefined>('D');
+ const setPosition = React.useCallback((h, v) => {
+ setH(h);
+ setV(v);
+ }, [setH, setV]);
+ const reset = (): void => {
+ setPosition(0.5, 0.5);
+ setA('A');
+ setB('B');
+ setC('C');
+ setD('D');
+ };
+ const clear = (): void => {
+ setPosition(0.5, 0.5);
+ setA(undefined);
+ setB(undefined);
+ setC(undefined);
+ setD(undefined);
+ };
+ return (
+ <Box.Vfill>
+ <Box.Hfill>
+ <Ctrl.Button icon='RELOAD' label='Reset' onClick={reset} />
+ <Ctrl.Button icon='TRASH' label='Clear' onClick={clear} />
+ <Box.Space />
+ <Disp.LCD>H={round(H)} V={round(V)}</Disp.LCD>
+ <Box.Space />
+ <Quarter value={A} setValue={setA} />
+ <Quarter value={B} setValue={setB} />
+ <Quarter value={C} setValue={setC} />
+ <Quarter value={D} setValue={setD} />
+ </Box.Hfill>
+ <QSplit A={A} B={B} C={C} D={D} H={H} V={V}
+ setPosition={setPosition}>
+ <Pane id='A' background='lightblue' />
+ <Pane id='B' background='lightgreen' />
+ <Pane id='C' background='#8282db' />
+ <Pane id='D' background='coral' />
+ <Pane id='E' background='red' />
+ </QSplit>
+ </Box.Vfill >
+ );
}
--
GitLab