@panneau/medias 3.0.137 → 3.0.140

package/es/index.js

@@ -1,11 +1,11 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useContext, useMemo, useCallback, useState } from 'react';
+import React, { useContext, useMemo, useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
-import { useQuery } from '@panneau/core/hooks';
+import { useQuery, useItemSelection } from '@panneau/core/hooks';
 import Buttons from '@panneau/element-buttons';
 import Grid from '@panneau/element-grid';
 import Icon from '@panneau/element-icon';
@@ -324,7 +324,8 @@ var defaultFilters = [{
       }]
     }),
     value: 'audio'
-  }]
+  }],
+  multiple: true
 }, {
   id: 'author',
   component: 'select',
@@ -336,7 +337,8 @@ var defaultFilters = [{
       "value": "Author"
     }]
   }),
-  options: []
+  options: [],
+  multiple: true
 }, {
   id: 'tag',
   component: 'select',
@@ -348,7 +350,8 @@ var defaultFilters = [{
       "value": "Tag"
     }]
   }),
-  options: []
+  options: [],
+  multiple: true
 }, {
   id: 'search',
   component: 'search',
@@ -369,6 +372,9 @@ var propTypes$4 = {
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
+  onItemsChange: PropTypes.func,
+  selectedCount: PropTypes.number,
+  onClearSelected: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps$4 = {
@@ -378,7 +384,7 @@ var defaultProps$4 = {
   // fields: null,
   query: null,
   baseUrl: null,
-  layout: null,
+  layout: 'table',
   layouts: [{
     id: 'table',
     label: /*#__PURE__*/React.createElement(Icon, {
@@ -392,6 +398,9 @@ var defaultProps$4 = {
   }],
   theme: null,
   tableProps: null,
+  onItemsChange: null,
+  selectedCount: null,
+  onClearSelected: null,
   className: null
 };
 function MediasBrowser(_ref) {
@@ -404,6 +413,9 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     tableProps = _ref.tableProps,
+    onItemsChange = _ref.onItemsChange,
+    selectedCount = _ref.selectedCount,
+    onClearSelected = _ref.onClearSelected,
     className = _ref.className;
   var baseQuery = useMemo(function () {
     return initialQuery;
@@ -439,6 +451,9 @@ function MediasBrowser(_ref) {
     loading = _useMedias.loading,
     lastPage = _useMedias.lastPage,
     total = _useMedias.total;
+  useEffect(function () {
+    onItemsChange(items);
+  }, [items, onItemsChange]);
   var _useState = useState(initialLayout || 'grid'),
     _useState2 = _slicedToArray(_useState, 2),
     layout = _useState2[0],
@@ -449,6 +464,20 @@ function MediasBrowser(_ref) {
   var onClickLayout = useCallback(function (lay) {
     setLayout(lay);
   }, [setLayout]);
+  var pagination = /*#__PURE__*/React.createElement(Pagination, {
+    page: page,
+    lastPage: lastPage,
+    total: total,
+    url: baseUrl,
+    query: query,
+    onClickPage: onPageChange,
+    theme: theme,
+    loading: loading,
+    selectedCount: selectedCount,
+    onClearSelected: onClearSelected,
+    withPreviousNext: true,
+    alwaysShowButtons: true
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
   }, /*#__PURE__*/React.createElement(Filters, {
@@ -471,21 +500,11 @@ function MediasBrowser(_ref) {
         active: layout === lay.id,
         onClick: function onClick() {
           return onClickLayout(lay.id);
-        }
+        },
+        className: 'px-3'
       });
     })
-  }) : null, /*#__PURE__*/React.createElement(Pagination, {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onPageChange,
-    theme: theme,
-    loading: loading,
-    withPreviousNext: true,
-    alwaysShowButtons: true
-  })), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
+  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
     items: items || [],
     component: MediaCard,
     componentProps: {
@@ -500,18 +519,7 @@ function MediasBrowser(_ref) {
     }, "\u2014")
   })), /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
-  }, /*#__PURE__*/React.createElement(Pagination, {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onPageChange,
-    theme: theme,
-    loading: loading,
-    withPreviousNext: true,
-    alwaysShowButtons: true
-  })));
+  }, pagination));
 }
 MediasBrowser.propTypes = propTypes$4;
 MediasBrowser.defaultProps = defaultProps$4;
