@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/components/CropPanel/CropOptions.js

@@ -0,0 +1,155 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 _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; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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; }
+import { useMemo, useState, useEffect } from 'react';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import { useExplorer } from '../../hooks';
+import { DEFAULT_CROP_TYPE } from './CropPanel.constants';
+import { convertObjToArray, roundNum } from './CropPanel.utils';
+import ImageResize from './ImageResize';
+import Option from './Option';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var CropOptions = function CropOptions(_ref) {
+  var _selectedCropTypePres;
+  var _ref$imageParams = _ref.imageParams,
+    imageParams = _ref$imageParams === void 0 ? {} : _ref$imageParams,
+    _ref$cropDimensions = _ref.cropDimensions,
+    cropDimensions = _ref$cropDimensions === void 0 ? {} : _ref$cropDimensions,
+    updateTransformations = _ref.updateTransformations,
+    handleCropChange = _ref.handleCropChange,
+    setImageParams = _ref.setImageParams,
+    selections = _ref.selections;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    _useExplorer$opts2 = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    _useExplorer$opts2$cr = _useExplorer$opts2.cropPresets,
+    cropPresets = _useExplorer$opts2$cr === void 0 ? {} : _useExplorer$opts2$cr;
+  var _useState = useState(DEFAULT_CROP_TYPE),
+    _useState2 = _slicedToArray(_useState, 2),
+    cropType = _useState2[0],
+    setCropType = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    cropPreset = _useState4[0],
+    setCropPreset = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isRatioLocked = _useState6[0],
+    setIsRatioLocked = _useState6[1];
+  var file = selections[0];
+  var isRatioButtonDisabled = ![DEFAULT_CROP_TYPE, 'ellipse'].includes(cropType);
+  useEffect(function () {
+    var newParams = _objectSpread(_objectSpread({}, imageParams), {}, {
+      func: ''
+    });
+    setImageParams(newParams);
+    updateTransformations(newParams);
+  }, []);
+  useUpdateEffect(function () {
+    if (isRatioButtonDisabled) {
+      setIsRatioLocked(true);
+    }
+  }, [isRatioButtonDisabled]);
+  var availableCropTypes = useMemo(function () {
+    return [DEFAULT_CROP_TYPE].concat(_toConsumableArray(convertObjToArray(cropPresets)));
+  }, [cropPresets]);
+  var selectedCropTypePresets = cropPresets[cropType];
+  var changeCropPreset = function changeCropPreset(value) {
+    var _value$split = value.split(':'),
+      _value$split2 = _slicedToArray(_value$split, 3),
+      widthOrRatio = _value$split2[0],
+      height = _value$split2[1],
+      autoResize = _value$split2[2];
+    setCropPreset(value);
+    if (!widthOrRatio && !height) {
+      return;
+    }
+    if (widthOrRatio && !height) {
+      handleCropChange(_objectSpread(_objectSpread({}, imageParams), {}, {
+        crop: _objectSpread(_objectSpread({}, cropDimensions), {}, {
+          autoResize: false,
+          ratio: widthOrRatio
+        })
+      }));
+      return;
+    }
+    var isAutoResizeEnabled = autoResize === 'true';
+    var newWidth = roundNum(parseInt(widthOrRatio));
+    var newHeight = roundNum(parseInt(height));
+    handleCropChange(_objectSpread(_objectSpread(_objectSpread({}, imageParams), isAutoResizeEnabled ? {
+      width: newWidth,
+      height: newHeight
+    } : {}), {}, {
+      crop: _objectSpread(_objectSpread({}, cropDimensions), {}, {
+        width: newWidth,
+        height: newHeight,
+        autoResize: isAutoResizeEnabled,
+        ratio: newWidth / newHeight
+      })
+    }));
+  };
+  var updateCropType = function updateCropType(newCropType) {
+    setCropType(newCropType);
+    var newSelectedCropTypePresets = cropPresets[newCropType];
+    if (newSelectedCropTypePresets) {
+      var _newSelectedCropTypeP;
+      changeCropPreset(Array.isArray(newSelectedCropTypePresets) ? (_newSelectedCropTypeP = newSelectedCropTypePresets[0]) === null || _newSelectedCropTypeP === void 0 ? void 0 : _newSelectedCropTypeP.value : newSelectedCropTypePresets === null || newSelectedCropTypePresets === void 0 ? void 0 : newSelectedCropTypePresets.value);
+    } else {
+      handleCropChange(_objectSpread(_objectSpread({}, imageParams), {}, {
+        crop: _objectSpread(_objectSpread({}, cropDimensions), {}, {
+          autoResize: false,
+          ratio: DEFAULT_CROP_TYPE === newCropType ? 'custom' : newCropType
+        })
+      }));
+    }
+  };
+  var updateImageParams = function updateImageParams(newCropDimens) {
+    // TODO(Amr): this function overwrites the image resize params used in imageOptions
+    // we should split the state
+    handleCropChange(_objectSpread(_objectSpread({}, imageParams), {}, {
+      crop: _objectSpread(_objectSpread({}, cropDimensions), {}, {
+        width: roundNum(parseInt(newCropDimens.width)),
+        height: roundNum(parseInt(newCropDimens.height))
+      })
+    }));
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Option, {
+      label: i18n('exportOptionsPresetLabel'),
+      value: cropType,
+      options: availableCropTypes,
+      onChange: updateCropType,
+      block: true
+    }), selectedCropTypePresets && Array.isArray(selectedCropTypePresets) && selectedCropTypePresets.length > 0 && /*#__PURE__*/_jsx(Option, {
+      label: i18n(cropType) || cropType,
+      value: cropPreset || ((_selectedCropTypePres = selectedCropTypePresets[0]) === null || _selectedCropTypePres === void 0 ? void 0 : _selectedCropTypePres.value),
+      options: selectedCropTypePresets,
+      onChange: changeCropPreset,
+      block: true
+    }), /*#__PURE__*/_jsx(ImageResize, {
+      imageParams: cropDimensions,
+      setImageParams: updateImageParams,
+      isRatioLocked: isRatioLocked,
+      setIsRatioLocked: setIsRatioLocked,
+      ratio: cropDimensions.width / cropDimensions.height,
+      file: file,
+      isRatioButtonDisabled: isRatioButtonDisabled,
+      hideOptions: true
+    })]
+  });
+};
+export default CropOptions;

