SA Modules

Appearance

Modules Common Library / tabs

tabs ​

Reusable React Components and styling utilities designed for use with SA Module Tabs

Components ​

AnimationCanvas() ​

ts
function AnimationCanvas(props): Element;

Defined in: lib/modules-lib/src/tabs/AnimationCanvas.tsx:22

React Component for displaying glAnimations. Uses WebGLCanvas internally.

Parameters ​

ParameterType

props

AnimCanvasProps

Returns ​

Element

AnimationError() ​

ts
function AnimationError(__namedParameters): Element;

Defined in: lib/modules-lib/src/tabs/AnimationError.tsx:11

React component for displaying errors related to animations

Parameters ​

ParameterType

__namedParameters

AnimationErrorProps

Returns ​

Element

AutoLoopSwitch() ​

ts
function AutoLoopSwitch(__namedParameters): Element;

Defined in: lib/modules-lib/src/tabs/AutoLoopSwitch.tsx:11

A Switch component designed to be used as a toggle for auto playing

Parameters ​

ParameterType

__namedParameters

AutoLoopSwitchProps

Returns ​

Element

ButtonComponent() ​

ts
function ButtonComponent(props): Element;

Defined in: lib/modules-lib/src/tabs/ButtonComponent.tsx:21

Button Component that retains interactability even when disabled. Refer to https://blueprintjs.com/docs/#core/components/buttons.anchorbutton|this for more information

Parameters ​

ParameterType

props

ButtonComponentProps

Returns ​

Element

ModalDiv() ​

ts
function ModalDiv(__namedParameters): Element;

Defined in: lib/modules-lib/src/tabs/ModalDiv.tsx:53

Parameters ​

ParameterType

__namedParameters

ModalProps

Returns ​

Element

MultiItemDisplay() ​

ts
function MultiItemDisplay(props): Element;

Defined in: lib/modules-lib/src/tabs/MultiItemDisplay/index.tsx:16

React Component for displaying multiple items image

Parameters ​

ParameterType

props

MultiItemDisplayProps

Returns ​

Element

NumberSelector() ​

ts
function NumberSelector(__namedParameters): Element;

Defined in: lib/modules-lib/src/tabs/NumberSelector.tsx:30

React component for wrapping around a EditableText to provide automatic validation for number values

Parameters ​

ParameterType

__namedParameters

NumberSelectorProps

Returns ​

Element

PlayButton() ​

ts
function PlayButton(__namedParameters): Element;

Defined in: lib/modules-lib/src/tabs/PlayButton.tsx:43

A Button that toggles between two states: playing and not playing.

Parameters ​

ParameterType

__namedParameters

PlayButtonProps

Returns ​

Element

WebGLCanvas ​

ts
const WebGLCanvas: ForwardRefExoticComponent<Omit<WebGLCanvasProps, "ref"> & RefAttributes<HTMLCanvasElement>>;

Defined in: lib/modules-lib/src/tabs/WebGLCanvas.tsx:18

Canvas component used by the curve and rune modules. Standardizes the appearances of canvases for both modules.

Hooks ​

useAnimation() ​

ts
function useAnimation(__namedParameters): AnimationHookResult;

Defined in: lib/modules-lib/src/tabs/useAnimation.ts:137

Hook for animations based around the requestAnimationFrame function. Calls the provided callback periodically.

Parameters ​

ParameterType

__namedParameters

AnimationOptions

Returns ​

AnimationHookResult

Animation Hook utilities

Utilities ​

defineTab() ​

ts
function defineTab<T>(tab): T;

Defined in: lib/modules-lib/src/tabs/utils.ts:23

Helper for typing tabs

Type Parameters ​

Type Parameter

T extends ModuleSideContent

Parameters ​

ParameterType

tab

T

Returns ​

T

getModuleState() ​

ts
function getModuleState<T>(debuggerContext, name): T | null;

Defined in: lib/modules-lib/src/tabs/utils.ts:14

Helper function for extracting the state object for your bundle. If the your bundle state cannot be found or is still uninitialized, then it will return null.

Type Parameters ​

Type ParameterDescription

T

The type of your bundle's state object

Parameters ​

ParameterTypeDescription

debuggerContext

DebuggerContext

DebuggerContext as returned by the frontend

name

string

Name of your bundle

Returns ​

T | null

The state object of your bundle

Other ​

ACE_GUTTER_BACKGROUND_COLOR ​

