Skip to content
Snippets Groups Projects
Commit a2479aca authored by Loïc Correnson's avatar Loïc Correnson
Browse files

[ivette] more types in dome/layout

parent 1e0cfd82
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
ivette/src/dome/renderer/layout/boxes.tsx
+ 28
− 23
View file @ a2479aca
......@@ -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,
......
ivette/src/dome/renderer/layout/dispatch.tsx
+ 6
− 8
View file @ a2479aca
......@@ -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}</>;
}
// --------------------------------------------------------------------------
ivette/src/dome/renderer/layout/splitters.tsx
+ 11
− 13
View file @ a2479aca
......@@ -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} />;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment