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

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

@@ -0,0 +1,360 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,23 @@
+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>
+));