ts
const ACE_GUTTER_BACKGROUND_COLOR: "#34495E" = '#34495E';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:25

ACE_GUTTER_TEXT_COLOR ​

ts
const ACE_GUTTER_TEXT_COLOR: "#8091A0" = '#8091A0';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:24

AnimationErrorProps ​

Defined in: lib/modules-lib/src/tabs/AnimationError.tsx:3

Properties ​

PropertyTypeDefined in

error

Error

lib/modules-lib/src/tabs/AnimationError.tsx:4

AnimationHookResult ​

Defined in: lib/modules-lib/src/tabs/useAnimation.ts:71

Properties ​

PropertyModifierTypeDescriptionDefined in

changeTimestamp

public

(newTime) => void

Change current timestamp that the animation is at.

lib/modules-lib/src/tabs/useAnimation.ts:92

drawFrame

public

(timestamp?) => void

Callback for manually drawing a frame to the canvas

lib/modules-lib/src/tabs/useAnimation.ts:114

errored

public

Error | null

null if no error has occurred. Otherwise, this will be set to the value of the error that the callback threw.

lib/modules-lib/src/tabs/useAnimation.ts:120

isPlaying

readonly

boolean

Boolean value indicating if the animation is currently playing

lib/modules-lib/src/tabs/useAnimation.ts:97

reset

public

() => void

Resets the animation to the beginning, but doesn't start it or stop it

lib/modules-lib/src/tabs/useAnimation.ts:86

setCanvas

public

(canvas) => void

Use this to set the canvas element that will be passed into the callback

lib/modules-lib/src/tabs/useAnimation.ts:107

start

public

() => void

Start the animation

lib/modules-lib/src/tabs/useAnimation.ts:80

stop

public

() => void

Stop the animation

lib/modules-lib/src/tabs/useAnimation.ts:75

timestamp

readonly

number

Current timestamp of the animation

lib/modules-lib/src/tabs/useAnimation.ts:102

AnimationOptions ​

Defined in: lib/modules-lib/src/tabs/useAnimation.ts:33

Properties ​

PropertyTypeDescriptionDefined in

animationDuration?

number

Total duration of the animation in milliseconds. Specify undefined to have the animation run indefinitely.

lib/modules-lib/src/tabs/useAnimation.ts:47

autoLoop?

boolean

Automatically go back to the start of the animation when its duration has elapsed. Has no effect if the animation duration is undefined.

lib/modules-lib/src/tabs/useAnimation.ts:53

autoStart?

boolean

Whether the animation should start playing automatically

lib/modules-lib/src/tabs/useAnimation.ts:63

callback

(ctx) => void

Callback that's called to draw each frame

lib/modules-lib/src/tabs/useAnimation.ts:58

frameDuration?

number

The minimum duration of time between each frame in milliseconds. Because of how requestAnimationFrame works, this value isn't respected exactly, but will be around an accurate ballpark

Specify undefined to execute the callback on every animation frame.

lib/modules-lib/src/tabs/useAnimation.ts:41

startTimestamp?

number

Value from which to begin the animation

lib/modules-lib/src/tabs/useAnimation.ts:68

AnimCanvasProps ​

Defined in: lib/modules-lib/src/tabs/AnimationCanvas.tsx:12

Properties ​

PropertyTypeDefined in

animation

glAnimation

lib/modules-lib/src/tabs/AnimationCanvas.tsx:13

AutoLoopSwitchProps ​

ts
type AutoLoopSwitchProps = Omit<SwitchProps, "checked" | "style"> & {
  isAutoLooping: boolean;
};

Defined in: lib/modules-lib/src/tabs/AutoLoopSwitch.tsx:3

Type Declaration ​

isAutoLooping ​
ts
isAutoLooping: boolean;

BP_CARD_BORDER_RADIUS ​

ts
const BP_CARD_BORDER_RADIUS: "2px" = '2px';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:17

BP_ICON_COLOR ​

ts
const BP_ICON_COLOR: "#A7B6C2" = '#A7B6C2';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:21

BP_TAB_BUTTON_MARGIN ​

ts
const BP_TAB_BUTTON_MARGIN: "20px" = '20px';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:15

BP_TAB_PANEL_MARGIN ​

ts
const BP_TAB_PANEL_MARGIN: "20px" = '20px';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:16

BP_TEXT_COLOR ​

