@instructure/canvas-rce 5.12.1 → 5.12.2

package/lib/common/FlashAlert.js

@@ -1,263 +0,0 @@
-/*
- * Copyright (C) 2017 - 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/>.
- */
-
-/**
- * Flash alerts, especially for ajax error messages
- * Typical usage:
- * import {showFlashError} from './FlashAlert'
- * ...
- * axios.put(url, data).then((response) => {
- *     // do something with response
- *   }).catch(showFlashError(your_error_message))
- *
- * showFlashError() with no argument shows a generic message
- *
- * On error, will display an inst-ui Alert at the top of the page
- * with an error message and "Details" button. When the user clicks
- * the button, it shows error details extracted from the axios Error
- *
- * You could also import the lower level showFlashAlert function or
- * the FlashAlert component if you need more control
- *
- * showFlashAlert({ err, message, type }, onCloseCallback)
- *  err: error object
- *  message: user-facing message
- *  type: one of ['info', 'success', 'warning', 'error']
- *        default is 'info' unless an error object is passed in, else is 'error'
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import formatMessage from '../format-message';
-import { Alert } from '@instructure/ui-alerts';
-import { Link } from '@instructure/ui-link';
-import { Text } from '@instructure/ui-text';
-import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Transition } from '@instructure/ui-motion';
-import RCEGlobals from '../rce/RCEGlobals';
-const messageHolderId = 'flashalert_message_holder'; // specs fail if I reuse jquery's elements
-
-const screenreaderMessageHolderId = 'flash_screenreader_holder';
-const TIMEOUT = 10000;
-
-function getLiveRegion() {
-  // return element where flash screenreader messages go.
-  // create if necessary
-  let liveRegion = document.getElementById(screenreaderMessageHolderId);
-
-  if (!liveRegion) {
-    liveRegion = document.createElement('div');
-    liveRegion.id = screenreaderMessageHolderId;
-    liveRegion.setAttribute('role', 'alert');
-    document.body.appendChild(liveRegion);
-  }
-
-  return liveRegion;
-} // An Alert with a message and "Details" button which surfaces
-// more info about the error when pressed.
-// Is displayed at the top of the document, and will close itself after a while
-
-
-export default class FlashAlert extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.showDetails = () => {
-      this.setState({
-        showDetails: true
-      });
-      clearTimeout(this.timerId);
-      this.timerId = setTimeout(() => this.closeAlert(), this.props.timeout);
-    };
-
-    this.closeAlert = () => {
-      this.setState({
-        isOpen: false
-      }, () => {
-        setTimeout(() => {
-          clearTimeout(this.timerId);
-          this.props.onClose();
-        }, 500);
-      });
-    };
-
-    this.state = {
-      showDetails: false,
-      isOpen: true
-    };
-    this.timerId = 0;
-  }
-
-  findDetailMessage() {
-    const err = this.props.error;
-    let a = err.message;
-    let b;
-
-    if (err.response) {
-      if (err.response.data) {
-        try {
-          if (Array.isArray(err.response.data.errors)) {
-            // probably a canvas api
-            a = err.response.data.errors[0].message;
-            b = err.message;
-          } else if (err.response.data.message) {
-            // probably a canvas api too
-            a = err.response.data.message;
-            b = err.message;
-          }
-        } catch (ignore) {
-          a = err.message;
-        }
-      }
-    }
-
-    return {
-      a,
-      b
-    };
-  }
-
-  renderDetailMessage() {
-    const {
-      a,
-      b
-    } = this.findDetailMessage();
-    return /*#__PURE__*/React.createElement(Text, {
-      as: "p",
-      fontStyle: "italic"
-    }, /*#__PURE__*/React.createElement(Text, null, a), b ? /*#__PURE__*/React.createElement("br", null) : null, b ? /*#__PURE__*/React.createElement(Text, null, b) : null);
-  }
-
-  render() {
-    let details = null;
-
-    if (this.props.error) {
-      if (this.state.showDetails) {
-        details = this.renderDetailMessage();
-      } else {
-        details = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Link, {
-          as: "button",
-          onClick: this.showDetails
-        }, formatMessage('Details'))), /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.renderDetailMessage()));
-      }
-    }
-
-    return /*#__PURE__*/React.createElement(Transition, {
-      transitionOnMount: true,
-      in: this.state.isOpen,
-      type: "fade"
-    }, /*#__PURE__*/React.createElement(Alert, {
-      variant: this.props.variant,
-      renderCloseButtonLabel: formatMessage('Close'),
-      onDismiss: this.closeAlert,
-      margin: "small auto",
-      timeout: this.props.timeout,
-      liveRegion: getLiveRegion,
-      transition: "fade",
-      screenReaderOnly: this.props.screenReaderOnly
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
-      style: {
-        margin: '0 -5px'
-      }
-    }, this.props.message), details)));
-  }
-
-}
-FlashAlert.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  message: PropTypes.string.isRequired,
-  error: PropTypes.instanceOf(Error),
-  variant: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
-  timeout: PropTypes.number,
-  screenReaderOnly: PropTypes.bool
-};
-FlashAlert.defaultProps = {
-  error: null,
-  variant: 'info',
-  timeout: TIMEOUT,
-  screenReaderOnly: false
-};
-export function showFlashAlert(_ref) {
-  let {
-    message,
-    err,
-    type = err ? 'error' : 'info',
-    srOnly = false
-  } = _ref;
-
-  function closeAlert(atNode) {
-    ReactDOM.unmountComponentAtNode(atNode);
-    atNode.remove();
-  }
-
-  function getAlertContainer() {
-    let alertContainer = document.getElementById(messageHolderId);
-
-    if (!alertContainer) {
-      alertContainer = document.createElement('div');
-      alertContainer.classList.add('clickthrough-container');
-      alertContainer.id = messageHolderId;
-      alertContainer.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 100%; z-index: 100000;');
-      document.body.appendChild(alertContainer);
-    }
-
-    return alertContainer;
-  }
-
-  function renderAlert(parent) {
-    var _RCEGlobals$getConfig;
-
-    const configuredTimeout = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.flashAlertTimeout;
-    ReactDOM.render( /*#__PURE__*/React.createElement(FlashAlert, {
-      message: message,
-      timeout: Number.isNaN(parseInt(configuredTimeout, 10)) ? TIMEOUT : configuredTimeout,
-      error: err,
-      variant: type,
-      onClose: closeAlert.bind(null, parent),
-      liveRegion: getLiveRegion,
-      screenReaderOnly: srOnly
-    }), parent);
-  }
-
-  const div = document.createElement('div'); // div.setAttribute('class', styles.flashMessage)
-
-  div.setAttribute('style', 'max-width:50em;margin:1rem auto;');
-  div.setAttribute('class', 'flashalert-message');
-  getAlertContainer().appendChild(div);
-  renderAlert(div);
-}
-export function destroyContainer() {
-  const container = document.getElementById(messageHolderId);
-  const liveRegion = document.getElementById(screenreaderMessageHolderId);
-  if (container) container.remove();
-  if (liveRegion) liveRegion.remove();
-}
-export function showFlashError() {
-  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : formatMessage('An error occurred making a network request');
-  return err => showFlashAlert({
-    message,
-    err,
-    type: 'error'
-  });
-}
-export function showFlashSuccess(message) {
-  return () => showFlashAlert({
-    message,
-    type: 'success'
-  });
-}

