@quintoandar-tokko/gridimagepicker 1.0.19 → 1.0.24

package/lib/ImageItem.js

@@ -19,6 +19,7 @@ require("../styles/ImageItemBlanket.css");
 require("../styles/ImageItemCover.css");
 require("../styles/ImageItemSmallElements.css");
 require("../styles/ImageItemTooltip.css");
+require("../styles/ImageItemSwitch.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -34,6 +35,7 @@ var ImageItem = function ImageItem(_ref) {
     handleClick = _ref.handleClick,
     handleUpdateItem = _ref.handleUpdateItem,
     onEdit = _ref.onEdit,
+    onSwitchChange = _ref.onSwitchChange,
     status = _ref.status,
     config = _ref.config,
     texts = _ref.texts,
@@ -46,12 +48,17 @@ var ImageItem = function ImageItem(_ref) {
     setNodeRef = _useSortable.setNodeRef,
     transform = _useSortable.transform,
     transition = _useSortable.transition;
-  var _useSize = (0, _useSize3["default"])(item.src, sizeFetcher),
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditedActive = _useState2[0],
+    setIsEditedActive = _useState2[1];
+  var displaySrc = isEditedActive && item.editedSrc ? item.editedSrc : item.src;
+  var _useSize = (0, _useSize3["default"])(displaySrc, sizeFetcher),
     _useSize2 = _slicedToArray(_useSize, 3),
     size = _useSize2[0],
     isLoadingSize = _useSize2[1],
     isErrorSize = _useSize2[2];
-  var _useAspectRatio = (0, _useAspectRatio3["default"])(item.src),
+  var _useAspectRatio = (0, _useAspectRatio3["default"])(displaySrc),
     _useAspectRatio2 = _slicedToArray(_useAspectRatio, 5),
     height = _useAspectRatio2[0],
     width = _useAspectRatio2[1],
@@ -59,17 +66,17 @@ var ImageItem = function ImageItem(_ref) {
     isLoadingAspectRatio = _useAspectRatio2[3],
     isErrorAspectRatio = _useAspectRatio2[4];
   var wrapperRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)({
+  var _useState3 = (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),
-    isTooltipShowable = _useState4[0],
-    setIsTooltipShowable = _useState4[1];
+    tooltipPosition = _useState4[0],
+    setTooltipPosition = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isTooltipShowable = _useState6[0],
+    setIsTooltipShowable = _useState6[1];
   var isDraggingActive = status.isDraggingActive,
     isMaxSelectableReached = status.isMaxSelectableReached,
     itemsAreReady = status.itemsAreReady;
@@ -80,7 +87,7 @@ var ImageItem = function ImageItem(_ref) {
   var isError = item.sizeError || item.aspectRatioError || item.fetchError;
   var isFizableError = !item.fetchError && onEdit;
   var tooltipErrorText = (0, _getTooltipErrorText.getTooltipErrorText)(item, texts, onEdit);
-  var backgroundImage = item.loading || item.fetchError ? '' : "url(".concat(item.src, ")");
+  var backgroundImage = item.loading || item.fetchError ? '' : "url(".concat(displaySrc, ")");
   var unclickable = !(0, _manageItem.isItemClickable)(item, isMaxSelectableReached, itemsAreReady);
   var disabled = (0, _manageItem.isDisabledCheckbox)(item, isMaxSelectableReached);
   (0, _react.useEffect)(function () {
@@ -189,7 +196,27 @@ var ImageItem = function ImageItem(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
     icon: "icon-editar",
     className: "imageItemIconEdit"
-  }))), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+  })), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemSwitch",
+    "data-visible": item.isEdited && itemsAreReady && (!isError || !!item.editedSrc),
+    "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, {
+    className: "imageItemSwitchOption",
+    "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,
     __css: {

package/lib/hooks/useGridImagePicker.js

@@ -24,7 +24,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function useGridImagePicker(_ref) {
-  var listOfSrc = _ref.listOfSrc,
+  var listOfImages = _ref.listOfImages,
     maxSelectablePreferenceByUser = _ref.maxSelectablePreferenceByUser,
     maxSizeInMB = _ref.maxSizeInMB,
     minAspectRatio = _ref.minAspectRatio,
@@ -34,7 +34,7 @@ function useGridImagePicker(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isDraggingActive = _useState2[0],
     setIsDraggingActive = _useState2[1];
-  var _useState3 = (0, _react.useState)(listOfSrc),
+  var _useState3 = (0, _react.useState)(listOfImages),
     _useState4 = _slicedToArray(_useState3, 2),
     initialUrlList = _useState4[0],
     setInitialUrlList = _useState4[1];
@@ -43,20 +43,20 @@ function useGridImagePicker(_ref) {
     itemNewUrl = _useState6[0],
     setItemNewUrl = _useState6[1];
   var _useState7 = (0, _react.useState)(function () {
-      return (0, _manageListOfItems.getItemsInitialState)(listOfSrc);
+      return (0, _manageListOfItems.getItemsInitialState)(listOfImages);
     }),
     _useState8 = _slicedToArray(_useState7, 2),
     items = _useState8[0],
     setItems = _useState8[1];
   (0, _react.useEffect)(function () {
-    setItemNewUrl((0, _manageListOfItems.getItemChanged)(initialUrlList, listOfSrc));
-  }, [listOfSrc]);
+    setItemNewUrl((0, _manageListOfItems.getItemChanged)(initialUrlList, listOfImages));
+  }, [listOfImages]);
   (0, _react.useEffect)(function () {
     if (!itemNewUrl) return;
     setItems(function (prevItems) {
       return (0, _manageListOfItems.getItemsWithNewUrl)(prevItems, itemNewUrl);
     });
-    setInitialUrlList(listOfSrc);
+    setInitialUrlList(listOfImages);
     setItemNewUrl(null);
   }, [itemNewUrl]);
   var maxSelectable = Math.min(maxSelectablePreferenceByUser, items.filter(function (item) {

package/lib/index.js

@@ -16,7 +16,7 @@ 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 {string[]} props.listOfSrc - Array of image URLs to display in the grid.
+ * @param {Array<{src: string, isEdited: boolean}>} props.listOfImages - Array of image objects to display in the grid.
  * @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.
@@ -24,11 +24,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
  * @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)`.
  * @param {Function} [props.sizeFetcher] - Optional fetch function to get the size of the images. Default: (src) => fetch(src)
  * @param {Object} props.texts - Nested texts
  */
 var GridImagePicker = exports.GridImagePicker = function GridImagePicker(_ref) {
-  var listOfSrc = _ref.listOfSrc,
+  var listOfImages = _ref.listOfImages,
     _ref$maxSelectablePre = _ref.maxSelectablePreferenceByUser,
     maxSelectablePreferenceByUser = _ref$maxSelectablePre === void 0 ? 10 : _ref$maxSelectablePre,
     _ref$maxSizeInMB = _ref.maxSizeInMB,
@@ -38,10 +39,11 @@ 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,
     texts = _ref.texts,
     sizeFetcher = _ref.sizeFetcher;
   var _useGridImagePicker = (0, _useGridImagePicker2["default"])({
-      listOfSrc: listOfSrc,
+      listOfImages: listOfImages,
       maxSelectablePreferenceByUser: maxSelectablePreferenceByUser,
       maxSizeInMB: maxSizeInMB,
       minAspectRatio: minAspectRatio,
@@ -98,6 +100,9 @@ var GridImagePicker = exports.GridImagePicker = function GridImagePicker(_ref) {
       config: config,
       handleClick: handleClickItem,
       onEdit: onEdit,
+      onSwitchChange: function onSwitchChange(item) {
+        return _onSwitchChange(item);
+      },
       handleUpdateItem: handleUpdateItem,
       texts: texts,
       sizeFetcher: sizeFetcher

package/lib/utils/manageListOfItems.js

@@ -17,11 +17,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-var getItemsInitialState = exports.getItemsInitialState = function getItemsInitialState(listOfSrc) {
-  var initializedItem = listOfSrc.map(function (src, index) {
+var getItemsInitialState = exports.getItemsInitialState = function getItemsInitialState(listOfImages) {
+  var initializedItem = listOfImages.map(function (image, index) {
     return {
       id: index + 1,
-      src: src,
+      src: image.src,
+      editedSrc: image.editedSrc,
+      isEdited: image.isEdited,
       checked: false,
       position: 0,
       height: 0,
@@ -180,10 +182,10 @@ var getDeselectAllItems = exports.getDeselectAllItems = function getDeselectAllI
 var getItemChanged = exports.getItemChanged = function getItemChanged(originalList, newList) {
   var length = Math.min(originalList.length, newList.length);
   for (var i = 0; i < length; i++) {
-    if (originalList[i] !== newList[i]) {
+    if (originalList[i].src !== newList[i].src) {
       return {
-        oldUrl: originalList[i],
-        newUrl: newList[i]
+        oldUrl: originalList[i].src,
+        newUrl: newList[i].src
       };
     }
   }

package/package.json

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

package/styles/ImageItemSwitch.css

@@ -0,0 +1,44 @@
+.imageItemSwitch {
+  align-items: center;
+  background-color: #EAF3F6;
+  border-radius: 100px;
+  bottom: 8px;
+  box-shadow: 0 1px 6px rgba(29, 35, 39, 0.20);
+  display: none;
+  grid-template-columns: repeat(2, 1fr);
+  left: 50%;
+  max-width: min(110px, 96%);
+  padding: 2px;
+  pointer-events: auto;
+  position: absolute;
+  transform: translateX(-50%);
+  width: 100%;
+  z-index: 2;
+}
+
+.imageItemSwitch[data-visible="true"] {
+  display: grid;
+}
+
+.imageItemSwitch[data-visible="true"][data-cover="true"] {
+  bottom: 28px;
+}
+
+.imageItemSwitchOption {
+  border-radius: 100px;
+  color: #1B90D2;
+  cursor: pointer;
+  font-family: "Nunito Sans", sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 2px 6px;
+  pointer-events: auto;
+  transition: background-color 100ms linear, color 100ms linear;
+  white-space: nowrap;
+}
+
+.imageItemSwitchOption[data-active="true"] {
+  background-color: #1B90D2;
+  color: #F2F8FA;
+}