@gisce/react-ooui 2.111.0-alpha.2 → 2.111.0-alpha.4

package/dist/react-ooui.es.js

@@ -1103,51 +1103,53 @@ function rl(t, e) {
   window.open(a);
 }
 const As = (t) => {
-  const { value: e, style: n = {} } = t;
+  const { value: e, style: n = {}, width: r, height: o } = t;
   if (e) {
-    const r = Mt(e);
-    return r ? /* @__PURE__ */ s(r, {}) : /* @__PURE__ */ s(
-      "img",
-      {
-        src: `data:image/*;base64,${e}`,
-        style: { maxWidth: "100px", ...n }
-      }
+    const i = o || r, c = Mt(
+      e,
+      i ? { style: i ? { fontSize: i } : {} } : void 0
     );
+    if (c)
+      return /* @__PURE__ */ s(c, {});
+    {
+      const l = { ...n };
+      return r && o ? (l.width = `${r}px`, l.height = `${o}px`) : r ? (l.width = `${r}px`, l.height = "auto") : o ? (l.height = `${o}px`, l.width = "auto") : l.maxWidth = "100px", /* @__PURE__ */ s("img", { src: `data:image/*;base64,${e}`, style: l });
+    }
   }
 }, gf = (t) => {
-  const { ooui: e } = t, { required: n, id: r } = e;
-  return Mt(r) ? /* @__PURE__ */ s(As, { value: r }) : /* @__PURE__ */ s(Ye, { required: n, ...t, children: /* @__PURE__ */ s(yf, { ooui: e }) });
+  const { ooui: e } = t, { required: n, id: r, width: o, height: i } = e;
+  return Mt(r) ? /* @__PURE__ */ s(As, { value: r, width: o, height: i }) : /* @__PURE__ */ s(Ye, { required: n, ...t, children: /* @__PURE__ */ s(yf, { ooui: e }) });
 }, yf = (t) => {
-  const { ooui: e, value: n, onChange: r } = t, { readOnly: o } = e, i = z(null), { t: a } = xe(), c = (u) => {
-    r == null || r(u);
+  const { ooui: e, value: n, onChange: r } = t, { readOnly: o, width: i, height: a } = e, c = z(null), { t: l } = xe(), d = (m) => {
+    r == null || r(m);
   };
-  async function l() {
-    const u = await Qn(n), p = `data:${u == null ? void 0 : u.mime};base64,${n}`, m = document.createElement("a");
-    m.href = p, m.download = `image.${u == null ? void 0 : u.ext}`, m.click();
+  async function f() {
+    const m = await Qn(n), g = `data:${m == null ? void 0 : m.mime};base64,${n}`, h = document.createElement("a");
+    h.href = g, h.download = `image.${m == null ? void 0 : m.ext}`, h.click();
   }
-  async function d(u) {
-    u.stopPropagation(), u.preventDefault();
-    const p = u.target.files[0], m = await tl(p);
-    c(m);
+  async function u(m) {
+    m.stopPropagation(), m.preventDefault();
+    const g = m.target.files[0], h = await tl(g);
+    d(h);
   }
-  function f() {
-    c(void 0);
+  function p() {
+    d(void 0);
   }
   return /* @__PURE__ */ j(we, { children: [
     /* @__PURE__ */ j(Ze, { gutter: 8, wrap: !1, justify: "center", children: [
       Q(
-        () => /* @__PURE__ */ s(As, { value: n }),
-        [n]
+        () => /* @__PURE__ */ s(As, { value: n, width: i, height: a }),
+        [n, i, a]
       ),
       /* @__PURE__ */ s(
         "input",
         {
           type: "file",
           id: "file",
-          ref: i,
+          ref: c,
           accept: "image/*",
           style: { display: "none" },
-          onChange: d
+          onChange: u
         }
       )
     ] }),
@@ -1155,29 +1157,29 @@ const As = (t) => {
       /* @__PURE__ */ s(
         St,
         {
-          tooltip: a("uploadNewImage"),
+          tooltip: l("uploadNewImage"),
           icon: /* @__PURE__ */ s(gs, {}),
           disabled: o,
           onClick: () => {
-            i.current.click();
+            c.current.click();
           }
         }
       ),
       /* @__PURE__ */ s(
         St,
         {
-          tooltip: a("download"),
+          tooltip: l("download"),
           disabled: !n,
-          onClick: l,
+          onClick: f,
           icon: /* @__PURE__ */ s(ys, {})
         }
       ),
       /* @__PURE__ */ s(
         St,
         {
-          tooltip: a("clear"),
+          tooltip: l("clear"),
           disabled: o || !n,
-          onClick: f,
+          onClick: p,
           icon: /* @__PURE__ */ s(ir, {})
         }
       )