@panneau/medias 3.0.140 → 3.0.143

package/lib/index.js

@@ -8,8 +8,10 @@ var PropTypes = require('prop-types');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classNames = require('classnames');
+var reactIntl = require('react-intl');
 var core = require('@panneau/core');
 var hooks = require('@panneau/core/hooks');
+var Button = require('@panneau/element-button');
 var Buttons = require('@panneau/element-buttons');
 var Grid = require('@panneau/element-grid');
 var Icon = require('@panneau/element-icon');
@@ -17,10 +19,13 @@ var MediaCard = require('@panneau/element-media-card');
 var Pagination = require('@panneau/element-pagination');
 var Table = require('@panneau/element-table');
 var Filters = require('@panneau/filter-filters');
-var reactIntl = require('react-intl');
-var data = require('@panneau/data');
-var Button = require('@panneau/element-button');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var contexts = require('@panneau/core/contexts');
+var Form = require('@panneau/element-form');
+var MediaPlayer = require('@panneau/element-media-player');
+var MediaPreview = require('@panneau/element-media-preview');
+var lodash = require('lodash');
+var data = require('@panneau/data');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 
 /* eslint-disable react/jsx-props-no-spreading */
@@ -35,11 +40,11 @@ var apiPropTypes = PropTypes.shape({
   update: PropTypes.func.isRequired,
   "delete": PropTypes.func.isRequired
 });
-var propTypes$5 = {
+var propTypes$8 = {
   api: apiPropTypes,
   children: PropTypes.node.isRequired
 };
-var defaultProps$5 = {
+var defaultProps$8 = {
   api: null
 };
 function MediasApiProvider(_ref) {
@@ -53,10 +58,10 @@ function MediasApiProvider(_ref) {
     value: api
   }, children);
 }
-MediasApiProvider.propTypes = propTypes$5;
-MediasApiProvider.defaultProps = defaultProps$5;
+MediasApiProvider.propTypes = propTypes$8;
+MediasApiProvider.defaultProps = defaultProps$8;
 
-var _excluded$6 = ["items", "pageItems"];
+var _excluded$7 = ["items", "pageItems"];
 var useMedias = function useMedias() {
   var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -74,7 +79,7 @@ var useMedias = function useMedias() {
     }, opts)),
     items = _useItems.items,
     pageItems = _useItems.pageItems,
