@quintoandar-tokko/gridimagepicker 1.0.24 → 1.0.25

package/lib/ImageItem.js

@@ -48,10 +48,8 @@ var ImageItem = function ImageItem(_ref) {
     setNodeRef = _useSortable.setNodeRef,
     transform = _useSortable.transform,
     transition = _useSortable.transition;
-  var _useState = (0, _react.useState)(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isEditedActive = _useState2[0],
-    setIsEditedActive = _useState2[1];
+  var previousEditedSrc = (0, _react.useRef)(item.editedSrc);
+  var isEditedActive = item.isEditedActive;
   var displaySrc = isEditedActive && item.editedSrc ? item.editedSrc : item.src;
   var _useSize = (0, _useSize3["default"])(displaySrc, sizeFetcher),
     _useSize2 = _slicedToArray(_useSize, 3),
@@ -66,17 +64,17 @@ var ImageItem = function ImageItem(_ref) {
     isLoadingAspectRatio = _useAspectRatio2[3],
     isErrorAspectRatio = _useAspectRatio2[4];
   var wrapperRef = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)({
+  var _useState = (0, _react.useState)({
       left: 0,
       top: 0
     }),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipPosition = _useState2[0],
+    setTooltipPosition = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    tooltipPosition = _useState4[0],
-    setTooltipPosition = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isTooltipShowable = _useState6[0],
-    setIsTooltipShowable = _useState6[1];
+    isTooltipShowable = _useState4[0],
+    setIsTooltipShowable = _useState4[1];
   var isDraggingActive = status.isDraggingActive,
     isMaxSelectableReached = status.isMaxSelectableReached,
     itemsAreReady = status.itemsAreReady;
@@ -90,6 +88,15 @@ var ImageItem = function ImageItem(_ref) {
   var backgroundImage = item.loading || item.fetchError ? '' : "url(".concat(displaySrc, ")");
   var unclickable = !(0, _manageItem.isItemClickable)(item, isMaxSelectableReached, itemsAreReady);
   var disabled = (0, _manageItem.isDisabledCheckbox)(item, isMaxSelectableReached);
+
+  // On (re)edit, flip back to the edited version and notify; the ref skips mount/re-renders.
+  (0, _react.useEffect)(function () {
+    if (item.editedSrc === previousEditedSrc.current) return;
+    previousEditedSrc.current = item.editedSrc;
+    if (item.editedSrc) {
+      onSwitchChange === null || onSwitchChange === void 0 || onSwitchChange(item, true);
+    }
+  }, [item.editedSrc]);
   (0, _react.useEffect)(function () {
     var handleHideTooltip = function handleHideTooltip() {
       setIsTooltipShowable(false);
@@ -198,14 +205,13 @@ var ImageItem = function ImageItem(_ref) {
     className: "imageItemIconEdit"
   })), /*#__PURE__*/_react["default"].createElement(_box.Box, {
     className: "imageItemSwitch",
-    "data-visible": item.isEdited && itemsAreReady && (!isError || !!item.editedSrc),
+    "data-visible": Boolean(item.editedSrc) && itemsAreReady,
     "data-cover": item.position === 1
   }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
     className: "imageItemSwitchOption",
     "data-active": !isEditedActive,
     onClick: function onClick(e) {
       e.stopPropagation();
-      setIsEditedActive(false);
       onSwitchChange === null || onSwitchChange === void 0 || onSwitchChange(item, false);
     }
   }, texts === null || texts === void 0 ? void 0 : texts.original), /*#__PURE__*/_react["default"].createElement(_box.Box, {
@@ -213,12 +219,11 @@ var ImageItem = function ImageItem(_ref) {
     "data-active": isEditedActive,
     onClick: function onClick(e) {
       e.stopPropagation();
-      setIsEditedActive(true);
       onSwitchChange === null || onSwitchChange === void 0 || onSwitchChange(item, true);
     }
   }, texts === null || texts === void 0 ? void 0 : texts.edited))), /*#__PURE__*/_react["default"].createElement(_box.Box, {
     className: "imageItemTooltip",
-    "data-showable": isTooltipShowable,
+    "data-showable": isTooltipShowable && Boolean(tooltipErrorText),
     __css: {
       left: tooltipPosition.left,
       top: tooltipPosition.top

package/lib/hooks/useGridImagePicker.js

@@ -10,13 +10,13 @@ var _sortable = require("@dnd-kit/sortable");
 var _manageItem = require("../utils/manageItem");
 var _manageListOfItems = require("../utils/manageListOfItems");
 var _excluded = ["id"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -29,7 +29,8 @@ function useGridImagePicker(_ref) {
     maxSizeInMB = _ref.maxSizeInMB,
     minAspectRatio = _ref.minAspectRatio,
     maxAspectRatio = _ref.maxAspectRatio,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onSwitchChange = _ref.onSwitchChange;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDraggingActive = _useState2[0],
@@ -59,6 +60,25 @@ function useGridImagePicker(_ref) {
     setInitialUrlList(listOfImages);
     setItemNewUrl(null);
   }, [itemNewUrl]);
+
+  // Sync `editedSrc` from the source list, matched by positional `id` (robust to duplicate `src` and reordering).
+  (0, _react.useEffect)(function () {
+    setItems(function (prevItems) {
+      var hasChanges = false;
+      var nextItems = prevItems.map(function (item) {
+        var source = listOfImages[item.id - 1];
+        if (!source || source.editedSrc === item.editedSrc) return item;
+        hasChanges = true;
+        // No `editedSrc` means nothing to show as edited (the flip-back lives in ImageItem).
+        var isEditedActive = source.editedSrc ? item.isEditedActive : false;
+        return _objectSpread(_objectSpread({}, item), {}, {
+          editedSrc: source.editedSrc,
+          isEditedActive: isEditedActive
+        });
+      });
+      return hasChanges ? nextItems : prevItems;
+    });
+  }, [listOfImages]);
   var maxSelectable = Math.min(maxSelectablePreferenceByUser, items.filter(function (item) {
     return !item.sizeError && !item.aspectRatioError && !item.fetchError;
   }).length);
@@ -115,6 +135,18 @@ function useGridImagePicker(_ref) {
       });
     });
   };
+
+  // Single source of truth for the shown version: stored in `items` (for `onChange`) and reported via `onSwitchChange`.
+  var handleSwitchChange = function handleSwitchChange(targetItem, isEditedActive) {
+    setItems(function (prevItems) {
+      return prevItems.map(function (item) {
+        return item.id === targetItem.id ? _objectSpread(_objectSpread({}, item), {}, {
+          isEditedActive: isEditedActive
+        }) : item;
+      });
+    });
+    onSwitchChange === null || onSwitchChange === void 0 || onSwitchChange(targetItem, isEditedActive);
+  };
   var handleDragStart = function handleDragStart() {
     setIsDraggingActive(true);
   };
@@ -142,6 +174,7 @@ function useGridImagePicker(_ref) {
     methods: {
       handleClickItem: handleClickItem,
       handleUpdateItem: handleUpdateItem,
+      handleSwitchChange: handleSwitchChange,
       handleDeselectAll: handleDeselectAll,
       handleSelectAll: handleSelectAll,
       handleDragStart: handleDragStart,

package/lib/index.js

@@ -16,15 +16,18 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
  * A grid-based image picker component with sortable and selectable images.
  *
  * @param {Object} props - The props for GridImagePicker.
- * @param {Array<{src: string, isEdited: boolean}>} props.listOfImages - Array of image objects to display in the grid.
+ * @param {Array<{src: string, editedSrc?: string}>} props.listOfImages - Array of image objects to display in the grid.
+ *        An image is considered editable/edited when it has an `editedSrc`; that enables the Original/Editada switch.
  * @param {number} [props.maxSelectablePreferenceByUser=10] - Maximum number of images that can be selected by the user.
  *        Default is 10. This value is a preference; if there are fewer images available than this number, it will adjust accordingly.
  * @param {number} [props.maxSizeInMB=8] - Maximum size in megabytes for each image. Default is 8 MB. Images exceeding this limit will be marked as an error.
  * @param {number} [props.minAspectRatio] - Minimum aspect ratio allowed for the images. Images that don't meet this ratio will be marked as an error.
  * @param {number} [props.maxAspectRatio] - Maximum aspect ratio allowed for the images. Images that exceed this ratio will be marked as an error.
  * @param {Function} [props.onChange] - Optional callback function invoked whenever the internal state of images changes.
- *        Called with the updated list of items as `(items) => onChange(items)`.
- * @param {Function} [props.onSwitchChange] - Optional callback invoked when the user toggles the Original/Editada switch. Called with `(item, isEditedActive)`.
+ *        Called with the updated list of items as `(items) => onChange(items)`. Each item exposes `isEditedActive`
+ *        (whether the edited version is currently being shown); combine it with `editedSrc` to know which version is in use.
+ * @param {Function} [props.onSwitchChange] - Optional callback invoked when the Original/Editada switch changes, both on user
+ *        toggle and on the automatic flip after an image is (re)edited. Called with `(item, isEditedActive)`.
  * @param {Function} [props.sizeFetcher] - Optional fetch function to get the size of the images. Default: (src) => fetch(src)
  * @param {Object} props.texts - Nested texts
  */
@@ -39,7 +42,7 @@ var GridImagePicker = exports.GridImagePicker = function GridImagePicker(_ref) {
     onChange = _ref.onChange,
     _ref$onEdit = _ref.onEdit,
     onEdit = _ref$onEdit === void 0 ? null : _ref$onEdit,
-    _onSwitchChange = _ref.onSwitchChange,
+    onSwitchChange = _ref.onSwitchChange,
     texts = _ref.texts,
     sizeFetcher = _ref.sizeFetcher;
   var _useGridImagePicker = (0, _useGridImagePicker2["default"])({
@@ -48,7 +51,8 @@ var GridImagePicker = exports.GridImagePicker = function GridImagePicker(_ref) {
       maxSizeInMB: maxSizeInMB,
       minAspectRatio: minAspectRatio,
       maxAspectRatio: maxAspectRatio,
-      onChange: onChange
+      onChange: onChange,
+      onSwitchChange: onSwitchChange
     }),
     attributes = _useGridImagePicker.attributes,
     methods = _useGridImagePicker.methods;
@@ -57,6 +61,7 @@ var GridImagePicker = exports.GridImagePicker = function GridImagePicker(_ref) {
     status = attributes.status;
   var handleClickItem = methods.handleClickItem,
     handleUpdateItem = methods.handleUpdateItem,
+    handleSwitchChange = methods.handleSwitchChange,
     handleDeselectAll = methods.handleDeselectAll,
     handleSelectAll = methods.handleSelectAll,
     handleDragStart = methods.handleDragStart,
@@ -100,9 +105,7 @@ var GridImagePicker = exports.GridImagePicker = function GridImagePicker(_ref) {
       config: config,
       handleClick: handleClickItem,
       onEdit: onEdit,
-      onSwitchChange: function onSwitchChange(item) {
-        return _onSwitchChange(item);
-      },
+      onSwitchChange: handleSwitchChange,
       handleUpdateItem: handleUpdateItem,
       texts: texts,
       sizeFetcher: sizeFetcher

package/lib/utils/manageListOfItems.js

@@ -23,7 +23,8 @@ var getItemsInitialState = exports.getItemsInitialState = function getItemsIniti
       id: index + 1,
       src: image.src,
       editedSrc: image.editedSrc,
-      isEdited: image.isEdited,
+      // Whether the edited version is shown; only meaningful when there's an `editedSrc`.
+      isEditedActive: Boolean(image.editedSrc),
       checked: false,
       position: 0,
       height: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintoandar-tokko/gridimagepicker",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "main": "lib/index.js",
   "module": "src/index.js",
   "files": [
@@ -23,5 +23,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "25f60fb626bac68e2d2599d2354dd5157d7371ab"
+  "gitHead": "ff1bd5286d3900060f981d2f8d81f1c074b4f22d"
 }