@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/shared/Upload/UploadFile.js

@@ -1,171 +0,0 @@
-import _pt from "prop-types";
-// @ts-nocheck
-
-/*
- * 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 ReactDOM from 'react-dom';
-import { px } from '@instructure/ui-utils';
-import indicatorRegion from '../../../indicatorRegion';
-import { isAudioOrVideo, isImage } from '../fileTypeUtils';
-import indicate from '../../../../common/indicate';
-import { StoreProvider } from '../StoreContext';
-import Bridge from '../../../../bridge';
-import UploadFileModal from './UploadFileModal';
-import RCEWrapper from '../../../RCEWrapper';
-export const UploadFilePanelIds = ['COMPUTER', 'URL'];
-
-/**
- * Handles uploading data based on what type of data is submitted.
- */
-export const handleSubmit = function (editor, accept, selectedPanel, uploadData, storeProps, source) {
-  let afterInsert = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : () => undefined;
-  Bridge.focusEditor(RCEWrapper.getByEditor(editor)); // necessary since it blurred when the modal opened
-
-  const {
-    altText,
-    isDecorativeImage,
-    displayAs
-  } = (uploadData === null || uploadData === void 0 ? void 0 : uploadData.imageOptions) || {};
-
-  switch (selectedPanel) {
-    case 'COMPUTER':
-      {
-        var _uploadData$usageRigh;
-
-        const {
-          theFile
-        } = uploadData;
-        const fileMetaData = {
-          parentFolderId: 'media',
-          name: theFile.name,
-          size: theFile.size,
-          contentType: theFile.type,
-          domObject: theFile,
-          altText,
-          isDecorativeImage,
-          displayAs,
-          usageRights: (uploadData === null || uploadData === void 0 ? void 0 : (_uploadData$usageRigh = uploadData.usageRights) === null || _uploadData$usageRigh === void 0 ? void 0 : _uploadData$usageRigh.usageRight) === 'choose' ? undefined : uploadData === null || uploadData === void 0 ? void 0 : uploadData.usageRights
-        };
-        let tabContext = 'documents';
-
-        if (isImage(theFile.type)) {
-          tabContext = 'images';
-        } else if (isAudioOrVideo(theFile.type)) {
-          tabContext = 'media';
-        }
-
-        storeProps.startMediaUpload(tabContext, fileMetaData);
-        break;
-      }
-
-    case 'URL':
-      {
-        const {
-          fileUrl
-        } = uploadData;
-        let editorHtml;
-
-        if (displayAs !== 'link' && /image/.test(accept)) {
-          editorHtml = editor.dom.createHTML('img', {
-            src: fileUrl,
-            alt: altText,
-            ...(isDecorativeImage ? {
-              role: 'presentation'
-            } : null)
-          });
-        } else {
-          editorHtml = editor.dom.createHTML('a', {
-            href: fileUrl
-          }, altText || fileUrl);
-        }
-
-        editor.insertContent(editorHtml);
-        break;
-      }
-
-    default:
-      throw new Error('Selected Panel is invalid');
-    // Should never get here
-  }
-
-  const element = editor.selection.getEnd();
-  element.addEventListener('load', () => indicate(indicatorRegion(editor, element)));
-  afterInsert();
-};
-export function UploadFile(_ref) {
-  let {
-    accept,
-    editor,
-    label,
-    panels,
-    onDismiss,
-    requireA11yAttributes = true,
-    trayProps,
-    canvasOrigin,
-    onSubmit = handleSubmit,
-    preselectedFile = undefined
-  } = _ref;
-  const [modalBodyWidth, setModalBodyWidth] = useState(undefined);
-  const [modalBodyHeight, setModalBodyHeight] = useState(undefined);
-  const [theFile] = useState(preselectedFile);
-  const bodyRef = React.useRef();
-  trayProps = trayProps || Bridge.trayProps.get(editor); // the panels get rendered inside tab panels. it's difficult for them to
-  // figure out how much space they have to work with, and I'd like the previews
-  // not to trigger scrollbars in the modal's body. Get the Modal.Body's size
-  // and to the ComputerPanel how much space it has so it can render the file preview
-
-  useEffect(() => {
-    if (bodyRef.current) {
-      // eslint-disable-next-line react/no-find-dom-node
-      const thebody = ReactDOM.findDOMNode(bodyRef.current);
-      const sz = thebody === null || thebody === void 0 ? void 0 : thebody.getBoundingClientRect();
-      sz.height -= px('3rem'); // leave room for the tabs
-
-      setModalBodyWidth(sz.width);
-      setModalBodyHeight(sz.height);
-    }
-  }, [modalBodyHeight, modalBodyWidth]);
-  return /*#__PURE__*/React.createElement(StoreProvider, Object.assign({}, trayProps, {
-    canvasOrigin: canvasOrigin
-  }), contentProps => /*#__PURE__*/React.createElement(UploadFileModal, {
-    ref: bodyRef // @ts-ignore
-    ,
-    preselectedFile: theFile,
-    editor: editor,
-    trayProps: trayProps,
-    contentProps: contentProps,
-    canvasOrigin: canvasOrigin,
-    onSubmit: onSubmit,
-    onDismiss: onDismiss,
-    panels: panels,
-    label: label,
-    accept: accept,
-    modalBodyWidth: modalBodyWidth,
-    modalBodyHeight: modalBodyHeight,
-    requireA11yAttributes: requireA11yAttributes
-  }));
-}
-UploadFile.propTypes = {
-  accept: _pt.oneOfType([_pt.arrayOf(_pt.string), _pt.string]),
-  label: _pt.string.isRequired,
-  panels: _pt.array,
-  requireA11yAttributes: _pt.bool,
-  trayProps: _pt.object,
-  canvasOrigin: _pt.string
-};