package/lib/components/CropPanel/CropPanel.constants.js

@@ -0,0 +1,44 @@
+var JPEG_QUALITY_OPTIONS = {
+  excellent: 90,
+  good: 75,
+  fair: 60
+};
+var WEBP_QUALITY_OPTIONS = {
+  excellent: 90,
+  good: 75,
+  fair: 60
+};
+var RESIZE_OPTIONS = {
+  large: 1200,
+  medium: 600,
+  small: 300
+};
+var DPI_OPTIONS = [{
+  label: '72 dpi',
+  value: 72
+}, {
+  label: '150 dpi',
+  value: 150
+}, {
+  label: '300 dpi',
+  value: 300
+}];
+var FORMAT_OPTIONS = [{
+  label: 'WEBP',
+  value: 'webp'
+}, {
+  label: 'JPEG',
+  value: 'jpeg'
+}, {
+  label: 'PNG',
+  value: 'png'
+}, {
+  label: 'GIF',
+  value: 'gif'
+}, {
+  label: 'PDF',
+  value: 'pdf'
+}];
+var DEFAULT_CROP_TYPE = 'exportOptionsFreehandLabel';
+var INVALID_INPUT_CHARS = ['-', '+', 'e'];
+export { JPEG_QUALITY_OPTIONS, FORMAT_OPTIONS, WEBP_QUALITY_OPTIONS, RESIZE_OPTIONS, DPI_OPTIONS, DEFAULT_CROP_TYPE, INVALID_INPUT_CHARS };

package/lib/components/CropPanel/CropPanel.styled.js