@@ -533,54 +541,99 @@ function MediasBrowserContainer(_ref) {
 MediasBrowserContainer.propTypes = propTypes$3;
 MediasBrowserContainer.defaultProps = defaultProps$3;
 
-var _excluded$2 = ["value", "onChange", "onConfirm", "multiple", "className"];
+var _excluded$2 = ["value", "selectedItems", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "className"];
 var propTypes$2 = {
   // eslint-disable-next-line react/forbid-prop-types
-  value: PropTypes.any,
+  value: PropTypes.arrayOf(PropTypes.shape({})),
+  selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
   onChange: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
   multiple: PropTypes.bool,
+  withoutButtons: PropTypes.bool,
   className: PropTypes.string
 };
 var defaultProps$2 = {
   value: null,
+  selectedItems: null,
+  onClose: null,
   multiple: false,
+  withoutButtons: false,
   className: null
 };
 function MediasPicker(_ref) {
   var value = _ref.value,
+    initialSelectedItems = _ref.selectedItems,
     onChange = _ref.onChange,
     onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose,
     multiple = _ref.multiple,
+    withoutButtons = _ref.withoutButtons,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  var onSelectionChange = useCallback(function (items) {
-    if (onChange !== null) {
-      onChange(items);
-    }
-  }, [onChange]);
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var onItemsChange = useCallback(function (pageItems) {
+    setItems(pageItems);
+  }, [setItems]);
   var disabled = value === null || value.length < 1;
+  var _useItemSelection = useItemSelection({
+      items: items,
+      selectedItems: initialSelectedItems,
+      onSelectionChange: onChange,
+      multipleSelection: multiple
+    }),
+    onSelectItem = _useItemSelection.onSelectItem,
+    onSelectPage = _useItemSelection.onSelectPage,
+    onClearSelected = _useItemSelection.onClearSelected,
+    pageSelected = _useItemSelection.pageSelected,
+    selectedCount = _useItemSelection.selectedCount,
+    selectedItems = _useItemSelection.selectedItems;
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
     tableProps: {
       selectable: true,
       multipleSelection: multiple,
-      onSelectionChange: onSelectionChange
-    }
-  }, props)), multiple ? /*#__PURE__*/React.createElement(Button, {
-    className: "mt-2",
+      onSelectItem: onSelectItem,
+      onSelectPage: onSelectPage,
+      selectedItems: selectedItems,
+      pageSelected: pageSelected
+    },
+    onItemsChange: onItemsChange,
+    selectedCount: selectedCount,
+    onClearSelected: onClearSelected
+  }, props)), multiple && !withoutButtons ? /*#__PURE__*/React.createElement("div", {
+    className: "d-flex w-100 align-items-end justify-content-end mt-3"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "btn-group"
+  }, onClose !== null ? /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    theme: "secondary",
+    onClick: onClose,
+    className: "d-block me-2"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "PyxZY2",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Cancel"
+    }]
+  })) : null, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    theme: "primary",
     onClick: onConfirm,
-    theme: "info",
     disabled: disabled,
-    outline: disabled
+    outline: disabled,
+    className: "d-block"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "UaVu03",
+    id: "rvOVCV",
     defaultMessage: [{
       "type": 0,
-      "value": "Confirm"
+      "value": "Confirm selection"
     }]
-  })) : null);
+  })))) : null);
 }
 MediasPicker.propTypes = propTypes$2;
 MediasPicker.defaultProps = defaultProps$2;

package/lib/index.js

@@ -328,7 +328,8 @@ var defaultFilters = [{
       }]
     }),
     value: 'audio'
-  }]
+  }],
+  multiple: true
 }, {
   id: 'author',
   component: 'select',
@@ -340,7 +341,8 @@ var defaultFilters = [{
       "value": "Author"
     }]
   }),
-  options: []
+  options: [],
+  multiple: true
 }, {
   id: 'tag',
   component: 'select',
@@ -352,7 +354,8 @@ var defaultFilters = [{
       "value": "Tag"
     }]
   }),