package/lib/common/browser.js

@@ -1,40 +0,0 @@
-/*
- * Copyright (C) 2018 - 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/>.
- */
-let isIE = false;
-let isEdge = false; // expected to be called as setFromTinymce(window.tinymce) at some point where
-// window.tinymce is available
-
-export function setFromTinymce(tinymce) {
-  set(tinymce.Env);
-}
-export function reset() {
-  set({
-    ie: false,
-    edge: false
-  });
-}
-export function set(env) {
-  isIE = !!env.ie;
-  isEdge = isIE && !!(env.edge || env.ie == 12);
-}
-export function ie() {
-  return isIE;
-}
-export function edge() {
-  return isEdge;
-}

package/lib/common/components/FileTree/File.js

@@ -1,64 +0,0 @@
-/*
- * Copyright (C) 2018 - 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, { Component } from 'react';
-import { number, string, shape, func } from 'prop-types';
-import { css } from 'aphrodite';
-import styles from './styles';
-import { IconDocumentLine } from '@instructure/ui-icons';
-export default class File extends Component {
-  constructor() {
-    super(...arguments);
-
-    this.handleSelect = () => {
-      const {
-        onSelect,
-        file
-      } = this.props;
-
-      if (onSelect) {
-        onSelect(file.id);
-      }
-    };
-  }
-
-  icon() {
-    switch (this.props.file.type) {
-      default:
-        return /*#__PURE__*/React.createElement(IconDocumentLine, null);
-    }
-  }
-
-  render() {
-    const {
-      name
-    } = this.props.file;
-    return /*#__PURE__*/React.createElement("button", {
-      className: css(styles.button, styles.file),
-      onClick: this.handleSelect
-    }, this.icon(), " ", name);
-  }
-
-}
-File.propTypes = {
-  file: shape({
-    id: number,
-    name: string,
-    type: string
-  }).isRequired,
-  onSelect: func
-};

