dce-reactkit 1.0.20 → 2.0.0

package/src-old/components/Layout/TwoCol.js

@@ -1,67 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import boostrap components
-import { Row, Col } from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-/*
-Looks like:
-|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|
-| ........................................................................... |
-| |     Left Column (first child)     | |    Right Column (second child)    | |
-| ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' |
-|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
-*/
-
-class TwoCol extends Component {
-  render() {
-    const {
-      col1Align,
-      col2Align,
-      children,
-    } = this.props;
-
-    const leftChild = (children.length > 0 ? children[0] : {});
-    const rightChild = (children.length > 1 ? children[1] : {});
-
-    return (
-      <Row>
-        <Col className={`text-${col1Align}`}>
-          {leftChild}
-        </Col>
-        <Col className={`text-${col2Align}`}>
-          {rightChild}
-        </Col>
-      </Row>
-    );
-  }
-}
-
-TwoCol.propTypes = {
-  // Text alignment for the left column
-  col1Align: PropTypes.oneOf([
-    'left',
-    'right',
-    'center',
-  ]),
-  // Text alignment for the right column
-  col2Align: PropTypes.oneOf([
-    'left',
-    'right',
-    'center',
-  ]),
-  /* Must have two children: first child is the item on the left that fills up
-   * the ret of the space, the second child is the item that's added on the
-   * right
-   */
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
-TwoCol.defaultProps = {
-  col1Align: 'left',
-  col2Align: 'right',
-};
-
-export default TwoCol;

package/src-old/components/Modal.js

@@ -1,161 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import bootstrap components
-import {
-  Modal as BootstrapModal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-} from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-import Button from './Button';
-
-class Modal extends Component {
-  constructor(props) {
-    super(props);
-
-    // Initialize state
-    // Only show the modal if there's some content to display
-    this.state = {
-      isOpen: !!(
-        props.body
-        || props.title
-        || props.buttons
-        || props.footerMessage
-      ),
-    };
-
-    this.toggle = this.toggle.bind(this);
-  }
-
-  toggle() {
-    // Deconstruct state
-    const { isOpen } = this.state;
-
-    // Toggle state
-    this.setState({
-      isOpen: !isOpen,
-    });
-  }
-
-  render() {
-    // Deconstruct properties
-    const {
-      title,
-      body,
-      footerMessage,
-      buttons,
-      allowClose,
-      onClose,
-      children,
-    } = this.props;
-
-    // Get footer text
-    let footerMessageText;
-    if (footerMessage && typeof footerMessage === 'string') {
-      footerMessageText = footerMessage;
-    }
-
-    // Deconstruct state
-    const { isOpen } = this.state;
-
-    // Choose backdrop
-    const backdrop = (allowClose ? true : 'static');
-
-    // Create buttons
-    const buttonComponents = buttons.map((buttonProperties) => {
-      const {
-        text,
-        color,
-        onClick,
-      } = buttonProperties;
-
-      return (
-        <Button
-          key={text}
-          text={text}
-          color={color}
-          className="mr-1"
-          onClick={() => {
-            this.toggle();
-            if (onClick) {
-              onClick();
-            }
-          }}
-        />
-      );
-    });
-
-    return (
-      <BootstrapModal
-        isOpen={isOpen}
-        toggle={this.toggle}
-        onClosed={onClose}
-        backdrop={backdrop}
-      >
-        {title && (
-          <ModalHeader
-            toggle={allowClose ? this.toggle : undefined}
-          >
-            {title || 'Notice:'}
-          </ModalHeader>
-        )}
-        {(body || children) && (
-          <ModalBody>
-            {body || children}
-          </ModalBody>
-        )}
-        {(buttonComponents.length > 0 || footerMessageText) && (
-          <ModalFooter>
-            <span className="mr-auto">{footerMessageText}</span>
-            {buttonComponents}
-          </ModalFooter>
-        )}
-      </BootstrapModal>
-    );
-  }
-}
-
-Modal.propTypes = {
-  /* The title of the modal */
-  title: PropTypes.string,
-  /* The text body of the modal */
-  body: PropTypes.string,
-  /* The body of the modal (if no text body) */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-  /* A message to show on the left side of the footer */
-  footerMessage: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.node,
-  ]),
-  /* Buttons to show in the modal */
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string.isRequired,
-      color: PropTypes.string,
-      onClick: PropTypes.func,
-    })
-  ),
-  /* If true, the modal is allowed to be closed */
-  allowClose: PropTypes.bool,
-  /* Handler for when the modal is closed */
-  onClose: PropTypes.func,
-};
-
-Modal.defaultProps = {
-  title: null,
-  body: null,
-  children: null,
-  footerMessage: null,
-  buttons: [],
-  allowClose: false,
-  onClose: null,
-};
-
-export default Modal;

package/src-old/components/PhotoRoster.js

