zoskit/src/UiImageComponent/index.js

Fast and lightweight UI component kit for ZeppOS

import { createWidget, widget, prop } from "@zos/ui";
import { getDeviceInfo } from "@zos/device";

const { width: screenW, height: screenH } = getDeviceInfo();

export function ImageComponent(options) {
  let autoScale = options.auto_scale === true;

  let wimg = options.w !== undefined ? options.w : -1;
  let himg = options.h !== undefined ? options.h : -1;

  const calcX = (opts) =>
    opts.x !== undefined
      ? opts.x
      : opts.w > 0
        ? Math.floor((screenW - opts.w) / 2)
        : 0;

  const calcY = (opts) => (opts.y !== undefined ? opts.y : 0);

  let ximg = calcX(options);
  let yimg = calcY(options);

  let angleImg = options.angle || 0;
  let srcImg = options.src;

  const widgetConfig = {
    x: ximg,
    y: yimg,
    w: wimg,
    h: himg,
    angle: angleImg,
    src: srcImg,
    auto_scale: autoScale,
  };

  const imgWidget = createWidget(widget.IMG, widgetConfig);

  return {
    updateProps(newOptions) {
      autoScale = newOptions.auto_scale === true;

      wimg = newOptions.w !== undefined ? newOptions.w : wimg;
      himg = newOptions.h !== undefined ? newOptions.h : himg;

      ximg =
        newOptions.x !== undefined
          ? newOptions.x
          : wimg > 0
            ? Math.floor((screenW - wimg) / 2)
            : 0;
      yimg = newOptions.y !== undefined ? newOptions.y : yimg;

      angleImg = newOptions.angle !== undefined ? newOptions.angle : angleImg;
      srcImg = newOptions.src !== undefined ? newOptions.src : srcImg;

      const propsToSet = {
        x: ximg,
        y: yimg,
        w: wimg,
        h: himg,
        angle: angleImg,
        src: srcImg,
        auto_scale: autoScale,
      };

      imgWidget.setProperty(prop.MORE, propsToSet);
    },
    widget: imgWidget,
  };
}