package/lib/rce/plugins/shared/Upload/UploadFileModal.js

@@ -1,273 +0,0 @@
-/*
- * Copyright (C) 2020 - 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, { Suspense, useState } from 'react';
-import { arrayOf, bool, func, number, object, oneOf, oneOfType, string } from 'prop-types';
-import { Modal } from '@instructure/ui-modal';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { Heading } from '@instructure/ui-heading';
-import { Spinner } from '@instructure/ui-spinner';
-import { Tabs } from '@instructure/ui-tabs';
-import { ToggleDetails } from '@instructure/ui-toggle-details';
-import formatMessage from '../../../../format-message';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
-import RceApiSource from '../../../../rcs/api';
-import ImageOptionsForm from '../ImageOptionsForm';
-import UsageRightsSelectBox from './UsageRightsSelectBox';
-import { View } from '@instructure/ui-view';
-const ComputerPanel = /*#__PURE__*/React.lazy(() => import('./ComputerPanel'));
-const UrlPanel = /*#__PURE__*/React.lazy(() => import('./UrlPanel'));
-
-function shouldBeDisabled(_ref, selectedPanel, usageRightNotSet) {
-  let {
-    fileUrl,
-    theFile,
-    error
-  } = _ref;
-
-  if (error || usageRightNotSet && selectedPanel === 'COMPUTER') {
-    return true;
-  }
-
-  switch (selectedPanel) {
-    case 'COMPUTER':
-      return !theFile || theFile.error;
-
-    case 'URL':
-      return !fileUrl;
-
-    default:
-      return false;
-    // When in doubt, don't disable (but we shouldn't get here either)
-  }
-}
-
-const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  var _contentProps$session;
-
-  let {
-    preselectedFile,
-    editor,
-    contentProps,
-    trayProps,
-    canvasOrigin,
-    onSubmit,
-    onDismiss,
-    panels,
-    label,
-    accept,
-    modalBodyWidth,
-    modalBodyHeight,
-    requireA11yAttributes = true
-  } = _ref2;
-  const [theFile, setFile] = useState(preselectedFile);
-  const [error, setError] = useState(null);
-  const [fileUrl, setFileUrl] = useState('');
-  const [selectedPanel, setSelectedPanel] = useState(panels[0]);
-  const [usageRightsState, setUsageRightsState] = React.useState({
-    usageRight: 'choose',
-    ccLicense: '',
-    copyrightHolder: ''
-  }); // Image options props
-
-  const [altText, setAltText] = useState('');
-  const [isDecorativeImage, setIsDecorativeImage] = useState(false);
-  const [displayAs, setDisplayAs] = useState('embed'); // even though usage rights might be required by the course, canvas has no place
-  // on the user to store it. Only Group and Course.
-
-  const requiresUsageRights = (contentProps === null || contentProps === void 0 ? void 0 : (_contentProps$session = contentProps.session) === null || _contentProps$session === void 0 ? void 0 : _contentProps$session.usageRightsRequired) && /(?:course|group)/.test(trayProps.contextType);
-
-  function handleAltTextChange(event) {
-    setAltText(event.target.value);
-  }
-
-  function handleIsDecorativeChange(event) {
-    setIsDecorativeImage(event.target.checked);
-  }
-
-  function handleDisplayAsChange(event) {
-    setDisplayAs(event.target.value);
-  }
-
-  const submitDisabled = shouldBeDisabled({
-    fileUrl,
-    theFile,
-    error
-  }, selectedPanel, requiresUsageRights && usageRightsState.usageRight === 'choose'); // Load the necessary session values, if not already loaded
-
-  const loadSession = contentProps.loadSession;
-  React.useEffect(() => {
-    loadSession();
-  }, [loadSession]);
-  const source = trayProps.source || new RceApiSource({
-    jwt: trayProps.jwt,
-    refreshToken: trayProps.refreshToken,
-    host: trayProps.host,
-    canvasOrigin
-  });
-  return /*#__PURE__*/React.createElement(Modal, {
-    "data-mce-component": true,
-    as: "form",
-    label: label,
-    mountNode: instuiPopupMountNode,
-    size: "large",
-    overflow: "fit",
-    onDismiss: onDismiss,
-    onSubmit: e => {
-      e.preventDefault();
-
-      if (submitDisabled) {
-        return false;
-      }
-
-      onSubmit(editor, accept, selectedPanel, {
-        fileUrl,
-        theFile,
-        imageOptions: {
-          altText,
-          isDecorativeImage,
-          displayAs
-        },
-        usageRights: usageRightsState
-      }, contentProps, source, onDismiss);
-    },
-    open: true,
-    shouldCloseOnDocumentClick: false,
-    liveRegion: trayProps.liveRegion
-  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
-    onClick: onDismiss,
-    offset: "small",
-    placement: "end",
-    screenReaderLabel: formatMessage('Close')
-  }), /*#__PURE__*/React.createElement(Heading, null, label)), /*#__PURE__*/React.createElement(Modal.Body, {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(Tabs, {
-    onRequestTabChange: (event, _ref3) => {
-      let {
-        index
-      } = _ref3;
-      return setSelectedPanel(panels[index]);
-    }
-  }, panels.map(panel => {
-    switch (panel) {
-      case 'COMPUTER':
-        return /*#__PURE__*/React.createElement(Tabs.Panel, {
-          key: panel,
-          renderTitle: function () {
-            return formatMessage('Computer');
-          },
-          isSelected: selectedPanel === 'COMPUTER'
-        }, /*#__PURE__*/React.createElement(Suspense, {
-          fallback: /*#__PURE__*/React.createElement(Spinner, {
-            renderTitle: formatMessage('Loading'),
-            size: "large"
-          })
-        }, /*#__PURE__*/React.createElement(ComputerPanel, {
-          editor: editor,
-          theFile: theFile,
-          setFile: setFile,
-          setError: setError,
-          label: label,
-          accept: accept,
-          bounds: {
-            width: modalBodyWidth,
-            height: modalBodyHeight
-          }
-        })));
-
-      case 'URL':
-        return /*#__PURE__*/React.createElement(Tabs.Panel, {
-          key: panel,
-          renderTitle: function () {
-            return formatMessage('URL');
-          },
-          isSelected: selectedPanel === 'URL'
-        }, /*#__PURE__*/React.createElement(Suspense, {
-          fallback: /*#__PURE__*/React.createElement(Spinner, {
-            renderTitle: formatMessage('Loading'),
-            size: "large"
-          })
-        }, /*#__PURE__*/React.createElement(UrlPanel, {
-          fileUrl: fileUrl,
-          setFileUrl: setFileUrl
-        })));
-    }
-
-    return null;
-  })), // We shouldn't show the accordions until the session data is loaded.
-  Object.keys(contentProps.session || {}).length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, selectedPanel === 'COMPUTER' && requiresUsageRights && /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    role: "group",
-    borderColor: "primary",
-    borderWidth: "0 0 small 0",
-    padding: "medium"
-  }, /*#__PURE__*/React.createElement(ToggleDetails, {
-    defaultExpanded: true,
-    summary: /*#__PURE__*/React.createElement(Heading, {
-      level: "h3"
-    }, formatMessage('Usage Rights (required)'))
-  }, /*#__PURE__*/React.createElement(UsageRightsSelectBox, {
-    usageRightsState: usageRightsState,
-    setUsageRightsState: setUsageRightsState,
-    contextType: trayProps.contextType,
-    contextId: trayProps.contextId,
-    showMessage: false
-  }))), /image/.test(accept) && requireA11yAttributes && /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    role: "group",
-    borderColor: "primary",
-    borderWidth: "0 0 small 0",
-    padding: "medium"
-  }, /*#__PURE__*/React.createElement(ToggleDetails, {
-    defaultExpanded: !requiresUsageRights,
-    summary: /*#__PURE__*/React.createElement(Heading, {
-      level: "h3"
-    }, formatMessage('Attributes'))
-  }, /*#__PURE__*/React.createElement(ImageOptionsForm, {
-    id: "upload-file-form",
-    altText: altText,
-    isDecorativeImage: isDecorativeImage,
-    displayAs: displayAs,
-    handleAltTextChange: handleAltTextChange,
-    handleIsDecorativeChange: handleIsDecorativeChange,
-    handleDisplayAsChange: handleDisplayAsChange,
-    hideDimensions: true
-  }))))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: onDismiss
-  }, formatMessage('Close')), "\xA0", /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    type: "submit",
-    disabled: submitDisabled
-  }, formatMessage('Submit'))));
-});
-UploadFileModal.propTypes = {
-  editor: object.isRequired,
-  contentProps: object,
-  trayProps: object,
-  canvasOrigin: string,
-  onSubmit: func,
-  onDismiss: func.isRequired,
-  panels: arrayOf(oneOf(['COMPUTER', 'URL'])),
-  label: string.isRequired,
-  accept: oneOfType([arrayOf(string), string]),
-  modalBodyWidth: number,
-  modalBodyHeight: number,
-  requireA11yAttributes: bool,
-  preselectedFile: object // JS File
-
-};
-export default UploadFileModal;