-    request = _objectWithoutProperties(_useItems, _excluded$6);
+    request = _objectWithoutProperties(_useItems, _excluded$7);
   return _objectSpread({
     medias: page !== null ? pageItems : items,
     allMedias: items
@@ -110,7 +115,7 @@ var useMediasRecent = function useMediasRecent(opts) {
 };
 var useMediasRecent$1 = useMediasRecent;
 
-var _excluded$5 = ["data"];
+var _excluded$6 = ["data"];
 var useMedia = function useMedia(id, opts) {
   var api = useMediasApi();
   var loader = React.useCallback(function () {
@@ -118,7 +123,7 @@ var useMedia = function useMedia(id, opts) {
   }, [api, id]);
   var _useData = data.useData(loader, opts),
     data$1 = _useData.data,
-    request = _objectWithoutProperties(_useData, _excluded$5);
+    request = _objectWithoutProperties(_useData, _excluded$6);
   return _objectSpread({
     story: data$1
   }, request);
@@ -165,6 +170,456 @@ var useMediaUpdate = function useMediaUpdate() {
 };
 var useMediaUpdate$1 = useMediaUpdate;
 
+var useMediaDestroy = function useMediaDestroy() {
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var api = useMediasApi();
+  var destroy = React.useCallback(function (id, data) {
+    setLoading(true);
+    return api["delete"](id, data).then(function (response) {
+      setLoading(false);
+      return response;
+    });
+  }, [api, setLoading]);
+  return {
+    destroy: destroy,
+    loading: loading
+  };
+};
+
+var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
+
+var propTypes$7 = {
+  value: PropTypes.shape({
+    id: PropTypes.string,
+    type: PropTypes.string
+  }),
+  className: PropTypes.string
+};
+var defaultProps$7 = {
+  value: null,
+  className: null
+};
+function MediaFrame(_ref) {
+  var value = _ref.value,
+    className = _ref.className;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPlayer = _useState2[0],
+    setShowPlayer = _useState2[1];
+  var _ref2 = value || {},
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type;
+  var onClick = React.useCallback(function () {
+    setShowPlayer(!showPlayer);
+  }, [showPlayer, setShowPlayer]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([className, _defineProperty({}, className, className != null)])
+  }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
+    value: value
+  }) : /*#__PURE__*/React.createElement(MediaPreview, {
+    value: value,
+    width: "100%"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.playButton
+  }, !showPlayer && (type === 'video' || type === 'embed' || type === 'audio') ? /*#__PURE__*/React.createElement(Button, {
+    className: "rounded-circle",
+    theme: "secondary",
+    onClick: onClick,
+    icon: "play-fill"
+  }) : null));
+}
+MediaFrame.propTypes = propTypes$7;
+MediaFrame.defaultProps = defaultProps$7;
+
+var _excluded$5 = ["label", "path", "component"];
+var propTypes$6 = {
+  value: PropTypes.shape({
+    metadata: PropTypes.shape({}),
+    user: PropTypes.shape({}),
+    createdAt: PropTypes.string
+  }),
+  sections: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.node,
+    items: PropTypes.arrayOf(PropTypes.shape({})) // displays
+  })),
+  displays: PropTypes.arrayOf(PropTypes.shape({
+    section: PropTypes.string
+  })),
+  className: PropTypes.string
+};
+var defaultProps$6 = {
+  value: null,
+  sections: null,
+  displays: null,
+  className: null
+};
+function MediaMetadata(_ref) {
+  var sections = _ref.sections,
+    displays = _ref.displays,
+    value = _ref.value,
+    className = _ref.className;
+  var displayComponents = contexts.useDisplaysComponentsManager();
+  var finalSections = React.useMemo(function () {
+    var displaysWithoutSection = (displays || []).filter(function (_ref2) {
+      var _ref2$section = _ref2.section,
+        section = _ref2$section === void 0 ? null : _ref2$section;
+      return section === null;
+    });
+    return (sections || []).map(function (_ref3) {
+      var _ref3$id = _ref3.id,
+        id = _ref3$id === void 0 ? null : _ref3$id,
+        _ref3$title = _ref3.title,
+        title = _ref3$title === void 0 ? null : _ref3$title;
+      return {
+        id: id,
+        title: title,
+        items: (displays || []).filter(function (_ref4) {
+          var _ref4$section = _ref4.section,
+            section = _ref4$section === void 0 ? null : _ref4$section;
+          return section === id;
+        })
+      };
+    }).concat({
+      title: null,
+      items: displaysWithoutSection
+    });
+  }, [sections, displays]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['px-2', _defineProperty({}, className, className !== null)])
+  }, (finalSections || []).map(function (_ref6, i) {
+    var _ref6$title = _ref6.title,
+      title = _ref6$title === void 0 ? null : _ref6$title,
+      _ref6$items = _ref6.items,
+      items = _ref6$items === void 0 ? [] : _ref6$items;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "mb-5",
+      key: "section-".concat(i + 1)
+    }, title !== null ? /*#__PURE__*/React.createElement("h6", {
+      className: "px-1"
+    }, title) : null, /*#__PURE__*/React.createElement("ul", {
+      className: "list-group list-group-flush"
+    }, (items || []).map(function (_ref7, index) {
+      var label = _ref7.label,
+        path = _ref7.path,
+        _ref7$component = _ref7.component,
+        component = _ref7$component === void 0 ? null : _ref7$component,
+        props = _objectWithoutProperties(_ref7, _excluded$5);
+      var Component = displayComponents.getComponent(component || 'text');
+      var itemValue = lodash.get(value, path, null);
+      return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
+        className: classNames(['row', 'd-flex', 'align-items-center', 'justify-content-between', 'p-1', 'border-secondary-1', 'border-1', 'border-bottom', 'text-small', {
+          'border-top': index === 0
+        }]),
+        key: "item-".concat(index + 1)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "col-auto"
+      }, label), /*#__PURE__*/React.createElement("div", {
+        className: "col-auto align-right"
+      }, /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
+        value: itemValue
+      })))) : null;
+    })));
+  }));
+}
+MediaMetadata.propTypes = propTypes$6;
+MediaMetadata.defaultProps = defaultProps$6;
+
+var defaultFields = [
+// { name: 'type', label: 'Type', type: 'string', component: 'text', disabled: true },
+{
+  name: 'name',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "WX83V9",
+    defaultMessage: [{
+      "type": 0,
+      "value": "File name"
+    }]
+  }),
+  type: 'text',
+  component: 'text'
+}, {
+  name: 'description',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "ygNvmz",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Description"
+    }]
+  }),
+  type: 'text',
+  component: 'text'
+}
+// {
+//     name: 'url',
+//     label: <FormattedMessage defaultMessage="URL" description="Field name" />,
+//     type: 'text',
+//     component: 'url',
+// },
+// {
+//     name: 'thumbnail_url',
+//     label: <FormattedMessage defaultMessage="Thumbnail URL" description="Field name" />,
+//     type: 'text',
+//     component: 'url',
+// },
+];
+
+var defaultDisplays = [{
+  id: 'user',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "yByaBh",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Added by"
+    }]
+  }),
+  component: 'avatar',
+  path: 'user',
+  section: 'info'
+}, {
+  id: 'created_at',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "PN+75e",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Created at"
+    }]
+  }),
+  component: 'date',
+  path: 'created_at',
+  format: 'yyyy-MM-dd hh:ss',
+  section: 'info'
+}, {
+  id: 'format',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "JuxiUN",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Format"
+    }]
+  }),
+  component: 'unit',
+  format: 'format',
+  path: 'format',
+  section: 'technical'
+}, {
+  id: 'dimensions',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "rmJBin",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Dimensions"
+    }]
+  }),
+  component: 'unit',
+  format: 'dimensions',
+  path: 'metadata',
+  section: 'technical'
+}, {
+  id: 'size',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "g2CRt5",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Size"
+    }]
+  }),
+  component: 'unit',
+  format: 'bytes',
+  path: 'metadata.size',
+  section: 'technical'
+}, {
+  id: 'duration',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "wU++NJ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Duration"
+    }]
+  }),
+  component: 'unit',
+  format: 'duration',
+  path: 'metadata.duration',
+  section: 'technical'
+}];
+
+var defaultSections = [{
+  id: 'info',
+  title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "3RT69u",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Informations"
+    }]
+  })
+}, {
+  id: 'technical',
+  title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "xKUOLG",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Technical details"
+    }]
+  })
+}];
+
+var propTypes$5 = {
+  value: PropTypes.shape({
+    id: PropTypes.string
+  }),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string
+  })),
+  sections: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    title: PropTypes.string
+  })),
+  displays: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string
+  })),
+  onChange: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onDelete: PropTypes.func,
+  onClose: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps$5 = {
+  value: null,
+  fields: defaultFields,
+  sections: defaultSections,
+  displays: defaultDisplays,
+  onClose: null,
+  onDelete: null,
+  className: null
+};
+function MediaForm(_ref) {
+  var initialValue = _ref.value,
+    initialFields = _ref.fields,
+    sections = _ref.sections,
+    displays = _ref.displays,
+    onChange = _ref.onChange,
+    onConfirm = _ref.onConfirm,
+    onDelete = _ref.onDelete,
+    onClose = _ref.onClose,
+    className = _ref.className;
+  var FieldsComponent = contexts.useFieldComponent('fields');
+  var _useMediaUpdate = useMediaUpdate$1(),
+    update = _useMediaUpdate.update,
+    updating = _useMediaUpdate.loading;
+  var _useMediaDestroy = useMediaDestroy(),
+    destroy = _useMediaDestroy.destroy,
+    destroying = _useMediaDestroy.loading;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2);
+    _useState2[0];
+    var setChanged = _useState2[1];
+  var disabled = updating || destroying || initialValue === null;
+  var _ref2 = initialValue || {},
+    _ref2$name = _ref2.name,
+    name = _ref2$name === void 0 ? null : _ref2$name,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type;
+  var onChangeMedia = React.useCallback(function (newValue) {
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+    setChanged(true);
+  }, [onChange, setChanged]);
+  var onMediaSaved = React.useCallback(function (newValue) {
+    if (onConfirm !== null) {
+      onConfirm(newValue);
+    }
+    setChanged(false);
+  }, [onChange, setChanged]);
+  var onDeleteMedia = React.useCallback(function () {
+    // Destroy
+    if (onClose !== null) {
+      onClose();
+    }
+    if (onDelete !== null) {
+      onDelete();
+    }
+    setChanged(false);
+  }, [destroy, setChanged]);
+  var postForm = React.useCallback(function (action, data) {
+    return initialValue !== null ? update(initialValue.id, data) : new Promise();
+  }, [initialValue, update]);
+  var _useForm = hooks.useForm({
+      fields: initialFields,
+      postForm: postForm,
+      onComplete: onMediaSaved,
+      value: initialValue,
+      setValue: onChange
+    }),
+    value = _useForm.value,
+    setValue = _useForm.setValue,
+    fields = _useForm.fields;
+    _useForm.onSubmit;
+    _useForm.status;
+    _useForm.generalError;
+    _useForm.errors;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['text-body', _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex w-100 justify-content-between mb-2 pb-2 border-bottom"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
+    className: "d-inline"
+  }, name), /*#__PURE__*/React.createElement("span", {
+    className: "mx-2"
+  }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    className: "me-2",
+    theme: "danger",
+    onClick: onDeleteMedia
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "Bhu3B2",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Delete"
+    }]
+  })), onConfirm !== null ? /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    onClick: onConfirm
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "R1HYj0",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Save"
+    }]
+  })) : null)), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-md-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "position-relative w-100",
+    style: {
+      height: 400
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.mediaFrame
+  }, /*#__PURE__*/React.createElement(MediaFrame, {
+    value: value
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "col-md-6"
+  }, /*#__PURE__*/React.createElement(Form, {
+    onChange: onChangeMedia,
+    withoutActions: true
+  }, /*#__PURE__*/React.createElement(FieldsComponent, {
+    fields: fields,
+    value: value,
+    onChange: setValue,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(MediaMetadata, {
+    className: "mt-5",
+    value: value,
+    sections: sections,
+    displays: displays
+  }))));
+}
+MediaForm.propTypes = propTypes$5;
+MediaForm.defaultProps = defaultProps$5;
+
 var defaultColumns = [{
   id: 'image',
   label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -362,20 +817,20 @@ var defaultFilters = [{
   name: 'search'
 }];
 
-var styles = {};
-
 var _excluded$4 = ["page", "count"];
 var propTypes$4 = {
   items: core.PropTypes.medias,
+  buttons: core.PropTypes.buttons,
   filters: core.PropTypes.filters,
   columns: core.PropTypes.tableColumns,
   query: PropTypes.shape({}),
   baseUrl: PropTypes.string,
-  // fields: PanneauPropTypes.fields,
+  fields: core.PropTypes.fields,
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
+  onSelectItem: PropTypes.func,
   onItemsChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
@@ -383,9 +838,10 @@ var propTypes$4 = {
 };
 var defaultProps$4 = {
   items: null,
+  buttons: null,
   filters: defaultFilters,
   columns: defaultColumns,
-  // fields: null,
+  fields: defaultFields,
   query: null,
   baseUrl: null,
   layout: 'table',
@@ -402,6 +858,7 @@ var defaultProps$4 = {
   }],
   theme: null,
   tableProps: null,
+  onSelectItem: null,
   onItemsChange: null,
   selectedCount: null,
   onClearSelected: null,
@@ -410,6 +867,7 @@ var defaultProps$4 = {
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
     baseUrl = _ref.baseUrl,
+    buttons = _ref.buttons,
     filters = _ref.filters,
     columns = _ref.columns,
     initialQuery = _ref.query,
@@ -417,6 +875,7 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     tableProps = _ref.tableProps,
+    onSelectItem = _ref.onSelectItem,
     onItemsChange = _ref.onItemsChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
@@ -456,7 +915,9 @@ function MediasBrowser(_ref) {
     lastPage = _useMedias.lastPage,
     total = _useMedias.total;
   React.useEffect(function () {
-    onItemsChange(items);
+    if (onItemsChange !== null) {
+      onItemsChange(items);
+    }
   }, [items, onItemsChange]);
   var _useState = React.useState(initialLayout || 'grid'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -468,6 +929,16 @@ function MediasBrowser(_ref) {
   var onClickLayout = React.useCallback(function (lay) {
     setLayout(lay);
   }, [setLayout]);
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    media = _useState4[0],
+    setMedia = _useState4[1];
+  var onOpenMedia = React.useCallback(function (currentMedia) {
+    setMedia(currentMedia);
+  }, [setMedia]);
+  var onCloseMedia = React.useCallback(function () {
+    setMedia(null);
+  }, [setMedia]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -484,13 +955,32 @@ function MediasBrowser(_ref) {
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
-  }, /*#__PURE__*/React.createElement(Filters, {
+  }, media !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "mt-2 mb-4"
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    outline: true,
+    onClick: onCloseMedia,
+    icon: "arrow-left"
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "ac4218",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Back to files"
+    }]
+  }))), /*#__PURE__*/React.createElement(MediaForm, {
+    value: media,
+    onClose: onCloseMedia
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    items: buttons,
+    className: "mb-2"
+  }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     value: query,
     filters: filters,
     onChange: onQueryChange,
     onReset: onQueryReset,
     theme: theme
-  }), /*#__PURE__*/React.createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
       'justify-content-end': !hasLayouts
@@ -509,21 +999,29 @@ function MediasBrowser(_ref) {
       });
     })
   }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
