@pie-element/complex-rubric 2.1.2-next.69 → 2.1.2-next.72

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/choice-configuration/index.jsx

@@ -1,360 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import ActionDelete from '@material-ui/icons/Delete';
-import ArrowRight from '@material-ui/icons/SubdirectoryArrowRight';
-import IconButton from '@material-ui/core/IconButton';
-import classNames from 'classnames';
-import { InputContainer } from '../../render-ui';
-import EditableHtml from '../../editable-html';
-import { InputCheckbox, InputRadio } from '../inputs';
-import FeedbackMenu from './feedback-menu';
-
-const EditableHtmlContainer = withStyles((theme) => ({
-  labelContainer: {},
-  editorHolder: {
-    marginTop: theme.spacing.unit * 2,
-  },
-}))(
-  ({
-    label,
-    classes,
-    onChange,
-    value,
-    className,
-    imageSupport,
-    disableImageAlignmentButtons,
-    disabled,
-    spellCheck,
-    nonEmpty,
-    toolbarOpts,
-    error,
-    maxImageWidth,
-    maxImageHeight,
-    uploadSoundSupport,
-    mathMlOptions = {},
-  }) => {
-    const names = classNames(classes.labelContainer, className);
-
-    return (
-      <InputContainer label={label} className={names}>
-        <div className={classes.editorHolder}>
-          <EditableHtml
-            markup={value || ''}
-            disabled={disabled}
-            spellCheck={spellCheck}
-            nonEmpty={nonEmpty}
-            onChange={onChange}
-            imageSupport={imageSupport}
-            disableImageAlignmentButtons={disableImageAlignmentButtons}
-            className={classes.editor}
-            toolbarOpts={toolbarOpts}
-            error={error}
-            maxImageWidth={maxImageWidth}
-            maxImageHeight={maxImageHeight}
-            uploadSoundSupport={uploadSoundSupport}
-            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-            mathMlOptions={mathMlOptions}
-          />
-        </div>
-      </InputContainer>
-    );
-  },
-);
-
-const Feedback = withStyles((theme) => ({
-  text: {
-    width: '100%',
-  },
-  feedbackContainer: {
-    position: 'relative',
-  },
-  arrowIcon: {
-    fill: theme.palette.grey[400],
-    left: -56,
-    position: 'absolute',
-    top: 20,
-  },
-}))(({ value, onChange, type, correct, classes, defaults, toolbarOpts, mathMlOptions = {} }) => {
-  if (!type || type === 'none') {
-    return null;
-  } else if (type === 'default') {
-    return (
-      <div className={classes.feedbackContainer}>
-        <ArrowRight className={classes.arrowIcon} />
-        <TextField
-          className={classes.text}
-          label="Feedback Text"
-          value={correct ? defaults.correct : defaults.incorrect}
-        />
-      </div>
-    );
-  } else {
-    return (
-      <div className={classes.feedbackContainer}>
-        <ArrowRight className={classes.arrowIcon} />
-        <EditableHtmlContainer
-          className={classes.text}
-          label="Feedback Text"
-          value={value}
-          onChange={onChange}
-          toolbarOpts={toolbarOpts}
-          mathMlOptions={mathMlOptions}
-        />
-      </div>
-    );
-  }
-});
-
-export class ChoiceConfiguration extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    noLabels: PropTypes.bool,
-    useLetterOrdering: PropTypes.bool,
-    className: PropTypes.string,
-    error: PropTypes.string,
-    mode: PropTypes.oneOf(['checkbox', 'radio']),
-    defaultFeedback: PropTypes.object.isRequired,
-    disabled: PropTypes.bool,
-    nonEmpty: PropTypes.bool,
-    data: PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-      correct: PropTypes.bool,
-      feedback: PropTypes.shape({
-        type: PropTypes.string,
-        value: PropTypes.string,
-      }),
-    }),
-    onDelete: PropTypes.func,
-    onChange: PropTypes.func,
-    index: PropTypes.number,
-    imageSupport: PropTypes.shape({
-      add: PropTypes.func.isRequired,
-      delete: PropTypes.func.isRequired,
-    }),
-    disableImageAlignmentButtons: PropTypes.bool,
-    allowFeedBack: PropTypes.bool,
-    allowDelete: PropTypes.bool,
-    noCorrectAnswerError: PropTypes.string,
-    spellCheck: PropTypes.bool,
-    toolbarOpts: PropTypes.object,
-    uploadSoundSupport: PropTypes.object,
-    maxImageWidth: PropTypes.number,
-    maxImageHeight: PropTypes.number,
-  };
-
-  static defaultProps = {
-    index: -1,
-    noLabels: false,
-    useLetterOrdering: false,
-    allowFeedBack: true,
-    allowDelete: true,
-  };
-
-  _changeFn = (key) => (update) => {
-    const { data, onChange } = this.props;
-
-    if (onChange) {
-      onChange({ ...data, [key]: update });
-    }
-  };
-
-  onLabelChange = this._changeFn('label');
-
-  onCheckedChange = (event) => {
-    const correct = event.target.checked;
-    const { data, onChange } = this.props;
-
-    if (onChange) {
-      onChange({ ...data, correct });
-    }
-  };
-
-  onFeedbackValueChange = (v) => {
-    const { data, onChange } = this.props;
-
-    if (data.feedback.type !== 'custom') {
-      return;
-    }
-
-    const fb = { ...data.feedback, value: v };
-
-    if (onChange) onChange({ ...data, feedback: fb });
-  };
-
-  onFeedbackTypeChange = (t) => {
-    const { data, onChange } = this.props;
-    const fb = { ...data.feedback, type: t };
-
-    if (fb.type !== 'custom') {
-      fb.value = undefined;
-    }
-
-    if (onChange) onChange({ ...data, feedback: fb });
-  };
-
-  render() {
-    const {
-      data,
-      classes,
-      mode,
-      onDelete,
-      defaultFeedback,
-      index,
-      className,
-      noLabels,
-      useLetterOrdering,
-      imageSupport,
-      disableImageAlignmentButtons,
-      disabled,
-      spellCheck,
-      nonEmpty,
-      allowFeedBack,
-      allowDelete,
-      toolbarOpts,
-      error,
-      noCorrectAnswerError,
-      uploadSoundSupport,
-      maxImageWidth,
-      maxImageHeight,
-      mathMlOptions = {},
-    } = this.props;
-
-    const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
-    const names = classNames(classes.choiceConfiguration, className);
-
-    return (
-      <div className={names}>
-        <div className={classes.topRow}>
-          {index > 0 && (
-            <span className={classes.index} type="title">
-              {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
-            </span>
-          )}
-
-          <InputToggle
-            className={classes.toggle}
-            onChange={this.onCheckedChange}
-            label={!noLabels ? 'Correct' : ''}
-            checked={!!data.correct}
-            error={noCorrectAnswerError}
-          />
-
-          <div className={classes.middleColumn}>
-            <EditableHtmlContainer
-              className={classes.input}
-              label={!noLabels ? 'Label' : ''}
-              value={data.label}
-              onChange={this.onLabelChange}
-              imageSupport={imageSupport}
-              disableImageAlignmentButtons={disableImageAlignmentButtons}
-              disabled={disabled}
-              spellCheck={spellCheck}
-              nonEmpty={nonEmpty}
-              toolbarOpts={toolbarOpts}
-              error={error}
-              uploadSoundSupport={uploadSoundSupport}
-              mathMlOptions={mathMlOptions}
-              maxImageWidth={maxImageWidth}
-              maxImageHeight={maxImageHeight}
-            />
-            {error && <div className={classes.errorText}>{error}</div>}
-
-            {allowFeedBack && (
-              <Feedback
-                {...data.feedback}
-                correct={data.correct}
-                defaults={defaultFeedback}
-                onChange={this.onFeedbackValueChange}
-                toolbarOpts={toolbarOpts}
-              />
-            )}
-          </div>
-
-          {allowFeedBack && (
-            <InputContainer className={classes.feedback} label={!noLabels ? 'Feedback' : ''}>
-              <FeedbackMenu
-                onChange={this.onFeedbackTypeChange}
-                value={data.feedback}
-                classes={{
-                  icon: classes.feedbackIcon,
-                }}
-              />
-            </InputContainer>
-          )}
-
-          {allowDelete && (
-            <InputContainer className={classes.delete} label={!noLabels ? 'Delete' : ''}>
-              <IconButton aria-label="delete" className={classes.deleteIcon} onClick={onDelete}>
-                <ActionDelete />
-              </IconButton>
-            </InputContainer>
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-const styles = (theme) => ({
-  index: {
-    paddingRight: theme.spacing.unit,
-    paddingTop: theme.spacing.unit * 3.5,
-  },
-  choiceConfiguration: {},
-  topRow: {
-    display: 'flex',
-  },
-  value: {
-    flex: '0.5',
-    paddingRight: theme.spacing.unit,
-  },
-  editorHolder: {
-    marginTop: theme.spacing.unit * 2,
-  },
-  toggle: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit / 2,
-    paddingBottom: 0,
-    marginRight: 0,
-    marginLeft: theme.spacing.unit,
-  },
-  feedback: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit * 2,
-    paddingLeft: 0,
-    marginLeft: 0,
-    marginRight: theme.spacing.unit,
-  },
-  feedbackIcon: {
-    margin: 0,
-    width: 'inherit',
-  },
-  deleteIcon: {
-    margin: 0,
-    width: 'inherit',
-  },
-  delete: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit * 2,
-    paddingLeft: 0,
-    marginLeft: 0,
-  },
-  middleColumn: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    marginRight: theme.spacing.unit,
-  },
-  input: {
-    marginRight: 0,
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-  },
-});
-
-export default withStyles(styles)(ChoiceConfiguration);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/choice-utils.js

@@ -1,30 +0,0 @@
-import includes from 'lodash/includes';
-
-/**
- * Add value to every model.choices.
- * @param {Object} model the model to normalize
- * @return {Object} the updated model
- */
-export const normalizeChoices = (model) => {
-  const choices = model.choices.map((c, index) => {
-    if (!c.value) {
-      c.value = `${index}`;
-    }
-    return c;
-  });
-  return { ...model, choices };
-};
-
-/**
- * Find the first available index.
- * @param {string[]} values
- * @param {number} index
- * @return {string}
- */
-export const firstAvailableIndex = (values, index) => {
-  if (includes(values, `${index}`)) {
-    return firstAvailableIndex(values, index + 1);
-  } else {
-    return `${index}`;
-  }
-};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/feedback-config/feedback-selector.jsx

@@ -1,122 +0,0 @@
-import EditableHTML from '../../editable-html';
-import { InputContainer } from '../../render-ui';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Group from './group';
-
-const feedbackLabels = {
-  default: 'Simple Feedback',
-  none: 'No Feedback',
-  custom: 'Customized Feedback',
-};
-
-const holder = (theme, extras) => ({
-  marginTop: '0px',
-  background: theme.palette.grey[300],
-  padding: theme.spacing.unit,
-  marginBottom: theme.spacing.unit * 2,
-  borderRadius: '4px',
-  ...extras,
-});
-
-const style = (theme) => ({
-  feedbackSelector: {
-    marginBottom: theme.spacing.unit,
-  },
-  label: {
-    cursor: 'pointer',
-  },
-  inputContainerLabel: {
-    transform: 'translateY(-20%)',
-  },
-  feedbackInputContainer: {
-    paddingBottom: 0,
-  },
-  customHolder: holder(theme, {
-    background: theme.palette.grey[300],
-    padding: 0,
-  }),
-  defaultHolder: holder(theme, {
-    fontFamily: theme.typography.fontFamily,
-    padding: theme.spacing.unit * 2,
-    cursor: 'default',
-  }),
-  editor: {
-    fontFamily: theme.typography.fontFamily,
-  },
-  group: {
-    paddingTop: theme.spacing.unit,
-  },
-});
-
-export const FeedbackType = {
-  type: PropTypes.oneOf(['default', 'custom', 'none']),
-  default: PropTypes.string,
-  custom: PropTypes.string,
-};
-
-export class FeedbackSelector extends React.Component {
-  static propTypes = {
-    keys: PropTypes.arrayOf(PropTypes.string),
-    classes: PropTypes.object.isRequired,
-    label: PropTypes.string.isRequired,
-    feedback: PropTypes.shape(FeedbackType).isRequired,
-    onChange: PropTypes.func.isRequired,
-    toolbarOpts: PropTypes.object,
-  };
-
-  changeType = (type) => {
-    const { onChange, feedback } = this.props;
-
-    onChange({ ...feedback, type });
-  };
-
-  changeCustom = (custom) => {
-    const { onChange, feedback } = this.props;
-
-    onChange({ ...feedback, type: 'custom', custom });
-  };
-
-  render() {
-    const { keys, classes, label, feedback, toolbarOpts, mathMlOptions = {} } = this.props;
-
-    const feedbackKeys = keys || Object.keys(feedbackLabels);
-
-    return (
-      <div className={classes.feedbackSelector}>
-        <InputContainer
-          label={label}
-          className={classes.feedbackInputContainer}
-          extraClasses={{ label: classes.inputContainerLabel }}
-        >
-          <Group
-            className={classes.group}
-            keys={feedbackKeys}
-            label={label}
-            value={feedback.type}
-            onChange={this.changeType}
-            feedbackLabels={feedbackLabels}
-          />
-        </InputContainer>
-
-        {feedback.type === 'custom' && (
-          <div className={classes.customHolder}>
-            <EditableHTML
-              className={classes.editor}
-              onChange={this.changeCustom}
-              markup={feedback.custom || ''}
-              toolbarOpts={toolbarOpts}
-              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-              mathMlOptions={mathMlOptions}
-            />
-          </div>
-        )}
-
-        {feedback.type === 'default' && <div className={classes.defaultHolder}> {feedback.default}</div>}
-      </div>
-    );
-  }
-}
-
-export default withStyles(style)(FeedbackSelector);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/feedback-config/group.jsx

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import RadioWithLabel from '../radio-with-label';
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-
-const styles = (theme) => ({
-  radioLabel: {
-    fontSize: theme.typography.fontSize - 2,
-  },
-  choice: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  choiceHolder: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
-const Group = (props) => {
-  const { feedbackLabels, value, classes, className, onChange, keys } = props;
-
-  return (
-    <div className={classNames(classes.choiceHolder, className)}>
-      {keys.map((key) => {
-        return (
-          <div className={classes.choice} key={key}>
-            <RadioWithLabel
-              value={key}
-              checked={value === key}
-              classes={{ label: classes.radioLabel }}
-              onChange={(e) => onChange(e.currentTarget.value)}
-              label={feedbackLabels[key]}
-            />
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-Group.propTypes = {
-  className: PropTypes.string,
-  feedbackLabels: PropTypes.object.isRequired,
-  value: PropTypes.string.isRequired,
-  classes: PropTypes.object.isRequired,
-  keys: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func,
-};
-
-export default withStyles(styles)(Group);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/feedback-config/index.jsx

@@ -1,112 +0,0 @@
-import FeedbackSelector, { FeedbackType } from './feedback-selector';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import merge from 'lodash/merge';
-
-export { FeedbackSelector };
-
-const style = {
-  feedbackContainer: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-  },
-  panelDetails: {
-    paddingTop: 0,
-    paddingBottom: 0,
-  },
-};
-
-export const buildDefaults = (input) => {
-  return merge(
-    {},
-    {
-      correct: { type: 'default', default: 'Correct' },
-      incorrect: { type: 'default', default: 'Incorrect' },
-      partial: { type: 'default', default: 'Nearly' },
-    },
-    input,
-  );
-};
-
-export class FeedbackConfig extends React.Component {
-  static propTypes = {
-    allowPartial: PropTypes.bool,
-    className: PropTypes.string,
-    feedback: PropTypes.shape({
-      correct: PropTypes.shape(FeedbackType),
-      incorrect: PropTypes.shape(FeedbackType),
-      partial: PropTypes.shape(FeedbackType),
-    }),
-    onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
-    toolbarOpts: PropTypes.object,
-  };
-
-  static defaultProps = {
-    allowPartial: true,
-    feedback: buildDefaults(),
-  };
-
-  onChange(key, config) {
-    const { feedback, onChange } = this.props;
-    const update = { ...feedback, [key]: config };
-
-    onChange(update);
-  }
-
-  onCorrectChange = this.onChange.bind(this, 'correct');
-
-  onIncorrectChange = this.onChange.bind(this, 'incorrect');
-
-  onPartialChange = this.onChange.bind(this, 'partial');
-
-  render() {
-    const { classes, className, allowPartial, feedback, toolbarOpts } = this.props;
-
-    return (
-      <div className={className}>
-        <ExpansionPanel>
-          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography className={classes.heading}>Feedback</Typography>
-          </ExpansionPanelSummary>
-
-          <ExpansionPanelDetails className={classes.panelDetails}>
-            <div className={classes.feedbackContainer}>
-              <FeedbackSelector
-                label="If correct, show"
-                feedback={feedback.correct}
-                onChange={this.onCorrectChange}
-                toolbarOpts={toolbarOpts}
-              />
-
-              {allowPartial && (
-                <FeedbackSelector
-                  label="If partially correct, show"
-                  feedback={feedback.partial}
-                  onChange={this.onPartialChange}
-                  toolbarOpts={toolbarOpts}
-                />
-              )}
-
-              <FeedbackSelector
-                label="If incorrect, show"
-                feedback={feedback.incorrect}
-                onChange={this.onIncorrectChange}
-                toolbarOpts={toolbarOpts}
-              />
-            </div>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-      </div>
-    );
-  }
-}
-
-export default withStyles(style)(FeedbackConfig);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/form-section.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = (theme) => ({
-  formSection: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-  },
-  label: {
-    marginBottom: theme.spacing.unit,
-  },
-});
-
-export default withStyles(styles)(({ className, classes, label, children, labelExtraStyle }) => (
-  <div className={classNames(classes.formSection, className)}>
-    <Typography className={classes.label} type="subheading" style={labelExtraStyle}>
-      {label}
-    </Typography>
-    {children}
-  </div>
-));