@pie-element/complex-rubric 3.8.4-next.9 → 5.0.1-esmbeta.0

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

@@ -0,0 +1,365 @@
+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 '@pie-lib/render-ui';
+import EditableHtml from '@pie-lib/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,
+    pluginOpts,
+    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}
+            pluginProps={pluginOpts || {}}
+            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,
+    pluginOpts: PropTypes.object,
+    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,
+      pluginOpts,
+      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}
+              pluginOpts={pluginOpts}
+              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-element/rubric/configure/node_modules/@pie-lib/config-ui/src/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-element/rubric/configure/node_modules/@pie-lib/config-ui/src/feedback-config/__tests__/__snapshots__/feedback-config.test.jsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeedbackConfig render Feedback Config Component snapshot matches the snapshot 1`] = `
+<div>
+  <WithStyles(ExpansionPanel)>
+    <WithStyles(ExpansionPanelSummary)
+      expandIcon={<pure(ExpandMoreIcon) />}
+    >
+      <WithStyles(Typography)>
+        Feedback
+      </WithStyles(Typography)>
+    </WithStyles(ExpansionPanelSummary)>
+    <WithStyles(ExpansionPanelDetails)>
+      <div>
+        <WithStyles(FeedbackSelector)
+          label="If correct, show"
+          onChange={[Function]}
+        />
+        <WithStyles(FeedbackSelector)
+          label="If incorrect, show"
+          onChange={[Function]}
+        />
+      </div>
+    </WithStyles(ExpansionPanelDetails)>
+  </WithStyles(ExpansionPanel)>
+</div>
+`;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/feedback-config/__tests__/__snapshots__/feedback-selector.test.jsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`feedback-selector snapshot renders 1`] = `
+<div>
+  <WithStyles(RawInputContainer)
+    extraClasses={
+      Object {
+        "label": undefined,
+      }
+    }
+    label="foo"
+  >
+    <WithStyles(Group)
+      feedbackLabels={
+        Object {
+          "custom": "Customized Feedback",
+          "default": "Simple Feedback",
+          "none": "No Feedback",
+        }
+      }
+      keys={
+        Array [
+          "default",
+          "none",
+          "custom",
+        ]
+      }
+      label="foo"
+      onChange={[Function]}
+      value="default"
+    />
+  </WithStyles(RawInputContainer)>
+  <div>
+     
+    hi
+  </div>
+</div>
+`;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/feedback-config/__tests__/feedback-config.test.jsx

@@ -0,0 +1,71 @@
+import React, { PropTypes } from 'react';
+import Enzyme, { shallow, mount } from 'enzyme';
+import { FeedbackConfig } from '../index';
+import FeedbackSelector from '../feedback-selector';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('FeedbackConfig', () => {
+  describe('render', () => {
+    let component, selectors;
+    let feedback = {
+      correctFeedback: undefined,
+      correctFeedbackType: 'default',
+      incorrectFeedback: undefined,
+      incorrectFeedbackType: 'default',
+    };
+
+    let defaults = {
+      correct: 'Correct',
+      incorrect: 'Incorrect',
+      partial: 'Nearly',
+    };
+
+    describe('Feedback Config Component', () => {
+      it('should exist', () => {
+        component = shallow(
+          <FeedbackConfig feedback={feedback} defaults={defaults} onChange={jest.fn()} classes={{}} />,
+        );
+
+        selectors = component.find(FeedbackSelector);
+
+        expect(selectors.length).toEqual(3);
+      });
+
+      describe('props', () => {
+        it('should not render optionally correct if optional is not needed', () => {
+          component = shallow(
+            <FeedbackConfig
+              allowPartial={false}
+              feedback={feedback}
+              defaults={defaults}
+              onChange={jest.fn()}
+              classes={{}}
+            />,
+          );
+
+          selectors = component.find(FeedbackSelector);
+
+          expect(selectors.length).toEqual(2);
+        });
+      });
+
+      describe('snapshot', () => {
+        it('matches the snapshot', () => {
+          component = shallow(
+            <FeedbackConfig
+              allowPartial={false}
+              feedback={feedback}
+              defaults={defaults}
+              onChange={jest.fn()}
+              classes={{}}
+            />,
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/feedback-config/__tests__/feedback-selector.test.jsx

@@ -0,0 +1,60 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { FeedbackSelector } from '../feedback-selector';
+
+describe('feedback-selector', () => {
+  let w, onChange;
+
+  const getWrapper = () => {
+    return shallow(
+      <FeedbackSelector
+        classes={{}}
+        label={'foo'}
+        onChange={onChange}
+        feedback={{
+          type: 'default',
+          default: 'hi',
+        }}
+      />,
+    );
+  };
+
+  beforeEach(() => {
+    onChange = jest.fn();
+    w = getWrapper();
+  });
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('changeCustom', () => {
+      it('calls onChange with text', () => {
+        w.instance().changeCustom('bar');
+        expect(onChange).toBeCalledWith({
+          type: 'custom',
+          custom: 'bar',
+          default: 'hi',
+        });
+      });
+    });
+
+    describe('changeType', () => {
+      it('calls onChange with default', () => {
+        w.instance().changeType('default');
+        expect(onChange).toBeCalledWith({ type: 'default', default: 'hi' });
+      });
+      it('calls onChange with custom', () => {
+        w.instance().changeType('custom');
+        expect(onChange).toBeCalledWith({ type: 'custom', default: 'hi' });
+      });
+      it('calls onChange with none', () => {
+        w.instance().changeType('none');
+        expect(onChange).toBeCalledWith({ type: 'none', default: 'hi' });
+      });
+    });
+  });
+});