@@ -1,152 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import initCACCL from 'caccl/client/cached';
-import CACCLInstance from 'caccl/APIInstanceClass';
-
-// Import other components
-import LoadSplash from './Splash/Load';
-import ErrorSplash from './Splash/Error';
-import UserProfile from './UserProfile';
-
-const STATUS = {
-  LOADING: 'loading',
-  ERROR: 'err',
-  DISPLAYING: 'displaying',
-};
-
-class Roster extends Component {
-  constructor(props) {
-    super(props);
-
-    // Deconstruct props
-    const {
-      users,
-      courseId,
-      filter,
-      api,
-    } = props;
-
-    // Pull list of users (if not included)
-    if (users) {
-      this.state = {
-        users,
-        status: STATUS.DISPLAYING,
-      };
-    } else if (courseId) {
-      // Pull users from course
-      this.state = {
-        status: STATUS.LOADING,
-      };
-      api.course.listStudents({
-        courseId,
-        includeAvatar: true,
-        includeEmail: true,
-      })
-        .then((enrollments) => {
-          let loadedUsers = enrollments;
-          if (filter) {
-            loadedUsers = loadedUsers.filter(filter);
-          }
-          this.setState({
-            users: loadedUsers,
-            status: STATUS.DISPLAYING,
-          });
-        })
-        .catch((err) => {
-          this.setState({
-            err,
-            status: STATUS.ERROR,
-          });
-        });
-    } else {
-      // No context to pull from
-      this.state = {
-        status: STATUS.ERROR,
-        err: 'No course selected',
-      };
-    }
-  }
-
-  render() {
-    // Deconstruct state
-    const {
-      color,
-      size,
-      users,
-      loadMessage,
-      err,
-      status,
-    } = this.state;
-
-    // Render loader
-    if (status === STATUS.LOADING) {
-      return (
-        <LoadSplash
-          message={loadMessage}
-        />
-      );
-    }
-
-    // Render error
-    if (status === STATUS.ERROR) {
-      return (
-        <ErrorSplash
-          err={err}
-          allowClose
-        />
-      );
-    }
-
-    // Displaying
-    const profiles = users.map((user) => {
-      return (
-        <UserProfile
-          key={user.id}
-          user={user}
-          color={color}
-          size={size}
-          marginRight="5px"
-          marginLeft="5px"
-          marginBottom="5px"
-        />
-      );
-    });
-    return (
-      <div
-        className="text-center"
-      >
-        {profiles}
-      </div>
-    );
-  }
-}
-
-Roster.propTypes = {
-  /* Array of Canvas users */
-  users: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    email: PropTypes.string.isRequired,
-    avatar_url: PropTypes.string.isRequired,
-    sis_user_id: PropTypes.string.isRequired,
-  }),
-  /* The course to pull users from (only valid when users is not included) */
-  courseId: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  /* Filter function to apply to users (when pulled from course) */
-  filter: PropTypes.func,
-  /* CACCL instance to use to get the list of assignment */
-  api: PropTypes.instanceOf(CACCLInstance),
-};
-
-const { api } = initCACCL();
-
-Roster.defaultProps = {
-  api,
-  users: null,
-  courseId: null,
-  filter: null,
-};
-
-export default Roster;

package/src-old/components/Pills.js

@@ -1,117 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import bootstrap components
-import {
-  Nav,
-  NavItem,
-  NavLink,
-} from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-class Pills extends Component {
-  constructor(props) {
-    super(props);
-
-    // Deconstruct props
-    const { initialActiveIndex } = this.props;
-
-    // Initialize state
-    this.state = {
-      activeItem: initialActiveIndex,
-    };
-
-    // Bind functions
-    this.itemClicked = this.itemClicked.bind(this);
-  }
-
-  itemClicked(index) {
-    // Deconstruct props
-    const { updateActiveOnClick } = this.props;
-
-    // Update active pill
-    if (updateActiveOnClick) {
-      this.setState({
-        activeItem: index,
-      });
-    }
-
-    // Call handler
-    const { items } = this.props;
-    const { onClick } = items[index];
-    if (onClick) {
-      onClick(items[index], index);
-    }
-  }
-
-  render() {
-    // Extract properties
-    const { items } = this.props;
-
-    // Deconstruct state
-    const { activeItem } = this.state;
-
-    const itemElements = items.map((item, index) => {
-      // Deconstruct item
-      const {
-        text,
-        active,
-        disabled,
-      } = item;
-
-      return (
-        <NavItem
-          color="secondary"
-        >
-          <NavLink
-            href="#"
-            onClick={() => { this.itemClicked(index); }}
-            active={(
-              activeItem !== null
-                ? activeItem === index
-                : active
-            )}
-            disabled={disabled}
-          >
-            {text}
-          </NavLink>
-        </NavItem>
-      );
-    });
-
-    return (
-      <Nav pills>
-        {itemElements}
-      </Nav>
-    );
-  }
-}
-
-Pills.propTypes = {
-  /* The items to show as pills */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      /* The label text of the item */
-      text: PropTypes.string.isRequired,
-      /* If true, item is marked active (ignored if activeItem is defined) */
-      active: PropTypes.bool,
-      /* If true, item is disabled */
-      disabled: PropTypes.bool,
-      /* Handler to call when clicked (called with item, index as args) */
-      onClick: PropTypes.func,
-    })
-  ),
-  /* If true, when an item is clicked, it is made active */
-  updateActiveOnClick: PropTypes.bool,
-  /* The index of the initial active item */
-  initialActiveIndex: PropTypes.number,
-};
-
-Pills.defaultProps = {
-  items: null,
-  updateActiveOnClick: false,
-  initialActiveIndex: null,
-};
-
-export default Pills;

