From a2479aca82891e0c612cb0e9a322c643f2a5849d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Wed, 16 Mar 2022 17:03:19 +0100
Subject: [PATCH] [ivette] more types in dome/layout
---
ivette/src/dome/renderer/layout/boxes.tsx | 51 ++++++++++---------
ivette/src/dome/renderer/layout/dispatch.tsx | 14 +++--
ivette/src/dome/renderer/layout/splitters.tsx | 24 ++++-----
3 files changed, 45 insertions(+), 44 deletions(-)
diff --git a/ivette/src/dome/renderer/layout/boxes.tsx b/ivette/src/dome/renderer/layout/boxes.tsx
index 685be04352a..f0cc5d41d80 100644
--- a/ivette/src/dome/renderer/layout/boxes.tsx
+++ b/ivette/src/dome/renderer/layout/boxes.tsx
@@ -20,8 +20,6 @@
/* */
/* ************************************************************************ */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-
// --------------------------------------------------------------------------
// --- Box Layout
// --------------------------------------------------------------------------
@@ -78,7 +76,7 @@ const makeBox = (
boxClasses: string,
props: DivProps,
morestyle?: React.CSSProperties,
-) => {
+): JSX.Element => {
const { children, className, style, ...others } = props;
const allClasses = classes(className, boxClasses);
const allStyles = styles(style, morestyle);
@@ -97,37 +95,43 @@ const makeBox = (
Horizontal box (extends horizontally, no overflow).
*/
export const Hbox =
- (props: DivProps) => makeBox('dome-xBoxes-hbox dome-xBoxes-box', props);
+ (props: DivProps): JSX.Element =>
+ makeBox('dome-xBoxes-hbox dome-xBoxes-box', props);
/**
Vertical box (extends vertically, no overflow).
-*/
+ */
export const Vbox =
- (props: DivProps) => makeBox('dome-xBoxes-vbox dome-xBoxes-box', props);
+ (props: DivProps): JSX.Element =>
+ makeBox('dome-xBoxes-vbox dome-xBoxes-box', props);
/**
Compact Horizontal box (fixed dimensions, no overflow).
-*/
+ */
export const Hpack =
- (props: DivProps) => makeBox('dome-xBoxes-hbox dome-xBoxes-pack', props);
+ (props: DivProps): JSX.Element =>
+ makeBox('dome-xBoxes-hbox dome-xBoxes-pack', props);
/**
Compact Vertical box (fixed dimensions, no overflow).
-*/
+ */
export const Vpack =
- (props: DivProps) => makeBox('dome-xBoxes-vbox dome-xBoxes-pack', props);
+ (props: DivProps): JSX.Element =>
+ makeBox('dome-xBoxes-vbox dome-xBoxes-pack', props);
/**
Horizontally filled box (fixed height, maximal width, no overflow).
-*/
+ */
export const Hfill =
- (props: DivProps) => makeBox('dome-xBoxes-hbox dome-xBoxes-fill', props);
+ (props: DivProps): JSX.Element =>
+ makeBox('dome-xBoxes-hbox dome-xBoxes-fill', props);
/**
Vertically filled box (fixed width, maximal height, no overflow).
-*/
+ */
export const Vfill =
- (props: DivProps) => makeBox('dome-xBoxes-vbox dome-xBoxes-fill', props);
+ (props: DivProps): JSX.Element =>
+ makeBox('dome-xBoxes-vbox dome-xBoxes-fill', props);
// --------------------------------------------------------------------------
// --- Scrolling & Spacing
@@ -135,21 +139,22 @@ export const Vfill =
/**
Scrolling container.
-*/
+ */
export const Scroll =
- (props: DivProps) => makeBox('dome-xBoxes-scroll dome-container', props);
+ (props: DivProps): JSX.Element =>
+ makeBox('dome-xBoxes-scroll dome-container', props);
/**
Rigid space between items in a box.
-*/
+ */
export const Space =
- (props: DivProps) => makeBox('dome-xBoxes-space', props);
+ (props: DivProps): JSX.Element => makeBox('dome-xBoxes-space', props);
/**
Extensible space between items in a box.
-*/
+ */
export const Filler =
- (props: DivProps) => makeBox('dome-xBoxes-filler', props);
+ (props: DivProps): JSX.Element => makeBox('dome-xBoxes-filler', props);
// --------------------------------------------------------------------------
// --- Grids
@@ -168,8 +173,8 @@ export interface GridProps extends DivProps { columns?: string }
properties.
Example: `<Grid columns="25% auto auto"> ... </Grid>`
-*/
-export const Grid = (props: GridProps) => {
+ */
+export const Grid = (props: GridProps): JSX.Element => {
const { columns, ...others } = props;
return makeBox('dome-xBoxes-grid', others, { gridTemplateColumns: columns });
};
@@ -197,7 +202,7 @@ export interface FolderProps {
Foldable (vertical, packed) box.
The head label is clickable to fold/unfold its contents.
*/
-export const Folder = (props: FolderProps) => {
+export const Folder = (props: FolderProps): JSX.Element => {
const {
settings,
defaultUnfold = false,
diff --git a/ivette/src/dome/renderer/layout/dispatch.tsx b/ivette/src/dome/renderer/layout/dispatch.tsx
index 7cecf5b9ae6..6dddb841351 100644
--- a/ivette/src/dome/renderer/layout/dispatch.tsx
+++ b/ivette/src/dome/renderer/layout/dispatch.tsx
@@ -20,8 +20,6 @@
/* */
/* ************************************************************************ */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-
// --------------------------------------------------------------------------
// --- Dispatch Layout
// --------------------------------------------------------------------------
@@ -97,7 +95,7 @@ export interface ElementProps {
Multiple definitions of the same element might produce
unpredictable results.
*/
-export function DefineElement(props: ElementProps) {
+export function DefineElement(props: ElementProps): JSX.Element | null {
React.useEffect(() => {
const item = getItem(props.id);
item.update(props.children);
@@ -122,14 +120,14 @@ export interface RenderProps {
of the item, or `undefined` if there is no identifier or no
corresponding `<DefineElement />` currently mounted.
*/
-export function RenderElement(props: RenderProps) {
+export function RenderElement(props: RenderProps): JSX.Element {
const [age, setAge] = React.useState(0);
const { id, children } = props;
const item = id ? getItem(id) : undefined;
React.useEffect(() => {
if (item) {
const { event } = item;
- const trigger = () => setAge(age + 1);
+ const trigger = (): void => setAge(age + 1);
event.on(trigger);
return () => event.off(trigger);
}
@@ -137,9 +135,9 @@ export function RenderElement(props: RenderProps) {
}, [age, item]);
if (item) item.rendered = true;
if (typeof (children) === 'function')
- return children(item?.content);
- const content = item?.content || children;
- return content;
+ return <>{children(item?.content)}</>;
+ const content = item?.content || children || null;
+ return <>{content}</>;
}
// --------------------------------------------------------------------------
diff --git a/ivette/src/dome/renderer/layout/splitters.tsx b/ivette/src/dome/renderer/layout/splitters.tsx
index a5fb604eafb..e56f47dd345 100644
--- a/ivette/src/dome/renderer/layout/splitters.tsx
+++ b/ivette/src/dome/renderer/layout/splitters.tsx
@@ -20,8 +20,6 @@
/* */
/* ************************************************************************ */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-
// --------------------------------------------------------------------------
// --- Splitters
// --------------------------------------------------------------------------
@@ -129,7 +127,7 @@ type CSS = {
split: string;
};
-const getFlexCSS = (hsplit: boolean, fold: boolean) => (
+const getFlexCSS = (hsplit: boolean, fold: boolean): string => (
hsplit ? (fold ? HFOLD : HPANE) : (fold ? VFOLD : VPANE)
);
@@ -189,7 +187,7 @@ function getSettingsFromPosition(L: Layout, P: number, D: number): number {
return P / D;
}
-const inRange = (M: number, D: number, P: number) => (
+const inRange = (M: number, D: number, P: number): number => (
D < M ? D / 2 : Math.min(Math.max(P, M), D - M)
);
@@ -200,7 +198,7 @@ const inRange = (M: number, D: number, P: number) => (
interface SplitterLayoutProps extends SplitterFoldProps { layout: Layout }
interface SplitterEngineProps extends SplitterLayoutProps { size: Size }
-function SplitterEngine(props: SplitterEngineProps) {
+function SplitterEngine(props: SplitterEngineProps): JSX.Element {
const defaultPosition = props.defaultPosition ?? 0;
const [settings, setSettings] =
Dome.useNumberSettings(props.settings, defaultPosition);
@@ -300,7 +298,7 @@ function SplitterEngine(props: SplitterEngineProps) {
);
}
-const SplitterLayout = (props: SplitterLayoutProps) => (
+const SplitterLayout = (props: SplitterLayoutProps): JSX.Element => (
<div className={CONTAINER}>
<AutoSizer>
{(size: Size) => (
@@ -335,39 +333,39 @@ const getLayout = (d: Direction): Layout => {
/** Splitter with specified direction.
@category Base Component
*/
-export function Splitter(props: SplitterDirProps) {
+export function Splitter(props: SplitterDirProps): JSX.Element {
const { direction, ...others } = props;
const layout = getLayout(direction);
return <SplitterLayout layout={layout} {...others} />;
}
/** Horizontal Splitter. */
-export function HSplit(props: SplitterBaseProps) {
+export function HSplit(props: SplitterBaseProps): JSX.Element {
return <SplitterLayout layout={HLayout} {...props} />;
}
/** Vertical Splitter. */
-export function VSplit(props: SplitterBaseProps) {
+export function VSplit(props: SplitterBaseProps): JSX.Element {
return <SplitterLayout layout={VLayout} {...props} />;
}
/** Horizontal Splitter with stacked and foldable left element. */
-export function LSplit(props: SplitterFoldProps) {
+export function LSplit(props: SplitterFoldProps): JSX.Element {
return <SplitterLayout layout={LLayout} {...props} />;
}
/** Horizontal Splitter with stacked and foldable right element. */
-export function RSplit(props: SplitterFoldProps) {
+export function RSplit(props: SplitterFoldProps): JSX.Element {
return <SplitterLayout layout={RLayout} {...props} />;
}
/** Vertical Splitter with stacked and foldable top element. */
-export function TSplit(props: SplitterFoldProps) {
+export function TSplit(props: SplitterFoldProps): JSX.Element {
return <SplitterLayout layout={TLayout} {...props} />;
}
/** Vertical Splitter with stacked and foldable bottom element. */
-export function BSplit(props: SplitterFoldProps) {
+export function BSplit(props: SplitterFoldProps): JSX.Element {
return <SplitterLayout layout={BLayout} {...props} />;
}
--
GitLab