@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/shared/Filter.js

@@ -1,353 +0,0 @@
-/*
- * Copyright (C) 2019 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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, useState } from 'react';
-import { bool, element, func, oneOf, oneOfType, string } from 'prop-types';
-import formatMessage from '../../../format-message';
-import { Flex } from '@instructure/ui-flex';
-import { View } from '@instructure/ui-view';
-import { TextInput } from '@instructure/ui-text-input';
-import { SimpleSelect } from '@instructure/ui-simple-select';
-import { IconButton } from '@instructure/ui-buttons';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
-import { IconLinkLine, IconFolderLine, IconImageLine, IconDocumentLine, IconAttachMediaLine, IconSearchLine, IconXLine } from '@instructure/ui-icons';
-const DEFAULT_FILTER_SETTINGS = {
-  contentSubtype: 'all',
-  contentType: 'links',
-  sortValue: 'date_added',
-  searchString: ''
-};
-export function useFilterSettings(default_settings) {
-  const [filterSettings, setFilterSettings] = useState(default_settings || DEFAULT_FILTER_SETTINGS);
-
-  function updateFilterSettings(nextSettings) {
-    setFilterSettings({ ...filterSettings,
-      ...nextSettings
-    });
-  }
-
-  return [filterSettings, updateFilterSettings];
-}
-
-function fileLabelFromContext(contextType) {
-  switch (contextType) {
-    case 'user':
-      return formatMessage('User Files');
-
-    case 'course':
-      return formatMessage('Course Files');
-
-    case 'group':
-      return formatMessage('Group Files');
-
-    case 'files':
-    default:
-      return formatMessage('Files');
-  }
-}
-
-function renderTypeOptions(contentType, contentSubtype, userContextType) {
-  const options = [/*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    key: "links",
-    id: "links",
-    value: "links",
-    renderBeforeLabel: IconLinkLine
-  }, formatMessage('Links'))];
-
-  if (userContextType === 'course' && contentType !== 'links' && contentSubtype !== 'all') {
-    options.push( /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-      key: "course_files",
-      id: "course_files",
-      value: "course_files",
-      renderBeforeLabel: IconFolderLine
-    }, fileLabelFromContext('course')));
-  }
-
-  if (userContextType === 'group' && contentType !== 'links' && contentSubtype !== 'all') {
-    options.push( /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-      key: "group_files",
-      id: "group_files",
-      value: "group_files",
-      renderBeforeLabel: IconFolderLine
-    }, fileLabelFromContext('group')));
-  } // Icon Maker icons are only stored in course folders.
-
-
-  if (contentSubtype !== ICON_MAKER_ICONS) {
-    options.push( /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-      key: "user_files",
-      id: "user_files",
-      value: "user_files",
-      renderBeforeLabel: IconFolderLine
-    }, fileLabelFromContext(contentType === 'links' || contentSubtype === 'all' ? 'files' : 'user')));
-  }
-
-  return options;
-}
-
-function renderType(contentType, contentSubtype, mountNode, onChange, userContextType, containingContextType) {
-  // Check containingContextType so that we always show context links
-  if (containingContextType === 'course' || containingContextType === 'group') {
-    return /*#__PURE__*/React.createElement(SimpleSelect, {
-      "data-testid": "filter-content-type",
-      mountNode: mountNode,
-      renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Content Type')),
-      assistiveText: formatMessage('Use arrow keys to navigate options.'),
-      onChange: (e, selection) => {
-        const changed = {
-          contentType: selection.value
-        };
-
-        if (contentType === 'links') {
-          // when changing away from links, go to all user files
-          changed.contentSubtype = 'all';
-        }
-
-        onChange(changed);
-      },
-      value: contentType
-    }, renderTypeOptions(contentType, contentSubtype, userContextType));
-  } else {
-    return /*#__PURE__*/React.createElement(View, {
-      as: "div",
-      borderWidth: "small",
-      padding: "x-small small",
-      borderRadius: "medium",
-      width: "100%"
-    }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Content Type')), fileLabelFromContext('user', contentSubtype));
-  }
-}
-
-function shouldSearch(searchString) {
-  return searchString.length === 0 || searchString.length >= 3;
-}
-
-export default function Filter(props) {
-  const {
-    contentType,
-    contentSubtype,
-    mountNode,
-    onChange,
-    sortValue,
-    searchString,
-    userContextType,
-    isContentLoading,
-    containingContextType
-  } = props;
-  const [pendingSearchString, setPendingSearchString] = useState(searchString);
-  const [searchInputTimer, setSearchInputTimer] = useState(0); // only run on mounting to trigger change to correct contextType
-
-  useEffect(() => {
-    onChange({
-      contentType
-    });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  function doSearch(value) {
-    if (shouldSearch(value)) {
-      if (searchInputTimer) {
-        window.clearTimeout(searchInputTimer);
-        setSearchInputTimer(0);
-      }
-
-      onChange({
-        searchString: value
-      });
-    }
-  }
-
-  function handleChangeSearch(value) {
-    setPendingSearchString(value);
-
-    if (searchInputTimer) {
-      window.clearTimeout(searchInputTimer);
-    }
-
-    const tid = window.setTimeout(() => doSearch(value), 250);
-    setSearchInputTimer(tid);
-  }
-
-  function handleClear() {
-    handleChangeSearch('');
-  }
-
-  function renderClearButton() {
-    if (pendingSearchString) {
-      return /*#__PURE__*/React.createElement(IconButton, {
-        screenReaderLabel: formatMessage('Clear'),
-        onClick: handleClear,
-        withBorder: false,
-        withBackground: false,
-        size: "small"
-      }, /*#__PURE__*/React.createElement(IconXLine, null));
-    }
-
-    return undefined;
-  }
-
-  const searchMessage = formatMessage('Enter at least 3 characters to search');
-  const loadingMessage = formatMessage('Loading, please wait');
-  const msg = isContentLoading ? loadingMessage : searchMessage;
-  const isEdit = contentSubtype === 'edit';
-  return /*#__PURE__*/React.createElement(View, {
-    display: "block",
-    direction: "column"
-  }, !isEdit && renderType(contentType, contentSubtype, mountNode, onChange, userContextType, containingContextType), contentType !== 'links' && /*#__PURE__*/React.createElement(Flex, {
-    margin: "small none none none"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    shouldShrink: true,
-    margin: "none xx-small none none"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    "data-testid": "filter-content-subtype",
-    mountNode: mountNode,
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Content Subtype')),
-    assistiveText: formatMessage('Use arrow keys to navigate options.'),
-    onChange: (e, selection) => {
-      const changed = {
-        contentSubtype: selection.value
-      };
-
-      if (changed.contentSubtype === 'all') {
-        // when flipped to All, the context needs to be user
-        // so we can get media_objects, which are all returned in the user context
-        changed.contentType = 'user_files';
-      } else if (changed.contentSubtype === ICON_MAKER_ICONS) {
-        // Icon Maker icons only belong to Courses.
-        changed.contentType = 'course_files';
-      }
-
-      onChange(changed);
-    },
-    value: contentSubtype
-  }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: "images",
-    value: "images",
-    renderBeforeLabel: IconImageLine
-  }, formatMessage('Images')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: "documents",
-    value: "documents",
-    renderBeforeLabel: IconDocumentLine
-  }, formatMessage('Documents')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: "media",
-    value: "media",
-    renderBeforeLabel: IconAttachMediaLine
-  }, formatMessage('Media')), props.use_rce_icon_maker && /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: ICON_MAKER_ICONS,
-    value: ICON_MAKER_ICONS,
-    renderBeforeLabel: IconImageLine
-  }, formatMessage('Icon Maker Icons')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: "all",
-    value: "all"
-  }, formatMessage('All')))), contentSubtype !== 'all' && /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    shouldShrink: true,
-    margin: "none none none xx-small"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    "data-testid": "filter-sort-by",
-    mountNode: mountNode,
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Sort By')),
-    assistiveText: formatMessage('Use arrow keys to navigate options.'),
-    onChange: (e, selection) => {
-      onChange({
-        sortValue: selection.value
-      });
-    },
-    value: sortValue
-  }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: "date_added",
-    value: "date_added"
-  }, formatMessage('Date Added')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: "alphabetical",
-    value: "alphabetical"
-  }, formatMessage('Alphabetical'))))), /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "small none none none"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Search')),
-    renderBeforeInput: /*#__PURE__*/React.createElement(IconSearchLine, {
-      inline: false
-    }),
-    renderAfterInput: renderClearButton(),
-    messages: [{
-      type: 'hint',
-      text: msg
-    }],
-    placeholder: formatMessage('Search'),
-    value: pendingSearchString,
-    onChange: (e, value) => handleChangeSearch(value),
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        doSearch(pendingSearchString);
-      }
-    }
-  })));
-}
-Filter.propTypes = {
-  /**
-   * `contentSubtype` is the secondary filter setting, currently only used when
-   * `contentType` is set to "files"
-   */
-  contentSubtype: string.isRequired,
-
-  /**
-   * `contentType` is the primary filter setting (e.g. links, files)
-   */
-  contentType: oneOf(['links', 'user_files', 'course_files', 'group_files']).isRequired,
-
-  /**
-   * `mountNode` is where INSTUI popups should mount. This is necessary for them
-   * to work correctly when the RCE is in fullscreen
-   */
-  mountNode: oneOfType([element, func]),
-
-  /**
-   * `onChange` is called when any of the Filter settings are changed
-   */
-  onChange: func.isRequired,
-
-  /**
-   * `sortValue` defines how items in the CanvasContentTray are sorted
-   */
-  sortValue: string.isRequired,
-
-  /**
-   * `searchString` is used to search for matching file names. Must be >3 chars long
-   */
-  searchString: string.isRequired,
-
-  /**
-   * The user's context
-   */
-  userContextType: oneOf(['user', 'course', 'group']),
-
-  /**
-   * Is my content currently loading?
-   */
-  isContentLoading: bool,
-
-  /**
-   * The page context
-   */
-  containingContextType: oneOf(['user', 'course', 'group']),
-
-  /**
-   * Should include Icon Maker?
-   */
-  use_rce_icon_maker: bool
-};

