@pie-lib/config-ui 9.0.3-next.2 → 10.0.0-beta.1

package/src/choice-configuration/feedback-menu.jsx

@@ -0,0 +1,103 @@
+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/src/choice-configuration/index.jsx

@@ -0,0 +1,319 @@
+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/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/src/feedback-config/feedback-selector.jsx

@@ -0,0 +1,116 @@
+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/src/feedback-config/group.jsx

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