mirror of
https://github.com/SteamDeckHomebrew/decky-frontend-lib.git
synced 2026-05-24 11:58:48 +02:00
Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
210b0389f7 | ||
|
|
198f96abb5 | ||
|
|
244ae128da | ||
|
|
377d7adde8 | ||
|
|
f34b9de97f | ||
|
|
b5192cf590 | ||
|
|
2e7b4b664a | ||
|
|
b92e6a5b9d | ||
|
|
32c355f2a7 | ||
|
|
747d70dcca | ||
|
|
7f9dfc5910 | ||
|
|
a3c1a7c7b7 | ||
|
|
fccfdd6f11 | ||
|
|
f124480af8 |
47
CHANGELOG.md
47
CHANGELOG.md
@@ -1,3 +1,50 @@
|
|||||||
|
## [0.5.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.5.0...v0.5.1) (2022-06-06)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **classes:** switch static-classes to findModule ([244ae12](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/244ae128da03e0687f1ba0b0e5b5b548b581277a))
|
||||||
|
|
||||||
|
# [0.5.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.4.2...v0.5.0) (2022-06-06)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **utils:** add joinClassNames util ([f34b9de](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f34b9de97f61eb5b075d6adedfcacfa5e097943b))
|
||||||
|
|
||||||
|
## [0.4.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.4.1...v0.4.2) (2022-06-06)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **classes:** add gamepadDialogClasses and quickAccessControlsClasses ([2e7b4b6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2e7b4b664a673b46b402b995fb58f0ce8ffbafac))
|
||||||
|
|
||||||
|
## [0.4.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.4.0...v0.4.1) (2022-06-05)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **textfield:** correct type for onChange callback ([32c355f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/32c355f2a7e0b6ca6592b956e8174d217766bc5c))
|
||||||
|
|
||||||
|
# [0.4.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.3.0...v0.4.0) (2022-06-05)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **typings:** export all prop types ([7f9dfc5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7f9dfc5910dfc172ba161d9b63763e85eb289a43))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **textfield:** extract TextField component ([a3c1a7c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a3c1a7c7b73eae475574a13b6ff9c75ff78cbcb6))
|
||||||
|
|
||||||
|
# [0.3.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.2.0...v0.3.0) (2022-06-04)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **typings:** add Navigate to router typings ([f124480](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f124480af8082d24730ed03fdf88742f76abc026))
|
||||||
|
|
||||||
# [0.2.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.1.0...v0.2.0) (2022-06-04)
|
# [0.2.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.1.0...v0.2.0) (2022-06-04)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "decky-frontend-lib",
|
"name": "decky-frontend-lib",
|
||||||
"version": "0.2.0",
|
"version": "0.5.1",
|
||||||
"description": "A library for building decky plugins",
|
"description": "A library for building decky plugins",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"types": "dist/index.d.ts",
|
"types": "dist/index.d.ts",
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
|||||||
|
|
||||||
import { CommonUIModule } from '../webpack';
|
import { CommonUIModule } from '../webpack';
|
||||||
|
|
||||||
interface ButtonProps {
|
export interface ButtonProps {
|
||||||
className?: string;
|
className?: string;
|
||||||
noFocusRing?: boolean;
|
noFocusRing?: boolean;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
|||||||
|
|
||||||
import { CommonUIModule } from '../webpack';
|
import { CommonUIModule } from '../webpack';
|
||||||
|
|
||||||
interface ButtonItemProps {
|
export interface ButtonItemProps {
|
||||||
label?: string;
|
label?: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
layout?: 'below';
|
layout?: 'below';
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export const showContextMenu: (children: ReactNode, parent?: EventTarget) => voi
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
interface MenuProps {
|
export interface MenuProps {
|
||||||
label: string;
|
label: string;
|
||||||
onCancel?(): void;
|
onCancel?(): void;
|
||||||
cancelText?: string;
|
cancelText?: string;
|
||||||
@@ -27,7 +27,7 @@ export const Menu: FC<MenuProps> = findModuleChild((m) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
interface MenuItemProps {
|
export interface MenuItemProps {
|
||||||
onSelected?(): void;
|
onSelected?(): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { FC, ReactNode } from 'react';
|
import { FC, ReactNode } from 'react';
|
||||||
|
|
||||||
import { findModuleChild } from '../webpack';
|
import { findModuleChild } from '../webpack';
|
||||||
|
|
||||||
// TODO: there is another argument, figure out what it does
|
// TODO: there is another argument, figure out what it does
|
||||||
@@ -11,18 +12,18 @@ export const showModal: (children: ReactNode, parent?: EventTarget) => void = fi
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
interface ModalRootProps {
|
export interface ModalRootProps {
|
||||||
onMiddleButton?(): void,
|
onMiddleButton?(): void;
|
||||||
onCancel?(): void;
|
onCancel?(): void;
|
||||||
onOK?(): void;
|
onOK?(): void;
|
||||||
bAllowFullSize?: boolean;
|
bAllowFullSize?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ModalRoot = findModuleChild(m => {
|
export const ModalRoot = findModuleChild((m) => {
|
||||||
if (typeof m !== "object") return undefined;
|
if (typeof m !== 'object') return undefined;
|
||||||
for (let prop in m) {
|
for (let prop in m) {
|
||||||
if (!m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) {
|
if (!m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) {
|
||||||
return m[prop];
|
return m[prop];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}) as FC<ModalRootProps>;
|
}) as FC<ModalRootProps>;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
|||||||
|
|
||||||
import { findModuleChild } from '../webpack';
|
import { findModuleChild } from '../webpack';
|
||||||
|
|
||||||
interface PanelSectionProps {
|
export interface PanelSectionProps {
|
||||||
title?: string;
|
title?: string;
|
||||||
spinner?: boolean;
|
spinner?: boolean;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,10 +17,11 @@ export enum QuickAccessTab {
|
|||||||
Decky,
|
Decky,
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Router {
|
export interface Router {
|
||||||
CloseSideMenus(): void;
|
CloseSideMenus(): void;
|
||||||
OpenQuickAccessMenu(quickAccessTab: QuickAccessTab): void;
|
OpenQuickAccessMenu(quickAccessTab: QuickAccessTab): void;
|
||||||
GetQuickAccessTab(): QuickAccessTab;
|
GetQuickAccessTab(): QuickAccessTab;
|
||||||
|
Navigate(path: string): void;
|
||||||
NavigateToExternalWeb(url: string): void;
|
NavigateToExternalWeb(url: string): void;
|
||||||
ToggleSideMenu(sideMenu: SideMenu): void;
|
ToggleSideMenu(sideMenu: SideMenu): void;
|
||||||
CloseSideMenus(): void;
|
CloseSideMenus(): void;
|
||||||
|
|||||||
@@ -2,13 +2,13 @@ import { FC } from 'react';
|
|||||||
|
|
||||||
import { CommonUIModule } from '../webpack';
|
import { CommonUIModule } from '../webpack';
|
||||||
|
|
||||||
interface NotchLabel {
|
export interface NotchLabel {
|
||||||
notchIndex: number;
|
notchIndex: number;
|
||||||
label: string;
|
label: string;
|
||||||
value: number;
|
value: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SliderProps {
|
export interface SliderProps {
|
||||||
label?: string;
|
label?: string;
|
||||||
value: number;
|
value: number;
|
||||||
layout?: 'below';
|
layout?: 'below';
|
||||||
|
|||||||
29
src/deck-components/TextField.tsx
Normal file
29
src/deck-components/TextField.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import { ChangeEventHandler, ReactNode, VFC } from 'react';
|
||||||
|
|
||||||
|
import { CommonUIModule, Module } from '../webpack';
|
||||||
|
|
||||||
|
export interface TextFieldProps {
|
||||||
|
label?: ReactNode;
|
||||||
|
requiredLabel?: ReactNode;
|
||||||
|
description?: ReactNode;
|
||||||
|
bShowCopyAction?: boolean;
|
||||||
|
bShowClearAction?: boolean;
|
||||||
|
bAlwaysShowClearAction?: boolean;
|
||||||
|
bIsPassword?: boolean;
|
||||||
|
rangeMin?: number;
|
||||||
|
rangeMax?: number;
|
||||||
|
mustBeNumeric?: boolean;
|
||||||
|
mustBeURL?: boolean;
|
||||||
|
mustBeEmail?: boolean;
|
||||||
|
focusOnMount?: boolean;
|
||||||
|
tooltip?: string;
|
||||||
|
inlineControls?: ReactNode;
|
||||||
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
||||||
|
value?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TextField = Object.values(CommonUIModule).find(
|
||||||
|
(mod: Module) => mod?.validateUrl && mod?.validateEmail,
|
||||||
|
) as VFC<TextFieldProps>;
|
||||||
|
|
||||||
|
console.log(TextField);
|
||||||
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
|||||||
|
|
||||||
import { CommonUIModule } from '../webpack';
|
import { CommonUIModule } from '../webpack';
|
||||||
|
|
||||||
interface ToggleProps {
|
export interface ToggleProps {
|
||||||
label?: string;
|
label?: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
checked: boolean;
|
checked: boolean;
|
||||||
|
|||||||
@@ -8,4 +8,5 @@ export * from './Slider';
|
|||||||
export * from './Spinner';
|
export * from './Spinner';
|
||||||
export * from './static-classes';
|
export * from './static-classes';
|
||||||
export * from './SteamSpinner';
|
export * from './SteamSpinner';
|
||||||
|
export * from './TextField';
|
||||||
export * from './Toggle';
|
export * from './Toggle';
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { findModuleChild } from '../webpack';
|
import { findModule } from '../webpack';
|
||||||
|
|
||||||
type StaticClasses = Record<
|
type StaticClasses = Record<
|
||||||
| 'ActiveTab'
|
| 'ActiveTab'
|
||||||
@@ -63,10 +63,126 @@ type StaticClasses = Record<
|
|||||||
string
|
string
|
||||||
>;
|
>;
|
||||||
|
|
||||||
export const staticClasses: StaticClasses = findModuleChild((mod) => {
|
type GamepadDialogClasses = Record<
|
||||||
|
| 'duration-app-launch'
|
||||||
|
| 'GamepadDialogContent'
|
||||||
|
| 'GamepadDialogContent_InnerWidth'
|
||||||
|
| 'Field'
|
||||||
|
| 'Button'
|
||||||
|
| 'NoMinWidth'
|
||||||
|
| 'ActiveAndUnfocused'
|
||||||
|
| 'StandaloneFieldSeparator'
|
||||||
|
| 'StandardPadding'
|
||||||
|
| 'CompactPadding'
|
||||||
|
| 'WithDescription'
|
||||||
|
| 'WithBottomSeparatorStandard'
|
||||||
|
| 'WithBottomSeparatorThick'
|
||||||
|
| 'HighlightOnFocus'
|
||||||
|
| 'ItemFocusAnim-darkerGrey'
|
||||||
|
| 'ItemFocusAnim-darkGrey'
|
||||||
|
| 'WithBottomSeparator'
|
||||||
|
| 'Disabled'
|
||||||
|
| 'Clickable'
|
||||||
|
| 'FieldClickTarget'
|
||||||
|
| 'FieldChildren'
|
||||||
|
| 'FieldLeadIcon'
|
||||||
|
| 'FieldLabelRow'
|
||||||
|
| 'VerticalAlignCenter'
|
||||||
|
| 'InlineWrapShiftsChildrenBelow'
|
||||||
|
| 'ExtraPaddingOnChildrenBelow'
|
||||||
|
| 'ChildrenWidthFixed'
|
||||||
|
| 'ChildrenWidthGrow'
|
||||||
|
| 'WithFirstRow'
|
||||||
|
| 'WithChildrenBelow'
|
||||||
|
| 'FieldLabel'
|
||||||
|
| 'FieldLabelValue'
|
||||||
|
| 'FieldDescription'
|
||||||
|
| 'ModalPosition'
|
||||||
|
| 'WithStandardPadding'
|
||||||
|
| 'slideInAnimation'
|
||||||
|
| 'BasicTextInput'
|
||||||
|
| 'Toggle'
|
||||||
|
| 'ToggleRail'
|
||||||
|
| 'On'
|
||||||
|
| 'ToggleSwitch'
|
||||||
|
| 'LabelFieldValue'
|
||||||
|
| 'DropDownControlButtonContents'
|
||||||
|
| 'Spacer'
|
||||||
|
| 'ControlsListOuterPanel'
|
||||||
|
| 'StandardSpacing'
|
||||||
|
| 'ExtraSpacing'
|
||||||
|
| 'AlignRight'
|
||||||
|
| 'AlignLeft'
|
||||||
|
| 'AlignCenter'
|
||||||
|
| 'ControlsListChild'
|
||||||
|
| 'QuickAccess-Menu'
|
||||||
|
| 'BigButtons'
|
||||||
|
| 'BottomButtons'
|
||||||
|
| 'ItemFocusAnim-darkerGrey-nocolor'
|
||||||
|
| 'ItemFocusAnim-grey'
|
||||||
|
| 'ItemFocusAnimBorder-darkGrey'
|
||||||
|
| 'ItemFocusAnim-green'
|
||||||
|
| 'focusAnimation'
|
||||||
|
| 'hoverAnimation',
|
||||||
|
string
|
||||||
|
>;
|
||||||
|
|
||||||
|
type QuickAccessControlsClasses = Record<
|
||||||
|
| 'duration-app-launch'
|
||||||
|
| 'PanelSection'
|
||||||
|
| 'PanelSectionTitle'
|
||||||
|
| 'Text'
|
||||||
|
| 'PanelSectionRow'
|
||||||
|
| 'Label'
|
||||||
|
| 'ComingSoon'
|
||||||
|
| 'LowBattery'
|
||||||
|
| 'ReallyLow'
|
||||||
|
| 'LowBatteryGauge'
|
||||||
|
| 'Remaining'
|
||||||
|
| 'EmptyNotifications'
|
||||||
|
| 'BatterySectionContainer'
|
||||||
|
| 'BatteryIcon'
|
||||||
|
| 'BatteryPercentageLabel'
|
||||||
|
| 'BatteryDetailsLabels'
|
||||||
|
| 'BatteryProjectedValue'
|
||||||
|
| 'BatteryProjectedLabel'
|
||||||
|
| 'ItemFocusAnim-darkerGrey-nocolor'
|
||||||
|
| 'ItemFocusAnim-darkerGrey'
|
||||||
|
| 'ItemFocusAnim-darkGrey'
|
||||||
|
| 'ItemFocusAnim-grey'
|
||||||
|
| 'ItemFocusAnimBorder-darkGrey'
|
||||||
|
| 'ItemFocusAnim-green'
|
||||||
|
| 'focusAnimation'
|
||||||
|
| 'hoverAnimation',
|
||||||
|
string
|
||||||
|
>;
|
||||||
|
|
||||||
|
export const staticClasses: StaticClasses = findModule((mod) => {
|
||||||
if (typeof mod !== 'object') return false;
|
if (typeof mod !== 'object') return false;
|
||||||
|
|
||||||
if (mod.TransitionMenuDelay) {
|
if (mod.TransitionMenuDelay) {
|
||||||
return mod;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
export const gamepadDialogClasses: GamepadDialogClasses = findModule((mod) => {
|
||||||
|
if (typeof mod !== 'object') return false;
|
||||||
|
|
||||||
|
if (mod.WithFirstRow) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
export const quickAccessControlsClasses: QuickAccessControlsClasses = findModule((mod) => {
|
||||||
|
if (typeof mod !== 'object') return false;
|
||||||
|
|
||||||
|
if (mod.PanelSectionRow) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -85,3 +85,7 @@ export function unpatch(obj: any, name: any): void {
|
|||||||
export function getReactInstance(o: HTMLElement | Element | Node) {
|
export function getReactInstance(o: HTMLElement | Element | Node) {
|
||||||
return o[Object.keys(o).find(k => k.startsWith('__reactInternalInstance')) as string]
|
return o[Object.keys(o).find(k => k.startsWith('__reactInternalInstance')) as string]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function joinClassNames(...classes: string[]): string {
|
||||||
|
return classes.join(" ");
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user