@panneau/field-resource-item 2.0.68 → 2.0.69

package/es/index.js

@@ -37,10 +37,10 @@ var propTypes = {
   searchParamName: PropTypes.string,
   getItemLabel: PropTypes.func,
   getItemDescription: PropTypes.func,
-  // getItemImage: PropTypes.func,
+  getItemImage: PropTypes.func,
   itemLabelPath: PropTypes.string,
   itemDescriptionPath: PropTypes.string,
-  // itemImagePath: PropTypes.string,
+  itemImagePath: PropTypes.string,
   itemLabelWithId: PropTypes.bool,
   placeholder: PropTypes.string,
   canCreate: PropTypes.bool,
@@ -63,10 +63,10 @@ var defaultProps = {
   searchParamName: 'search',
   getItemLabel: getPathValue,
   getItemDescription: getPathValue,
-  // getItemImage: getPathValue,
+  getItemImage: getPathValue,
   itemLabelPath: 'label',
   itemDescriptionPath: null,
-  // itemImagePath: 'image',
+  itemImagePath: 'image',
   itemLabelWithId: false,
   placeholder: null,
   canCreate: false,
@@ -78,7 +78,7 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref9;
+  var _ref8;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
@@ -90,8 +90,10 @@ var ResourceItemField = function ResourceItemField(_ref) {
     searchParamName = _ref.searchParamName,
     initialGetItemLabel = _ref.getItemLabel,
     getItemDescription = _ref.getItemDescription,
+    getItemImage = _ref.getItemImage,
     itemLabelPath = _ref.itemLabelPath,
     itemDescriptionPath = _ref.itemDescriptionPath,
+    itemImagePath = _ref.itemImagePath,
     itemLabelWithId = _ref.itemLabelWithId,
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
@@ -140,25 +142,19 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, [resourceId]);
   var finalQuery = useMemo(function () {
     return _objectSpread(_objectSpread(_objectSpread({}, query), !isEmpty(inputTextValue) ? _defineProperty({}, searchParamName, inputTextValue) : null), {}, {
-      paginated: false // TODO: implement this hahahaha
+      paginated: false // TODO: implement this...
     });
   }, [inputTextValue]);
 
   // console.log('resource', resourceId, resource);
-  // console.log('value', value);
 
   var resourceItems = useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
   var _ref3 = resourceItems || {},
     _ref3$items = _ref3.items,
-    responseItems = _ref3$items === void 0 ? null : _ref3$items;
-  var _ref4 = value || {},
-    _ref4$id = _ref4.id,
-    valueId = _ref4$id === void 0 ? null : _ref4$id;
-  var filteredItems = responseItems !== null && valueId !== null ? responseItems.filter(function (it) {
-    return it !== null && it.id ? it.id !== valueId : true;
-  }) : responseItems || [];
-  var arrayedValue = multiple ? value : [value];
-  var items = [].concat(_toConsumableArray(filteredItems), _toConsumableArray(value !== null ? arrayedValue : []));
+    partialItems = _ref3$items === void 0 ? null : _ref3$items;
+  var items = (partialItems || []).concat(multiple && isArray(value) ? value : [value]).filter(function (it) {
+    return it !== null;
+  });
   var getItemLabel = useCallback(function (it, path) {
     var id = get(it, 'id', null);
     if (itemLabelWithId) {
@@ -176,17 +172,27 @@ var ResourceItemField = function ResourceItemField(_ref) {
       label: finalLabel
     };
   }, [getItemLabel, getItemDescription, itemLabelPath, itemDescriptionPath]);
-  var options = (items || []).map(function (it) {
-    return parseItem(it);
-  });
   var partialValue = multiple && isArray(value) ? value.map(function (it) {
     return parseItem(it);
   }) : value || null;
-  var finalValue = multiple && isArray(partialValue) ? partialValue.map(function (_ref5) {
-    var _ref5$id = _ref5.id,
-      id = _ref5$id === void 0 ? null : _ref5$id;
+  var finalValue = multiple && isArray(partialValue) ? partialValue.map(function (_ref4) {
+    var _ref4$id = _ref4.id,
+      id = _ref4$id === void 0 ? null : _ref4$id;
     return id;
-  }) : value === null || value === void 0 ? void 0 : value.id;
+  }) : (value === null || value === void 0 ? void 0 : value.id) || null;
+  var options = (items || []).map(function (it) {
+    return parseItem(it);
+  });
+
+  // TODO: filter duplicate IDs blabla
+  // const { id: valueId = null } = value || {};
+  // const filteredItems =
+  //     responseItems !== null && valueId !== null
+  //         ? responseItems.filter((it) => (it !== null && it.id ? it.id !== valueId : true))
+  //         : responseItems || [];
+  // const arrayedValue = multiple ? value : [value];
+  // const items = [...filteredItems, ...(value !== null ? arrayedValue : [])];
+  // console.log(options, items, value, finalValue, onChange);
   // console.log('ultimate', options, finalValue);
 
   var onInputChange = useCallback(function (textValue) {
@@ -195,16 +201,16 @@ var ResourceItemField = function ResourceItemField(_ref) {
   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 (_ref5) {
+        var _ref5$id = _ref5.id,
+          id = _ref5$id === void 0 ? null : _ref5$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 (_ref6) {
+        var _ref6$id = _ref6.id,
+          id = _ref6$id === void 0 ? null : _ref6$id;
         return id === newId;
       }) || [];
       if (_newValue !== null && _newValue.length > 0) {
@@ -221,26 +227,38 @@ var ResourceItemField = function ResourceItemField(_ref) {
     setCreateOpen(false);
   }, [setCreateOpen]);
   var onCreateSuccess = useCallback(function (newValue) {
-    // console.log('newValue', newValue);
+    if (onChange === null) return;
     if (multiple) {
       onChange(value !== null && isArray(value) ? [].concat(_toConsumableArray(value), [newValue]) : [newValue]);
     } else {
       onChange(newValue);
     }
-    setTimeout(function () {
-      setCreateOpen(false);
-    }, 1000);
-  }, [onChange, multiple, value]);
+    setCreateOpen(false);
+  }, [onChange, multiple, value, setCreateOpen]);
+  var onClickRemove = useCallback(function () {
+    if (onChange !== null) {
+      onChange(null);
+    }
+  }, [onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['position-relative', _defineProperty({}, className, className != null)])
   }, value !== null && !multiple ? /*#__PURE__*/React.createElement(ResourceCard, {
-    item: value
+    item: value,
+    getItemLabel: initialGetItemLabel,
+    getItemDescription: getItemDescription,
+    getItemImage: getItemImage,
+    itemLabelPath: itemLabelPath,
+    itemDescriptionPath: itemDescriptionPath,
+    itemImagePath: itemImagePath,
+    itemLabelWithId: itemLabelWithId,
+    disable: disabled,
+    onClickRemove: onClickRemove
   }) : /*#__PURE__*/React.createElement("div", {
     className: classNames(['row', 'align-items-center'])
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto 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', (_ref8 = {}, _defineProperty(_ref8, disabled, disabled), _defineProperty(_ref8, 'is-invalid', errors !== null), _defineProperty(_ref8, inputClassName, inputClassName !== null), _ref8)]),
     disabled: disabled,
     name: name,
     value: finalValue,
@@ -264,10 +282,10 @@ var ResourceItemField = function ResourceItemField(_ref) {
     icon: "plus-lg",
     onClick: createOpen ? onCloseCreate : onOpenCreate,
     outline: true
-  })) : null, createOpen ? createInPlace ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ResourceForm, {
+  })) : null, createOpen ? createInPlace ? /*#__PURE__*/React.createElement(ResourceForm, {
     resource: resource,
     onSuccess: onCreateSuccess
-  })) : /*#__PURE__*/React.createElement(Dialog, {
+  }) : /*#__PURE__*/React.createElement(Dialog, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
       values: resourceValues,
       id: "6viUpq",
@@ -279,6 +297,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
         "value": "a_singular"
       }]
     }),
