RefreshButton Component Reference

Related documents

• Component Overview
• Component Reference
• Built-in Components
• Button Component Reference
• Template Markup Language (TML) Reference

Table of Contents

• Introduction
• Attributes
• Instance methods
  • showSpinning()
  • Inherited methods
• Children
• DOM element properties

Introduction

Syntax

tml`<RefreshButton spinner=metar btnId=metarRefresh onclick=${() => ...}/>`

The RefreshButton component renders a Button containing the &sync; character entity symbol. The symbol spins while the named spinner of the page the button is on is running.

The page starts and stops a spinner with ctl.page(pageId).startSpinner(name) and stopSpinner(name), where name matches the button's spinner attribute. When the button mounts, it registers itself with its page by calling the page's registerSpinner() method and unregisters in willUnmount() with unregisterSpinner(). The page keeps the spin state, not the button, so if the button is re-rendered while a fetch is in progress, it asks the page's isSpinning() method and continues to spin. The page is taken from the component's contextProps.pageId.

Attributes

• spinner (required)
  The name of the page spinner that controls the button, e.g. 'metar'. A page can have several, each named for the thing being refreshed.
• onclick (required)
  A function called when the button is pressed.
• btnId (optional)
  The button ID, used to record the button press. See Button.
• className (optional)
  A CSS class for the button.

All other attributes are passed to the Button component.

Instance methods

showSpinning()

Syntax

showSpinning(isSpinning)

Starts or stops the symbol spinning by toggling the refreshSpin class on the refreshSymbol element. Called by the page when the state of its named spinner changes. This is not normally called by other code.

Parameters

• isSpinning
  True to spin the symbol, false to stop it.

Inherited methods

• Component methods

Children

The RefreshButton component ignores all children.

DOM element properties

• The RefreshButton Component will render a <button> containing a <span class=refreshSymbol> that holds the &sync; symbol.