@@ -0,0 +1,107 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { FV, PC, TransitionWrapper } from '@scaleflex/widget-common';
+import { Button, IconButton as SfxIconButton, SelectGroup as SfxSelectGroup } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+var CropPanelTopBar = styled.div(function (_ref) {
+  var _ref$theme = _ref.theme,
+    palette = _ref$theme.palette,
+    breakpoints = _ref$theme.breakpoints;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    position: relative;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 64px;\n    padding: 24px 24px 20px 24px;\n    border: 1px solid ", ";\n    background: ", ";\n\n    ", " {\n      height: 48px;\n      padding: 16px 16px 12px 16px;\n    }\n\n    ", " & {\n      height: 48px;\n      padding: 16px 16px 12px 16px;\n    }\n  "])), palette[PC.BordersSecondary], palette[PC.BackgroundStateless], breakpoints.down('md'), breakpoints.classes.sm);
+});
+var ExplorerOverlay = styled.div(function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1005;\n    box-shadow: 0px 1px 4px ", ";\n    background-color:  ", ";\n    overflow: hidden;\n  "])), palette[PC.LightShadow], palette[PC.BackgroundStateless]);
+});
+var CropPanel = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: 100%;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    max-height: 100%;\n  "])));
+var CropPanelTopBarTitle = styled.div(function (_ref3) {
+  var _ref3$theme = _ref3.theme,
+    palette = _ref3$theme.palette,
+    breakpoints = _ref3$theme.breakpoints;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 18px;\n    line-height: 20px;\n    color: ", ";\n\n    ", " {\n      padding: 16px 16px 14px 16px;\n    }\n  "])), palette[PC.TextPrimary], breakpoints.down('md'));
+});
+var CloseIcon = styled.span(function (_ref4) {
+  var _ref4$theme = _ref4.theme,
+    palette = _ref4$theme.palette,
+    breakpoints = _ref4$theme.breakpoints;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    position: absolute;\n    cursor: pointer;\n    right: 15px;\n    color: ", ";\n\n    ", " {\n      right: 5px;\n    }\n\n    ", " & {\n      right: 5px;\n    }\n  "])), palette[PC.IconsSecondary], breakpoints.down('md'), breakpoints.classes.sm);
+});
+var ImageEditorWrapper = styled(TransitionWrapper)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  max-width: 20px;\n"])));
+var CropPanelBody = styled.div(function (_ref5) {
+  var breakpoints = _ref5.theme.breakpoints;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    column-gap: 24px;\n    padding: 24px 4px 24px 24px;\n    flex-grow: 1;\n    height: calc(100% - 64px - 96px);\n\n    ", " {\n      height: calc(100% - 48px - 96px);\n      padding: 14px 4px 14px 14px;\n    }\n\n    ", " & {\n      height: calc(100% - 48px - 96px);\n      padding: 14px 4px 14px 14px;\n    }\n  "])), breakpoints.down('md'), breakpoints.classes.sm);
+});
+var CropSettings = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 278px;\n    min-width: 254px;\n  "])));
+var CropImageWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: calc(100% - 278px - 24px);\n\n    .FIE_root {\n      width: 100% !important;\n    }\n\n    .FIE_main-container {\n      padding: 0;\n    }\n  "])));
+var OptionGroup = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    row-gap: 4px;\n  "])));
+var ImageOptionsSettingsWrapper = styled.div(function (_ref6) {
+  var isCropOptions = _ref6.isCropOptions,
+    breakpoints = _ref6.theme.breakpoints;
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    row-gap: ", ";\n    height: 101%;\n    overflow-y: ", ";\n    padding-right: ", ";\n\n    ", " {\n      padding: 10px;\n    }\n\n    ", " & {\n      padding: 10px;\n    }\n  "])), isCropOptions ? '32px' : '24px', isCropOptions ? 'auto' : 'hidden', isCropOptions ? '20px' : '', breakpoints.down('md'), breakpoints.classes.sm);
+});
+var ImageOptionsSettings = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    row-gap: 16px;\n  "])));
+var ImageOptionsInfoWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    display: flex;\n    column-gap: 6px;\n    align-items: baseline;\n  "])));
+var ImageSizeOptions = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n"])));
+var ImageSizeOptionButtons = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var InfoLabel = styled.span(function (_ref7) {
+  var _ref7$theme = _ref7.theme,
+    palette = _ref7$theme.palette,
+    font = _ref7$theme.typography.font,
+    isCropOptions = _ref7.isCropOptions;
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    max-width: ", ";\n    color: ", ";\n    ", "\n  "])), isCropOptions ? '236px' : '284px', palette[PC.Blue], font[FV.TextSmall]);
+});
+var CropPanelFooter = styled.div(function (_ref8) {
+  var _ref8$theme = _ref8.theme,
+    palette = _ref8$theme.palette,
+    breakpoints = _ref8$theme.breakpoints;
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    padding: 24px;\n    height: 96px;\n    border-top: 1px solid ", " ;\n    border-radius: 0px 0px 4px 4px;\n    column-gap: 12px;\n\n    ", " {\n      height: 72px;\n      padding: 16px;\n    }\n\n    ", " & {\n      height: 72px;\n      padding: 16px;\n    }\n  "])), palette[PC.BordersSecondary], breakpoints.down('md'), breakpoints.classes.sm);
+});
+var CropPanelFooterSaveButton = styled(Button)(function (_ref9) {
+  var _ref9$theme = _ref9.theme,
+    breakpoints = _ref9$theme.breakpoints,
+    font = _ref9$theme.typography.font;
+  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    padding: 14px 40px;\n    min-width: 120px;\n    max-width: 120px;\n    justify-content: center;\n\n    ", " {\n      ", "\n    }\n\n    ", " & {\n      ", "\n    }\n  "])), breakpoints.down('md'), font[FV.LabelLarge], breakpoints.classes.sm, font[FV.LabelLarge]);
+});
+var CropPanelFooterCancelButton = styled(Button)(function (_ref10) {
+  var _ref10$theme = _ref10.theme,
+    breakpoints = _ref10$theme.breakpoints,
+    font = _ref10$theme.typography.font;
+  return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    padding: 14px 31px;\n    min-width: 120px;\n    justify-content: center;\n\n    ", " {\n      ", "\n    }\n\n    ", " & {\n      ", "\n    }\n  "])), breakpoints.down('md'), font[FV.LabelLarge], breakpoints.classes.sm, font[FV.LabelLarge]);
+});
+var IconButton = styled(SfxIconButton)(function (_ref11) {
+  var palette = _ref11.theme.palette,
+    isActive = _ref11.isActive;
+  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    background: none;\n    padding: 0;\n    margin: 0;\n    margin-top: 20px;\n\n    &:hover {\n      background: none;\n    }\n  "])));
+});
+var SelectGroup = styled(SfxSelectGroup)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  .SfxSelect-Label {\n    text-transform: capitalize;\n  }\n"])));
+var ImageOptionButtonButtons = styled(Button)(function (_ref12) {
+  var palette = _ref12.theme.palette,
+    type = _ref12.type,
+    imageSizeType = _ref12.imageSizeType;
+  return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    color: ", ";\n    padding: 0;\n    margin-right: 16px;\n    text-transform: capitalize;\n\n    &:hover {\n      color: ", "\n    }\n  "])), type !== imageSizeType ? palette[PC.LinkStateless] : palette[PC.AccentPrimaryActive], type !== imageSizeType ? palette[PC.LinkHover] : palette[PC.LinkHover]);
+});
+var Styled = {
+  ImageEditorWrapper: ImageEditorWrapper,
+  CropPanel: CropPanel,
+  CropPanelTopBar: CropPanelTopBar,
+  CropPanelTopBarTitle: CropPanelTopBarTitle,
+  CloseIcon: CloseIcon,
+  CropPanelBody: CropPanelBody,
+  CropSettings: CropSettings,
+  CropImageWrapper: CropImageWrapper,
+  OptionGroup: OptionGroup,
+  ImageOptionsSettingsWrapper: ImageOptionsSettingsWrapper,
+  ImageOptionsSettings: ImageOptionsSettings,
+  ImageOptionsInfoWrapper: ImageOptionsInfoWrapper,
+  InfoLabel: InfoLabel,
+  ImageSizeOptions: ImageSizeOptions,
+  CropPanelFooter: CropPanelFooter,
+  CropPanelFooterSaveButton: CropPanelFooterSaveButton,
+  CropPanelFooterCancelButton: CropPanelFooterCancelButton,
+  ExplorerOverlay: ExplorerOverlay,
+  IconButton: IconButton,
+  ImageOptionButtonButtons: ImageOptionButtonButtons,
+  SelectGroup: SelectGroup,
+  ImageSizeOptionButtons: ImageSizeOptionButtons
+};
+export default Styled;

