Class: UiToggleTouchButton<S>

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:140

A G3X Touch UI version of ToggleTouchButton. Supports UI focus, enables focus on drag by default and provides convenience props for handling drag behavior while in a scrollable list.

The root element of the button conditionally contains the ui-button-focused CSS class when the button has UI focus.

Extends

• DisplayComponent<UiToggleTouchButtonProps<S>>

Type Parameters

Type Parameter
S extends Subscribable<boolean> | MutableSubscribable<boolean>

Implements

• UiFocusableComponent

Constructors

Constructor

new UiToggleTouchButton<S>(props): UiToggleTouchButton<S>

Defined in: src/sdk/components/FSComponent.ts:76

Creates an instance of a DisplayComponent.

Parameters

Parameter	Type	Description
props	UiToggleTouchButtonProps	The propertis of the component.

Returns

UiToggleTouchButton<S>

Inherited from

DisplayComponent.constructor

Properties

buttonRef

protected readonly buttonRef: NodeReference<ToggleTouchButton<S>>

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:146

---

canBeFocused

readonly canBeFocused: Subscribable<boolean>

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:158

Whether this component can be focused.

Implementation of

UiFocusableComponent.canBeFocused

---

context?

optional context: [] = undefined

Defined in: src/sdk/components/FSComponent.ts:67

The context on this component, if any.

Inherited from

DisplayComponent.context

---

contextType?

readonly optional contextType: readonly [] = undefined

Defined in: src/sdk/components/FSComponent.ts:70

The type of context for this component, if any.

Inherited from

DisplayComponent.contextType

---

focusModule

protected readonly focusModule: UiTouchButtonFocusModule

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:148

---

isUiFocusableComponent

readonly isUiFocusableComponent: true = true

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:144

Flags this component as a UiFocusableComponent.

Implementation of

UiFocusableComponent.isUiFocusableComponent

---

props

props: UiToggleTouchButtonProps<S> & ComponentProps

Defined in: src/sdk/components/FSComponent.ts:64

The properties of the component.

Inherited from

DisplayComponent.props

Methods

destroy()

destroy(): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:314

Destroys this component.

Returns

void

Overrides

DisplayComponent.destroy

---

focusSelf()

focusSelf(): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:186

Attempts to set focus on this button.

Returns

void

---

getContext()

protected getContext(context): never

Defined in: src/sdk/components/FSComponent.ts:109

Gets a context data subscription from the context collection.

Parameters

Parameter	Type	Description
context	never	The context to get the subscription for.

Returns

never

The requested context.

Throws

An error if no data for the specified context type could be found.

Inherited from

DisplayComponent.getContext

---

getRootElement()

getRootElement(): HTMLElement

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:170

Gets this button's root HTML element.

Returns

HTMLElement

This button's root HTML element.

Throws

Error if this button has not yet been rendered.

---

onAfterRender()

onAfterRender(): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:161

A callback that is called after the component is rendered.

Returns

void

Overrides

DisplayComponent.onAfterRender

---

onBeforeRender()

onBeforeRender(): void

Defined in: src/sdk/components/FSComponent.ts:83

A callback that is called before the component is rendered.

Returns

void

Inherited from

DisplayComponent.onBeforeRender

---

onDeregistered()

onDeregistered(): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:196

Responds to when this component is deregistered with a controller.

Returns

void

Implementation of

UiFocusableComponent.onDeregistered

---

onFocusGained()

onFocusGained(direction): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:201

Responds to when this component gains focus.

Parameters

Parameter	Type	Description
direction	UiFocusDirection	The direction from which focus was gained.

Returns

void

Implementation of

UiFocusableComponent.onFocusGained

---

onFocusLost()

onFocusLost(): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:207

Responds to when this component loses focus.

Returns

void

Implementation of

UiFocusableComponent.onFocusLost

---

onHoldEnded()

protected onHoldEnded(button, state, totalHoldDuration, endReason): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:281

Responds to when this button exits the held state.

Parameters

Parameter	Type	Description
button	ToggleTouchButton<S>	The button that was held.
state	S	The state that is bound to the button.
totalHoldDuration	number	The total amount of time, in milliseconds, that this button was held.
endReason	TouchButtonHoldEndReason	The reason that this button exited the held state.

Returns

void

---

onHoldStarted()

protected onHoldStarted(button, state): TouchButtonHoldAction

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:252

Responds to when this button enters the held state.

Parameters

Parameter	Type	Description
button	ToggleTouchButton<S>	The button that is held.
state	S	The state that is bound to the button.

Returns

TouchButtonHoldAction

The action to take. Ignored if the value is equal to TouchButtonHoldAction.EndHold.

---

onHoldTick()

protected onHoldTick(button, state, dt, totalTime, timeSinceLastPress): TouchButtonHoldAction

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:268

A callback which is called every frame when this button is held.

Parameters

Parameter	Type	Description
button	ToggleTouchButton<S>	The button that is held.
state	S	The state that is bound to the button.
dt	number	The elapsed time, in milliseconds, since the previous frame.
totalTime	number	The total amount of time, in milliseconds, that this button has been held.
timeSinceLastPress	number	The amount of time, in milliseconds, that this button has been held since the last time the button was pressed as a tick action.

Returns

TouchButtonHoldAction

The action to take.

---

onPressed()

protected onPressed(button, state, isHeld): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:238

Responds to when this button is pressed.

Parameters

Parameter	Type	Description
button	ToggleTouchButton<S>	The button that was pressed.
state	S	The state that is bound to the button.
isHeld	boolean	Whether the button was held when it was pressed.

Returns

void

---

onRegistered()

onRegistered(controller): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:191

Responds to when this component is registered with a controller.

Parameters

Parameter	Type	Description
controller	UiFocusController	The controller with which this component was registered.

Returns

void

Implementation of

UiFocusableComponent.onRegistered

---

onTouched()

protected onTouched(button, state): TouchButtonOnTouchedAction

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:223

Responds to when this button is touched.

Parameters

Parameter	Type	Description
button	ToggleTouchButton<S>	The button that was touched.
state	S	The state that is bound to the button.

Returns

TouchButtonOnTouchedAction

The action to take as a result of the button being touched.

---

onUiInteractionEvent()

onUiInteractionEvent(event): boolean

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:213

Handles a UiInteractionEvent.

Parameters

Parameter	Type	Description
event	UiInteractionEvent	The event to handle.

Returns

boolean

Whether the event was handled.

Implementation of

UiFocusableComponent.onUiInteractionEvent

---

render()

render(): VNode

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:286

Renders the component.

Returns

VNode

A JSX element to be rendered.

Overrides

DisplayComponent.render

---

simulatePressed()

simulatePressed(ignoreDisabled): void

Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:179

Simulates this button being pressed. This will execute the onPressed() callback if one is defined.

Parameters

Parameter	Type	Default value	Description
ignoreDisabled	boolean	false	Whether to simulate the button being pressed regardless of whether the button is disabled. Defaults to false.

Returns

void