Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@filerobot/explorer / lib / components / CropPanel / ImageOptions.js
Size: Mime:
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(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
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(arr) { if (Array.isArray(arr)) return arr; }
import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useTheme } from '@scaleflex/ui/theme/hooks';
import { CheckBoxGroup, Label } from '@scaleflex/ui/core';
import { PC } from '@filerobot/common';
import { FontVariant as FV } from '@scaleflex/ui/utils/types/typography/font-variant';
import isPdf from '@filerobot/utils/lib/isPdf';
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 { selectIsShareboxView } from '../../slices/views.slice';
import { jsx as _jsx } from "react/jsx-runtime";
import { 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,
    imageSizeLabelI18nKey = _ref.imageSizeLabelI18nKey,
    isVariant = _ref.isVariant,
    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 isShareboxView = useSelector(selectIsShareboxView);
  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_h) / ((_file$info2 = file.info) === null || _file$info2 === void 0 ? void 0 : _file$info2.img_w) || 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);
  }, []);
  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 handleCropChange = function handleCropChange(newDimensions) {
    var crop = newDimensions.crop,
      otherParams = _objectWithoutProperties(newDimensions, _excluded);
    cropProps.updateCropDimensions(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'),
        noOptionsTranslations: true
      }), !(isPng(format) || isFormatPdf(format)) && /*#__PURE__*/_jsx(Option, {
        label: i18n('imageOptionsQualityLabel'),
        styles: optionStyles,
        value: quality,
        options: isWebp(format) ? webOptions : jpegOptions,
        onChange: handleQualityChange,
        tooltipMessageKey: i18n('imageOptionQualityTooltip'),
        i18nKeyPrefix: "imageOptionsQuality"
      }), 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) && !isVariant && /*#__PURE__*/_jsxs(Styled.ImageOptionsSettings, {
      children: [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
      })]
    }), isMultipleSelection && !isShareboxView && 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: downloadConsent,
      labelPosition: "after",
      onChange: toggleDownloadConsent,
      size: "md",
      type: "checkbox",
      checkBoxGroupProps: {
        style: {
          alignItems: 'flex-start'
        }
      }
    })]
  });
};
export default ImageOptions;