@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.314

package/components/basic/picture/index.js

@@ -1,131 +1,160 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmPicture = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _clsx2 = _interopRequireDefault(require("clsx"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _resourceUrl = require("@wavemaker-ai/react-runtime/utils/resource-url");
-var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
-var _excluded = ["pictureaspect", "resizemode", "pictureplaceholder", "tabindex", "onLoad", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "children", "show", "ref"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-var DEFAULT_CLASS = "app-picture";
-var OBJECT_FIT_MODES = ["fill", "cover", "contain"];
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
+import clsx from "clsx";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { prefixPrefabResourceUrl } from "../../../utils/resource-url";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const DEFAULT_CLASS = "app-picture";
+const OBJECT_FIT_MODES = ["fill", "cover", "contain"];
 function objectFitClassToken(resizemode) {
-  var raw = (resizemode || "cover").toLowerCase().trim();
+  const raw = (resizemode || "cover").toLowerCase().trim();
   return OBJECT_FIT_MODES.includes(raw) ? raw : "cover";
 }
-var WmPicture = exports.WmPicture = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _props$pictureaspect = props.pictureaspect,
-    pictureaspect = _props$pictureaspect === void 0 ? "None" : _props$pictureaspect,
-    _props$resizemode = props.resizemode,
-    resizemode = _props$resizemode === void 0 ? "fill" : _props$resizemode,
-    _props$pictureplaceho = props.pictureplaceholder,
-    pictureplaceholder = _props$pictureplaceho === void 0 ? "resources/images/imagelists/default-image.png" : _props$pictureplaceho,
-    _props$tabindex = props.tabindex,
-    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
-    onLoad = props.onLoad,
-    onClick = props.onClick,
-    onDoubleClick = props.onDoubleClick,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    children = props.children,
-    show = props.show,
-    ref = props.ref,
-    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var sourceProp = props.picturesource || props.imgSource;
-  var _useState = (0, _react.useState)(sourceProp),
-    imgSource = _useState[0],
-    setImgSource = _useState[1];
-  var _useState2 = (0, _react.useState)(props.width || "auto"),
-    imageWidth = _useState2[0],
-    setImageWidth = _useState2[1];
-  var _useState3 = (0, _react.useState)(props.height || "auto"),
-    imageHeight = _useState3[0],
-    setImageHeight = _useState3[1];
-  (0, _react.useEffect)(function () {
-    var source = sourceProp || "";
-    if (props.encodeurl) {
-      source = encodeURIComponent(source);
-    }
-    var prefixed = (0, _resourceUrl.prefixPrefabResourceUrl)(source || props.pictureplaceholder || "", props.prefabName);
-    setImgSource(prefixed);
-  }, [sourceProp, props.encodeurl, props.pictureplaceholder, props.prefabName]);
-  (0, _react.useEffect)(function () {
-    switch (props.pictureaspect) {
-      case "H":
-        setImageWidth(props.width || "100%");
-        setImageHeight("auto");
-        break;
-      case "V":
-        setImageWidth("auto");
-        setImageHeight(props.height || "100%");
-        break;
-      case "Both":
-        setImageWidth(props.height || "100%");
-        setImageHeight(props.height || "100%");
-        break;
-      case "None":
-      default:
-        setImageWidth(props.width);
-        setImageHeight(props.height);
-        break;
-    }
-  }, [props.pictureaspect, props.width, props.height]);
-  var onClickHandler = function onClickHandler(event) {
-    onClick && onClick(event, props);
-  };
-  var onDoubleClickHandler = function onDoubleClickHandler(event) {
-    onDoubleClick && onDoubleClick(event, props);
-  };
-  var onMouseEnterHandler = function onMouseEnterHandler(event) {
-    onMouseEnter && onMouseEnter(event, props);
-  };
-  var onMouseLeaveHandler = function onMouseLeaveHandler(event) {
-    onMouseLeave && onMouseLeave(event, props);
-  };
-  return __jsx(_react["default"].Fragment, null, __jsx("img", (0, _extends2["default"])({}, (0, _attr.removeInvalidAttributes)(restProps), {
-    ref: ref,
-    "data-identifier": "img",
-    title: props.hint || props.name,
-    onClick: onClickHandler,
-    onDoubleClick: onDoubleClickHandler,
-    onMouseEnter: onMouseEnterHandler,
-    onMouseLeave: onMouseLeaveHandler,
-    src: imgSource || pictureplaceholder,
-    alt: props.alttext || "image alt text not provided",
-    className: (0, _clsx2["default"])(DEFAULT_CLASS, "wm-picture-object-fit-".concat(objectFitClassToken(resizemode)), (0, _defineProperty2["default"])({}, "img-".concat(props.shape), props.shape), props.className),
-    style: props.styles,
-    height: imageHeight,
-    width: imageWidth,
-    "aria-label": props.arialabel || "Picture content",
-    tabIndex: tabindex,
-    name: props.name
-  })), children);
-}, function (prev, current) {
-  var keysToCompare = ["picturesource", "imgSource", "show"];
-  return keysToCompare.every(function (key) {
-    return prev[key] === current[key];
-  });
-});
+const WmPicture = memo(
+  (props) => {
+    let _a = props, {
+      pictureaspect = "None",
+      resizemode = "fill",
+      pictureplaceholder = "resources/images/imagelists/default-image.png",
+      tabindex = 0,
+      onLoad,
+      onClick,
+      onDoubleClick,
+      onMouseEnter,
+      onMouseLeave,
+      children,
+      show,
+      ref
+    } = _a, restProps = __objRest(_a, [
+      "pictureaspect",
+      "resizemode",
+      "pictureplaceholder",
+      "tabindex",
+      "onLoad",
+      "onClick",
+      "onDoubleClick",
+      "onMouseEnter",
+      "onMouseLeave",
+      "children",
+      "show",
+      "ref"
+    ]);
+    const sourceProp = props.picturesource || props.imgSource;
+    const [imgSource, setImgSource] = useState(sourceProp);
+    const [imageWidth, setImageWidth] = useState(props.width || "auto");
+    const [imageHeight, setImageHeight] = useState(props.height || "auto");
+    useEffect(() => {
+      let source = sourceProp || "";
+      if (props.encodeurl) {
+        source = encodeURIComponent(source);
+      }
+      const prefixed = prefixPrefabResourceUrl(
+        source || props.pictureplaceholder || "",
+        props.prefabName
+      );
+      setImgSource(prefixed);
+    }, [sourceProp, props.encodeurl, props.pictureplaceholder, props.prefabName]);
+    useEffect(() => {
+      switch (props.pictureaspect) {
+        case "H":
+          setImageWidth(props.width || "100%");
+          setImageHeight("auto");
+          break;
+        case "V":
+          setImageWidth("auto");
+          setImageHeight(props.height || "100%");
+          break;
+        case "Both":
+          setImageWidth(props.height || "100%");
+          setImageHeight(props.height || "100%");
+          break;
+        case "None":
+        default:
+          setImageWidth(props.width);
+          setImageHeight(props.height);
+          break;
+      }
+    }, [props.pictureaspect, props.width, props.height]);
+    const onClickHandler = (event) => {
+      onClick && onClick(event, props);
+    };
+    const onDoubleClickHandler = (event) => {
+      onDoubleClick && onDoubleClick(event, props);
+    };
+    const onMouseEnterHandler = (event) => {
+      onMouseEnter && onMouseEnter(event, props);
+    };
+    const onMouseLeaveHandler = (event) => {
+      onMouseLeave && onMouseLeave(event, props);
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        __spreadValues(__spreadProps(__spreadValues({}, removeInvalidAttributes(restProps)), {
+          ref,
+          "data-identifier": "img",
+          title: props.hint || props.name,
+          onClick: onClickHandler,
+          onDoubleClick: onDoubleClickHandler,
+          onMouseEnter: onMouseEnterHandler,
+          onMouseLeave: onMouseLeaveHandler,
+          src: imgSource || pictureplaceholder,
+          alt: props.alttext || "image alt text not provided",
+          className: clsx(
+            DEFAULT_CLASS,
+            `wm-picture-object-fit-${objectFitClassToken(resizemode)}`,
+            { [`img-${props.shape}`]: props.shape },
+            props.className
+          ),
+          style: props.styles,
+          height: imageHeight,
+          width: imageWidth,
+          "aria-label": props.arialabel || "Picture content",
+          tabIndex: tabindex
+        }), { name: props.name })
+      ),
+      children
+    ] });
+  },
+  (prev, current) => {
+    const keysToCompare = ["picturesource", "imgSource", "show"];
+    return keysToCompare.every((key) => prev[key] === current[key]);
+  }
+);
 WmPicture.displayName = "WmPicture";
-
-/**
- * The WmPicture component is used to display images with support for placeholders,
- * aspect ratios, and various shapes.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-picture--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-picture--docs)
- *
- * @param props - {@link WmPictureProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmPicture);
+var picture_default = withBaseWrapper(WmPicture);
+export {
+  WmPicture,
+  picture_default as default
+};

package/components/basic/picture/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});