package/lib/rce/plugins/shared/FixedContentTray.js

@@ -1,115 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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 { Tray } from '@instructure/ui-tray';
-import { View } from '@instructure/ui-view';
-import { getTrayHeight } from './trayUtils'; // Need these styles for drawing over <ColorInput /> popup.
-
-const topElementStyles = {
-  zIndex: 10000
-};
-
-function renderJoinedItem(bodyAs, renderBody, renderFooter) {
-  return /*#__PURE__*/React.createElement(Flex.Item, {
-    height: "0",
-    shouldGrow: true
-  }, /*#__PURE__*/React.createElement(Flex, {
-    as: bodyAs,
-    direction: "column",
-    margin: "0",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "div",
-    overflowX: "auto",
-    height: "0",
-    shouldGrow: true
-  }, renderBody()), /*#__PURE__*/React.createElement("footer", {
-    style: topElementStyles
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    borderWidth: "small none none none"
-  }, renderFooter()))));
-}
-
-export const FixedContentTray = _ref => {
-  let {
-    title,
-    isOpen,
-    onDismiss,
-    onUnmount,
-    mountNode,
-    renderHeader,
-    renderBody,
-    renderFooter,
-    bodyAs,
-    shouldJoinBodyAndFooter
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Tray, {
-    "data-mce-component": true,
-    label: title,
-    mountNode: mountNode,
-    onDismiss: onDismiss,
-    onExited: onUnmount,
-    open: isOpen,
-    placement: "end",
-    shouldCloseOnDocumentClick: true,
-    shouldContainFocus: true,
-    shouldReturnFocus: true,
-    size: "regular"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "column",
-    height: getTrayHeight()
-  }, /*#__PURE__*/React.createElement("header", {
-    style: topElementStyles
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    borderWidth: "none none small none"
-  }, renderHeader())), shouldJoinBodyAndFooter ? renderJoinedItem(bodyAs, renderBody, renderFooter) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
-    as: bodyAs,
-    overflowX: "auto",
-    height: "0",
-    shouldGrow: true
-  }, renderBody()), /*#__PURE__*/React.createElement("footer", {
-    style: topElementStyles
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    borderWidth: "none none small none"
-  }, renderFooter())))));
-};
-FixedContentTray.propTypes = {
-  renderHeader: PropTypes.func.isRequired,
-  renderBody: PropTypes.func.isRequired,
-  renderFooter: PropTypes.func.isRequired,
-  title: PropTypes.string,
-  isOpen: PropTypes.bool,
-  onDismiss: PropTypes.func,
-  onUnmount: PropTypes.func,
-  mountNode: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-  bodyAs: PropTypes.string,
-  shouldJoinBodyAndFooter: PropTypes.bool
-};
-FixedContentTray.defaultProps = {
-  title: null,
-  isOpen: false,
-  onDismiss: () => {},
-  onUnmount: () => {},
-  bodyAs: 'div',
-  shouldJoinBodyAndFooter: false
-};

