@micromag/media-gallery 0.4.89 → 0.4.90-alpha.1

package/es/index.d.ts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Media } from '@micromag/core';
+import { ForwardedRef } from 'react';
+import { DialogModalProps } from '@panneau/modal-dialog';
 
 interface MediaGalleryProps {
     value?: Media | Media[] | null;
@@ -25,4 +27,12 @@ interface MediaGalleryProps {
 }
 declare function MediaGallery({ value, types, source, filters: providedFilters, fields: providedFields, columns, isPicker, multiple, medias: initialMedias, query, onChange, onMediaFormOpen, onMediaFormClose, className, }: MediaGalleryProps): react_jsx_runtime.JSX.Element;
 
-export { MediaGallery as default };
+interface MediaGalleryModalProps extends Omit<DialogModalProps, 'id'>, MediaGalleryProps {
+    id?: string | null;
+    autoClose?: boolean;
+    withoutCloseOnComplete?: boolean;
+    formRef?: ForwardedRef<HTMLFormElement> | null;
+}
+declare function MediaGalleryModal({ id, title, size, visible, autoClose, multiple, requestClose: customRequestClose, onClosed, className, value: initialValue, onChange, ...props }: MediaGalleryModalProps): react_jsx_runtime.JSX.Element;
+
+export { MediaGallery, MediaGalleryModal, MediaGallery as default };

package/es/index.js

@@ -9,6 +9,8 @@ import { useApi, useMediaCreate } from '@micromag/data';
 import { FormattedMessage } from 'react-intl';
 import { jsx } from 'react/jsx-runtime';
 import { useUrlGenerator } from '@folklore/routes';
+import { useState } from 'react';
+import Dialog from '@panneau/modal-dialog';
 
 var defaultColumns = [{
   id: 'image',
@@ -569,7 +571,7 @@ function MediaGallery(t0) {
   } = t0;
   const value = t1 === undefined ? null : t1;
   const types = t2 === undefined ? null : t2;
-  const source = t3 === undefined ? "all" : t3;
+  const source = t3 === undefined ? null : t3;
   const providedFilters = t4 === undefined ? null : t4;
   const providedFields = t5 === undefined ? null : t5;
   const columns = t6 === undefined ? defaultColumns : t6;
@@ -792,7 +794,6 @@ function MediaGallery(t0) {
       className: styles.browser,
       api: mediasApi,
       value: pickerValue,
-      theme: "dark",
       types: finalTypes,
       query: finalQuery,
       items: initialMedias,
@@ -810,7 +811,6 @@ function MediaGallery(t0) {
     }) : /*#__PURE__*/jsx(MediasBrowserContainer, {
       className: styles.browser,
       api: mediasApi,
-      theme: "dark",
       types: finalTypes,
       query: finalQuery,
       items: initialMedias,
@@ -870,4 +870,227 @@ function _temp(t) {
   return ["image", "video", "audio"].indexOf(t) !== -1 ? `${t}/*` : null;
 }
 
-export { MediaGallery as default };
+function MediaGalleryModal(t0) {
+  const $ = c(47);
+  let initialValue;
+  let props;
+  let t1;
+  let t10;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== t0) {
+    ({
+      id: t1,
+      title: t2,
+      size: t3,
+      visible: t4,
+      autoClose: t5,
+      multiple: t6,
+      requestClose: t7,
+      onClosed: t8,
+      className: t9,
+      value: initialValue,
+      onChange: t10,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = initialValue;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t10;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+    $[11] = t8;
+    $[12] = t9;
+  } else {
+    initialValue = $[1];
+    props = $[2];
+    t1 = $[3];
+    t10 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+    t4 = $[7];
+    t5 = $[8];
+    t6 = $[9];
+    t7 = $[10];
+    t8 = $[11];
+    t9 = $[12];
+  }
+  const id = t1 === undefined ? null : t1;
+  const title = t2 === undefined ? null : t2;
+  const size = t3 === undefined ? "xl" : t3;
+  const visible = t4 === undefined ? null : t4;
+  const autoClose = t5 === undefined ? true : t5;
+  const multiple = t6 === undefined ? false : t6;
+  const customRequestClose = t7 === undefined ? null : t7;
+  const onClosed = t8 === undefined ? null : t8;
+  const className = t9 === undefined ? null : t9;
+  const onChange = t10 === undefined ? null : t10;
+  const [opened, setOpened] = useState(true);
+  const [formOpen, setFormOpen] = useState(false);
+  const [value, setValue] = useState(initialValue);
+  let t11;
+  if ($[13] !== customRequestClose) {
+    t11 = customRequestClose ?? (() => {
+      setOpened(false);
+    });
+    $[13] = customRequestClose;
+    $[14] = t11;
+  } else {
+    t11 = $[14];
+  }
+  const requestClose = t11;
+  let t12;
+  if ($[15] !== autoClose || $[16] !== multiple || $[17] !== onChange || $[18] !== requestClose) {
+    t12 = newValue => {
+      if (!autoClose || multiple) {
+        setValue(newValue);
+      } else {
+        if (onChange !== null) {
+          onChange(newValue);
+        }
+      }
+      if (autoClose && !multiple) {
+        requestClose();
+      }
+    };
+    $[15] = autoClose;
+    $[16] = multiple;
+    $[17] = onChange;
+    $[18] = requestClose;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  const onGalleryChange = t12;
+  let t13;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = () => {
+      setFormOpen(true);
+    };
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  const onFormOpen = t13;
+  let t14;
+  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = () => {
+      setFormOpen(false);
+    };
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  const onFormClose = t14;
+  let t15;
+  if ($[22] !== onChange || $[23] !== value) {
+    t15 = () => {
+      if (onChange !== null) {
+        onChange(value);
+      }
+    };
+    $[22] = onChange;
+    $[23] = value;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  const onClickSubmit = t15;
+  const t16 = id ?? "media-gallery";
+  let t17;
+  if ($[25] !== title) {
+    t17 = title || /*#__PURE__*/jsx(FormattedMessage, {
+      id: "ZpoE9K",
+      defaultMessage: "Select media"
+    });
+    $[25] = title;
+    $[26] = t17;
+  } else {
+    t17 = $[26];
+  }
+  const t18 = visible ?? opened;
+  const t19 = !formOpen;
+  const t20 = !formOpen;
+  let t21;
+  if ($[27] !== className) {
+    t21 = classNames(["modal-fullscreen-lg-down", className]);
+    $[27] = className;
+    $[28] = t21;
+  } else {
+    t21 = $[28];
+  }
+  let t22;
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "rvOVCV",
+      defaultMessage: "Confirm selection"
+    });
+    $[29] = t22;
+  } else {
+    t22 = $[29];
+  }
+  let t23;
+  if ($[30] !== multiple || $[31] !== onGalleryChange || $[32] !== props || $[33] !== value) {
+    t23 = /*#__PURE__*/jsx(MediaGallery, {
+      isPicker: true,
+      multiple: multiple,
+      value: value,
+      onChange: onGalleryChange,
+      onMediaFormOpen: onFormOpen,
+      onMediaFormClose: onFormClose,
+      ...props
+    });
+    $[30] = multiple;
+    $[31] = onGalleryChange;
+    $[32] = props;
+    $[33] = value;
+    $[34] = t23;
+  } else {
+    t23 = $[34];
+  }
+  let t24;
+  if ($[35] !== onClickSubmit || $[36] !== onClosed || $[37] !== requestClose || $[38] !== size || $[39] !== t16 || $[40] !== t17 || $[41] !== t18 || $[42] !== t19 || $[43] !== t20 || $[44] !== t21 || $[45] !== t23) {
+    t24 = /*#__PURE__*/jsx(Dialog, {
+      id: t16,
+      title: t17,
+      size: size,
+      visible: t18,
+      withCancelButton: t19,
+      withSubmitButton: t20,
+      requestClose: requestClose,
+      onClosed: onClosed,
+      onClickSubmit: onClickSubmit,
+      className: t21,
+      submitButtonLabel: t22,
+      children: t23
+    });
+    $[35] = onClickSubmit;
+    $[36] = onClosed;
+    $[37] = requestClose;
+    $[38] = size;
+    $[39] = t16;
+    $[40] = t17;
+    $[41] = t18;
+    $[42] = t19;
+    $[43] = t20;
+    $[44] = t21;
+    $[45] = t23;
+    $[46] = t24;
+  } else {
+    t24 = $[46];
+  }
+  return t24;
+}
+
+export { MediaGallery, MediaGalleryModal, MediaGallery as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.4.89",
+    "version": "0.4.90-alpha.1",
     "private": false,
     "description": "",
     "keywords": [
@@ -66,9 +66,9 @@
         "@fortawesome/fontawesome-svg-core": "^7.2.0",
         "@fortawesome/free-solid-svg-icons": "^7.2.0",
         "@fortawesome/react-fontawesome": "^3.2.0",
-        "@micromag/core": "^0.4.88",
-        "@micromag/data": "^0.4.88",
-        "@panneau/medias": "^4.0.42",
+        "@micromag/core": "^0.4.90-alpha.1",
+        "@micromag/data": "^0.4.90-alpha.1",
+        "@panneau/medias": "^4.0.55",
         "bootstrap": "^5.3.8",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
@@ -80,6 +80,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "b22ccb83a7c0679970a453b09e2be779ed68f839",
+    "gitHead": "a13dd2242ee733dc3b3663354783f0b4395f9926",
     "types": "es/index.d.ts"
 }