@scaleflex/widget-explorer 4.1.0 → 4.4.0

package/lib/components/CropPanel/ImageOptions.js

@@ -1,326 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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;