@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/plugins/shared/ImageCropper/Preview.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { useEffect, createRef } from 'react';
 import PropTypes from 'prop-types';
 import formatMessage from '../../../../format-message';
@@ -25,27 +26,23 @@ import { useMouseWheel } from './useMouseWheel';
 import { useKeyMouseTouchEvents } from './useKeyMouseEvents';
 import checkerboardStyle from '../CheckerboardStyling';
 import { View } from '@instructure/ui-view';
+
 /**
  * Remove the node contents and append the svg element.
  */
-
 function replaceSvg(svg, node) {
   if (!node) return;
-
   while (node.firstChild) {
     node.removeChild(node.lastChild);
   }
-
   node.appendChild(svg);
 }
-
-function getTransformValue(_ref) {
-  let {
-    translateX,
-    translateY,
-    rotation,
-    scaleRatio
-  } = _ref;
+function getTransformValue({
+  translateX,
+  translateY,
+  rotation,
+  scaleRatio
+}) {
   const values = [];
   if (translateX !== 0) values.push(`translateX(${translateX}px)`);
   if (translateY !== 0) values.push(`translateY(${translateY}px)`);
@@ -53,13 +50,11 @@ function getTransformValue(_ref) {
   if (scaleRatio > 1) values.push(`scale(${scaleRatio})`);
   return values.join(' ');
 }
-
-export const Preview = _ref2 => {
-  let {
-    image,
-    settings,
-    dispatch
-  } = _ref2;
+export const Preview = ({
+  image,
+  settings,
+  dispatch
+}) => {
   const previewRef = /*#__PURE__*/createRef();
   const shapeRef = /*#__PURE__*/createRef();
   const imgRef = /*#__PURE__*/createRef();
@@ -73,8 +68,8 @@ export const Preview = _ref2 => {
   const [tempScaleRatio, onWheelCallback] = useMouseWheel(scaleRatio, dispatch);
   const [tempTranslateX, tempTranslateY, onMouseDownCallback, onTouchStartCallback] = useKeyMouseTouchEvents(translateX, translateY, dispatch, imgRef);
   useEffect(() => {
-    imgRef.current.ondragstart = () => false; // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    imgRef.current.ondragstart = () => false;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
     const svg = buildSvg(shape);
@@ -86,17 +81,16 @@ export const Preview = _ref2 => {
     rotation,
     scaleRatio: tempScaleRatio
   });
-
   function isSafariVersion15OrLesser() {
     const match = /Version\/(\d+).+Safari/.exec(navigator.userAgent);
     return match ? parseInt(match[1], 10) < 16 : false;
-  } // Clip is not supported in Safari until v16.
+  }
+
+  // Clip is not supported in Safari until v16.
   // It's needed here to prevent a strange screenreader
   // behavior that makes the cropper look bad. 'hidden'
   // suffices when clip is not available, although it's not perfect
   // TODO: remove when Safari versions >= 16 are more commonplace
-
-
   const overflow = isSafariVersion15OrLesser() ? 'hidden' : 'clip';
   return /*#__PURE__*/React.createElement("div", {
     style: {

package/es/rce/plugins/shared/ImageCropper/constants.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 export const PREVIEW_BACKGROUND_COLOR = '#394B58';
 export const PREVIEW_WIDTH = 942;
 export const PREVIEW_HEIGHT = 350;

package/es/rce/plugins/shared/ImageCropper/controls/CustomNumberInput.js

@@ -15,21 +15,21 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NumberInput } from '@instructure/ui-number-input';
 import { useDebouncedNumericValue } from './useDebouncedNumericValue';
 import formatMessage from '../../../../../format-message';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-export const CustomNumberInput = _ref => {
-  let {
-    value,
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    placeholder,
-    onChange
-  } = _ref;
+export const CustomNumberInput = ({
+  value,
+  parseValueCallback,
+  processValueCallback,
+  formatValueCallback,
+  placeholder,
+  onChange
+}) => {
   const [inputValue, digestCurrentValue, digestNewValue, hasError] = useDebouncedNumericValue({
     value,
     parseValueCallback,
@@ -37,20 +37,16 @@ export const CustomNumberInput = _ref => {
     formatValueCallback,
     onChange
   });
-
   const handleChange = (event, newValue) => digestNewValue(newValue.trim());
-
   const handleBlur = () => digestCurrentValue();
-
   const handleIncrement = () => onChange(processValueCallback(value + 1));
-
   const handleDecrement = () => onChange(processValueCallback(value - 1));
-
   const messages = hasError ? [{
     text: formatMessage('Invalid entry.'),
     type: 'error'
   }] : [];
   return /*#__PURE__*/React.createElement(NumberInput, {
+    allowStringValue: true,
     value: inputValue,
     onChange: handleChange,
     onBlur: handleBlur,

package/es/rce/plugins/shared/ImageCropper/controls/ResetControls.js

@@ -15,16 +15,16 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
 import { Button } from '@instructure/ui-buttons';
 import { IconResetLine } from '@instructure/ui-icons';
 import formatMessage from '../../../../../format-message';
-export const ResetControls = _ref => {
-  let {
-    onReset
-  } = _ref;
+export const ResetControls = ({
+  onReset
+}) => {
   return /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
     renderIcon: IconResetLine,
     onClick: onReset

package/es/rce/plugins/shared/ImageCropper/controls/RotationControls.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
@@ -25,36 +26,25 @@ import { CustomNumberInput } from './CustomNumberInput';
 import { calculateRotation, getNearestRectAngle } from './utils';
 import { BUTTON_ROTATION_DEGREES } from '../constants';
 import formatMessage from '../../../../../format-message';
-
 const parseRotationText = value => {
   // Matches a positive/negative integer/decimal followed by "º" symbol
   const matches = value.match(/([-|+]?\d+(?:\.\d+)?)º?/);
-
   if (!matches) {
     return null;
   }
-
   const result = parseInt(matches[1], 10);
-
   if (Number.isNaN(result)) {
     return null;
   }
-
   return result;
 };
-
 const formatRotationText = value => `${value}º`;
-
-export const RotationControls = _ref => {
-  let {
-    rotation,
-    onChange
-  } = _ref;
-
+export const RotationControls = ({
+  rotation,
+  onChange
+}) => {
   const rotateLeftCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, true) - BUTTON_ROTATION_DEGREES));
-
   const rotateRightCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, false) + BUTTON_ROTATION_DEGREES));
-
   return /*#__PURE__*/React.createElement(Flex.Item, {
     margin: "0 medium 0 0",
     title: formatMessage('Rotation'),

package/es/rce/plugins/shared/ImageCropper/controls/ShapeControls.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
@@ -48,22 +49,18 @@ const SHAPE_OPTIONS = [{
   id: Shape.Star,
   label: formatMessage('Star')
 }];
-export const ShapeControls = _ref => {
-  let {
-    shape,
-    onChange
-  } = _ref;
+export const ShapeControls = ({
+  shape,
+  onChange
+}) => {
   return /*#__PURE__*/React.createElement(Flex.Item, {
     margin: "0 medium 0 0"
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
     isInline: true,
     value: shape,
-    onChange: (event, _ref2) => {
-      let {
-        id
-      } = _ref2;
-      return onChange(id);
-    },
+    onChange: (event, {
+      id
+    }) => onChange(id),
     renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Select crop shape')),
     "data-testid": "shape-select-dropdown"
   }, SHAPE_OPTIONS.map(option => /*#__PURE__*/React.createElement(SimpleSelect.Option, {

package/es/rce/plugins/shared/ImageCropper/controls/ZoomControls.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons';
@@ -28,33 +29,24 @@ import PropTypes from 'prop-types';
 import { CustomNumberInput } from './CustomNumberInput';
 import { showFlashAlert } from '../../../../../common/FlashAlert';
 import { debounce } from '@instructure/debounce';
-
 const parseZoomText = value => {
   // Matches a positive/negative integer/decimal followed by %" symbol
   const matches = value.match(/([-|+]?\d+(?:\.\d+)?)%?/);
-
   if (!matches) {
     return null;
   }
-
   const result = parseInt(matches[1], 10);
-
   if (Number.isNaN(result)) {
     return null;
   }
-
   return result;
 };
-
 const formatZoomText = value => `${value}%`;
-
 const debouncedAlert = debounce(showFlashAlert, 1000);
-export const ZoomControls = _ref => {
-  let {
-    scaleRatio,
-    onChange
-  } = _ref;
-
+export const ZoomControls = ({
+  scaleRatio,
+  onChange
+}) => {
   const onZoomChange = value => {
     const message = {
       message: `${round(value * 100)}% Zoom`,
@@ -64,17 +56,14 @@ export const ZoomControls = _ref => {
     debouncedAlert(message);
     onChange(value);
   };
-
   const zoomOutCallback = () => {
     const newScaleRatio = calculateScaleRatio(scaleRatio - BUTTON_SCALE_STEP);
     onZoomChange(newScaleRatio);
   };
-
   const zoomInCallback = () => {
     const newScaleRatio = calculateScaleRatio(scaleRatio + BUTTON_SCALE_STEP);
     onZoomChange(newScaleRatio);
   };
-
   return /*#__PURE__*/React.createElement(Flex.Item, {
     title: formatMessage('Zoom'),
     role: "toolbar",

package/es/rce/plugins/shared/ImageCropper/controls/index.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import { Flex } from '@instructure/ui-flex';
 import { actions } from '../reducers/imageCropper';
@@ -22,11 +23,10 @@ import { ZoomControls } from './ZoomControls';
 import { RotationControls } from './RotationControls';
 import { ShapeControls } from './ShapeControls';
 import { ResetControls } from './ResetControls';
-export const Controls = _ref => {
-  let {
-    settings,
-    dispatch
-  } = _ref;
+export const Controls = ({
+  settings,
+  dispatch
+}) => {
   return /*#__PURE__*/React.createElement(Flex, {
     id: "imageCropperControls",
     direction: "row",

package/es/rce/plugins/shared/ImageCropper/controls/useDebouncedNumericValue.js

@@ -15,39 +15,33 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import { useEffect, useRef, useState } from 'react';
 import { debounce } from '@instructure/debounce';
 const CHANGE_EVENT_DELAY = 1000;
-
-const digestValue = _ref => {
-  let {
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    value
-  } = _ref;
+const digestValue = ({
+  parseValueCallback,
+  processValueCallback,
+  formatValueCallback,
+  value
+}) => {
   const parsedNewValue = parseValueCallback(value);
-
   if (parsedNewValue === null) {
     return [null, null];
   }
-
   const processedNewValue = processValueCallback(parsedNewValue);
   const formattedNewTempValue = formatValueCallback(processedNewValue);
   return [formattedNewTempValue, processedNewValue];
 };
-
-export function useDebouncedNumericValue(_ref2) {
-  let {
-    value,
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    onChange
-  } = _ref2;
+export function useDebouncedNumericValue({
+  value,
+  parseValueCallback,
+  processValueCallback,
+  formatValueCallback,
+  onChange
+}) {
   const [inputValue, setInputValue] = useState(formatValueCallback(value));
   const [hasError, setHasError] = useState(false);
-
   const updateStateAfterDigest = newValue => {
     const [formattedValue, processedValue] = digestValue({
       parseValueCallback,
@@ -55,40 +49,31 @@ export function useDebouncedNumericValue(_ref2) {
       formatValueCallback,
       value: newValue
     });
-
     if (formattedValue === null || processedValue === null) {
       setHasError(true);
       return;
     }
-
     setHasError(false);
-
     if (newValue !== formattedValue) {
       setInputValue(formattedValue);
     }
-
     if (processedValue !== value) {
       onChange(processedValue);
     }
   };
-
   const debouncedUpdateStateAfterDigest = useRef(debounce(updateStateAfterDigest, CHANGE_EVENT_DELAY));
   useEffect(() => {
     const newTempValue = formatValueCallback(value);
-
     if (newTempValue !== inputValue) {
       setInputValue(newTempValue);
       setHasError(false);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
-
   const digestCurrentValue = () => updateStateAfterDigest(inputValue);
-
   const digestNewValue = rawValue => {
     setInputValue(rawValue);
     debouncedUpdateStateAfterDigest.current(rawValue);
   };
-
   return [inputValue, digestCurrentValue, digestNewValue, hasError];
 }

package/es/rce/plugins/shared/ImageCropper/controls/utils.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import { BUTTON_ROTATION_DEGREES, MAX_SCALE_RATIO, MIN_SCALE_RATIO } from '../constants';
 import round from '../../round';
 export const calculateScaleRatio = scaleRatio => {
@@ -29,11 +30,9 @@ export const calculateScalePercentage = scalePercentage => {
 };
 export const calculateRotation = rotationAngle => {
   const simplifiedRotationAngle = round(rotationAngle % 360);
-
   if (Math.abs(rotationAngle) >= 360) {
     return simplifiedRotationAngle;
   }
-
   return rotationAngle;
 };
 export const getNearestRectAngle = (rotationAngle, shouldRotateToLeft) => {

package/es/rce/plugins/shared/ImageCropper/imageCropUtils.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import round from '../round';
 import { buildShapeMask } from './svg/shape';
 import { createSvgElement } from './svg/utils';
@@ -49,27 +50,22 @@ export async function createCroppedImageSvg(cropperSettings, image) {
   rootElement.appendChild(mainGroup);
   return rootElement;
 }
-
 const fetchImageMetadata = src => {
   return new Promise(resolve => {
     const img = new Image();
-
     img.onload = function () {
       resolve({
         imageWidth: this.naturalWidth,
         imageHeight: this.naturalHeight
       });
     };
-
     img.src = src;
   });
 };
-
-const createDefsElement = _ref => {
-  let {
-    shape,
-    squareDimension
-  } = _ref;
+const createDefsElement = ({
+  shape,
+  squareDimension
+}) => {
   const defs = createSvgElement('defs');
   const shapeMask = buildShapeMask({
     shape,
@@ -82,19 +78,16 @@ const createDefsElement = _ref => {
   defs.appendChild(clipPath);
   return defs;
 };
-
 const convertTranslationUnits = (translationPixels, imageHeight) => {
   return imageHeight * translationPixels / PREVIEW_HEIGHT;
 };
-
-const createMainSvgGroup = _ref2 => {
-  let {
-    imageWidth,
-    imageHeight,
-    squareDimension,
-    image,
-    settings
-  } = _ref2;
+const createMainSvgGroup = ({
+  imageWidth,
+  imageHeight,
+  squareDimension,
+  image,
+  settings
+}) => {
   const mainGroup = createSvgElement('g', {
     'clip-path': `url(#${CLIP_PATH_ID})`
   });
@@ -113,15 +106,13 @@ const createMainSvgGroup = _ref2 => {
   mainGroup.appendChild(imageElement);
   return mainGroup;
 };
-
-export const setTransformAttribute = _ref3 => {
-  let {
-    imageElement,
-    imageWidth,
-    imageHeight,
-    squareDimension,
-    settings
-  } = _ref3;
+export const setTransformAttribute = ({
+  imageElement,
+  imageWidth,
+  imageHeight,
+  squareDimension,
+  settings
+}) => {
   const {
     rotation = 0,
     scaleRatio = 1.0,
@@ -135,15 +126,12 @@ export const setTransformAttribute = _ref3 => {
   const x = round(-horizontalCenter + convertedTranslateX + squareDimension / 2, 2);
   const y = round(-verticalCenter + convertedTranslateY + squareDimension / 2, 2);
   let value = `translate(${x}, ${y})`;
-
   if (rotation !== 0) {
     // Rotates image using its center as pivot
     value += ` rotate(${rotation}, ${horizontalCenter}, ${verticalCenter})`;
   }
-
   if (scaleRatio !== 1.0) {
     value += ` scale(${scaleRatio})`;
   }
-
   imageElement.setAttribute('transform', value);
 };

package/es/rce/plugins/shared/ImageCropper/index.js

@@ -15,4 +15,5 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 export { ImageCropperModal } from './Modal';

package/es/rce/plugins/shared/ImageCropper/propTypes.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import PropTypes from 'prop-types';
 export const ImageCropperSettingsPropTypes = PropTypes.shape({
   shape: PropTypes.string,

package/es/rce/plugins/shared/ImageCropper/reducers/imageCropper.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import { DEFAULT_CROPPER_SETTINGS } from '../constants';
 export const defaultState = DEFAULT_CROPPER_SETTINGS;
 export const actions = {
@@ -29,43 +30,43 @@ export const actions = {
 export const cropperSettingsReducer = (state, action) => {
   switch (action.type) {
     case actions.SET_SHAPE:
-      return { ...state,
+      return {
+        ...state,
         shape: action.payload
       };
-
     case actions.SET_ROTATION:
-      return { ...state,
+      return {
+        ...state,
         rotation: action.payload
       };
-
     case actions.SET_SCALE_RATIO:
-      return { ...state,
+      return {
+        ...state,
         scaleRatio: action.payload
       };
-
     case actions.SET_TRANSLATE_X:
-      return { ...state,
+      return {
+        ...state,
         translateX: action.payload
       };
-
     case actions.SET_TRANSLATE_Y:
-      return { ...state,
+      return {
+        ...state,
         translateY: action.payload
       };
-
     case actions.UPDATE_SETTINGS:
-      return { ...state,
+      return {
+        ...state,
         ...action.payload
       };
-
     case actions.RESET_SETTINGS:
-      return { ...state,
+      return {
+        ...state,
         rotation: defaultState.rotation,
         scaleRatio: defaultState.scaleRatio,
         translateX: defaultState.translateX,
         translateY: defaultState.translateY
       };
-
     default:
       throw Error('Unknown action for image cropper reducer');
   }

package/es/rce/plugins/shared/ImageCropper/shape.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 export const Shape = {
   Square: 'square',
   Circle: 'circle',