@panneau/field-resource-item 2.0.79 → 2.0.80

package/es/index.js

@@ -3,7 +3,6 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
-import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
@@ -19,6 +18,8 @@ import Select from '@panneau/element-select';
 import ResourceForm from '@panneau/form-resource';
 import { useResourceValues } from '@panneau/intl';
 import Dialog from '@panneau/modal-dialog';
+import '@panneau/modal-resource-form';
+import ResourceItemsModal from '@panneau/modal-resource-items';
 
 var propTypes = {
   name: PropTypes.string,
@@ -47,9 +48,11 @@ var propTypes = {
   placeholder: PropTypes.string,
   canCreate: PropTypes.bool,
   canEdit: PropTypes.bool,
+  canFind: PropTypes.bool,
   withoutModal: PropTypes.bool,
-  createButtonLabel: PropTypes$1.string,
+  createButtonLabel: PropTypes$1.message,
   editButtonLabel: PropTypes$1.message,
+  findButtonLabel: PropTypes$1.message,
   multiple: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
@@ -78,9 +81,11 @@ var defaultProps = {
   placeholder: null,
   canCreate: false,
   canEdit: false,
+  canFind: false,
   withoutModal: false,
   createButtonLabel: null,
   editButtonLabel: null,
+  findButtonLabel: null,
   multiple: false,
   disabled: false,
   className: null,
@@ -88,7 +93,7 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref9;
+  var _ref10;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
@@ -110,9 +115,11 @@ var ResourceItemField = function ResourceItemField(_ref) {
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
     canEdit = _ref.canEdit,
+    canFind = _ref.canFind,
     withoutModal = _ref.withoutModal,
     createButtonLabel = _ref.createButtonLabel,
     editButtonLabel = _ref.editButtonLabel,
+    findButtonLabel = _ref.findButtonLabel,
     multiple = _ref.multiple,
     disabled = _ref.disabled,
     className = _ref.className,
@@ -123,39 +130,45 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var resourceValues = useResourceValues(resource);
   var defaultPage = initialPage || (paginated ? 1 : null);
   var defaultCount = initialCount || (paginated ? 10 : null);
+  var hasValue = value !== null && !isEmpty(value);
+
   // const [initialValue] = useState(value);
 
-  var _useState = useState(initialCount),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     formOpen = _useState2[0],
     setFormOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    listOpen = _useState4[0],
+    setListOpen = _useState4[1];
 
   // The text input search query
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inputTextValue = _useState4[0],
-    setInputTextValue = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    inputTextValue = _useState6[0],
+    setInputTextValue = _useState6[1];
   var onInputChange = useCallback(function (textValue) {
     setInputTextValue(textValue);
   }, []);
 
   // TODO: list state controls?
-  var _useState5 = useState(initialQuery),
-    _useState6 = _slicedToArray(_useState5, 2),
-    query = _useState6[0];
-    _useState6[1];
-  var _useState7 = useState(defaultPage),
+  var _useState7 = useState(initialQuery),
     _useState8 = _slicedToArray(_useState7, 2),
-    page = _useState8[0],
-    setPage = _useState8[1];
-  var _useState9 = useState(defaultCount),
+    query = _useState8[0];
+    _useState8[1];
+  var _useState9 = useState(defaultPage),
     _useState10 = _slicedToArray(_useState9, 2),
-    count = _useState10[0];
-    _useState10[1];
-  var _useState11 = useState(initialOptions),
+    page = _useState10[0],
+    setPage = _useState10[1];
+  var _useState11 = useState(defaultCount),
     _useState12 = _slicedToArray(_useState11, 2),
-    resourceOptions = _useState12[0];
+    count = _useState12[0];
     _useState12[1];
+  var _useState13 = useState(initialOptions),
+    _useState14 = _slicedToArray(_useState13, 2),
+    resourceOptions = _useState14[0];
+    _useState14[1];
   var queryResource = useMemo(function () {
     return {
       id: resourceId
@@ -194,13 +207,18 @@ var ResourceItemField = function ResourceItemField(_ref) {
     }
   }, [paginated, page, setPage, lastPage]);
   var getItemLabel = useCallback(function (it, path) {
-    var id = get(it, 'id', null);
+    var _ref4 = it || {},
+      _ref4$id = _ref4.id,
+      id = _ref4$id === void 0 ? null : _ref4$id;
     if (itemLabelWithId) {
       var label = initialGetItemLabel(it, path);
       return label ? "".concat(label, " (#").concat(id, ")") : "#".concat(id);
     }
     return path !== null ? initialGetItemLabel(it, path) : "#".concat(id);
   }, [initialGetItemLabel, itemLabelWithId]);
+
+  // const getItemLabel = getItemLabelFunction(initialGetItemLabel, itemLabelWithId);
+
   var parseItem = useCallback(function (it) {
     var label = getItemLabel(it, itemLabelPath);
     var description = getItemDescription(it, itemDescriptionPath);
@@ -210,32 +228,32 @@ var ResourceItemField = function ResourceItemField(_ref) {
       label: finalLabel
     };
   }, [getItemLabel, getItemDescription, itemLabelPath, itemDescriptionPath]);
-  var finalValue = multiple && isArray(value) ? value.map(function (_ref4) {
-    var _ref4$id = _ref4.id,
-      id = _ref4$id === void 0 ? null : _ref4$id;
+  var finalValue = multiple && isArray(value) ? value.map(function (_ref5) {
+    var _ref5$id = _ref5.id,
+      id = _ref5$id === void 0 ? null : _ref5$id;
     return id;
   }) : (value === null || value === void 0 ? void 0 : value.id) || null;
-  var _ref5 = !multiple && value !== null ? value : {
+  var _ref6 = !multiple && hasValue ? value : {
       type: resourceType
     },
-    _ref5$type = _ref5.type,
-    finalType = _ref5$type === void 0 ? null : _ref5$type;
+    _ref6$type = _ref6.type,
+    finalType = _ref6$type === void 0 ? null : _ref6$type;
   var options = (items || []).map(function (it) {
     return parseItem(it);
   });
   var onValueChange = useCallback(function (newId) {
     if (onChange === null) return;
     if (multiple) {
-      var newValue = items.filter(function (_ref6) {
-        var _ref6$id = _ref6.id,
-          id = _ref6$id === void 0 ? null : _ref6$id;
+      var newValue = items.filter(function (_ref7) {
+        var _ref7$id = _ref7.id,
+          id = _ref7$id === void 0 ? null : _ref7$id;
         return newId.indexOf(id) !== -1;
       }) || [];
       onChange(newValue);
     } else {
-      var _newValue = items.filter(function (_ref7) {
-        var _ref7$id = _ref7.id,
-          id = _ref7$id === void 0 ? null : _ref7$id;
+      var _newValue = items.filter(function (_ref8) {
+        var _ref8$id = _ref8.id,
+          id = _ref8$id === void 0 ? null : _ref8$id;
         return id === newId;
       }) || [];
       if (_newValue !== null && _newValue.length > 0) {
@@ -257,12 +275,24 @@ var ResourceItemField = function ResourceItemField(_ref) {
       type: resourceType
     }, newValue) : newValue;
     if (multiple) {
-      onChange(value !== null && isArray(value) ? [].concat(_toConsumableArray(value), [finalNewValue]) : [finalNewValue]);
+      onChange(isArray(value) ? [].concat(_toConsumableArray(value), [finalNewValue]) : [finalNewValue]);
     } else {
       onChange(finalNewValue);
     }
     setFormOpen(false);
   }, [onChange, multiple, value, setFormOpen, resourceType, paginated, initialPage]);
+  var onOpenList = useCallback(function () {
+    setListOpen(false); // TODO: fix this
+  }, [setListOpen]);
+  var onCloseList = useCallback(function () {
+    setListOpen(false);
+  }, [setListOpen]);
+  var onSelectListItem = useCallback(function (newValue) {
+    if (onChange !== null) {
+      onChange(newValue);
+      setListOpen(false);
+    }
+  }, [onChange, setListOpen]);
 
   // If empty try to fetch
   var onFocus = useCallback(function () {
@@ -294,7 +324,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['position-relative', _defineProperty({}, className, className != null)])
-  }, value !== null && !multiple ? /*#__PURE__*/React.createElement("div", {
+  }, hasValue && !multiple ? /*#__PURE__*/React.createElement("div", {
     className: "row"
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-10 flex-grow-1"
@@ -309,21 +339,15 @@ var ResourceItemField = function ResourceItemField(_ref) {
     itemImagePath: itemImagePath,
     itemLabelWithId: itemLabelWithId,
     disable: disabled,
-    onClickRemove: onClickRemove
-  })), canEdit && !multiple ? /*#__PURE__*/React.createElement("div", {
-    className: "col-auto"
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    icon: editButtonLabel === null ? 'pencil-square' : null,
-    onClick: formOpen ? onCloseForm : onOpenForm,
-    outline: true,
-    disabled: finalValue === null
-  }, editButtonLabel)) : null) : /*#__PURE__*/React.createElement("div", {
+    onClickEdit: canEdit && !multiple ? formOpen ? onCloseForm : onOpenForm : null,
+    onClickRemove: onClickRemove,
+    editButtonLabel: editButtonLabel
+  }))) : /*#__PURE__*/React.createElement("div", {
     className: "row align-items-center"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "col-10 flex-grow-1"
+    className: "col-8 flex-grow-1"
   }, /*#__PURE__*/React.createElement(Select, {
-    className: classNames(['py-1', 'shadow-none', (_ref9 = {}, _defineProperty(_ref9, disabled, disabled), _defineProperty(_ref9, 'is-invalid', errors !== null), _defineProperty(_ref9, inputClassName, inputClassName !== null), _ref9)]),
+    className: classNames(['py-1', 'shadow-none', (_ref10 = {}, _defineProperty(_ref10, disabled, disabled), _defineProperty(_ref10, 'is-invalid', errors !== null), _defineProperty(_ref10, inputClassName, inputClassName !== null), _ref10)]),
     disabled: disabled,
     name: name,
     value: finalValue,
@@ -342,7 +366,14 @@ var ResourceItemField = function ResourceItemField(_ref) {
     onFocus: onFocus,
     onMenuScrollToBottom: onScrollEnd,
     multiple: multiple
-  })), canCreate ? /*#__PURE__*/React.createElement("div", {
+  })), canFind ? /*#__PURE__*/React.createElement("div", {
+    className: "col-auto"
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    icon: findButtonLabel === null ? 'search' : null,
+    onClick: listOpen ? onCloseList : onOpenList,
+    outline: true
+  }, findButtonLabel)) : null, canCreate ? /*#__PURE__*/React.createElement("div", {
     className: "col-auto"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
@@ -352,7 +383,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, createButtonLabel)) : null), formOpen ? withoutModal ? /*#__PURE__*/React.createElement("div", {
     className: "card mt-4 p-4"
   }, form) : /*#__PURE__*/React.createElement(Dialog, {
-    title: !multiple && value !== null ? /*#__PURE__*/React.createElement(FormattedMessage, {
+    title: hasValue && !multiple ? /*#__PURE__*/React.createElement(FormattedMessage, {
       values: resourceValues,
       id: "mCfzkJ",
       defaultMessage: [{
@@ -375,7 +406,16 @@ var ResourceItemField = function ResourceItemField(_ref) {
     }),
     size: "lg",
     onClose: onCloseForm
-  }, form) : null);
+  }, form) : null, listOpen ? /*#__PURE__*/React.createElement(ResourceItemsModal, {
+    resource: resourceId,
+    onClose: onCloseList,
+    listProps: {
+      actions: ['select'],
+      actionsProps: {
+        onClickSelect: onSelectListItem
+      }
+    }
+  }) : null);
 };
 ResourceItemField.propTypes = propTypes;
 ResourceItemField.defaultProps = defaultProps;

package/lib/index.js

@@ -7,7 +7,6 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classNames = require('classnames');
-var get = require('lodash/get');
 var isArray = require('lodash/isArray');
 var isEmpty = require('lodash/isEmpty');
 var PropTypes = require('prop-types');
@@ -23,6 +22,8 @@ var Select = require('@panneau/element-select');
 var ResourceForm = require('@panneau/form-resource');
 var intl = require('@panneau/intl');
 var Dialog = require('@panneau/modal-dialog');
+require('@panneau/modal-resource-form');
+var ResourceItemsModal = require('@panneau/modal-resource-items');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +32,6 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
@@ -41,6 +41,7 @@ var ResourceCard__default = /*#__PURE__*/_interopDefaultLegacy(ResourceCard);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var ResourceForm__default = /*#__PURE__*/_interopDefaultLegacy(ResourceForm);
 var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
+var ResourceItemsModal__default = /*#__PURE__*/_interopDefaultLegacy(ResourceItemsModal);
 
 var propTypes = {
   name: PropTypes__default["default"].string,
@@ -69,9 +70,11 @@ var propTypes = {
   placeholder: PropTypes__default["default"].string,
   canCreate: PropTypes__default["default"].bool,
   canEdit: PropTypes__default["default"].bool,
+  canFind: PropTypes__default["default"].bool,
   withoutModal: PropTypes__default["default"].bool,
-  createButtonLabel: core.PropTypes.string,
+  createButtonLabel: core.PropTypes.message,
   editButtonLabel: core.PropTypes.message,
+  findButtonLabel: core.PropTypes.message,
   multiple: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
@@ -100,9 +103,11 @@ var defaultProps = {
   placeholder: null,
   canCreate: false,
   canEdit: false,
+  canFind: false,
   withoutModal: false,
   createButtonLabel: null,
   editButtonLabel: null,
+  findButtonLabel: null,
   multiple: false,
   disabled: false,
   className: null,
@@ -110,7 +115,7 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref9;
+  var _ref10;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
@@ -132,9 +137,11 @@ var ResourceItemField = function ResourceItemField(_ref) {
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
     canEdit = _ref.canEdit,
+    canFind = _ref.canFind,
     withoutModal = _ref.withoutModal,
     createButtonLabel = _ref.createButtonLabel,
     editButtonLabel = _ref.editButtonLabel,
+    findButtonLabel = _ref.findButtonLabel,
     multiple = _ref.multiple,
     disabled = _ref.disabled,
     className = _ref.className,
@@ -145,39 +152,45 @@ var ResourceItemField = function ResourceItemField(_ref) {
   var resourceValues = intl.useResourceValues(resource);
   var defaultPage = initialPage || (paginated ? 1 : null);
   var defaultCount = initialCount || (paginated ? 10 : null);
+  var hasValue = value !== null && !isEmpty__default["default"](value);
+
   // const [initialValue] = useState(value);
 
-  var _useState = React.useState(initialCount),
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     formOpen = _useState2[0],
     setFormOpen = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    listOpen = _useState4[0],
+    setListOpen = _useState4[1];
 
   // The text input search query
-  var _useState3 = React.useState(''),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    inputTextValue = _useState4[0],
-    setInputTextValue = _useState4[1];
+  var _useState5 = React.useState(''),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    inputTextValue = _useState6[0],
+    setInputTextValue = _useState6[1];
   var onInputChange = React.useCallback(function (textValue) {
     setInputTextValue(textValue);
   }, []);
 
   // TODO: list state controls?
-  var _useState5 = React.useState(initialQuery),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
-    query = _useState6[0];
-    _useState6[1];
-  var _useState7 = React.useState(defaultPage),
+  var _useState7 = React.useState(initialQuery),
     _useState8 = _slicedToArray__default["default"](_useState7, 2),
-    page = _useState8[0],
-    setPage = _useState8[1];
-  var _useState9 = React.useState(defaultCount),
+    query = _useState8[0];
+    _useState8[1];
+  var _useState9 = React.useState(defaultPage),
     _useState10 = _slicedToArray__default["default"](_useState9, 2),
-    count = _useState10[0];
-    _useState10[1];
-  var _useState11 = React.useState(initialOptions),
+    page = _useState10[0],
+    setPage = _useState10[1];
+  var _useState11 = React.useState(defaultCount),
     _useState12 = _slicedToArray__default["default"](_useState11, 2),
-    resourceOptions = _useState12[0];
+    count = _useState12[0];
     _useState12[1];
+  var _useState13 = React.useState(initialOptions),
+    _useState14 = _slicedToArray__default["default"](_useState13, 2),
+    resourceOptions = _useState14[0];
+    _useState14[1];
   var queryResource = React.useMemo(function () {
     return {
       id: resourceId
@@ -216,13 +229,18 @@ var ResourceItemField = function ResourceItemField(_ref) {
     }
   }, [paginated, page, setPage, lastPage]);
   var getItemLabel = React.useCallback(function (it, path) {
-    var id = get__default["default"](it, 'id', null);
+    var _ref4 = it || {},
+      _ref4$id = _ref4.id,
+      id = _ref4$id === void 0 ? null : _ref4$id;
     if (itemLabelWithId) {
       var label = initialGetItemLabel(it, path);
       return label ? "".concat(label, " (#").concat(id, ")") : "#".concat(id);
     }
     return path !== null ? initialGetItemLabel(it, path) : "#".concat(id);
   }, [initialGetItemLabel, itemLabelWithId]);
+
+  // const getItemLabel = getItemLabelFunction(initialGetItemLabel, itemLabelWithId);
+
   var parseItem = React.useCallback(function (it) {
     var label = getItemLabel(it, itemLabelPath);
     var description = getItemDescription(it, itemDescriptionPath);
@@ -232,32 +250,32 @@ var ResourceItemField = function ResourceItemField(_ref) {
       label: finalLabel
     };
   }, [getItemLabel, getItemDescription, itemLabelPath, itemDescriptionPath]);
-  var finalValue = multiple && isArray__default["default"](value) ? value.map(function (_ref4) {
-    var _ref4$id = _ref4.id,
-      id = _ref4$id === void 0 ? null : _ref4$id;
+  var finalValue = multiple && isArray__default["default"](value) ? value.map(function (_ref5) {
+    var _ref5$id = _ref5.id,
+      id = _ref5$id === void 0 ? null : _ref5$id;
     return id;
   }) : (value === null || value === void 0 ? void 0 : value.id) || null;
-  var _ref5 = !multiple && value !== null ? value : {
+  var _ref6 = !multiple && hasValue ? value : {
       type: resourceType
     },
-    _ref5$type = _ref5.type,
-    finalType = _ref5$type === void 0 ? null : _ref5$type;
+    _ref6$type = _ref6.type,
+    finalType = _ref6$type === void 0 ? null : _ref6$type;
   var options = (items || []).map(function (it) {
     return parseItem(it);
   });
   var onValueChange = React.useCallback(function (newId) {
     if (onChange === null) return;
     if (multiple) {
-      var newValue = items.filter(function (_ref6) {
-        var _ref6$id = _ref6.id,
-          id = _ref6$id === void 0 ? null : _ref6$id;
+      var newValue = items.filter(function (_ref7) {
+        var _ref7$id = _ref7.id,
+          id = _ref7$id === void 0 ? null : _ref7$id;
         return newId.indexOf(id) !== -1;
       }) || [];
       onChange(newValue);
     } else {
-      var _newValue = items.filter(function (_ref7) {
-        var _ref7$id = _ref7.id,
-          id = _ref7$id === void 0 ? null : _ref7$id;
+      var _newValue = items.filter(function (_ref8) {
+        var _ref8$id = _ref8.id,
+          id = _ref8$id === void 0 ? null : _ref8$id;
         return id === newId;
       }) || [];
       if (_newValue !== null && _newValue.length > 0) {
@@ -279,12 +297,24 @@ var ResourceItemField = function ResourceItemField(_ref) {
       type: resourceType
     }, newValue) : newValue;
     if (multiple) {
-      onChange(value !== null && isArray__default["default"](value) ? [].concat(_toConsumableArray__default["default"](value), [finalNewValue]) : [finalNewValue]);
+      onChange(isArray__default["default"](value) ? [].concat(_toConsumableArray__default["default"](value), [finalNewValue]) : [finalNewValue]);
     } else {
       onChange(finalNewValue);
     }
     setFormOpen(false);
   }, [onChange, multiple, value, setFormOpen, resourceType, paginated, initialPage]);
+  var onOpenList = React.useCallback(function () {
+    setListOpen(false); // TODO: fix this
+  }, [setListOpen]);
+  var onCloseList = React.useCallback(function () {
+    setListOpen(false);
+  }, [setListOpen]);
+  var onSelectListItem = React.useCallback(function (newValue) {
+    if (onChange !== null) {
+      onChange(newValue);
+      setListOpen(false);
+    }
+  }, [onChange, setListOpen]);
 
   // If empty try to fetch
   var onFocus = React.useCallback(function () {
@@ -316,7 +346,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }) : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({}, className, className != null)])
-  }, value !== null && !multiple ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, hasValue && !multiple ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-10 flex-grow-1"
@@ -331,21 +361,15 @@ var ResourceItemField = function ResourceItemField(_ref) {
     itemImagePath: itemImagePath,
     itemLabelWithId: itemLabelWithId,
     disable: disabled,
-    onClickRemove: onClickRemove
-  })), canEdit && !multiple ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "col-auto"
-  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    theme: "primary",
-    icon: editButtonLabel === null ? 'pencil-square' : null,
-    onClick: formOpen ? onCloseForm : onOpenForm,
-    outline: true,
-    disabled: finalValue === null
-  }, editButtonLabel)) : null) : /*#__PURE__*/React__default["default"].createElement("div", {
+    onClickEdit: canEdit && !multiple ? formOpen ? onCloseForm : onOpenForm : null,
+    onClickRemove: onClickRemove,
+    editButtonLabel: editButtonLabel
+  }))) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row align-items-center"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "col-10 flex-grow-1"
+    className: "col-8 flex-grow-1"
   }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
-    className: classNames__default["default"](['py-1', 'shadow-none', (_ref9 = {}, _defineProperty__default["default"](_ref9, disabled, disabled), _defineProperty__default["default"](_ref9, 'is-invalid', errors !== null), _defineProperty__default["default"](_ref9, inputClassName, inputClassName !== null), _ref9)]),
+    className: classNames__default["default"](['py-1', 'shadow-none', (_ref10 = {}, _defineProperty__default["default"](_ref10, disabled, disabled), _defineProperty__default["default"](_ref10, 'is-invalid', errors !== null), _defineProperty__default["default"](_ref10, inputClassName, inputClassName !== null), _ref10)]),
     disabled: disabled,
     name: name,
     value: finalValue,
@@ -364,7 +388,14 @@ var ResourceItemField = function ResourceItemField(_ref) {
     onFocus: onFocus,
     onMenuScrollToBottom: onScrollEnd,
     multiple: multiple
-  })), canCreate ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })), canFind ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-auto"
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    theme: "primary",
+    icon: findButtonLabel === null ? 'search' : null,
+    onClick: listOpen ? onCloseList : onOpenList,
+    outline: true
+  }, findButtonLabel)) : null, canCreate ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-auto"
   }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     theme: "primary",
@@ -374,7 +405,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, createButtonLabel)) : null), formOpen ? withoutModal ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "card mt-4 p-4"
   }, form) : /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