-  options: []
+  options: [],
+  multiple: true
 }, {
   id: 'search',
   component: 'search',
@@ -373,6 +376,9 @@ var propTypes$4 = {
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
+  onItemsChange: PropTypes.func,
+  selectedCount: PropTypes.number,
+  onClearSelected: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps$4 = {
@@ -382,7 +388,7 @@ var defaultProps$4 = {
   // fields: null,
   query: null,
   baseUrl: null,
-  layout: null,
+  layout: 'table',
   layouts: [{
     id: 'table',
     label: /*#__PURE__*/React.createElement(Icon, {
@@ -396,6 +402,9 @@ var defaultProps$4 = {
   }],
   theme: null,
   tableProps: null,
+  onItemsChange: null,
+  selectedCount: null,
+  onClearSelected: null,
   className: null
 };
 function MediasBrowser(_ref) {
@@ -408,6 +417,9 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     tableProps = _ref.tableProps,
+    onItemsChange = _ref.onItemsChange,
+    selectedCount = _ref.selectedCount,
+    onClearSelected = _ref.onClearSelected,
     className = _ref.className;
   var baseQuery = React.useMemo(function () {
     return initialQuery;
@@ -443,6 +455,9 @@ function MediasBrowser(_ref) {
     loading = _useMedias.loading,
     lastPage = _useMedias.lastPage,
     total = _useMedias.total;
+  React.useEffect(function () {
+    onItemsChange(items);
+  }, [items, onItemsChange]);
   var _useState = React.useState(initialLayout || 'grid'),
     _useState2 = _slicedToArray(_useState, 2),
     layout = _useState2[0],
@@ -453,6 +468,20 @@ function MediasBrowser(_ref) {
   var onClickLayout = React.useCallback(function (lay) {
     setLayout(lay);
   }, [setLayout]);
+  var pagination = /*#__PURE__*/React.createElement(Pagination, {
+    page: page,
+    lastPage: lastPage,
+    total: total,
+    url: baseUrl,
+    query: query,
+    onClickPage: onPageChange,
+    theme: theme,
+    loading: loading,
+    selectedCount: selectedCount,
+    onClearSelected: onClearSelected,
+    withPreviousNext: true,
+    alwaysShowButtons: true
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
   }, /*#__PURE__*/React.createElement(Filters, {
@@ -475,21 +504,11 @@ function MediasBrowser(_ref) {
         active: layout === lay.id,
         onClick: function onClick() {
           return onClickLayout(lay.id);
-        }
+        },
+        className: 'px-3'
       });
     })
-  }) : null, /*#__PURE__*/React.createElement(Pagination, {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onPageChange,
-    theme: theme,
-    loading: loading,
-    withPreviousNext: true,
-    alwaysShowButtons: true
-  })), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
+  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
     items: items || [],
     component: MediaCard,
     componentProps: {
@@ -504,18 +523,7 @@ function MediasBrowser(_ref) {
     }, "\u2014")
   })), /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
-  }, /*#__PURE__*/React.createElement(Pagination, {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onPageChange,
-    theme: theme,
-    loading: loading,
-    withPreviousNext: true,
-    alwaysShowButtons: true
-  })));
+  }, pagination));
 }
 MediasBrowser.propTypes = propTypes$4;
 MediasBrowser.defaultProps = defaultProps$4;
