@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.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 } from 'react';
 import PropTypes from 'prop-types';
 import { View } from '@instructure/ui-view';
@@ -27,12 +28,11 @@ import { isAnUnsupportedGifPngImage, MAX_GIF_PNG_SIZE_BYTES } from './utils';
 import { actions as svgActions } from '../../../reducers/svgSettings';
 import formatMessage from '../../../../../../format-message';
 import { PREVIEW_WIDTH, PREVIEW_HEIGHT } from '../../../../shared/ImageCropper/constants';
-
 const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
   let image = dataUrl;
-
   if (isAnUnsupportedGifPngImage(dataBlob)) {
-    dispatch({ ...actions.CLEAR_IMAGE
+    dispatch({
+      ...actions.CLEAR_IMAGE
     });
     return onChange({
       type: svgActions.SET_ERROR,
@@ -41,18 +41,18 @@ const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
       })
     });
   }
-
-  dispatch({ ...actions.SET_IMAGE,
+  dispatch({
+    ...actions.SET_IMAGE,
     payload: ''
   });
-  dispatch({ ...actions.SET_CROPPER_OPEN,
+  dispatch({
+    ...actions.SET_CROPPER_OPEN,
     payload: true
   });
   onChange({
     type: svgActions.SET_EMBED_IMAGE,
     payload: ''
   });
-
   if (canCompressImage() && shouldCompressImage(dataBlob)) {
     try {
       // If compression fails, use the original one
@@ -63,16 +63,15 @@ const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
         previewHeight: PREVIEW_HEIGHT
       });
     } catch (e) {
-      // eslint-disable-next-line no-console
       console.error(e);
     }
-
-    dispatch({ ...actions.SET_COMPRESSION_STATUS,
+    dispatch({
+      ...actions.SET_COMPRESSION_STATUS,
       payload: true
     });
   }
-
-  dispatch({ ...actions.SET_IMAGE,
+  dispatch({
+    ...actions.SET_IMAGE,
     payload: image
   });
   onChange({
@@ -80,15 +79,13 @@ const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
     payload: image
   });
 };
-
-const Course = _ref => {
-  let {
-    dispatch,
-    onChange,
-    onLoading,
-    onLoaded,
-    canvasOrigin
-  } = _ref;
+const Course = ({
+  dispatch,
+  onChange,
+  onLoading,
+  onLoaded,
+  canvasOrigin
+}) => {
   const storeProps = useStoreProps();
   const {
     files,
@@ -102,26 +99,30 @@ const Course = _ref => {
     dataLoading,
     dataBlob
   } = useDataUrl();
-  const category = 'uncategorized'; // Handle image selection
+  const category = 'uncategorized';
 
+  // Handle image selection
   useEffect(() => {
     // Don't clear the current image on re-render
     if (!dataUrl || !dataBlob) return;
-    dispatchImage(dispatch, onChange, dataUrl, dataBlob); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataUrl, dataBlob]); // Handle loading states
+    dispatchImage(dispatch, onChange, dataUrl, dataBlob);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataUrl, dataBlob]);
 
+  // Handle loading states
   useEffect(() => {
     dispatch(dataLoading ? actions.START_LOADING : actions.STOP_LOADING);
-
     if (dataUrl) {
-      dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+      dispatch({
+        ...actions.SET_IMAGE_COLLECTION_OPEN,
         payload: false
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataLoading]);
   useEffect(() => {
-    if (isLoading) onLoading && onLoading();else onLoaded && onLoaded(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (isLoading) onLoading && onLoading();else onLoaded && onLoaded();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
   return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(ImageList, {
     fetchInitialImages: () => storeProps.fetchInitialImages({
@@ -145,14 +146,14 @@ const Course = _ref => {
     },
     onImageEmbed: file => {
       setUrl(file.download_url);
-      dispatch({ ...actions.SET_IMAGE_NAME,
+      dispatch({
+        ...actions.SET_IMAGE_NAME,
         payload: file.filename
       });
     },
     canvasOrigin: canvasOrigin
   }));
 };
-
 Course.propTypes = {
   dispatch: PropTypes.func,
   onChange: PropTypes.func,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.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, { useState, useCallback, useEffect } from 'react';
 import formatMessage from '../../../../../../format-message';
 import { actions, modes } from '../../../reducers/imageSection';
@@ -35,15 +36,12 @@ import { createCroppedImageSvg } from '../../../../shared/ImageCropper/imageCrop
 import { convertFileToBase64 } from '../../../../shared/fileUtils';
 import { ImageSettingsPropTypes } from './propTypes';
 import _ from 'lodash';
-
 const getCompressionMessage = () => formatMessage('Your image has been compressed for Icon Maker. Images less than {size} KB will not be compressed.', {
   size: MAX_IMAGE_SIZE_BYTES / 1024
 });
-
-function renderImagePreview(_ref, embedImage) {
-  let {
-    loading
-  } = _ref;
+function renderImagePreview({
+  loading
+}, embedImage) {
   return /*#__PURE__*/React.createElement(PreviewIcon, {
     variant: "large",
     testId: "selected-image-preview",
@@ -52,22 +50,18 @@ function renderImagePreview(_ref, embedImage) {
     checkered: true
   });
 }
-
-function renderImageName(_ref2) {
-  let {
-    imageName
-  } = _ref2;
+function renderImageName({
+  imageName
+}) {
   return /*#__PURE__*/React.createElement(View, {
     maxWidth: "200px",
     as: "div"
   }, /*#__PURE__*/React.createElement(TruncateText, null, /*#__PURE__*/React.createElement(Text, null, imageName || formatMessage('None Selected'))));
 }
-
-function renderImageActionButtons(_ref3, dispatch, trayDispatch, setFocus, ref) {
-  let {
-    mode,
-    collectionOpen
-  } = _ref3;
+function renderImageActionButtons({
+  mode,
+  collectionOpen
+}, dispatch, trayDispatch, setFocus, ref) {
   const showCropButton = [modes.uploadImages.type, modes.courseImages.type].includes(mode) && !collectionOpen;
   return /*#__PURE__*/React.createElement(React.Fragment, null, showCropButton && /*#__PURE__*/React.createElement(IconButton, {
     margin: "0 small 0 0",
@@ -91,30 +85,26 @@ function renderImageActionButtons(_ref3, dispatch, trayDispatch, setFocus, ref)
     "data-testid": "clear-image"
   }, /*#__PURE__*/React.createElement(IconTrashLine, null)));
 }
-
-export const ImageOptions = _ref4 => {
-  let {
-    state,
-    settings,
-    dispatch,
-    mountNode,
-    trayDispatch
-  } = _ref4;
+export const ImageOptions = ({
+  state,
+  settings,
+  dispatch,
+  mountNode,
+  trayDispatch
+}) => {
   const [isImageActionFocused, setIsImageActionFocused] = useState(false);
   const imageActionRef = useCallback(el => {
     if (el && isImageActionFocused) el.focus();
-  }, [isImageActionFocused]); // After submitting cropper modal a new embedded image should be generated
+  }, [isImageActionFocused]);
 
+  // After submitting cropper modal a new embedded image should be generated
   useEffect(() => {
-    var _settings$imageSettin;
-
-    if (state.cropperSettings && settings.imageSettings && !_.isEqual(state.cropperSettings, (_settings$imageSettin = settings.imageSettings) === null || _settings$imageSettin === void 0 ? void 0 : _settings$imageSettin.cropperSettings)) {
+    if (state.cropperSettings && settings.imageSettings && !_.isEqual(state.cropperSettings, settings.imageSettings?.cropperSettings)) {
       if (state.cropperSettings.shape !== settings.shape) {
         trayDispatch({
           shape: state.cropperSettings.shape
         });
       }
-
       createCroppedImageSvg(state.cropperSettings, settings.imageSettings.image).then(generatedSvg => convertFileToBase64(new Blob([generatedSvg.outerHTML], {
         type: 'image/svg+xml'
       }))).then(base64Image => {
@@ -122,10 +112,9 @@ export const ImageOptions = _ref4 => {
           type: trayActions.SET_EMBED_IMAGE,
           payload: base64Image
         });
-      }) // eslint-disable-next-line no-console
-      .catch(error => console.error(error));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+      }).catch(error => console.error(error));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.cropperSettings]);
   const {
     image

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageSection.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, { useReducer, useEffect, useRef, Suspense } from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -33,19 +34,15 @@ import { transformForShape } from '../../../svg/image';
 import SingleColorSVG from './SingleColor/svg';
 import { createCroppedImageSvg } from '../../../../shared/ImageCropper/imageCropUtils';
 const IMAGE_SECTION_ID = 'icon-maker-tray-image-section';
-
 const getImageSection = () => document.querySelector(`#${IMAGE_SECTION_ID}`);
-
 const scrollToBottom = () => {
   const section = getImageSection();
-
-  if (section !== null && section !== void 0 && section.scrollIntoView) {
+  if (section?.scrollIntoView) {
     section.scrollIntoView({
       behavior: 'smooth'
     });
   }
 };
-
 const filterSectionStateMetadata = state => {
   const {
     mode,
@@ -64,23 +61,22 @@ const filterSectionStateMetadata = state => {
     cropperSettings
   };
 };
-
-export const ImageSection = _ref => {
-  let {
-    settings,
-    onChange,
-    editor,
-    canvasOrigin
-  } = _ref;
+export const ImageSection = ({
+  settings,
+  onChange,
+  editor,
+  canvasOrigin
+}) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const Upload = /*#__PURE__*/React.lazy(() => import('./Upload'));
   const SingleColor = /*#__PURE__*/React.lazy(() => import('./SingleColor'));
-  const MultiColor = /*#__PURE__*/React.lazy(() => import('./MultiColor')); // This object maps image selection modes to the
+  const MultiColor = /*#__PURE__*/React.lazy(() => import('./MultiColor'));
+
+  // This object maps image selection modes to the
   // component that handles that selection.
   //
   // The selected component is dynamically rendered
   // in this component's returned JSX
-
   const allowedModes = {
     [modes.courseImages.type]: Course,
     [modes.uploadImages.type]: Upload,
@@ -90,9 +86,10 @@ export const ImageSection = _ref => {
   const metadata = filterSectionStateMetadata(state);
   const isMetadataLoaded = useRef(false);
   useEffect(() => {
-    const transform = transformForShape(settings.shape, settings.size); // Set Q1 crop defaults
-    // TODO: Set these properties based on cropper
+    const transform = transformForShape(settings.shape, settings.size);
 
+    // Set Q1 crop defaults
+    // TODO: Set these properties based on cropper
     onChange({
       type: svgActions.SET_X,
       payload: transform.x
@@ -120,16 +117,18 @@ export const ImageSection = _ref => {
   }, [onChange, settings.shape, settings.size]);
   useEffect(() => {
     if (state.icon && state.icon in SingleColorSVG) {
-      dispatch({ ...actions.START_LOADING
-      }); // eslint-disable-next-line promise/catch-or-return
-
+      dispatch({
+        ...actions.START_LOADING
+      });
       convertFileToBase64(new Blob([SingleColorSVG[state.icon].source(state.iconFillColor)], {
         type: 'image/svg+xml'
       })).then(base64Image => {
-        dispatch({ ...actions.SET_IMAGE,
+        dispatch({
+          ...actions.SET_IMAGE,
           payload: base64Image
         });
-        dispatch({ ...actions.STOP_LOADING
+        dispatch({
+          ...actions.STOP_LOADING
         });
         onChange({
           type: svgActions.SET_EMBED_IMAGE,
@@ -137,11 +136,13 @@ export const ImageSection = _ref => {
         });
       });
     }
-  }, [onChange, state.icon, state.iconFillColor]); // After a new shape is selected in shape section a new embedded image should be generated
+  }, [onChange, state.icon, state.iconFillColor]);
 
+  // After a new shape is selected in shape section a new embedded image should be generated
   useEffect(() => {
     if (state.cropperSettings && settings.shape !== state.cropperSettings.shape) {
-      const newCropperSettings = { ...state.cropperSettings,
+      const newCropperSettings = {
+        ...state.cropperSettings,
         shape: settings.shape
       };
       dispatch({
@@ -155,10 +156,9 @@ export const ImageSection = _ref => {
           type: svgActions.SET_EMBED_IMAGE,
           payload: base64Image
         });
-      }) // eslint-disable-next-line no-console
-      .catch(error => console.error(error));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+      }).catch(error => console.error(error));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.shape]);
   useEffect(() => {
     if (settings.imageSettings && !isMetadataLoaded.current && !_.isEqual(settings.imageSettings, metadata)) {
@@ -167,8 +167,8 @@ export const ImageSection = _ref => {
         type: actions.UPDATE_SETTINGS.type,
         payload: settings.imageSettings
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.imageSettings]);
   useEffect(() => {
     if (!_.isEqual(metadata, settings.imageSettings)) {
@@ -176,8 +176,8 @@ export const ImageSection = _ref => {
         type: svgActions.SET_IMAGE_SETTINGS,
         payload: metadata
       });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, Object.values(metadata));
   const modeIsAllowed = !!allowedModes[state.mode];
   const ImageSelector = allowedModes[state.mode];

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ModeSelect.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, { forwardRef } from 'react';
 import formatMessage from '../../../../../../format-message';
 import { modes, actions } from '../../../reducers/imageSection';
@@ -23,14 +24,12 @@ import { Button } from '@instructure/ui-buttons';
 import { IconArrowOpenDownLine } from '@instructure/ui-icons';
 import { View } from '@instructure/ui-view';
 import { Menu } from '@instructure/ui-menu';
-const ModeSelect = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    dispatch,
-    mountNode,
-    onFocus,
-    onBlur
-  } = _ref;
-
+const ModeSelect = /*#__PURE__*/forwardRef(({
+  dispatch,
+  mountNode,
+  onFocus,
+  onBlur
+}, ref) => {
   const menuFor = mode => /*#__PURE__*/React.createElement(Menu.Item, {
     key: mode.type,
     value: mode.type,
@@ -39,18 +38,19 @@ const ModeSelect = /*#__PURE__*/forwardRef((_ref, ref) => {
       dispatch({
         type: mode.type
       });
-      dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+      dispatch({
+        ...actions.SET_IMAGE_COLLECTION_OPEN,
         payload: true
       });
     }
   }, mode.label);
-
   return /*#__PURE__*/React.createElement(Menu, {
     mountNode: mountNode,
     placement: "top",
     ref: ref,
     onFocus: onFocus,
-    onBlur: onBlur // maps to data-position-content
+    onBlur: onBlur
+    // maps to data-position-content
     ,
     id: ICON_MAKER_ADD_IMAGE_MENU_ID,
     trigger: /*#__PURE__*/React.createElement(Button, {

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/MultiColor/index.js

@@ -15,36 +15,39 @@
  * 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 SVGList, { TYPE } from '../SVGList';
 import { actions } from '../../../../reducers/imageSection';
 import { convertFileToBase64 } from '../../../../../shared/fileUtils';
 import { actions as svgActions } from '../../../../reducers/svgSettings';
-
-const MultiColor = _ref => {
-  let {
-    dispatch,
-    onChange,
-    onLoaded
-  } = _ref;
-
+const MultiColor = ({
+  dispatch,
+  onChange,
+  onLoaded
+}) => {
   const onSelect = (id, svg) => {
-    dispatch({ ...actions.START_LOADING
+    dispatch({
+      ...actions.START_LOADING
     });
-    dispatch({ ...actions.SET_IMAGE_NAME,
+    dispatch({
+      ...actions.SET_IMAGE_NAME,
       payload: svg.label
     });
     convertFileToBase64(new Blob([svg.source()], {
       type: 'image/svg+xml'
     })).then(base64Image => {
-      dispatch({ ...actions.SET_IMAGE,
+      dispatch({
+        ...actions.SET_IMAGE,
         payload: base64Image
       });
-      dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+      dispatch({
+        ...actions.SET_IMAGE_COLLECTION_OPEN,
         payload: false
       });
-      dispatch({ ...actions.STOP_LOADING
+      dispatch({
+        ...actions.STOP_LOADING
       });
       onChange({
         type: svgActions.SET_EMBED_IMAGE,
@@ -52,14 +55,12 @@ const MultiColor = _ref => {
       });
     });
   };
-
   return /*#__PURE__*/React.createElement(SVGList, {
     type: TYPE.Multicolor,
     onSelect: onSelect,
     onMount: onLoaded
   });
 };
-
 MultiColor.propTypes = {
   dispatch: PropTypes.func,
   onChange: PropTypes.func,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/MultiColor/svg.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 formatMessage from '../../../../../../../format-message';
 export default {
   art: {

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SVGList.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 } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@instructure/ui-link';
@@ -30,18 +31,18 @@ export const TYPE = {
 export function svgSourceFor(type) {
   return type === TYPE.Multicolor ? MultiColorSVG : SingleColorSVG;
 }
+const SVGList = ({
+  type,
+  onSelect,
+  fillColor,
+  onMount
+}) => {
+  const svgSourceList = svgSourceFor(type);
 
-const SVGList = _ref => {
-  let {
-    type,
-    onSelect,
-    fillColor,
-    onMount
-  } = _ref;
-  const svgSourceList = svgSourceFor(type); // Only execute this once
-
+  // Only execute this once
   useEffect(() => {
-    if (onMount) onMount(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (onMount) onMount();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "start",
@@ -72,7 +73,6 @@ const SVGList = _ref => {
     fillColor: fillColor
   }))))));
 };
-
 SVGList.propTypes = {
   fillColor: PropTypes.string,
   type: PropTypes.oneOf(Object.values(TYPE)).isRequired,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SVGThumbnail.js

@@ -15,30 +15,26 @@
  * 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 { SVGIcon } from '@instructure/ui-svg-images';
-
-const SVGThumbnail = _ref => {
-  var _source$name, _source$name2;
-
-  let {
-    name,
-    source,
-    size,
-    fillColor
-  } = _ref;
+const SVGThumbnail = ({
+  name,
+  source,
+  size,
+  fillColor
+}) => {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: size
     }
   }, /*#__PURE__*/React.createElement(SVGIcon, {
-    src: (_source$name = source[name]) === null || _source$name === void 0 ? void 0 : _source$name.source(fillColor),
-    title: (_source$name2 = source[name]) === null || _source$name2 === void 0 ? void 0 : _source$name2.label,
+    src: source[name]?.source(fillColor),
+    title: source[name]?.label,
     "data-testid": `icon-${name}`
   }));
 };
-
 SVGThumbnail.propTypes = {
   size: PropTypes.string,
   fillColor: PropTypes.string,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SingleColor/index.js

@@ -15,33 +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 React from 'react';
 import PropTypes from 'prop-types';
 import SVGList, { TYPE } from '../SVGList';
 import { actions } from '../../../../reducers/imageSection';
-
-const SingleColor = _ref => {
-  let {
-    data,
-    dispatch,
-    onLoaded
-  } = _ref;
+const SingleColor = ({
+  data,
+  dispatch,
+  onLoaded
+}) => {
   const {
     iconFillColor
   } = data;
-
   const onSelect = (id, svg) => {
-    dispatch({ ...actions.SET_IMAGE_NAME,
+    dispatch({
+      ...actions.SET_IMAGE_NAME,
       payload: svg.label
     });
-    dispatch({ ...actions.SET_ICON,
+    dispatch({
+      ...actions.SET_ICON,
       payload: id
     });
-    dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+    dispatch({
+      ...actions.SET_IMAGE_COLLECTION_OPEN,
       payload: false
     });
   };
-
   return /*#__PURE__*/React.createElement(SVGList, {
     type: TYPE.Singlecolor,
     onSelect: onSelect,
@@ -49,7 +49,6 @@ const SingleColor = _ref => {
     onMount: onLoaded
   });
 };
-
 SingleColor.propTypes = {
   dispatch: PropTypes.func,
   data: PropTypes.shape({