package/lib/common/components/FileTree/Folder.js

@@ -1,110 +0,0 @@
-/*
- * Copyright (C) 2018 - 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 PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import File from './File';
-import Loading from '../Loading';
-import { css } from 'aphrodite';
-import styles from './styles';
-import { IconMiniArrowDownLine, IconMiniArrowEndLine, IconFolderLine } from '@instructure/ui-icons';
-export default class Folder extends Component {
-  constructor() {
-    super(...arguments);
-
-    this.handleToggle = () => {
-      const {
-        onToggle,
-        folder
-      } = this.props;
-
-      if (onToggle) {
-        onToggle(folder.id);
-      }
-    };
-  }
-
-  files() {
-    return this.props.folder.fileIds.map(id => this.props.files[id]).filter(file => file != null);
-  }
-
-  subFolders() {
-    return this.props.folder.folderIds.map(id => this.props.folders[id]).filter(folder => folder != null);
-  }
-
-  toggleIcon() {
-    const {
-      expanded
-    } = this.props.folder;
-    return expanded ? /*#__PURE__*/React.createElement(IconMiniArrowDownLine, null) : /*#__PURE__*/React.createElement(IconMiniArrowEndLine, null);
-  }
-
-  render() {
-    const {
-      folders,
-      folder,
-      files,
-      onSelect,
-      onToggle
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles.node)
-    }, /*#__PURE__*/React.createElement("button", {
-      className: css(styles.button),
-      onClick: this.handleToggle,
-      "aria-expanded": !!folder.expanded
-    }, this.toggleIcon(), " ", /*#__PURE__*/React.createElement(IconFolderLine, null), " ", folder.name), folder.expanded && /*#__PURE__*/React.createElement("ul", {
-      className: css(styles.list)
-    }, this.subFolders().map(folder => /*#__PURE__*/React.createElement("li", {
-      key: `folder-${folder.id}`,
-      className: css(styles.node)
-    }, /*#__PURE__*/React.createElement(Folder, {
-      folders: folders,
-      files: files,
-      folder: folder,
-      onToggle: onToggle,
-      onSelect: onSelect
-    }))), this.files().map(file => /*#__PURE__*/React.createElement("li", {
-      key: `file-${file.id}`,
-      className: css(styles.node)
-    }, /*#__PURE__*/React.createElement(File, {
-      onSelect: onSelect,
-      file: file
-    })))), folder.expanded && folder.loading && /*#__PURE__*/React.createElement(Loading, {
-      className: css(styles.loading)
-    }));
-  }
-
-}
-const folderPropType = PropTypes.shape({
-  id: PropTypes.number,
-  name: PropTypes.string,
-  loading: PropTypes.bool,
-  fileIds: PropTypes.arrayOf(PropTypes.number),
-  folderIds: PropTypes.arrayOf(PropTypes.number)
-});
-Folder.propTypes = {
-  folders: PropTypes.objectOf(folderPropType),
-  files: PropTypes.objectOf(File.propTypes.file),
-  folder: folderPropType.isRequired,
-  onToggle: PropTypes.func,
-  onSelect: File.propTypes.onSelect
-};
-Folder.defaultProps = {
-  files: [],
-  folders: []
-};