+    size: "lg",
     onClickClose: onCloseCreate
   }, /*#__PURE__*/React.createElement(ResourceForm, {
     resource: resource,

package/lib/index.js

@@ -59,10 +59,10 @@ var propTypes = {
   searchParamName: PropTypes__default["default"].string,
   getItemLabel: PropTypes__default["default"].func,
   getItemDescription: PropTypes__default["default"].func,
-  // getItemImage: PropTypes.func,
+  getItemImage: PropTypes__default["default"].func,
   itemLabelPath: PropTypes__default["default"].string,
   itemDescriptionPath: PropTypes__default["default"].string,
-  // itemImagePath: PropTypes.string,
+  itemImagePath: PropTypes__default["default"].string,
   itemLabelWithId: PropTypes__default["default"].bool,
   placeholder: PropTypes__default["default"].string,
   canCreate: PropTypes__default["default"].bool,
@@ -85,10 +85,10 @@ var defaultProps = {
   searchParamName: 'search',
   getItemLabel: utils.getPathValue,
   getItemDescription: utils.getPathValue,
-  // getItemImage: getPathValue,
+  getItemImage: utils.getPathValue,
   itemLabelPath: 'label',
   itemDescriptionPath: null,
-  // itemImagePath: 'image',
+  itemImagePath: 'image',
   itemLabelWithId: false,
   placeholder: null,
   canCreate: false,
@@ -100,7 +100,7 @@ var defaultProps = {
   onChange: null
 };
 var ResourceItemField = function ResourceItemField(_ref) {
-  var _ref9;
+  var _ref8;
   var name = _ref.name,
     value = _ref.value,
     errors = _ref.errors,
@@ -112,8 +112,10 @@ var ResourceItemField = function ResourceItemField(_ref) {
     searchParamName = _ref.searchParamName,
     initialGetItemLabel = _ref.getItemLabel,
     getItemDescription = _ref.getItemDescription,
+    getItemImage = _ref.getItemImage,
     itemLabelPath = _ref.itemLabelPath,
     itemDescriptionPath = _ref.itemDescriptionPath,
+    itemImagePath = _ref.itemImagePath,
     itemLabelWithId = _ref.itemLabelWithId,
     placeholder = _ref.placeholder,
     canCreate = _ref.canCreate,
@@ -162,25 +164,19 @@ var ResourceItemField = function ResourceItemField(_ref) {
   }, [resourceId]);
   var finalQuery = React.useMemo(function () {
     return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, query), !isEmpty__default["default"](inputTextValue) ? _defineProperty__default["default"]({}, searchParamName, inputTextValue) : null), {}, {
-      paginated: false // TODO: implement this hahahaha
+      paginated: false // TODO: implement this...
     });
   }, [inputTextValue]);
 
   // console.log('resource', resourceId, resource);
-  // console.log('value', value);
 
   var resourceItems = data.useResourceItems(queryResource, finalQuery, page, count, resourceOptions);
   var _ref3 = resourceItems || {},
     _ref3$items = _ref3.items,
-    responseItems = _ref3$items === void 0 ? null : _ref3$items;
-  var _ref4 = value || {},
-    _ref4$id = _ref4.id,
-    valueId = _ref4$id === void 0 ? null : _ref4$id;
-  var filteredItems = responseItems !== null && valueId !== null ? responseItems.filter(function (it) {
-    return it !== null && it.id ? it.id !== valueId : true;
-  }) : responseItems || [];
-  var arrayedValue = multiple ? value : [value];
-  var items = [].concat(_toConsumableArray__default["default"](filteredItems), _toConsumableArray__default["default"](value !== null ? arrayedValue : []));
+    partialItems = _ref3$items === void 0 ? null : _ref3$items;
+  var items = (partialItems || []).concat(multiple && isArray__default["default"](value) ? value : [value]).filter(function (it) {
+    return it !== null;
+  });
   var getItemLabel = React.useCallback(function (it, path) {
     var id = get__default["default"](it, 'id', null);
     if (itemLabelWithId) {
@@ -198,17 +194,27 @@ var ResourceItemField = function ResourceItemField(_ref) {
       label: finalLabel
     };
   }, [getItemLabel, getItemDescription, itemLabelPath, itemDescriptionPath]);
-  var options = (items || []).map(function (it) {
-    return parseItem(it);
-  });
   var partialValue = multiple && isArray__default["default"](value) ? value.map(function (it) {
     return parseItem(it);
   }) : value || null;
-  var finalValue = multiple && isArray__default["default"](partialValue) ? partialValue.map(function (_ref5) {
-    var _ref5$id = _ref5.id,
-      id = _ref5$id === void 0 ? null : _ref5$id;
+  var finalValue = multiple && isArray__default["default"](partialValue) ? partialValue.map(function (_ref4) {
+    var _ref4$id = _ref4.id,
+      id = _ref4$id === void 0 ? null : _ref4$id;
     return id;
-  }) : value === null || value === void 0 ? void 0 : value.id;
+  }) : (value === null || value === void 0 ? void 0 : value.id) || null;
+  var options = (items || []).map(function (it) {
+    return parseItem(it);
+  });
+
+  // TODO: filter duplicate IDs blabla
+  // const { id: valueId = null } = value || {};
+  // const filteredItems =
+  //     responseItems !== null && valueId !== null
+  //         ? responseItems.filter((it) => (it !== null && it.id ? it.id !== valueId : true))
+  //         : responseItems || [];
+  // const arrayedValue = multiple ? value : [value];
+  // const items = [...filteredItems, ...(value !== null ? arrayedValue : [])];
+  // console.log(options, items, value, finalValue, onChange);
   // console.log('ultimate', options, finalValue);
 
   var onInputChange = React.useCallback(function (textValue) {
@@ -217,16 +223,16 @@ var ResourceItemField = function ResourceItemField(_ref) {
   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 (_ref5) {
+        var _ref5$id = _ref5.id,
+          id = _ref5$id === void 0 ? null : _ref5$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 (_ref6) {
+        var _ref6$id = _ref6.id,
+          id = _ref6$id === void 0 ? null : _ref6$id;
         return id === newId;
       }) || [];
       if (_newValue !== null && _newValue.length > 0) {
@@ -243,26 +249,38 @@ var ResourceItemField = function ResourceItemField(_ref) {
     setCreateOpen(false);
   }, [setCreateOpen]);
   var onCreateSuccess = React.useCallback(function (newValue) {
-    // console.log('newValue', newValue);
+    if (onChange === null) return;
     if (multiple) {
       onChange(value !== null && isArray__default["default"](value) ? [].concat(_toConsumableArray__default["default"](value), [newValue]) : [newValue]);
     } else {
       onChange(newValue);
     }
-    setTimeout(function () {
-      setCreateOpen(false);
-    }, 1000);
-  }, [onChange, multiple, value]);
+    setCreateOpen(false);
+  }, [onChange, multiple, value, setCreateOpen]);
+  var onClickRemove = React.useCallback(function () {
+    if (onChange !== null) {
+      onChange(null);
+    }
+  }, [onChange]);
   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(ResourceCard__default["default"], {
-    item: value
+    item: value,
+    getItemLabel: initialGetItemLabel,
+    getItemDescription: getItemDescription,
+    getItemImage: getItemImage,
+    itemLabelPath: itemLabelPath,
+    itemDescriptionPath: itemDescriptionPath,
+    itemImagePath: itemImagePath,
+    itemLabelWithId: itemLabelWithId,
+    disable: disabled,
+    onClickRemove: onClickRemove
   }) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['row', 'align-items-center'])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-auto 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', (_ref8 = {}, _defineProperty__default["default"](_ref8, disabled, disabled), _defineProperty__default["default"](_ref8, 'is-invalid', errors !== null), _defineProperty__default["default"](_ref8, inputClassName, inputClassName !== null), _ref8)]),
     disabled: disabled,
     name: name,
     value: finalValue,
@@ -286,10 +304,10 @@ var ResourceItemField = function ResourceItemField(_ref) {
     icon: "plus-lg",
     onClick: createOpen ? onCloseCreate : onOpenCreate,
     outline: true
-  })) : null, createOpen ? createInPlace ? /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], {
+  })) : null, createOpen ? createInPlace ? /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], {
     resource: resource,
     onSuccess: onCreateSuccess
-  })) : /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
+  }) : /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
     title: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       values: resourceValues,
       id: "6viUpq",
