@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/CropPanel/ImageOptions.js

@@ -0,0 +1,326 @@
+var _excluded = ["crop"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(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 (-1 !== e.indexOf(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 _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 { useState, useEffect } from 'react';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { CheckBoxGroup, Label } from '@scaleflex/ui/core';
+import { FV, PC } from '@scaleflex/widget-common';
+import isPdf from '@scaleflex/widget-utils/lib/isPdf';
+import debounce from '@scaleflex/widget-utils/lib/debounce';
+import { useExplorer } from '../../hooks';
+import Option from './Option';
+import ImageResize from './ImageResize';
+import { JPEG_QUALITY_OPTIONS, FORMAT_OPTIONS, WEBP_QUALITY_OPTIONS, RESIZE_OPTIONS, DPI_OPTIONS } from './CropPanel.constants';
+import { convertObjToArray, isWebp, isPng, isFormatPdf, cropToCloudimageQuery, getDefaultFormat } from './CropPanel.utils';
+import CropOptions from './CropOptions';
+import Styled from './CropPanel.styled';
+import SanitizedHtmlElement from '../common/SanitizedHtmlElement';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ImageOptions = function ImageOptions(_ref) {
+  var _file$info, _file$info2, _cropProps$dimensions;
+  var _ref$imageSettingsLab = _ref.imageSettingsLabelKey,
+    imageSettingsLabelKey = _ref$imageSettingsLab === void 0 ? '' : _ref$imageSettingsLab,
+    _ref$labelStyles = _ref.labelStyles,
+    labelStyles = _ref$labelStyles === void 0 ? {} : _ref$labelStyles,
+    _ref$optionStyles = _ref.optionStyles,
+    optionStyles = _ref$optionStyles === void 0 ? {} : _ref$optionStyles,
+    cropProps = _ref.cropProps,
+    noImageSizeLabel = _ref.noImageSizeLabel,
+    imageSizeLabelI18nKey = _ref.imageSizeLabelI18nKey,
+    _ref$hideResize = _ref.hideResize,
+    hideResize = _ref$hideResize === void 0 ? false : _ref$hideResize,
+    selections = _ref.selections,
+    setPdfOptionsFormat = _ref.setPdfOptionsFormat,
+    onDownloadConsentChange = _ref.onDownloadConsentChange,
+    updateTransformations = _ref.updateTransformations,
+    _ref$isPdfModalPageEr = _ref.isPdfModalPageError,
+    isPdfModalPageError = _ref$isPdfModalPageEr === void 0 ? false : _ref$isPdfModalPageEr,
+    setCurrentPdfPage = _ref.setCurrentPdfPage,
+    setIsPdfPageLoaded = _ref.setIsPdfPageLoaded,
+    setIsDownloadAsZip = _ref.setIsDownloadAsZip,
+    _ref$isDownloadAsZip = _ref.isDownloadAsZip,
+    isDownloadAsZip = _ref$isDownloadAsZip === void 0 ? false : _ref$isDownloadAsZip;
+  var theme = useTheme();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    opts = _useExplorer$opts === void 0 ? {} : _useExplorer$opts;
+  var downloadConsent = opts.downloadConsent,
+    isDownloadUsageRightsEnabled = opts.isDownloadUsageRightsEnabled;
+  var isMultipleSelection = selections.length > 1;
+  var imageSizeLabelKey = imageSizeLabelI18nKey || (isMultipleSelection ? 'imageOptionsResizeLabel' : 'imageOptionsImageSizeLabel');
+  var file = selections[0];
+  var ratio = ((_file$info = file.info) === null || _file$info === void 0 ? void 0 : _file$info.img_w) / ((_file$info2 = file.info) === null || _file$info2 === void 0 ? void 0 : _file$info2.img_h) || 1.5;
+  var webOptions = convertObjToArray(WEBP_QUALITY_OPTIONS);
+  var jpegOptions = convertObjToArray(JPEG_QUALITY_OPTIONS);
+  var isPdfFile = isPdf(file);
+  var defaultFormat = isPdfFile ? FORMAT_OPTIONS[4].value : getDefaultFormat(file.extension);
+  var _useState = useState(defaultFormat),
+    _useState2 = _slicedToArray(_useState, 2),
+    format = _useState2[0],
+    setFormat = _useState2[1];
+  var _useState3 = useState(jpegOptions[0].value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    quality = _useState4[0],
+    setQuality = _useState4[1];
+  var _useState5 = useState(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    pdfPage = _useState6[0],
+    setPdfPage = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    resizeOptions = _useState8[0],
+    setResizeOptions = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    dpiOptions = _useState10[0],
+    setDpiOptions = _useState10[1];
+  var _useState11 = useState(!isMultipleSelection),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isRatioLocked = _useState12[0],
+    setIsRatioLocked = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isConsentChecked = _useState14[0],
+    setIsConsentChecked = _useState14[1];
+  var _useState15 = useState({
+      width: isMultipleSelection || isPdfFile ? '' : 0,
+      height: isMultipleSelection || isPdfFile ? '' : 0
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    dimensions = _useState16[0],
+    setDimensions = _useState16[1];
+  var getQualityType = function getQualityType(format, quality) {
+    if (format === 'png' || format === 'svg') {
+      return;
+    }
+    var webQualityOptions = WEBP_QUALITY_OPTIONS[quality];
+    return {
+      q: isWebp(format) ? webQualityOptions : JPEG_QUALITY_OPTIONS[quality]
+    };
+  };
+  var _useState17 = useState(function () {
+      return _objectSpread({
+        force_format: defaultFormat
+      }, !isPdfFile && _objectSpread(_objectSpread({
+        org_if_sml: 1,
+        func: !isRatioLocked && !isMultipleSelection ? 'cover' : 'bound'
+      }, getQualityType(format, jpegOptions[0].value)), cropToCloudimageQuery(cropProps === null || cropProps === void 0 ? void 0 : cropProps.dimensions)));
+    }),
+    _useState18 = _slicedToArray(_useState17, 2),
+    imageParams = _useState18[0],
+    setImageParams = _useState18[1];
+  var updateImageParamsAndTransformations = function updateImageParamsAndTransformations() {
+    var newParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    updateTransformations(newParams);
+    setImageParams(newParams);
+  };
+  useEffect(function () {
+    var _Object$keys;
+    if ((_Object$keys = Object.keys(file.info || {})) !== null && _Object$keys !== void 0 && _Object$keys.length && !isMultipleSelection && !isPdfFile) {
+      setDimensions({
+        width: file.info.img_w || 0,
+        height: file.info.img_h || 0
+      });
+    }
+    // TODO(Amr): check if we still want resizeOptions to be configured
+    setResizeOptions(convertObjToArray(RESIZE_OPTIONS));
+    setDpiOptions(DPI_OPTIONS);
+    updateTransformations(imageParams);
+  }, []);
+  useEffect(function () {
+    if (!isRatioLocked && !isMultipleSelection) {
+      var newParams = _objectSpread(_objectSpread({}, imageParams), {}, {
+        func: 'cover'
+      });
+      setImageParams(newParams);
+      updateTransformations(newParams);
+    }
+  }, [isRatioLocked]);
+  useEffect(function () {
+    if (cropProps !== null && cropProps !== void 0 && cropProps.dimensions) {
+      var newParams = _objectSpread(_objectSpread({}, imageParams), {}, {
+        func: ''
+      }, cropToCloudimageQuery(cropProps.dimensions));
+      updateImageParamsAndTransformations(newParams);
+    }
+  }, [cropProps === null || cropProps === void 0 ? void 0 : cropProps.dimensions]);
+  var getFormatOptions = function getFormatOptions() {
+    if (!isPdfFile) {
+      return FORMAT_OPTIONS.filter(function (option) {
+        return option.value !== 'pdf';
+      });
+    }
+    return FORMAT_OPTIONS;
+  };
+  var handleDownloadAsZip = function handleDownloadAsZip(e) {
+    setIsDownloadAsZip(e.target.checked);
+  };
+  var toggleDownloadConsent = function toggleDownloadConsent(e) {
+    setIsConsentChecked(e.target.checked);
+    if (onDownloadConsentChange) {
+      onDownloadConsentChange(e);
+    }
+  };
+  var handleFormatChange = function handleFormatChange(format) {
+    var _imageParams$width, _imageParams$height;
+    setFormat(format);
+    if (isPdfFile && setPdfOptionsFormat) setPdfOptionsFormat(format);
+    if (format === 'pdf') {
+      var _newParams = {
+        force_format: format
+      };
+      updateImageParamsAndTransformations(_newParams);
+      return;
+    }
+    var newParams = _objectSpread(_objectSpread(_objectSpread({}, imageParams), {}, {
+      force_format: format,
+      org_if_sml: 1,
+      doc_page: isPdfFile ? 1 : '',
+      func: !isRatioLocked && !isMultipleSelection ? 'cover' : 'bound',
+      width: (_imageParams$width = imageParams.width) !== null && _imageParams$width !== void 0 ? _imageParams$width : dimensions.width,
+      height: (_imageParams$height = imageParams.height) !== null && _imageParams$height !== void 0 ? _imageParams$height : dimensions.height
+    }, isPdfFile), getQualityType(format, quality));
+    updateImageParamsAndTransformations(newParams);
+  };
+  var updateCropOptions = debounce(cropProps === null || cropProps === void 0 ? void 0 : cropProps.updateCropDimensions, 100);
+  var handleCropChange = function handleCropChange(newDimensions) {
+    var crop = newDimensions.crop,
+      otherParams = _objectWithoutProperties(newDimensions, _excluded);
+    updateCropOptions(crop);
+    setImageParams(_objectSpread(_objectSpread(_objectSpread({}, imageParams), otherParams), cropToCloudimageQuery(crop)));
+  };
+  var handleQualityChange = function handleQualityChange(newQuality) {
+    var _options$find;
+    var options = isWebp(format) ? webOptions : jpegOptions;
+    var qualityLabel = (_options$find = options.find(function (item) {
+      return item.value === newQuality;
+    })) === null || _options$find === void 0 ? void 0 : _options$find.label;
+    setQuality(qualityLabel);
+    var newParams = _objectSpread(_objectSpread({}, imageParams), getQualityType(format, qualityLabel));
+    updateImageParamsAndTransformations(newParams);
+  };
+  var handlePageChange = function handlePageChange(event) {
+    if (event.target.value < 0) {
+      return;
+    }
+    if (event.target.value === '0') {
+      setPdfPage(1);
+      var _newParams2 = _objectSpread(_objectSpread({}, imageParams), {}, {
+        doc_page: 1
+      });
+      updateImageParamsAndTransformations(_newParams2);
+      return;
+    }
+    setPdfPage(event.target.value);
+    var newParams = _objectSpread(_objectSpread({}, imageParams), {}, {
+      doc_page: event.target.value
+    });
+    updateImageParamsAndTransformations(newParams);
+    if (typeof setCurrentPdfPage === 'function') {
+      setCurrentPdfPage(event.target.value);
+    }
+    if (typeof setIsPdfPageLoaded === 'function') {
+      setIsPdfPageLoaded(false);
+    }
+  };
+  var renderLabel = function renderLabel(labelKey, styles) {
+    return /*#__PURE__*/_jsx(Label, _objectSpread(_objectSpread({
+      style: _objectSpread(_objectSpread({
+        color: theme.palette[PC.TextPrimary]
+      }, theme.typography.font[FV.ButtonMdEmphasis]), {}, {
+        lineHeight: '16px'
+      })
+    }, styles), {}, {
+      children: i18n(labelKey)
+    }));
+  };
+  return /*#__PURE__*/_jsxs(Styled.ImageOptionsSettingsWrapper, {
+    isCropOptions: cropProps,
+    children: [/*#__PURE__*/_jsxs(Styled.ImageOptionsSettings, {
+      children: [imageSettingsLabelKey && renderLabel(imageSettingsLabelKey, labelStyles), /*#__PURE__*/_jsx(Option, {
+        label: i18n('mutualizedFormatLabel'),
+        styles: optionStyles,
+        value: imageParams.force_format,
+        options: getFormatOptions(),
+        onChange: handleFormatChange,
+        tooltipMessageKey: i18n('imageOptionFormatTooltip')
+      }), !(isPng(format) || isFormatPdf(format)) && /*#__PURE__*/_jsx(Option, {
+        label: i18n('imageOptionsQualityLabel'),
+        styles: optionStyles,
+        value: quality,
+        options: isWebp(format) ? webOptions : jpegOptions,
+        onChange: handleQualityChange,
+        tooltipMessageKey: i18n('imageOptionQualityTooltip')
+      }), isPdfFile && !isFormatPdf(format) && /*#__PURE__*/_jsx(Option, {
+        type: "input",
+        label: i18n('imageOptionsPageLabel'),
+        styles: optionStyles,
+        value: pdfPage,
+        onChange: handlePageChange,
+        isPdfModalPageError: isPdfModalPageError
+      })]
+    }), cropProps && _typeof(cropProps) === 'object' && /*#__PURE__*/_jsxs(Styled.ImageOptionsSettings, {
+      children: [renderLabel(cropProps.labelKey, labelStyles), /*#__PURE__*/_jsx(CropOptions, {
+        imageParams: imageParams,
+        cropDimensions: cropProps.dimensions,
+        handleCropChange: handleCropChange,
+        setImageParams: setImageParams,
+        selections: selections,
+        updateTransformations: updateTransformations
+      })]
+    }), !isFormatPdf(format) && !hideResize && /*#__PURE__*/_jsxs(Styled.ImageOptionsSettings, {
+      children: [!noImageSizeLabel && imageSizeLabelKey && renderLabel(imageSizeLabelKey, labelStyles), /*#__PURE__*/_jsx(ImageResize, {
+        imageParams: imageParams,
+        setImageParams: setImageParams,
+        resizeOptions: resizeOptions,
+        dpiOptions: dpiOptions,
+        isRatioLocked: isRatioLocked,
+        imageDimensions: dimensions,
+        isMultipleImagesSelected: isMultipleSelection,
+        ratio: ratio,
+        setIsRatioLocked: setIsRatioLocked,
+        updateTransformations: updateTransformations,
+        preventInputsChange: cropProps === null || cropProps === void 0 ? void 0 : (_cropProps$dimensions = cropProps.dimensions) === null || _cropProps$dimensions === void 0 ? void 0 : _cropProps$dimensions.autoResize,
+        hideOptions: cropProps === null || cropProps === void 0 ? void 0 : cropProps.hideResizeOptions,
+        isPdfFile: isPdfFile,
+        file: file
+      })]
+    }), false && isMultipleSelection && typeof setIsDownloadAsZip === 'function' && /*#__PURE__*/_jsx(CheckBoxGroup, {
+      checked: isDownloadAsZip,
+      label: i18n('imageOptionsDownloadAsZipFileLabel'),
+      labelPosition: "after",
+      disabled: isDownloadUsageRightsEnabled,
+      onChange: handleDownloadAsZip,
+      size: "md",
+      type: "checkbox"
+    }), downloadConsent && /*#__PURE__*/_jsx(CheckBoxGroup, {
+      checked: isConsentChecked,
+      label: /*#__PURE__*/_jsx(SanitizedHtmlElement, {
+        html: downloadConsent
+      }),
+      labelPosition: "after",
+      onChange: toggleDownloadConsent,
+      size: "md",
+      type: "checkbox",
+      checkBoxGroupProps: {
+        style: {
+          alignItems: 'flex-start'
+        }
+      }
+    })]
+  });
+};
+export default ImageOptions;

package/lib/components/CropPanel/ImageResize.js

@@ -0,0 +1,207 @@
+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 { useState } from 'react';
+import { InputGroup, TooltipV2 } from '@scaleflex/ui/core';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { InfoOutline, LockOutline, UnlockOutline } from '@scaleflex/icons';
+import isPdf from '@scaleflex/widget-utils/lib/isPdf';
+import isSvg from '@scaleflex/widget-utils/lib/isSvg';
+import isPsd from '@scaleflex/widget-utils/lib/isPsd';
+import isEps from '@scaleflex/widget-utils/lib/isEps';
+import { PC } from '@scaleflex/widget-common';
+import { useExplorer } from '../../hooks';
+import { roundNum } from './CropPanel.utils';
+import { RESIZE_OPTIONS } from './CropPanel.constants';
+import Styled from './CropPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var ImageResize = function ImageResize(_ref) {
+  var _getImageResizeInputV;
+  var imageParams = _ref.imageParams,
+    setImageParams = _ref.setImageParams,
+    resizeOptions = _ref.resizeOptions,
+    _ref$dpiOptions = _ref.dpiOptions,
+    dpiOptions = _ref$dpiOptions === void 0 ? [] : _ref$dpiOptions,
+    imageDimensions = _ref.imageDimensions,
+    isRatioLocked = _ref.isRatioLocked,
+    setIsRatioLocked = _ref.setIsRatioLocked,
+    isMultipleImagesSelected = _ref.isMultipleImagesSelected,
+    updateTransformations = _ref.updateTransformations,
+    ratio = _ref.ratio,
+    hideOptions = _ref.hideOptions,
+    style = _ref.style,
+    preventInputsChange = _ref.preventInputsChange,
+    isPdfFile = _ref.isPdfFile,
+    file = _ref.file,
+    isRatioButtonDisabled = _ref.isRatioButtonDisabled;
+  var theme = useTheme();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  // TODO(Amr): we want to have possibility to change default resize at mount
+  // to do that we need to fix an issue between cropOptions and imageOptions
+  // as cropOptions overwrite the imageParams as they share the same state
+  // check the todo in CropOptions component
+  var _useState = useState('original'),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageSizeType = _useState2[0],
+    setImageSizeType = _useState2[1];
+  var iconsSecondaryColor = theme.palette[PC.IconsSecondary];
+  var showDpiOptions = isPdf(file) || isSvg(file) || isPsd(file) || isEps(file);
+  var isDpi = imageSizeType.includes('dpi');
+  var isValidValue = function isValidValue(param) {
+    return ((imageParams === null || imageParams === void 0 ? void 0 : imageParams[param]) || (imageParams === null || imageParams === void 0 ? void 0 : imageParams[param]) === 0) && !Number.isNaN(imageParams === null || imageParams === void 0 ? void 0 : imageParams[param]);
+  };
+  var setImageParam = function setImageParam(param, paramValue) {
+    var nextParams = {};
+    if (paramValue < 0) return;
+    if (isRatioLocked) {
+      var secondParamValue = roundNum(param === 'width' ? paramValue / ratio : paramValue * ratio);
+      nextParams = _objectSpread(_objectSpread({}, imageParams), {}, _defineProperty(_defineProperty({}, param, paramValue), param === 'width' ? 'height' : 'width', secondParamValue));
+    } else {
+      nextParams = _objectSpread(_objectSpread({}, imageParams), {}, _defineProperty({}, param, paramValue));
+    }
+    if (typeof updateTransformations === 'function') {
+      updateTransformations(nextParams);
+    }
+    setImageParams(nextParams);
+  };
+  var handleImageSizeChange = function handleImageSizeChange(newImageSizeType) {
+    var resizeOptions = RESIZE_OPTIONS;
+    var newWidth = newImageSizeType === 'original' ? imageDimensions.width : resizeOptions[newImageSizeType];
+    var newHeight = newImageSizeType === 'original' ? imageDimensions.height : resizeOptions[newImageSizeType] * ratio;
+    var selectedDpiObject = dpiOptions.find(function (option) {
+      return option.label === newImageSizeType;
+    });
+    var isDpi = newImageSizeType.includes('dpi');
+    var newParams = _objectSpread(_objectSpread({}, imageParams), {}, {
+      width: newWidth,
+      height: Math.round(newHeight),
+      org_if_sml: !isPsd(file) ? 1 : '',
+      dpi: isDpi ? selectedDpiObject === null || selectedDpiObject === void 0 ? void 0 : selectedDpiObject.value : ''
+    });
+    setImageSizeType(newImageSizeType);
+    if (typeof updateTransformations === 'function') {
+      updateTransformations(newParams);
+    }
+    setImageParams(newParams);
+  };
+  var getImageResizeInputValue = function getImageResizeInputValue() {
+    if (!isDpi) {
+      var isValidHeight = isValidValue('height');
+      if (isValidHeight) return Math.round(imageParams.height);
+      return (imageDimensions === null || imageDimensions === void 0 ? void 0 : imageDimensions.height) || 0;
+    }
+  };
+  var getWidthValue = function getWidthValue() {
+    if (!isDpi) {
+      var isValidWidth = isValidValue('width');
+      if (isValidWidth) {
+        return ((imageParams === null || imageParams === void 0 ? void 0 : imageParams.width) || 0).toString();
+      }
+      return ((imageDimensions === null || imageDimensions === void 0 ? void 0 : imageDimensions.width) || 0).toString();
+    }
+    return '';
+  };
+  var renderButton = function renderButton(type) {
+    return /*#__PURE__*/_jsx(Styled.ImageOptionButtonButtons, {
+      color: "link-secondary",
+      size: "sm",
+      type: type,
+      imageSizeType: imageSizeType,
+      onClick: function onClick() {
+        return handleImageSizeChange(type);
+      },
+      children: type
+    }, type);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "filerobot-Explorer-ImageOptions-resize-options",
+      style: style,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: isMultipleImagesSelected ? 'filerobot-Explorer-ImageOptions-resize-options-input' : '',
+        children: /*#__PURE__*/_jsx(InputGroup, {
+          label: isMultipleImagesSelected ? i18n('imageSizeMaxWidthLabel') : i18n('mutualizedWidthLabel'),
+          style: {
+            width: '100%'
+          },
+          inputProps: {
+            type: 'number',
+            min: 0
+          },
+          iconEnd: "px",
+          placeholder: (isMultipleImagesSelected || isPdfFile) && imageSizeType === 'original' ? i18n('imageSizeOriginalWidthPlaceholder') : '',
+          value: getWidthValue(),
+          onChange: preventInputsChange ? undefined : function (_ref2) {
+            var target = _ref2.target;
+            return setImageParam('width', Number(target.value));
+          },
+          disabled: preventInputsChange || isDpi
+        })
+      }), !isMultipleImagesSelected && /*#__PURE__*/_jsx(Styled.IconButton, {
+        color: "basic",
+        onClick: preventInputsChange || isRatioButtonDisabled ? undefined : function () {
+          return setIsRatioLocked(!isRatioLocked);
+        },
+        isActive: !isRatioLocked,
+        disabled: isRatioButtonDisabled,
+        children: isRatioLocked ? /*#__PURE__*/_jsx(LockOutline, {
+          color: theme.palette.error,
+          size: 16
+        }) : /*#__PURE__*/_jsx(UnlockOutline, {
+          color: theme.palette.success,
+          size: 16
+        })
+      }), /*#__PURE__*/_jsx(InputGroup, {
+        label: isMultipleImagesSelected ? i18n('imageSizeMaxHeightLabel') : i18n('mutualizedHeightLabel'),
+        style: {
+          width: '100%'
+        },
+        inputProps: {
+          type: 'number',
+          min: 0
+        },
+        iconEnd: "px",
+        placeholder: (isMultipleImagesSelected || isPdfFile) && imageSizeType === 'original' ? i18n('imageSizeOriginalHeightPlaceholder') : '',
+        value: (_getImageResizeInputV = getImageResizeInputValue()) === null || _getImageResizeInputV === void 0 ? void 0 : _getImageResizeInputV.toString(),
+        onChange: preventInputsChange ? undefined : function (_ref3) {
+          var target = _ref3.target;
+          return setImageParam('height', Number(target.value));
+        },
+        disabled: preventInputsChange || isDpi
+      })]
+    }), !hideOptions && /*#__PURE__*/_jsxs("div", {
+      className: "filerobot-Explorer-ImageOptions-size-options",
+      children: [/*#__PURE__*/_jsxs(Styled.ImageSizeOptions, {
+        children: [/*#__PURE__*/_jsxs(Styled.ImageSizeOptionButtons, {
+          children: [renderButton('original'), resizeOptions.map(function (option) {
+            return renderButton(option.label);
+          })]
+        }), /*#__PURE__*/_jsx(TooltipV2, {
+          arrow: true,
+          position: "top",
+          size: "md",
+          title: i18n('imageOptionImageSizeTooltip'),
+          children: /*#__PURE__*/_jsx(InfoOutline, {
+            color: iconsSecondaryColor,
+            size: 14
+          })
+        })]
+      }), showDpiOptions && /*#__PURE__*/_jsx("div", {
+        children: dpiOptions.map(function (option) {
+          return renderButton(option.label);
+        })
+      })]
+    })]
+  });
+};
+export default ImageResize;