package/lib/components/CropPanel/CropPanel.utils.js

@@ -0,0 +1,48 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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); }
+import { FORMAT_OPTIONS } from './CropPanel.constants';
+export var convertObjToArray = function convertObjToArray(obj, i18n) {
+  return Object.keys(obj).map(function (key) {
+    return {
+      label: i18n ? i18n(key) || key : key,
+      value: key
+    };
+  });
+};
+export var isWebp = function isWebp(format) {
+  return format === 'webp';
+};
+export var isGif = function isGif(format) {
+  return format === 'gif';
+};
+export var isPng = function isPng(format) {
+  return format === 'png';
+};
+export var isFormatPdf = function isFormatPdf(format) {
+  return format === 'pdf';
+};
+export var isSupportedFormat = function isSupportedFormat(format) {
+  return FORMAT_OPTIONS.some(function (option) {
+    return option.value === format;
+  });
+};
+export var getDefaultFormat = function getDefaultFormat(format) {
+  return isSupportedFormat(format) ? format : 'jpeg';
+};
+export var roundNum = Math.round;
+export var cropToCloudimageQuery = function cropToCloudimageQuery(cropDimensions) {
+  return cropDimensions ? _objectSpread({
+    tl_px: "".concat(roundNum(cropDimensions.x), ",").concat(roundNum(cropDimensions.y)),
+    br_px: "".concat(roundNum(cropDimensions.x + cropDimensions.width), ",").concat(roundNum(cropDimensions.y + cropDimensions.height)),
+    radius: cropDimensions.ratio === 'ellipse' ? Math.max(cropDimensions.width, cropDimensions.height) : false
+  }, cropDimensions.ratio === 'ellipse' ? {
+    force_format: 'png'
+  } : {}) : {};
+};
+export var isValidNumberValue = function isValidNumberValue(value, comparedValue) {
+  return (value || value === 0) && !Number.isNaN(value) && value < comparedValue;
+};