@@ -301,6 +319,7 @@ var ResourceItemField = function ResourceItemField(_ref) {
         "value": "a_singular"
       }]
     }),
+    size: "lg",
     onClickClose: onCloseCreate
   }, /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], {
     resource: resource,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-resource-item",
-    "version": "2.0.68",
+    "version": "2.0.69",
     "description": "An item mapping a resource",
     "keywords": [
         "javascript"
@@ -45,15 +45,14 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^2.0.58",
-        "@panneau/data": "^2.0.58",
-        "@panneau/element-button": "^2.0.59",
-        "@panneau/element-modal": "^2.0.58",
-        "@panneau/element-resource-card": "^2.0.68",
-        "@panneau/element-select": "^2.0.58",
-        "@panneau/form-resource": "^2.0.68",
-        "@panneau/intl": "^2.0.68",
-        "@panneau/modal-dialog": "^2.0.68",
+        "@panneau/core": "^2.0.69",
+        "@panneau/data": "^2.0.69",
+        "@panneau/element-button": "^2.0.69",
+        "@panneau/element-resource-card": "^2.0.69",
+        "@panneau/element-select": "^2.0.69",
+        "@panneau/form-resource": "^2.0.69",
+        "@panneau/intl": "^2.0.69",
+        "@panneau/modal-dialog": "^2.0.69",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -62,5 +61,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "7f91dc52ac77f545d1438dd2d612845bfd445522"
+    "gitHead": "270c1e84966861e94a390d20ee525c33f7edadb0"
 }