package/lib/components/CropPanel/Option.js

@@ -0,0 +1,113 @@
+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 { InputGroup, Label, TooltipV2, MenuItem } from '@scaleflex/ui/core';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { InfoOutline } from '@scaleflex/icons';
+import { PC } from '@scaleflex/widget-common';
+import { useExplorer } from '../../hooks';
+import { INVALID_INPUT_CHARS } from './CropPanel.constants';
+import Styled from './CropPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Option = function Option(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    styles = _ref.styles,
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? true : _ref$block,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'select' : _ref$type,
+    _ref$tooltipMessageKe = _ref.tooltipMessageKey,
+    tooltipMessageKey = _ref$tooltipMessageKe === void 0 ? '' : _ref$tooltipMessageKe,
+    _ref$isPdfModalPageEr = _ref.isPdfModalPageError,
+    isPdfModalPageError = _ref$isPdfModalPageEr === void 0 ? false : _ref$isPdfModalPageEr;
+  var theme = useTheme();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  var iconsSecondaryColor = theme.palette[PC.IconsSecondary];
+  var checkInputHandler = function checkInputHandler(event) {
+    if (INVALID_INPUT_CHARS.includes(event.key)) {
+      event.preventDefault();
+    }
+  };
+  return /*#__PURE__*/_jsxs(Styled.OptionGroup, {
+    style: styles,
+    children: [block && /*#__PURE__*/_jsx(Label, {
+      iconEnd: function iconEnd() {
+        return tooltipMessageKey && /*#__PURE__*/_jsx(TooltipV2, {
+          appendTo: document.body,
+          arrow: true,
+          position: "top",
+          size: "md",
+          title: tooltipMessageKey,
+          children: /*#__PURE__*/_jsx(InfoOutline, {
+            color: iconsSecondaryColor,
+            size: 14
+          })
+        });
+      },
+      children: label
+    }), type === 'input' ? /*#__PURE__*/_jsx("div", {
+      className: "filerobot-Explorer-ImageOptions-options-input",
+      children: /*#__PURE__*/_jsx(InputGroup, {
+        style: {
+          width: '100%'
+        },
+        inputProps: {
+          type: 'number',
+          min: 1
+        },
+        value: value,
+        onKeyDown: function onKeyDown(event) {
+          return checkInputHandler(event);
+        },
+        onChange: onChange,
+        error: isPdfModalPageError,
+        hint: isPdfModalPageError ? i18n('pdfModelContentNotFoundLabel') : ''
+      })
+    }) : /*#__PURE__*/_jsx(Styled.SelectGroup, {
+      value: value,
+      label: !block ? label : '',
+      LabelProps: {
+        iconEnd: function iconEnd(props) {
+          return !block && /*#__PURE__*/_jsx(TooltipV2, {
+            arrow: true,
+            position: "top",
+            size: "md",
+            title: i18n('imageOptionFormatTooltip'),
+            children: /*#__PURE__*/_jsx(InfoOutline, _objectSpread(_objectSpread({}, props), {}, {
+              color: iconsSecondaryColor,
+              size: 14
+            }))
+          });
+        }
+      },
+      fullWidth: true,
+      onChange: onChange,
+      SelectProps: {
+        MenuProps: {
+          hideScroll: false
+        }
+      },
+      children: options.map(function (option) {
+        var _ref2, _option$label, _option$value, _option$value2;
+        var unTranslatedLabel = (_ref2 = (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.value) !== null && _ref2 !== void 0 ? _ref2 : option;
+        var optionLabel = i18n(unTranslatedLabel) || unTranslatedLabel;
+        return /*#__PURE__*/_jsx(MenuItem, {
+          value: (_option$value2 = option.value) !== null && _option$value2 !== void 0 ? _option$value2 : option,
+          primary: optionLabel,
+          style: {
+            textTransform: 'capitalize'
+          },
+          children: optionLabel
+        }, (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : option);
+      })
+    })]
+  });
+};
+export default Option;