package/src-old/components/Radio.js

@@ -1,94 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import bootstrap components
-import { Button, ButtonGroup } from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-/* Same properties as button component, plus:
- * - onChange: (index, optionText) function
- */
-
-class Radio extends Component {
-  constructor(props) {
-    super(props);
-
-    // state.selected:
-    // - null (none selected)
-    // - number (index of selected radio)
-    const { initialSelectedIndex } = this.props;
-    this.state = {
-      selected: initialSelectedIndex,
-    };
-
-    // Bind functions
-    this.onRadioBtnClick = this.onRadioBtnClick.bind(this);
-  }
-
-  onRadioBtnClick(selected) {
-    // Set this radio button as selected
-    this.setState({ selected });
-
-    // Deconstruct properties
-    const {
-      onChange,
-      items,
-    } = this.props;
-
-    if (onChange) {
-      onChange(items[selected], selected);
-    }
-  }
-
-  render() {
-    // Deconstruct properties
-    const {
-      items,
-      color,
-    } = this.props;
-
-    // Deconstruct state
-    const { selected } = this.state;
-
-    const buttons = items.map((text, index) => {
-      return (
-        <Button
-          key={text}
-          onClick={() => {
-            return this.onRadioBtnClick(index);
-          }}
-          active={selected === index}
-          color={color}
-        >
-          {text}
-        </Button>
-      );
-    });
-
-    return (
-      <ButtonGroup>
-        {buttons}
-      </ButtonGroup>
-    );
-  }
-}
-
-Radio.propTypes = {
-  /* Array of item labels to choose from */
-  items: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /* Handler to call when radio is changed. Called with option, index. */
-  onChange: PropTypes.func,
-  /* The initial item index to select */
-  initialSelectedIndex: PropTypes.number,
-  /* Bootstrap color of the buttons */
-  color: PropTypes.string,
-};
-
-Radio.defaultProps = {
-  onChange: null,
-  initialSelectedIndex: 0,
-  color: 'secondary',
-};
-
-export default Radio;

package/src-old/components/Splash/Error.js

@@ -1,62 +0,0 @@
-import React, { Component } from 'react';
-
-// Import other components
-import Alert from '../Alert';
-import Modal from '../Modal';
-
-// Import glyphs
-import WarningTriangle from '../../glyphs/WarningTriangle';
-
-class ErrorSplash extends Component {
-  render() {
-    const {
-      title,
-      body,
-      err,
-      buttons,
-      allowClose,
-    } = this.props;
-
-    // Construct message
-    let message;
-    if (body) {
-      message = body;
-    } else if (err && err.message) {
-      ({ message } = err);
-    } else if (err && typeof err === 'string') {
-      message = err;
-    } else {
-      message = 'An unknown error occurred. If this issue keeps happening, please contact an admin.';
-    }
-
-    // Construct error code message
-    const codeMessage = ((err && err.code) && (
-      <div>
-        Error code:&nbsp;
-        <strong>{err.code}</strong>
-      </div>
-    ));
-
-    return (
-      <div>
-        <Modal
-          title={title || 'Oops!'}
-          body={message}
-          footerMessage={codeMessage}
-          buttons={buttons}
-          allowClose={allowClose}
-        />
-        <Alert color="warning" centered>
-          <div>
-            <WarningTriangle />
-            <strong>Oops!</strong>
-          </div>
-          {message}
-          {codeMessage}
-        </Alert>
-      </div>
-    );
-  }
-}
-
-export default ErrorSplash;

package/src-old/components/Splash/Load/index.js

@@ -1,32 +0,0 @@
-import React, { Component } from 'react';
-
-// Import glyphs
-import Circle from '../../../glyphs/Circle';
-
-// Import custom styles
-import './style.css';
-
-class LoadSplash extends Component {
-  render() {
-    // Deconstruct props
-    const { message } = this.props;
-
-    return (
-      <div className="container">
-        {message && (
-          <h3>
-            {message}
-          </h3>
-        )}
-        <div>
-          <Circle className="circle-1" />
-          <Circle className="circle-2" />
-          <Circle className="circle-3" />
-          <Circle className="circle-4" />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default LoadSplash;