package/lib/rce/plugins/shared/ImageCropper/DirectionRegion.js

@@ -1,67 +0,0 @@
-import _pt from "prop-types";
-
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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 { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import formatMessage from '../../../../format-message';
-export let Direction;
-
-(function (Direction) {
-  Direction[Direction["LEFT"] = 37] = "LEFT";
-  Direction[Direction["UP"] = 38] = "UP";
-  Direction[Direction["RIGHT"] = 39] = "RIGHT";
-  Direction[Direction["DOWN"] = 40] = "DOWN";
-  Direction[Direction["NONE"] = 0] = "NONE";
-})(Direction || (Direction = {}));
-
-const directionToWord = direction => {
-  switch (direction) {
-    case Direction.LEFT:
-      return formatMessage('Left');
-
-    case Direction.UP:
-      return formatMessage('Up');
-
-    case Direction.RIGHT:
-      return formatMessage('Right');
-
-    case Direction.DOWN:
-      return formatMessage('Down');
-
-    case Direction.NONE:
-      return null;
-  }
-};
-
-export const DirectionRegion = _ref => {
-  let {
-    direction
-  } = _ref;
-  const directionWord = directionToWord(direction);
-  const directionMessage = directionWord ? formatMessage('Moving image to crop {directionWord}', {
-    directionWord
-  }) : '';
-  return /*#__PURE__*/React.createElement(ScreenReaderContent, {
-    "aria-live": "assertive",
-    "aria-relevant": "all"
-  }, directionMessage);
-};
-DirectionRegion.propTypes = {
-  direction: _pt.oneOf([37, 38, 39, 40, 0]).isRequired
-};

package/lib/rce/plugins/shared/ImageCropper/Modal.js

@@ -1,153 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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, useReducer } from 'react';
-import PropTypes from 'prop-types';
-import { Modal } from '@instructure/ui-modal';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { Flex } from '@instructure/ui-flex';
-import { Heading } from '@instructure/ui-heading';
-import { Alert } from '@instructure/ui-alerts';
-import { Spinner } from '@instructure/ui-spinner';
-import formatMessage from '../../../../format-message';
-import { cropperSettingsReducer, actions, defaultState } from './reducers/imageCropper';
-import { Preview } from './Preview';
-import { Controls } from './controls';
-import { ImageCropperSettingsPropTypes } from './propTypes';
-import { DirectionRegion } from './DirectionRegion';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
-
-const renderBody = (image, settings, dispatch, message, loading) => {
-  if (loading) {
-    return /*#__PURE__*/React.createElement(Flex, {
-      justifyItems: "center",
-      margin: ""
-    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
-      margin: "small",
-      renderTitle: formatMessage('Loading...'),
-      size: "large"
-    })));
-  }
-
-  return /*#__PURE__*/React.createElement(Flex, {
-    direction: "column",
-    margin: "none"
-  }, message && /*#__PURE__*/React.createElement(Flex.Item, {
-    "data-testid": "alert-message"
-  }, /*#__PURE__*/React.createElement(Alert, {
-    variant: "info",
-    renderCloseButtonLabel: "Close",
-    margin: "small",
-    timeout: 10000
-  }, message)), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 0 small 0"
-  }, /*#__PURE__*/React.createElement(Controls, {
-    settings: settings,
-    dispatch: dispatch
-  })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Preview, {
-    image: image,
-    settings: settings,
-    dispatch: dispatch
-  })), /*#__PURE__*/React.createElement(DirectionRegion, {
-    direction: settings.direction
-  }));
-};
-
-const renderFooter = (settings, onClose) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: onClose,
-    margin: "0 x-small 0 0"
-  }, formatMessage('Cancel')), /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    type: "submit"
-  }, formatMessage('Save')));
-};
-
-export const ImageCropperModal = _ref => {
-  let {
-    open,
-    shape,
-    onClose,
-    onSubmit,
-    image,
-    message,
-    cropSettings,
-    loading
-  } = _ref;
-  const [settings, dispatch] = useReducer(cropperSettingsReducer, defaultState);
-  useEffect(() => {
-    shape !== settings.shape && dispatch({
-      type: actions.SET_SHAPE,
-      payload: shape
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shape]);
-  useEffect(() => {
-    cropSettings && dispatch({
-      type: actions.UPDATE_SETTINGS,
-      payload: cropSettings
-    });
-  }, [cropSettings]);
-  return /*#__PURE__*/React.createElement(Modal, {
-    "data-mce-component": true,
-    as: "form",
-    label: formatMessage('Crop Image'),
-    mountNode: instuiPopupMountNode,
-    size: "large",
-    open: open,
-    onDismiss: onClose,
-    onSubmit: e => {
-      e.preventDefault(); // Direction is only used while in cropper and
-      // should not be embedded in the icon's metadata
-
-      const {
-        direction,
-        ...cropperSettings
-      } = settings;
-      onSubmit(cropperSettings);
-      onClose();
-    },
-    shouldCloseOnDocumentClick: false
-  }, /*#__PURE__*/React.createElement(Modal.Header, {
-    id: "imageCropperHeader"
-  }, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "end",
-    offset: "small",
-    onClick: onClose,
-    screenReaderLabel: formatMessage('Close')
-  }), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Crop Image'))), /*#__PURE__*/React.createElement(Modal.Body, null, renderBody(image, settings, dispatch, message, loading)), !loading && /*#__PURE__*/React.createElement(Modal.Footer, {
-    id: "imageCropperFooter"
-  }, renderFooter(settings, onClose)));
-};
-ImageCropperModal.propTypes = {
-  image: PropTypes.string.isRequired,
-  cropSettings: ImageCropperSettingsPropTypes,
-  message: PropTypes.string,
-  open: PropTypes.bool,
-  shape: PropTypes.string,
-  onClose: PropTypes.func,
-  onSubmit: PropTypes.func,
-  loading: PropTypes.bool
-};
-ImageCropperModal.defaultProps = {
-  shape: 'square',
-  open: false,
-  cropSettings: null,
-  message: null,
-  loading: false,
-  onClose: () => {},
-  onSubmit: () => {}
-};