ts
const BP_TEXT_COLOR: "#FFFFFF" = '#FFFFFF';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:20

BP_TEXT_MARGIN ​

ts
const BP_TEXT_MARGIN: "10px" = '10px';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:18

ButtonComponentProps ​

ts
type ButtonComponentProps = AnchorButtonProps & ButtonProps;

Defined in: lib/modules-lib/src/tabs/ButtonComponent.tsx:14

Refer to link for more details

CANVAS_MAX_WIDTH ​

ts
const CANVAS_MAX_WIDTH: "max(70vh, 30vw)" = 'max(70vh, 30vw)';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:28

ModalProps ​

Defined in: lib/modules-lib/src/tabs/ModalDiv.tsx:42

Properties ​

PropertyTypeDefined in

children

ReactElement

lib/modules-lib/src/tabs/ModalDiv.tsx:47

handleClose

MouseEventHandler

lib/modules-lib/src/tabs/ModalDiv.tsx:46

height

string

lib/modules-lib/src/tabs/ModalDiv.tsx:44

open

boolean

lib/modules-lib/src/tabs/ModalDiv.tsx:43

width

string

lib/modules-lib/src/tabs/ModalDiv.tsx:45

MultiItemDisplayProps ​

Defined in: lib/modules-lib/src/tabs/MultiItemDisplay/index.tsx:5

Properties ​

PropertyTypeDefined in

elements

ReactNode[]

lib/modules-lib/src/tabs/MultiItemDisplay/index.tsx:6

onStepChange?

(newIndex, oldIndex) => void

lib/modules-lib/src/tabs/MultiItemDisplay/index.tsx:7

NumberSelectorProps ​

ts
type NumberSelectorProps = {
  maxValue: number;
  minValue: number;
  onValueChanged?: (newValue) => void;
  value: number;
} & Omit<EditableTextProps, "alwaysRenderInput" | "value" | "type" | "isEditing">;

Defined in: lib/modules-lib/src/tabs/NumberSelector.tsx:5

Type Declaration ​

maxValue ​
ts
maxValue: number;

Maximum value that the selector is allowed to take on

minValue ​
ts
minValue: number;

Minimum value that the selector is allowed to take on

onValueChanged? ​
ts
optional onValueChanged?: (newValue) => void;

Callback that is called with the value that the selector is changing to

Parameters ​
ParameterType

newValue

number

Returns ​

void

value ​
ts
value: number;

Current value of the selector

PlayButtonProps ​

ts
type PlayButtonProps = Omit<ButtonComponentProps, "text" | "icon"> & {
  iconProps?: Omit<IconProps, "icon">;
  isPlaying: boolean;
  pausedIcon?: IconProps["icon"];
  pausedText?: string;
  playingIcon?: IconProps["icon"];
  playingText?: string;
  tooltipProps?: Omit<TooltipProps, "content">;
};

Defined in: lib/modules-lib/src/tabs/PlayButton.tsx:4

Type Declaration ​

iconProps? ​
ts
optional iconProps?: Omit<IconProps, "icon">;

Props to be passed to the Icon component

isPlaying ​
ts
isPlaying: boolean;
pausedIcon? ​
ts
optional pausedIcon?: IconProps["icon"];

Icon for the button when isPlaying is false. Defaults to play.

pausedText? ​
ts
optional pausedText?: string;

Tooltip string for the button when isPlaying is false. Defaults to Play.

playingIcon? ​
ts
optional playingIcon?: IconProps["icon"];

Icon for the button when isPlaying is true. Defaults to pause.

playingText? ​
ts
optional playingText?: string;

Tooltip string for the button when isPlaying is true. Defaults to Pause.

tooltipProps? ​
ts
optional tooltipProps?: Omit<TooltipProps, "content">;

Props to be passed to the Tooltip component

SA_TAB_BUTTON_WIDTH ​

ts
const SA_TAB_BUTTON_WIDTH: "40px" = '40px';

Defined in: lib/modules-lib/src/tabs/css_constants.ts:11

SA_TAB_ICON_SIZE ​

ts
const SA_TAB_ICON_SIZE: LARGE = IconSize.LARGE;

Defined in: lib/modules-lib/src/tabs/css_constants.ts:12

WebGLCanvasProps ​

ts
type WebGLCanvasProps = DetailedHTMLProps<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>;

Defined in: lib/modules-lib/src/tabs/WebGLCanvas.tsx:10