scriptable-testlab/src/mocks/ui/widgets/widget.ts

A lightweight, efficient tool designed to manage and update scripts for Scriptable.

import {AbsListWidget} from 'scriptable-abstract';

import type {WidgetFamily} from '../../../types';
import {MockImage} from '../../media/image';
import {MockColor} from '../color';
import {MockLinearGradient} from '../gradient';
import {MockWidgetDate} from './date';
import {MockWidgetImage} from './image';
import {MockWidgetSpacer} from './spacer';
import {MockWidgetStack} from './stack';
import {MockWidgetText} from './text';
import {WidgetElements} from './types';

interface ListWidgetState {
  family: WidgetFamily;
  backgroundColor: MockColor;
  backgroundImage: MockImage;
  backgroundGradient: MockLinearGradient;
  spacing: number;
  url: string;
  refreshAfterDate: Date;
  padding: {
    top: number;
    leading: number;
    bottom: number;
    trailing: number;
  };
  addAccessoryWidgetBackground: boolean;
  elements: WidgetElements;
}

const DEFAULT_STATE: ListWidgetState = {
  family: 'medium',
  backgroundColor: new MockColor('#000000'),
  backgroundImage: new MockImage(),
  backgroundGradient: new MockLinearGradient(),
  spacing: 0,
  url: '',
  refreshAfterDate: new Date(),
  padding: {
    top: 0,
    leading: 0,
    bottom: 0,
    trailing: 0,
  },
  addAccessoryWidgetBackground: false,
  elements: [],
};

export class MockWidget extends AbsListWidget<ListWidgetState> implements ListWidget {
  constructor() {
    super();
    this.setState(DEFAULT_STATE);
  }

  get backgroundColor(): MockColor {
    return this.state.backgroundColor;
  }

  set backgroundColor(value: MockColor) {
    this.setState({backgroundColor: value});
  }

  get backgroundImage(): MockImage {
    return this.state.backgroundImage;
  }

  set backgroundImage(value: MockImage) {
    this.setState({backgroundImage: value});
  }

  get backgroundGradient(): MockLinearGradient {
    return this.state.backgroundGradient;
  }

  set backgroundGradient(value: MockLinearGradient) {
    this.setState({backgroundGradient: value});
  }

  get spacing(): number {
    return this.state.spacing;
  }

  set spacing(value: number) {
    this.setState({spacing: value});
  }

  get url(): string {
    return this.state.url;
  }

  set url(value: string) {
    this.setState({url: value});
  }

  get refreshAfterDate(): Date {
    return this.state.refreshAfterDate;
  }

  set refreshAfterDate(value: Date) {
    this.setState({refreshAfterDate: value});
  }

  get addAccessoryWidgetBackground(): boolean {
    return this.state.addAccessoryWidgetBackground;
  }

  set addAccessoryWidgetBackground(value: boolean) {
    this.setState({addAccessoryWidgetBackground: value});
  }

  addText(text: string): MockWidgetText {
    const textElement = new MockWidgetText(text);
    this.setState({
      elements: [...this.state.elements, textElement],
    });
    return textElement;
  }

  addDate(date: Date): MockWidgetDate {
    const dateElement = new MockWidgetDate(date);
    this.setState({
      elements: [...this.state.elements, dateElement],
    });
    return dateElement;
  }

  addImage(image: MockImage): MockWidgetImage {
    const imageElement = new MockWidgetImage(image);
    this.setState({
      elements: [...this.state.elements, imageElement],
    });
    return imageElement;
  }

  addSpacer(length?: number): MockWidgetSpacer {
    const spacer = new MockWidgetSpacer(length);
    this.setState({
      elements: [...this.state.elements, spacer],
    });
    return spacer;
  }

  addStack(): MockWidgetStack {
    const stack = new MockWidgetStack();
    this.setState({
      elements: [...this.state.elements, stack],
    });
    return stack;
  }

  setPadding(top: number, leading: number, bottom: number, trailing: number): void {
    this.setState({
      padding: {top, leading, bottom, trailing},
    });
  }

  useDefaultPadding(): void {
    this.setPadding(8, 8, 8, 8);
  }

  async presentSmall(): Promise<void> {
    this.setState({family: 'small'});
    return Promise.resolve();
  }

  async presentMedium(): Promise<void> {
    this.setState({family: 'medium'});
    return Promise.resolve();
  }

  async presentLarge(): Promise<void> {
    this.setState({family: 'large'});
    return Promise.resolve();
  }

  async presentExtraLarge(): Promise<void> {
    this.setState({family: 'extraLarge'});
    return Promise.resolve();
  }

  async presentAccessoryInline(): Promise<void> {
    this.setState({family: 'accessoryInline'});
    return Promise.resolve();
  }

  async presentAccessoryCircular(): Promise<void> {
    this.setState({family: 'accessoryCircular'});
    return Promise.resolve();
  }

  async presentAccessoryRectangular(): Promise<void> {
    this.setState({family: 'accessoryRectangular'});
    return Promise.resolve();
  }

  get widgetFamily(): WidgetFamily {
    return this.state.family;
  }
}