@@ -537,54 +545,99 @@ function MediasBrowserContainer(_ref) {
 MediasBrowserContainer.propTypes = propTypes$3;
 MediasBrowserContainer.defaultProps = defaultProps$3;
 
-var _excluded$2 = ["value", "onChange", "onConfirm", "multiple", "className"];
+var _excluded$2 = ["value", "selectedItems", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "className"];
 var propTypes$2 = {
   // eslint-disable-next-line react/forbid-prop-types
-  value: PropTypes.any,
+  value: PropTypes.arrayOf(PropTypes.shape({})),
+  selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
   onChange: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
   multiple: PropTypes.bool,
+  withoutButtons: PropTypes.bool,
   className: PropTypes.string
 };
 var defaultProps$2 = {
   value: null,
+  selectedItems: null,
+  onClose: null,
   multiple: false,
+  withoutButtons: false,
   className: null
 };
 function MediasPicker(_ref) {
   var value = _ref.value,
+    initialSelectedItems = _ref.selectedItems,
     onChange = _ref.onChange,
     onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose,
     multiple = _ref.multiple,
+    withoutButtons = _ref.withoutButtons,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  var onSelectionChange = React.useCallback(function (items) {
-    if (onChange !== null) {
-      onChange(items);
-    }
-  }, [onChange]);
+  var _useState = React.useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var onItemsChange = React.useCallback(function (pageItems) {
+    setItems(pageItems);
+  }, [setItems]);
   var disabled = value === null || value.length < 1;
+  var _useItemSelection = hooks.useItemSelection({
+      items: items,
+      selectedItems: initialSelectedItems,
+      onSelectionChange: onChange,
+      multipleSelection: multiple
+    }),
+    onSelectItem = _useItemSelection.onSelectItem,
+    onSelectPage = _useItemSelection.onSelectPage,
+    onClearSelected = _useItemSelection.onClearSelected,
+    pageSelected = _useItemSelection.pageSelected,
+    selectedCount = _useItemSelection.selectedCount,
+    selectedItems = _useItemSelection.selectedItems;
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
     tableProps: {
       selectable: true,
       multipleSelection: multiple,
-      onSelectionChange: onSelectionChange
-    }
-  }, props)), multiple ? /*#__PURE__*/React.createElement(Button, {
-    className: "mt-2",
+      onSelectItem: onSelectItem,
+      onSelectPage: onSelectPage,
+      selectedItems: selectedItems,
+      pageSelected: pageSelected
+    },
+    onItemsChange: onItemsChange,
+    selectedCount: selectedCount,
+    onClearSelected: onClearSelected
+  }, props)), multiple && !withoutButtons ? /*#__PURE__*/React.createElement("div", {
+    className: "d-flex w-100 align-items-end justify-content-end mt-3"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "btn-group"
+  }, onClose !== null ? /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    theme: "secondary",
+    onClick: onClose,
+    className: "d-block me-2"
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "PyxZY2",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Cancel"
+    }]
+  })) : null, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    theme: "primary",
     onClick: onConfirm,
-    theme: "info",
     disabled: disabled,
-    outline: disabled
+    outline: disabled,
+    className: "d-block"
   }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "UaVu03",
+    id: "rvOVCV",
     defaultMessage: [{
       "type": 0,
-      "value": "Confirm"
+      "value": "Confirm selection"
     }]
-  })) : null);
+  })))) : null);
 }
 MediasPicker.propTypes = propTypes$2;
 MediasPicker.defaultProps = defaultProps$2;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.137",
+    "version": "3.0.140",
     "description": "",
     "keywords": [
         "javascript"
@@ -46,16 +46,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^3.0.136",
-        "@panneau/data": "^3.0.136",
-        "@panneau/element-button": "^3.0.136",
-        "@panneau/element-buttons": "^3.0.136",
-        "@panneau/element-grid": "^3.0.136",
-        "@panneau/element-icon": "^3.0.136",
-        "@panneau/element-media-card": "^3.0.136",
-        "@panneau/element-pagination": "^3.0.136",
-        "@panneau/element-table": "^3.0.137",
-        "@panneau/filter-filters": "^3.0.137",
+        "@panneau/core": "^3.0.140",
+        "@panneau/data": "^3.0.140",
+        "@panneau/element-button": "^3.0.140",
+        "@panneau/element-buttons": "^3.0.140",
+        "@panneau/element-grid": "^3.0.140",
+        "@panneau/element-icon": "^3.0.140",
+        "@panneau/element-media-card": "^3.0.140",
+        "@panneau/element-pagination": "^3.0.140",
+        "@panneau/element-table": "^3.0.140",
+        "@panneau/filter-filters": "^3.0.140",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -64,5 +64,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "15122b8a8fa0e7b58a45d235171bbedd2e935d30"
+    "gitHead": "f148a421cabe2dfa529d2df1eaae42d0f4bb32c5"
 }