package/lib/rce/plugins/shared/Upload/UrlPanel.js

@@ -1,38 +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 from 'react';
-import { string, func } from 'prop-types';
-import { TextInput } from '@instructure/ui-text-input';
-import formatMessage from '../../../../format-message';
-export default function UrlPanel(_ref) {
-  let {
-    fileUrl,
-    setFileUrl
-  } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, {
-    name: "file-url",
-    renderLabel: formatMessage('File URL'),
-    type: "url",
-    value: fileUrl,
-    onChange: (e, val) => setFileUrl(val)
-  }));
-}
-UrlPanel.propTypes = {
-  fileUrl: string.isRequired,
-  setFileUrl: func.isRequired
-};

package/lib/rce/plugins/shared/Upload/UsageRightsSelectBox.js

@@ -1,172 +0,0 @@
-/*
- * Copyright (C) 2020 - 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 formatMessage from '../../../../format-message';
-import { SimpleSelect } from '@instructure/ui-simple-select';
-import { View } from '@instructure/ui-view';
-import { TextInput } from '@instructure/ui-text-input';
-const CONTENT_OPTIONS = [{
-  display: formatMessage('Choose usage rights...'),
-  value: 'choose'
-}, {
-  display: formatMessage('I hold the copyright'),
-  value: 'own_copyright'
-}, {
-  display: formatMessage('I have obtained permission to use this file.'),
-  value: 'used_by_permission'
-}, {
-  display: formatMessage('The material is in the public domain'),
-  value: 'public_domain'
-}, {
-  display: formatMessage('The material is subject to an exception - e.g. fair use, the right to quote, or others under applicable copyright laws'),
-  value: 'fair_use'
-}, {
-  display: formatMessage('The material is licensed under Creative Commons'),
-  value: 'creative_commons'
-}];
-
-const ShowCreativeCommonsOptions = _ref => {
-  let {
-    ccLicense,
-    setCCLicense,
-    licenseOptions
-  } = _ref;
-  const onlyCC = licenseOptions.filter(license => license.id.indexOf('cc') === 0);
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "medium 0"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    renderLabel: formatMessage('Creative Commons License:'),
-    assistiveText: formatMessage('Use arrow keys to navigate options.'),
-    value: ccLicense,
-    onChange: (e, _ref2) => {
-      let {
-        id
-      } = _ref2;
-      return setCCLicense(id);
-    }
-  }, onlyCC.map(license => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    key: license.id,
-    id: license.id,
-    value: license.id
-  }, license.name))));
-};
-
-const ShowMessage = () => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "alert"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
-    className: "icon-warning"
-  }), /*#__PURE__*/React.createElement("span", {
-    style: {
-      paddingLeft: '10px'
-    }
-  }, formatMessage("If you do not select usage rights now, this file will be unpublished after it's uploaded."))));
-};
-
-const UsageRightsSelectBox = _ref3 => {
-  let {
-    contextType,
-    contextId,
-    showMessage: showMessageProp,
-    usageRightsState,
-    setUsageRightsState
-  } = _ref3;
-  const {
-    usageRight,
-    ccLicense,
-    copyrightHolder
-  } = usageRightsState;
-  const showCreativeCommonsOptions = usageRight === 'creative_commons';
-  const [licenseOptions, setLicenseOptions] = React.useState([]);
-  const [showMessage, setShowMessage] = React.useState(showMessageProp);
-  React.useEffect(() => {
-    function getUsageRightsOptions() {
-      fetch(apiUrl()).then(res => res.text()).then(res => setLicenseOptions(JSON.parse(res))).catch(() => {});
-    }
-
-    function apiUrl() {
-      const context = contextType.replace(/([^s])$/, '$1s'); // pluralize
-
-      return `/api/v1/${context}/${contextId}/content_licenses`;
-    }
-
-    getUsageRightsOptions();
-  }, [contextType, contextId]);
-
-  function handleChange(value) {
-    setUsageRightsState(state => ({ ...state,
-      usageRight: value
-    }));
-    setShowMessage(showMessageProp && value === 'choose');
-  }
-
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div"
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "medium 0"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    renderLabel: formatMessage('Usage Right:'),
-    assistiveText: formatMessage('Use arrow keys to navigate options.'),
-    onChange: (e, _ref4) => {
-      let {
-        id
-      } = _ref4;
-      handleChange(id);
-    },
-    value: usageRight
-  }, CONTENT_OPTIONS.map(contentOption => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    key: contentOption.value,
-    id: contentOption.value,
-    value: contentOption.value
-  }, contentOption.display)))), showCreativeCommonsOptions && /*#__PURE__*/React.createElement(ShowCreativeCommonsOptions, {
-    ccLicese: ccLicense,
-    setCCLicense: license => setUsageRightsState(state => ({ ...state,
-      ccLicense: license
-    })),
-    licenseOptions: licenseOptions
-  }), /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "medium 0"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    renderLabel: formatMessage('Copyright Holder:'),
-    value: copyrightHolder,
-    onChange: (e, value) => setUsageRightsState(state => ({ ...state,
-      copyrightHolder: value
-    })),
-    placeholder: formatMessage('(c) 2001 Acme Inc.')
-  })), /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "medium 0"
-  }, showMessage && /*#__PURE__*/React.createElement(ShowMessage, null)));
-};
-
-UsageRightsSelectBox.propTypes = {
-  usageRightsState: PropTypes.shape({
-    ccLicense: PropTypes.string,
-    usageRight: PropTypes.oneOf(Object.values(CONTENT_OPTIONS).map(o => o.value)),
-    copyrightHolder: PropTypes.string
-  }),
-  setUsageRightsState: PropTypes.func,
-  showMessage: PropTypes.bool,
-  contextType: PropTypes.string,
-  contextId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-export default UsageRightsSelectBox;