package/lib/components/CropPanel/CropPanelContent.js

@@ -0,0 +1,209 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 _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; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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; }
+import { useMemo, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { mapNumber } from '@scaleflex/ui/utils/functions';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import FilerobotImageEditor, { TOOLS } from 'react-filerobot-image-editor';
+import { CrossButton } from '@scaleflex/ui/core';
+import getImageEditUrl from '@scaleflex/widget-utils/lib/getImageEditUrl';
+import { useExplorer } from '../../hooks';
+import ImageOptions from './ImageOptions';
+import { isValidNumberValue, roundNum } from './CropPanel.utils';
+import Styled from './CropPanel.styled';
+import { allPanelsClosed } from '../../slices/panels.slice';
+import { useTransformedDownload } from '../Modals/TransformedDownload';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CropPanelContent = function CropPanelContent(_ref) {
+  var _imageFile$info, _imageFile$info2;
+  var imageFile = _ref.imageFile;
+  var dispatch = useDispatch();
+  var triggerTransformedDownload = useTransformedDownload();
+  var _useCore = useCore(),
+    container = _useCore.opts.container;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    opts = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    isDevEnv = _useExplorer.isDevEnv;
+  var downloadConsent = opts.downloadConsent;
+  var _useState = useState(!!downloadConsent),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPrimaryButtonDisabled = _useState2[0],
+    setIsPrimaryButtonDisabled = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    transformations = _useState4[0],
+    setTransformations = _useState4[1];
+  var imgEditorUpdateStateFnRef = useRef();
+  var originalWidth = imageFile === null || imageFile === void 0 ? void 0 : (_imageFile$info = imageFile.info) === null || _imageFile$info === void 0 ? void 0 : _imageFile$info.img_w;
+  var originalHeight = imageFile === null || imageFile === void 0 ? void 0 : (_imageFile$info2 = imageFile.info) === null || _imageFile$info2 === void 0 ? void 0 : _imageFile$info2.img_h;
+  var _useState5 = useState(function () {
+      return {
+        width: originalWidth || 0,
+        height: originalHeight || 0,
+        x: 0,
+        y: 0,
+        autoResize: false,
+        ratio: 'custom'
+      };
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    cropDimensions = _useState6[0],
+    setCropDimensions = _useState6[1];
+  var imgSource = useMemo(function () {
+    var imgFileUrl = getImageEditUrl(imageFile, {
+      isDevEnv: isDevEnv,
+      containerToken: container
+    });
+    if (originalWidth && originalHeight) {
+      return {
+        width: originalWidth,
+        height: originalHeight,
+        src: imgFileUrl
+      };
+    }
+    return imgFileUrl;
+  }, [imageFile, isDevEnv, originalWidth, originalHeight, container]);
+  if (!imageFile) {
+    return null;
+  }
+  var updateCropDimensions = function updateCropDimensions(newDimens) {
+    var isUpdatedFromEditor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var ratio = newDimens.ratio,
+      width = newDimens.width,
+      height = newDimens.height;
+    var isOriginalRatio = ratio === 'original';
+    var newWidth = isOriginalRatio || !isValidNumberValue(width, originalWidth) ? originalWidth : roundNum(width);
+    var newHeight = isOriginalRatio || !isValidNumberValue(height, originalHeight) ? originalHeight : roundNum(height);
+    setCropDimensions(function (latestDimens) {
+      return _objectSpread(_objectSpread(_objectSpread({}, latestDimens), newDimens), {}, {
+        width: newWidth,
+        height: newHeight
+      });
+    });
+    if (!isUpdatedFromEditor) {
+      imgEditorUpdateStateFnRef.current(function (_ref2) {
+        var shownImageDimensions = _ref2.shownImageDimensions,
+          _ref2$originalSource = _ref2.originalSource,
+          originalSource = _ref2$originalSource === void 0 ? {} : _ref2$originalSource;
+        var mappedPreviewWidth = mapNumber(newWidth, 0, originalSource.width, 0, shownImageDimensions.width);
+        var mappedPreviewHeight = mapNumber(newHeight, 0, originalSource.height, 0, shownImageDimensions.height);
+        var newX = newWidth + (newDimens.x || 0) > originalSource.width ? originalSource.width - newWidth : newDimens.x;
+        var newY = newHeight + (newDimens.y || 0) > originalSource.height ? originalSource.height - newHeight : newDimens.y;
+        var mappedPreviewX = mapNumber(newX, 0, originalSource.width, 0, shownImageDimensions.width);
+        var mappedPreviewY = mapNumber(newY, 0, originalSource.height, 0, shownImageDimensions.height);
+        return {
+          isDesignState: true,
+          adjustments: {
+            crop: {
+              x: mappedPreviewX,
+              y: mappedPreviewY,
+              width: mappedPreviewWidth,
+              height: mappedPreviewHeight,
+              ratio: ratio
+            }
+          }
+        };
+      });
+    }
+  };
+  var updateCropDimensionsFromEditor = function updateCropDimensionsFromEditor(_ref3) {
+    var _ref3$adjustments = _ref3.adjustments,
+      adjustments = _ref3$adjustments === void 0 ? {} : _ref3$adjustments,
+      _ref3$shownImageDimen = _ref3.shownImageDimensions,
+      shownImageDimensions = _ref3$shownImageDimen === void 0 ? {} : _ref3$shownImageDimen,
+      _ref3$originalSource = _ref3.originalSource,
+      originalSource = _ref3$originalSource === void 0 ? {} : _ref3$originalSource;
+    var crop = adjustments.crop;
+    var width = isValidNumberValue(crop.width, originalWidth) ? crop.width : originalWidth;
+    var height = isValidNumberValue(crop.height, originalHeight) ? crop.height : originalHeight;
+    var mappedCropBox = {
+      width: roundNum(mapNumber(width, 0, shownImageDimensions.width, 0, originalSource.width)),
+      height: roundNum(mapNumber(height, 0, shownImageDimensions.height, 0, originalSource.height)),
+      x: roundNum(mapNumber(crop.x, 0, shownImageDimensions.width, 0, originalSource.width)),
+      y: roundNum(mapNumber(crop.y, 0, shownImageDimensions.height, 0, originalSource.height))
+    };
+    updateCropDimensions(mappedCropBox || {}, true);
+  };
+  var closeAllPanels = function closeAllPanels() {
+    dispatch(allPanelsClosed());
+  };
+  var handleDownloadButton = function handleDownloadButton() {
+    closeAllPanels();
+    triggerTransformedDownload([imageFile], {
+      transformations: transformations,
+      isVariant: true
+    });
+  };
+  var onDownloadConsentChange = function onDownloadConsentChange(e) {
+    setIsPrimaryButtonDisabled(!e.target.checked);
+  };
+  return /*#__PURE__*/_jsx(Styled.ExplorerOverlay, {
+    children: /*#__PURE__*/_jsxs(Styled.CropPanel, {
+      children: [/*#__PURE__*/_jsxs(Styled.CropPanelTopBar, {
+        children: [/*#__PURE__*/_jsx(Styled.CropPanelTopBarTitle, {
+          children: i18n('explorerModelCropOptionsButton')
+        }), /*#__PURE__*/_jsx(Styled.CloseIcon, {
+          onClick: closeAllPanels,
+          children: /*#__PURE__*/_jsx(CrossButton, {
+            size: "lg"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Styled.CropPanelBody, {
+        children: [/*#__PURE__*/_jsx(Styled.CropImageWrapper, {
+          children: /*#__PURE__*/_jsx(FilerobotImageEditor, {
+            source: imgSource,
+            onModify: updateCropDimensionsFromEditor,
+            updateStateFnRef: imgEditorUpdateStateFnRef,
+            showCanvasOnly: true,
+            observePluginContainerSize: true,
+            useCloudimage: true,
+            Crop: {
+              ratio: cropDimensions.ratio
+            },
+            defaultToolId: TOOLS.CROP
+          })
+        }), /*#__PURE__*/_jsx(Styled.CropSettings, {
+          children: /*#__PURE__*/_jsx(ImageOptions, {
+            imageSizeLabelI18nKey: "imageOptionsResizeLabel",
+            imageSettingsLabelKey: "imageOptionsFileSettingsLabel",
+            selections: [imageFile],
+            cropProps: {
+              labelKey: 'exportOptionsCropOptionsLabel',
+              dimensions: cropDimensions,
+              hideResizeOptions: cropDimensions.autoResize,
+              updateCropDimensions: updateCropDimensions
+            },
+            onDownloadConsentChange: onDownloadConsentChange,
+            updateTransformations: setTransformations
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Styled.CropPanelFooter, {
+        children: [/*#__PURE__*/_jsx(Styled.CropPanelFooterCancelButton, {
+          size: "lg",
+          color: "basic",
+          onClick: closeAllPanels,
+          children: i18n('mutualizedCancelButtonLabel')
+        }), /*#__PURE__*/_jsx(Styled.CropPanelFooterSaveButton, {
+          size: "lg",
+          color: "primary",
+          disabled: isPrimaryButtonDisabled,
+          onClick: handleDownloadButton,
+          children: i18n('mutualizedDownloadButton')
+        })]
+      })]
+    })
+  });
+};
+export default CropPanelContent;