Skip to main content

ScaleFabric component

Component for rendering a scale control.

📝 Signature​

ScaleFabric(props: {
styles: {
color: string;
outlineSize?: number;
roundness?: number;
scale?: number;
margin?: number;
labelColor?: string;
options: IScaleNumeric | IScaleOption[];
labelLeft?: ReactNode;
labelCenter?: ReactNode;
labelRight?: ReactNode;
required?: boolean;
disabled?: boolean;
readOnly?: boolean;
ariaDescribedBy?: string;
tabIndex?: number;
justify?: boolean;
value?: number | string | Value;
autoSubmit?: boolean;
view?: "live" | "test" | "preview";
onChange?: (value: number | string | undefined) => void;
onFocus?: (e: FocusEvent) => void;
onBlur?: (e: FocusEvent) => void;
onAutoFocus?: (el: HTMLButtonElement | null) => void;
onSubmit?: () => void;
onCancel?: () => void;
}): JSX.Element

📇 Props​

stylesobjectNoSpecifies the styles for the scale. Supports the following styles:
- color: Base color for the buttons;
- outlineSize: Optional outline size in pixels for the buttons;
- roundness: Optional roundness in pixels for the buttons;
- scale: Optional scale factor for the buttons (defaults to 1);
- margin: Optional margin in pixels in between the buttons;
- labelColor: Optional color for the labels.
optionsIScaleNumeric | IScaleOption[]NoSpecifies the scale. Can be a numeric scale (see IScaleNumeric) or a scale with options (see IScaleOption).
labelLeftReactNodeYesSpecifies the label at the left side of the scale.
labelCenterReactNodeYesSpecifies the label at the center of the scale.
labelRightReactNodeYesSpecifies the label at the right side of the scale.
requiredbooleanYesSpecifies if the component is required.
disabledbooleanYesSpecifies if the component is disabled.
readOnlybooleanYesSpecifies if the component is read-only.
ariaDescribedBystringYesSpecifies the aria-describedby identifier of the element that describes the component.
tabIndexnumberYesSpecifies the tabindex for the component.
justifybooleanYesSpecifies if the component uses the full available width.
valuenumber | string | ValueYesSpecifies the value for the component. When a number or string is specified, this is the initial value for the input control. When a Value is supplied, this initial value is retrieved from the Value instance. Changes made in the input control are automatically reflected to the Value instance.
autoSubmitbooleanYesSpecifies if the component gets submitted when the user selects a scale.
view"live" | "test" | "preview"YesSpecifies the view in which the component is shown.
onChange(value: number | string | undefined) => voidYesInvoked when the value of the component is changed.
onFocus(e: FocusEvent) => voidYesInvoked when the component gets focus.
onBlur(e: FocusEvent) => voidYesInvoked when the component loses focus.
onAutoFocus(el: HTMLButtonElement | null) => voidYesInvoked when the HTML element of the component is available for auto-focus.
onSubmit() => voidYesInvoked when the user presses the Shift + Enter key combination or the Tab key (this event is often used to go to the next input control in a form).
onCancel() => voidYesInvoked when the user presses the Shift + Tab key combination (this event is often used to go to the previous input control in a form).

↩ī¸ Return value​

Returns the JSX.Element for the component.

👩‍đŸ’ģ Example​

Numeric scale​

import { ScaleFabric } from "@tripetto/runner-fabric/components/scale";

const ScaleFabricExample = () => (
color: "black"
from: 0,
to: 10
onChange={(value) => console.log(`Selected scale: ${value}`)}

Option scale​

import { ScaleFabric } from "@tripetto/runner-fabric/components/scale";

const ScaleFabricExample = () => (
color: "black"
id: "1",
label: "Scale option 1"
id: "2",
label: "Scale option 2"
onChange={(value) => console.log(`Selected scale: ${value}`)}

⛓ī¸ Interfaces​

🔗 IScaleNumeric​

Describes the interface for a numeric scale.

Type declaration​

interface IScaleNumeric {
/* Start of the numeric scale. */
from: number;

/* End of the numeric scale. */
to: number;

/* Step size of the numeric scale (defaults to 1). */
stepSize?: number;

🔗 IScaleOption​

Describes the interface for a scale option.

Type declaration​

interface IScaleOption {
/* Identifier for the scale option. */
id: string;

/* Name for the scale option. */
name: string;

/* Value for the scale option. */
value?: string;