+    size: "xsmall",
     items: items || [],
     component: MediaCard,
     componentProps: {
       className: 'd-flex w-100',
-      cardClassName: 'flex-grow-1'
+      cardClassName: 'flex-grow-1',
+      vertical: true
+    },
+    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
+      return onOpenMedia(it);
     }
-  })) : /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
+  })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
     columns: columns,
     items: items,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
-    }, "\u2014")
-  })), /*#__PURE__*/React.createElement("div", {
+    }, "\u2014"),
+    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
+      return onOpenMedia(it);
+    }
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
-  }, pagination));
+  }, pagination)));
 }
 MediasBrowser.propTypes = propTypes$4;
 MediasBrowser.defaultProps = defaultProps$4;
@@ -606,6 +1104,7 @@ function MediasPicker(_ref) {
       selectedItems: selectedItems,
       pageSelected: pageSelected
     },
+    onSelectItem: onSelectItem,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected
@@ -721,6 +1220,7 @@ function MediasResourceBrowser(_ref) {
 MediasResourceBrowser.propTypes = propTypes;
 MediasResourceBrowser.defaultProps = defaultProps;
 
+exports.MediaForm = MediaForm;
 exports.MediasApiProvider = MediasApiProvider;
 exports.MediasBrowser = MediasBrowser;
 exports.MediasPicker = MediasPicker;