package/lib/common/components/FileTree/index.js

@@ -1,84 +0,0 @@
-/*
- * Copyright (C) 2018 - 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 PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Folder from './Folder';
-import { css } from 'aphrodite';
-import styles from './styles';
-const DOWN_KEY = 40;
-const UP_KEY = 38;
-const J_KEY = 74;
-const K_KEY = 75;
-export default class FileTree extends Component {
-  constructor() {
-    super(...arguments);
-
-    this.handleKeyDown = event => {
-      switch (event.keyCode) {
-        case DOWN_KEY:
-        case J_KEY:
-          this.moveFocus(1);
-          break;
-
-        case UP_KEY:
-        case K_KEY:
-          this.moveFocus(-1);
-          break;
-
-        default:
-          return;
-      }
-
-      event.stopPropagation();
-    };
-  }
-
-  navigableNodes() {
-    return Array.from(this.containerNode.querySelectorAll('button'));
-  }
-
-  moveFocus(delta) {
-    const nodes = this.navigableNodes();
-    const active = nodes.indexOf(window.document.activeElement);
-    let next = active + delta;
-
-    if (next < 0) {
-      next = 0;
-    } else if (next >= nodes.length) {
-      next = nodes.length - 1;
-    }
-
-    nodes[next].focus();
-  }
-
-  render() {
-    const inlineStyles = {
-      maxHeight: this.props.maxHeight
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles.container),
-      ref: c => this.containerNode = c,
-      onKeyDown: this.handleKeyDown,
-      style: inlineStyles
-    }, /*#__PURE__*/React.createElement(Folder, this.props));
-  }
-
-}
-FileTree.propTypes = { ...Folder.propTypes,
-  maxHeight: PropTypes.string
-};

package/lib/common/components/FileTree/styles.js

@@ -1,72 +0,0 @@
-/*
- * Copyright (C) 2018 - 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 { StyleSheet } from 'aphrodite';
-export default StyleSheet.create({
-  container: {
-    marginBottom: '1em',
-    overflow: 'auto'
-  },
-  list: {
-    margin: '0 0 0 .8em',
-    padding: '0 0 0 .2em',
-    borderLeft: '1px dotted #ccc',
-    listStyle: 'none outside',
-    flex: 1
-  },
-  node: {
-    margin: 0,
-    padding: 0,
-    display: 'block'
-  },
-  loading: {
-    marginLeft: '.8em',
-    borderLeft: '1px dotted #ccc',
-    padding: '.5em .7em'
-  },
-  button: {
-    display: 'block',
-    padding: '.3em',
-    borderRadius: '.3em',
-    backgroundColor: 'transparent',
-    textAlign: 'left',
-    margin: 0,
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    flex: 1,
-    width: '100%',
-    boxSizing: 'border-box',
-    border: '1px solid transparent',
-    transition: 'background-color 0.3s',
-    wordBreak: 'break-all',
-    ':hover': {
-      backgroundColor: '#eee'
-    },
-    ':focus': {
-      border: '1px solid #000',
-      outline: 0
-    },
-    ':active': {
-      backgroundColor: '#ddd'
-    }
-  },
-  file: {
-    ':active': {
-      backgroundColor: '#008a14'
-    }
-  }
-});