Skip to main content

Class: ToggleTouchButton<S>

A touchscreen button which displays the value of a bound boolean state. By default, pressing the button will toggle its state if the state is mutable. This behavior can be overridden by providing a custom callback function which runs when the button is pressed.

The root element of the button contains the touch-button-toggle CSS class by default, in addition to all root-element classes used by TouchButton.

The root element contains a child ToggleStatusBar component with the CSS class touch-button-toggle-status-bar and an optional label element with the CSS class touch-button-label.

Type parameters

NameType
Sextends Subscribable<boolean> | MutableSubscribable<boolean>

Hierarchy

  • DisplayComponent<ToggleTouchButtonProps<S>>

    ToggleTouchButton

Constructors

constructor

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

Creates an instance of a DisplayComponent.

Type parameters

NameType
Sextends Subscribable<boolean> | MutableSubscribable<boolean, boolean>

Parameters

NameTypeDescription
propsToggleTouchButtonProps<S>The propertis of the component.

Returns

ToggleTouchButton<S>

Inherited from

DisplayComponent<ToggleTouchButtonProps<S>>.constructor

Defined in

src/sdk/components/FSComponent.ts:73

Properties

buttonRef

Protected Readonly buttonRef: NodeReference<TouchButton<TouchButtonProps>>

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:90


context

Optional context: [] = undefined

The context on this component, if any.

Inherited from

DisplayComponent.context

Defined in

src/sdk/components/FSComponent.ts:64


contextType

Optional Readonly contextType: readonly [] = undefined

The type of context for this component, if any.

Inherited from

DisplayComponent.contextType

Defined in

src/sdk/components/FSComponent.ts:67


cssClassSet

Protected Readonly cssClassSet: SetSubject<string>

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:93


cssClassSub

Protected Optional cssClassSub: Subscription

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:95


props

props: ToggleTouchButtonProps<S> & ComponentProps

The properties of the component.

Inherited from

DisplayComponent.props

Defined in

src/sdk/components/FSComponent.ts:61


statusBarRef

Protected Readonly statusBarRef: NodeReference<ToggleStatusBar>

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:91


RESERVED_CSS_CLASSES

Static Protected Readonly RESERVED_CSS_CLASSES: Set<string>

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:88

Methods

destroy

destroy(): void

Returns

void

Inherit Doc

Overrides

DisplayComponent.destroy

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:222


getContext

getContext(context): never

Gets a context data subscription from the context collection.

Parameters

NameTypeDescription
contextneverThe 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

Defined in

src/sdk/components/FSComponent.ts:106


getReservedCssClasses

getReservedCssClasses(): ReadonlySet<string>

Gets the CSS classes that are reserved for this button's root element.

Returns

ReadonlySet<string>

The CSS classes that are reserved for this button's root element.

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:217


getRootElement

getRootElement(): HTMLElement

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.

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:102


onAfterRender

onAfterRender(node): void

A callback that is called after the component is rendered.

Parameters

NameTypeDescription
nodeVNodeThe component's VNode.

Returns

void

Inherited from

DisplayComponent.onAfterRender

Defined in

src/sdk/components/FSComponent.ts:87


onBeforeRender

onBeforeRender(): void

A callback that is called before the component is rendered.

Returns

void

Inherited from

DisplayComponent.onBeforeRender

Defined in

src/sdk/components/FSComponent.ts:80


onHoldEnded

onHoldEnded(button, totalHoldDuration, endReason): void

Responds to when this button exits the held state.

Parameters

NameTypeDescription
buttonTouchButton<TouchButtonProps>The button that was held.
totalHoldDurationnumberThe total amount of time, in milliseconds, that this button was held.
endReasonTouchButtonHoldEndReasonThe reason that this button exited the held state.

Returns

void

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:173


onHoldStarted

onHoldStarted(button): TouchButtonHoldAction

Responds to when this button enters the held state.

Parameters

NameTypeDescription
buttonTouchButton<TouchButtonProps>The button that is held.

Returns

TouchButtonHoldAction

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

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:146


onHoldTick

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

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

Parameters

NameTypeDescription
buttonTouchButton<TouchButtonProps>The button that is held.
dtnumberThe elapsed time, in milliseconds, since the previous frame.
totalTimenumberThe total amount of time, in milliseconds, that this button has been held.
timeSinceLastPressnumberThe 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.

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:161


onPressed

onPressed(button, isHeld): void

Responds to when this button is pressed.

Parameters

NameTypeDescription
buttonTouchButton<TouchButtonProps>The button that was pressed.
isHeldbooleanWhether the button was held when it was pressed.

Returns

void

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:132


onTouched

onTouched(button): TouchButtonOnTouchedAction

Responds to when this button is touched.

Parameters

NameTypeDescription
buttonTouchButton<TouchButtonProps>The button that was touched.

Returns

TouchButtonOnTouchedAction

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

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:121


render

render(): VNode

Returns

VNode

Inherit Doc

Overrides

DisplayComponent.render

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:178


simulatePressed

simulatePressed(ignoreDisabled?): void

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

Parameters

NameTypeDefault valueDescription
ignoreDisabledbooleanfalseWhether to simulate the button being pressed regardless of whether the button is disabled. Defaults to false.

Returns

void

Defined in

src/garminsdk/components/touchbutton/ToggleTouchButton.tsx:111