-    title: !multiple && value !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    title: hasValue && !multiple ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       values: resourceValues,
       id: "mCfzkJ",
       defaultMessage: [{
@@ -397,7 +428,16 @@ var ResourceItemField = function ResourceItemField(_ref) {
     }),
     size: "lg",
     onClose: onCloseForm
-  }, form) : null);
+  }, form) : null, listOpen ? /*#__PURE__*/React__default["default"].createElement(ResourceItemsModal__default["default"], {
+    resource: resourceId,
+    onClose: onCloseList,
+    listProps: {
+      actions: ['select'],
+      actionsProps: {
+        onClickSelect: onSelectListItem
+      }
+    }
+  }) : null);
 };
 ResourceItemField.propTypes = propTypes;
 ResourceItemField.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-resource-item",
-    "version": "2.0.79",
+    "version": "2.0.80",
     "description": "An item mapping a resource",
     "keywords": [
         "javascript"
@@ -48,7 +48,7 @@
         "@panneau/core": "^2.0.75",
         "@panneau/data": "^2.0.75",
         "@panneau/element-button": "^2.0.75",
-        "@panneau/element-resource-card": "^2.0.75",
+        "@panneau/element-resource-card": "^2.0.80",
         "@panneau/element-select": "^2.0.75",
         "@panneau/form-resource": "^2.0.79",
         "@panneau/intl": "^2.0.79",
@@ -61,5 +61,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b3bfbc84de833d32a4939542aba6e010d3672ffa"
+    "gitHead": "5ffbad88f5db131e4352f171cdee8a77a75a7572"
 }