Skip to content

fix(FocusManager): add style TS definitions for FocusManager, NavigationManager, Row, and Column #411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
erautenberg wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix(FocusManager): add style TS definitions for FocusManager, NavigationManager, Row, and Column #411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/@lightningjs/ui-components/src/components/Base/Base.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@

import lng from '@lightningjs/core';

type BaseStyle = object;
Copy link
Contributor

@anthony9187 anthony9187 Nov 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this works, but we might be able to use a more explicit type here

If you want a type meaning "empty object", you probably want Record<string, never> instead.
If you want a type meaning "any object", you probably want object instead.
If you want a type meaning "any value", you probably want unknown instead.
^ https://stackoverflow.com/a/75753960

I think Record<string, never> is the most semantically correct, but I also think it could break the way we do style types. so object might be fine. just a thought

Copy link
Contributor

@ImCoolNowRight ImCoolNowRight Nov 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would Record<String, never> force the style to be flat, or could it still have nested objects?


declare namespace Base {
export interface TemplateSpec extends lng.Component.TemplateSpec {
/**
Expand Down Expand Up @@ -122,4 +124,4 @@ declare class Base<
get _isUnfocusedMode(): boolean;
}

export default Base;
export { Base as default, BaseStyle };
3 changes: 2 additions & 1 deletion packages/@lightningjs/ui-components/src/components/Base/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,5 @@
* SPDX-License-Identifier: Apache-2.0
*/

export { default as default } from './Base';
import Base, { BaseStyle } from './Base';
export { Base as default, BaseStyle };
8 changes: 6 additions & 2 deletions packages/@lightningjs/ui-components/src/components/Column/Column.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@

import lng from '@lightningjs/core';
import FocusManager from '../FocusManager/FocusManager';
import NavigationManager from '../NavigationManager';
import NavigationManager, {
NavigationManagerStyle
} from '../NavigationManager';

type ColumnStyle = NavigationManagerStyle;

declare namespace Column {
export interface TemplateSpec extends NavigationManager.TemplateSpec {
Expand Down Expand Up @@ -67,4 +71,4 @@ declare class Column<
$columnChanged(): void;
}

export default Column;
export { Column as default, ColumnStyle };
4 changes: 2 additions & 2 deletions packages/@lightningjs/ui-components/src/components/Column/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@
* SPDX-License-Identifier: Apache-2.0
*/

import Column from './Column';
import Column, { ColumnStyle } from './Column';

export { Column as default };
export { Column as default, ColumnStyle };
6 changes: 4 additions & 2 deletions packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,16 @@
*/

import lng from '@lightningjs/core';
import Base from '../Base';
import Base, { BaseStyle } from '../Base';

export type NavigationDirectionType = 'none' | 'column' | 'row';

export type FocusItemsType = Array<
lng.Component.NewPatchTemplate<lng.Component.Constructor> | lng.Component
>;

type FocusManagerStyle = BaseStyle;

declare namespace FocusManager {
export interface TemplateSpec extends Base.TemplateSpec {
/**
Expand Down Expand Up @@ -189,4 +191,4 @@ declare class FocusManager<
get _Items(): lng.Component;
}

export default FocusManager;
export { FocusManager as default, FocusManagerStyle };
4 changes: 2 additions & 2 deletions packages/@lightningjs/ui-components/src/components/FocusManager/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@
* SPDX-License-Identifier: Apache-2.0
*/

import FocusManager from './FocusManager';
import FocusManager, { FocusManagerStyle } from './FocusManager';

export { FocusManager as default };
export { FocusManager as default, FocusManagerStyle };
6 changes: 3 additions & 3 deletions packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

import lng from '@lightningjs/core';
import type { StylePartial } from '../../types/lui';
import FocusManager from '../FocusManager';
import FocusManager, { FocusManagerStyle } from '../FocusManager';

export type DirectionProps = {
axis: string;
Expand All @@ -28,7 +28,7 @@ export type DirectionProps = {
innerCrossDimension: string;
};

export type NavigationManagerStyle = {
type NavigationManagerStyle = FocusManagerStyle & {
alwaysScroll: boolean;
itemSpacing: number;
itemTransition: lng.types.TransitionSettings;
Expand Down Expand Up @@ -190,4 +190,4 @@ declare class NavigationManager<
shouldScrollDown(): boolean;
}

export default NavigationManager;
export { NavigationManager as default, NavigationManagerStyle };
13 changes: 11 additions & 2 deletions packages/@lightningjs/ui-components/src/components/Row/Row.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@
*/

import FocusManager from '../FocusManager';
import NavigationManager from '../NavigationManager';
import type { StylePartial } from '../../types/lui';
import NavigationManager, {
NavigationManagerStyle
} from '../NavigationManager';

type RowStyle = NavigationManagerStyle;

declare namespace Row {
export interface TemplateSpec extends NavigationManager.TemplateSpec {
Expand Down Expand Up @@ -72,6 +77,10 @@ declare class Row<
* This will be called on every new render.
*/
onScreenEffect(): void;

// Accessors
get style(): RowStyle;
set style(v: StylePartial<RowStyle>);
}

export default Row;
export { Row as default, RowStyle };
4 changes: 2 additions & 2 deletions packages/@lightningjs/ui-components/src/components/Row/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@
* SPDX-License-Identifier: Apache-2.0
*/

import Row from './Row';
import Row, { RowStyle } from './Row';

export { Row as default };
export { Row as default, RowStyle };
7 changes: 3 additions & 4 deletions packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,19 @@
*/

import lng from '@lightningjs/core';
import type Row from '../Row';
import Row, { RowStyle } from '../Row';
import FocusManager from '../FocusManager';
import type { NavigationManagerStyle } from '../NavigationManager/NavigationManager';
import type { StylePartial } from '../../types/lui';
import type { TextBoxStyle } from '../TextBox';

// Why does `TitleRow` extend `Row` but use style props from `NavigationManager`?
/**
* `Row` style props are the same as `NavigationManager` style props.
* We are not re-mapping properties and defining a `RowStyle` in `Row` since `Row` inherits all of `NavigationManager` style props.
* Hence `TitleRowStyle` uses `NavigationManagerStyle` rather than the previous `RowStyle`
* Hence `TitleRowStyle` uses `RowStyle` rather than the previous `RowStyle`
*/

type TitleRowStyle = NavigationManagerStyle & {
type TitleRowStyle = RowStyle & {
w: number;
titleMarginLeft: number;
titleTextStyle: TextBoxStyle;
Expand Down
8 changes: 4 additions & 4 deletions packages/@lightningjs/ui-components/src/components/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

export { default as Artwork, ArtworkStyle } from './Artwork';
export { default as Badge, BadgeStyle } from './Badge';
export { default as Base } from './Base';
export { default as Base, BaseStyle } from './Base';
export { default as Button, ButtonSmall, ButtonStyle } from './Button';
export {
default as Card,
Expand All @@ -39,10 +39,10 @@ export {
CardContentStyle
} from './CardContent';
export { default as Checkbox, CheckboxStyle } from './Checkbox';
export { default as Column } from './Column';
export { default as Column, ColumnStyle } from './Column';
export { default as Control, ControlSmall, ControlStyle } from './Control';
export { default as ControlRow, ControlRowStyle } from './ControlRow';
export { default as FocusManager } from './FocusManager';
export { default as FocusManager, FocusManagerStyle } from './FocusManager';
export { default as Gradient, GradientStyle } from './Gradient';
export { default as GridOverlay } from './GridOverlay';
export { default as Icon, IconStyle } from './Icon';
Expand Down Expand Up @@ -83,7 +83,7 @@ export {
export { default as ProgressBar, ProgressBarStyle } from './ProgressBar';
export { default as Provider, ProviderStyle } from './Provider';
export { default as Radio, RadioStyle } from './Radio';
export { default as Row } from './Row';
export { default as Row, RowStyle } from './Row';
export { default as ScrollWrapper, ScrollWrapperStyle } from './ScrollWrapper';
export { default as Shadow, ShadowStyle } from './Shadow';
export { default as Slider, SliderStyle } from './Slider';
Expand Down