@pie-element/ebsr 6.6.3-next.1131 → 6.6.3-next.1199

package/configure/node_modules/@pie-lib/config-ui/src/choice-configuration/feedback-menu.jsx

@@ -1,103 +0,0 @@
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import ActionFeedback from '@material-ui/icons/Feedback';
-import IconButton from '@material-ui/core/IconButton';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export class IconMenu extends React.Component {
-  static propTypes = {
-    opts: PropTypes.object,
-    onClick: PropTypes.func.isRequired,
-    iconButtonElement: PropTypes.any
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      anchorEl: undefined,
-      open: false
-    };
-  }
-
-  handleClick = event => {
-    this.setState({ open: true, anchorEl: event.currentTarget });
-  };
-
-  handleRequestClose = () => {
-    this.setState({ open: false });
-  };
-
-  render() {
-    const { opts, onClick } = this.props;
-
-    const keys = Object.keys(opts);
-
-    const handleMenuClick = key => () => {
-      onClick(key);
-      this.handleRequestClose();
-    };
-
-    return (
-      <div>
-        <div onClick={this.handleClick}>{this.props.iconButtonElement}</div>
-        <Menu
-          id="simple-menu"
-          anchorEl={this.state.anchorEl}
-          open={this.state.open}
-          onClose={this.handleRequestClose}
-        >
-          {keys.map((k, index) => (
-            <MenuItem key={index} onClick={handleMenuClick(k)}>
-              {opts[k]}
-            </MenuItem>
-          ))}
-        </Menu>
-      </div>
-    );
-  }
-}
-
-export default class FeedbackMenu extends React.Component {
-  static propTypes = {
-    value: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired
-  };
-
-  static defaultProps = {
-    classes: {}
-  };
-
-  render() {
-    const { value, onChange, classes } = this.props;
-
-    const t = value && value.type;
-    const iconColor = t === 'custom' || t === 'default' ? 'primary' : 'disabled';
-
-    const tooltip =
-      t === 'custom'
-        ? 'Custom Feedback'
-        : t === 'default'
-        ? 'Default Feedback'
-        : 'Feedback disabled';
-
-    const icon = (
-      <IconButton className={classes.icon} aria-label={tooltip}>
-        <ActionFeedback color={iconColor} />
-      </IconButton>
-    );
-
-    return (
-      <IconMenu
-        iconButtonElement={icon}
-        onClick={key => onChange(key)}
-        opts={{
-          none: 'No Feedback',
-          default: 'Default',
-          custom: 'Custom'
-        }}
-      />
-    );
-  }
-}

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

@@ -1,319 +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 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';
-import ActionDelete from '@material-ui/icons/Delete';
-import ArrowRight from '@material-ui/icons/SubdirectoryArrowRight';
-import IconButton from '@material-ui/core/IconButton';
-
-const EditableHtmlContainer = withStyles(theme => ({
-  labelContainer: {},
-  editorHolder: {
-    marginTop: theme.spacing.unit * 2
-  }
-}))(
-  ({
-     label,
-     classes,
-     onChange,
-     value,
-     className,
-     imageSupport,
-     disabled,
-     spellCheck,
-     nonEmpty,
-     toolbarOpts,
-     error,
-     maxImageWidth,
-     maxImageHeight
-   }) => {
-    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}
-            className={classes.editor}
-            toolbarOpts={toolbarOpts}
-            error={error}
-            maxImageWidth={maxImageWidth}
-            maxImageHeight={maxImageHeight}
-          />
-        </div>
-      </InputContainer>
-    );
-  }
-);
-
-const Feedback = withStyles(() => ({
-  text: {
-    width: '100%'
-  },
-  feedbackContainer: {
-    position: 'relative'
-  },
-  arrowIcon: {
-    fill: '#ccc',
-    left: -56,
-    position: 'absolute',
-    top: 20
-  }
-}))(({ value, onChange, type, correct, classes, defaults, toolbarOpts }) => {
-  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}
-        />
-      </div>
-    );
-  }
-});
-
-export class ChoiceConfiguration extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    noLabels: PropTypes.bool,
-    useLetterOrdering: PropTypes.bool,
-    className: 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
-    }),
-    allowFeedBack: PropTypes.bool,
-    allowDelete: PropTypes.bool,
-    toolbarOpts: PropTypes.object
-  };
-
-  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,
-      disabled,
-      spellCheck,
-      nonEmpty,
-      allowFeedBack,
-      allowDelete,
-      toolbarOpts,
-      error,
-      noCorrectAnswerError
-    } = 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
-              label={!noLabels ? 'Label' : ''}
-              value={data.label}
-              onChange={this.onLabelChange}
-              imageSupport={imageSupport}
-              disabled={disabled}
-              spellCheck={spellCheck}
-              nonEmpty={nonEmpty}
-              toolbarOpts={toolbarOpts}
-              error={error}
-            />
-            {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: {
-    padding: '24px 10px 0 0'
-  },
-  choiceConfiguration: {},
-  topRow: {
-    display: 'flex'
-  },
-  value: {
-    flex: '0.5',
-    paddingRight: theme.spacing.unit
-  },
-  editorHolder: {
-    marginTop: theme.spacing.unit * 2
-  },
-  toggle: {
-    flex: '0 1 auto'
-  },
-  feedback: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit,
-    paddingLeft: 0,
-    marginLeft: 0,
-    paddingRight: theme.spacing.unit * 3
-  },
-  feedbackIcon: {
-    margin: 0,
-    paddingLeft: 0,
-    width: 'inherit'
-  },
-  deleteIcon: {
-    margin: 0,
-    width: 'inherit'
-  },
-  delete: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit,
-    paddingLeft: 0,
-    marginLeft: 0
-  },
-  middleColumn: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column'
-  },
-  errorText: {
-    fontSize: '12px',
-    color: 'red'
-  }
-});
-
-export default withStyles(styles)(ChoiceConfiguration);

package/configure/node_modules/@pie-lib/config-ui/src/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/config-ui/src/feedback-config/feedback-selector.jsx

@@ -1,116 +0,0 @@
-import EditableHTML from '@pie-lib/editable-html';
-import { InputContainer } from '@pie-lib/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: '#e0dee0',
-  padding: theme.spacing.unit * 0.9,
-  marginBottom: theme.spacing.unit * 2,
-  ...extras
-});
-
-const style = theme => ({
-  feedbackSelector: {
-    marginBottom: theme.spacing.unit
-  },
-  label: {
-    cursor: 'pointer'
-  },
-  inputContainerLabel: {
-    transform: 'translateY(-20%)'
-  },
-  feedbackInputContainer: {
-    paddingBottom: 0
-  },
-  customHolder: holder(theme, {
-    background: '#e0dee0',
-    padding: 0
-  }),
-  defaultHolder: holder(theme, {
-    fontFamily: theme.typography.fontFamily,
-    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 } = 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}
-            />
-          </div>
-        )}
-        {feedback.type === 'default' && (
-          <div className={classes.defaultHolder}> {feedback.default}</div>
-        )}
-      </div>
-    );
-  }
-}
-
-export default withStyles(style)(FeedbackSelector);

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

@@ -1,54 +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 = () => ({
-  radioLabel: {
-    fontSize: '12px'
-  },
-  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);