仿制app store下载进度条

baseView.js

const idManager = require("../utils/id");

class BaseView {
  constructor() {
    this.id = idManager.newId;
  }

  get definition() {
    return this._defineView();
  }

  get created() {
    if (this._view) {
      return this._view;
    } else {
      this._view = $ui.create(this.definition);
      return this._view;
    }
  }

  get view() {
    if (this._view) {
      return this._view;
    } else {
      this._view = $(this.id);
      return this._view;
    }
  }

  add(view) {
    if (view instanceof BaseView) {
      this.view.add(view.definition);
    } else {
      this.view.add(view);
    }
  }

  moveToFront() {
    this.view.moveToFront();
  }

  moveToBack() {
    this.view.moveToBack();
  }
}

module.exports = BaseView;

id.js

class ID {
  constructor({ prefix = "id_", startNumber = 0 } = {}) {
    this.prefix = prefix;
    this.number = startNumber;
    this._aliasIds = {};
  }

  get newId() {
    return this.generateNewIdWithAlias();
  }

  generateNewIdWithAlias(alias) {
    const number = this.number;
    this.number++;
    const id = this.prefix + number;
    if (alias) {
      this._addIdToAlias(alias, id);
    }
    return id;
  }

  getAliasId(alias) {
    const ids = this._aliasIds[alias];
    if (ids) {
      return ids[0];
    } else {
      return;
    }
  }

  getAliasAllIds(alias) {
    const ids = this._aliasIds[alias];
    if (ids) {
      return ids;
    } else {
      return;
    }
  }

  _addIdToAlias(alias, id) {
    if (!this._aliasIds[alias]) this._aliasIds[alias] = [];
    this._aliasIds[alias].push(id);
  }
}

const idManager = new ID();

module.exports = idManager;

progressBarCircle.js

const BaseView = require("./baseView");
const { ContentView, Canvas } = require("./views")

class CircleCanvas extends Canvas {
  constructor(options) {
    super(options);
    this._tintColor = options.props.tintColor || $color("systemLink");
    this._progress = options.props.progress;
    this._events = {
      draw: (view, ctx) => {
        const radius = Math.min(view.frame.width, view.frame.height);
        ctx.setLineWidth(4)
        ctx.strokeColor = $color("separatorColor");
        ctx.addArc(
          radius / 2,
          radius / 2,
          radius / 2 - 2,
          0,
          0 + Math.PI * 2 
        );
        ctx.strokePath();
        ctx.strokeColor = this._tintColor;
        ctx.addArc(
          radius / 2,
          radius / 2,
          radius / 2 - 2,
          - Math.PI / 2,
          - Math.PI / 2 + Math.PI * 2 * this._progress
        );
        ctx.strokePath();
      }
    }
  }

  redraw() {
    this.view.runtimeValue().invoke("setNeedsDisplay");
  }

  set progress(progress) {
    this._progress = progress
    this.redraw()
  }

  get progress() {
    return this._progress
  }
}

/**
 * 
 */
class ProgressBarCircle extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    this.square = new ContentView({
      props: {
        bgcolor: this._props.tintColor
      },
      layout: (make, view) => {
        make.center.equalTo(view.super)
        make.width.equalTo(view.super).dividedBy(3)
        make.height.equalTo(view.width)
      }
    })
    this.canvas = new CircleCanvas({
      props: {
        tintColor: this._props.tintColor,
        progress: this._props.progress
      },
      layout: $layout.fill
    })
    return {
      type: "view",
      props: {
        id: this.id
      },
      layout: this._layout,
      events: this._events,
      views: [
        this.canvas.definition,
        this.square.definition
      ]
    };
  }

  set progress(progress) {
    this._props.progress = progress
    this.canvas.progress = progress
  }

  get progress() {
    return this._props.progress
  }
}

ProgressBarCircle.defaultProps = {
  tintColor: $color("systemLink")
};


module.exports = ProgressBarCircle;

views.js

const BaseView = require("./baseView");

class RootView extends BaseView {
  constructor({ layout = $layout.fill } = {}) {
    super();
    this._layout = layout;
  }

  _defineView() {
    return {
      type: "view",
      props: {
        id: this.id,
        bgcolor: $color("clear")
      },
      layout: this._layout
    };
  }
}

class ContentView extends BaseView {
  constructor({ props, layout = $layout.fillSafeArea, events = {} } = {}) {
    super();
    this._props = { ...this.constructor.defaultProps, ...props, id: this.id };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "view",
      props: this._props,
      layout: this._layout,
      events: this._events
    };
  }
}

ContentView.defaultProps = {
  bgcolor: $color("primarySurface")
};

/**
 * 遮挡视图，使得下面的view无法操作并且整体变暗。
 * 设计上此视图不单独使用，而是作为一个子视图
 * events:
 *   - tapped 点击事件，通常用于dismiss
 */
class MaskView extends BaseView {
  constructor({ props, layout = $layout.fill, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props,
      id: this.id,
      userInteractionEnabled: true
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "view",
      props: this._props,
      layout: this._layout,
      events: {
        tapped: sender => {
          if (this._events.tapped) this._events.tapped(sender);
        }
      }
    };
  }
}

MaskView.defaultProps = {
  bgcolor: $rgba(0, 0, 0, 0.2)
};

class Label extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "label",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Label.defaultProps = {};

class Button extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "button",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Button.defaultProps = {};

class Input extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "input",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Input.defaultProps = {};

class Slider extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "slider",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Slider.defaultProps = {};

class Switch extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "switch",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Switch.defaultProps = {};

class Spinner extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "pinner",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Spinner.defaultProps = {};

class Progress extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "progress",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Progress.defaultProps = {};

class Gallery extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "gallery",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Gallery.defaultProps = {};

class Stepper extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "stepper",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Stepper.defaultProps = {};

class Text extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "text",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Text.defaultProps = {};

class Image extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "image",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Image.defaultProps = {};

class Video extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "video",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Video.defaultProps = {};

class Scroll extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "scroll",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Scroll.defaultProps = {};

class Stack extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "stack",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Stack.defaultProps = {};

class Tab extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "tab",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Tab.defaultProps = {};

class Menu extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "menu",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Menu.defaultProps = {};

class Map extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "map",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Map.defaultProps = {};

class Web extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "web",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Web.defaultProps = {};

class List extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "list",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

List.defaultProps = {};

class Matrix extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "matrix",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Matrix.defaultProps = {};

class Blur extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "blur",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Blur.defaultProps = {};

class Gradient extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "gradient",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Gradient.defaultProps = {};

class DatePicker extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "date-picker",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

DatePicker.defaultProps = {};

class Picker extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "picker",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Picker.defaultProps = {};

class Canvas extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "canvas",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Canvas.defaultProps = {};

class Markdown extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "markdown",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Markdown.defaultProps = {};

class Lottie extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "lottie",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Lottie.defaultProps = {};

class Chart extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "chart",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Chart.defaultProps = {};

class Code extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "code",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Code.defaultProps = {};

class Runtime extends BaseView {
  constructor({ props, layout, events = {} } = {}) {
    super();
    this._props = {
      ...this.constructor.defaultProps,
      ...props
    };
    this._layout = layout;
    this._events = events;
  }

  _defineView() {
    return {
      type: "runtime",
      props: {
        ...this._props,
        id: this.id
      },
      layout: this._layout,
      events: {
        ...this._events
      }
    };
  }
}

Runtime.defaultProps = {};

module.exports = {
  RootView,
  ContentView,
  MaskView,
  Label,
  Button,
  Input,
  Slider,
  Switch,
  Spinner,
  Progress,
  Gallery,
  Stepper,
  Text,
  Image,
  Video,
  Scroll,
  Stack,
  Tab,
  Menu,
  Map,
  Web,
  List,
  Matrix,
  Blur,
  Gradient,
  DatePicker,
  Picker,
  Canvas,
  Markdown,
  Lottie,
  Chart,
  Code,
  Runtime
};