@pie-lib/config-ui 13.1.0-beta.9 → 14.0.0-next.36

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

@@ -1,96 +0,0 @@
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ActionFeedback from '@mui/icons-material/Feedback';
-import IconButton from '@mui/material/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}
-          transitionDuration={{ enter: 225, exit: 195 }}
-        >
-          {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} size="large">
-        <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

@@ -1,357 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import TextField from '@mui/material/TextField';
-import ActionDelete from '@mui/icons-material/Delete';
-import ArrowRight from '@mui/icons-material/SubdirectoryArrowRight';
-import IconButton from '@mui/material/IconButton';
-import { InputContainer } from '@pie-lib/render-ui';
-import EditableHtml from '@pie-lib/editable-html-tip-tap';
-import { InputCheckbox, InputRadio } from '../inputs';
-import FeedbackMenu from './feedback-menu';
-
-const StyledEditorHolder = styled('div')(({ theme }) => ({
-  marginTop: theme.spacing(2),
-}));
-
-const EditableHtmlContainer = ({
-  label,
-  onChange,
-  value,
-  className,
-  imageSupport,
-  disableImageAlignmentButtons,
-  disabled,
-  spellCheck,
-  nonEmpty,
-  pluginOpts,
-  toolbarOpts,
-  error,
-  maxImageWidth,
-  maxImageHeight,
-  uploadSoundSupport,
-  mathMlOptions = {},
-}) => {
-  return (
-    <InputContainer label={label} className={className}>
-      <StyledEditorHolder>
-        <EditableHtml
-          markup={value || ''}
-          disabled={disabled}
-          spellCheck={spellCheck}
-          nonEmpty={nonEmpty}
-          onChange={onChange}
-          imageSupport={imageSupport}
-          disableImageAlignmentButtons={disableImageAlignmentButtons}
-          pluginProps={pluginOpts || {}}
-          toolbarOpts={toolbarOpts}
-          error={error}
-          maxImageWidth={maxImageWidth}
-          maxImageHeight={maxImageHeight}
-          uploadSoundSupport={uploadSoundSupport}
-          languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-          mathMlOptions={mathMlOptions}
-        />
-      </StyledEditorHolder>
-    </InputContainer>
-  );
-};
-
-const StyledFeedbackContainer = styled('div')(() => ({
-  position: 'relative',
-}));
-
-const StyledArrowIcon = styled(ArrowRight)(({ theme }) => ({
-  fill: theme.palette.grey[400],
-  left: -56,
-  position: 'absolute',
-  top: 40,
-}));
-
-const StyledTextField = styled(TextField)(({ theme }) => ({
-  width: '100%',
-  marginTop: theme.spacing(2),
-}));
-
-const StyledEditableHtmlContainer = styled(EditableHtmlContainer)(({ theme }) => ({
-  width: '100%',
-  marginTop: theme.spacing(2),
-}));
-
-const Feedback = ({ value, onChange, type, correct, defaults, toolbarOpts, mathMlOptions = {} }) => {
-  if (!type || type === 'none') {
-    return null;
-  } else if (type === 'default') {
-    return (
-      <StyledFeedbackContainer>
-        <StyledArrowIcon />
-        <StyledTextField
-          label="Feedback Text"
-          value={correct ? defaults.correct : defaults.incorrect}
-          variant="standard"
-        />
-      </StyledFeedbackContainer>
-    );
-  } else {
-    return (
-      <StyledFeedbackContainer>
-        <StyledArrowIcon />
-        <StyledEditableHtmlContainer
-          label="Feedback Text"
-          value={value}
-          onChange={onChange}
-          toolbarOpts={toolbarOpts}
-          mathMlOptions={mathMlOptions}
-        />
-      </StyledFeedbackContainer>
-    );
-  }
-};
-
-const StyledIndex = styled('span')(({ theme }) => ({
-  paddingRight: theme.spacing(1),
-  paddingTop: theme.spacing(3),
-}));
-
-const StyledTopRow = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledToggle = styled('div')(({ theme }) => ({
-  flex: '0 1 auto',
-  paddingTop: theme.spacing(0.5),
-  paddingBottom: 0,
-  marginRight: 0,
-  marginLeft: theme.spacing(1),
-}));
-
-const StyledFeedback = styled('div')(({ theme }) => ({
-  flex: '0 1 auto',
-  paddingTop: theme.spacing(2),
-  paddingLeft: 0,
-  marginLeft: 0,
-  marginRight: theme.spacing(1),
-}));
-
-const StyledFeedbackIcon = styled('div')(() => ({
-  margin: 0,
-  width: 'inherit',
-}));
-
-const StyledDeleteIcon = styled('div')(() => ({
-  margin: 0,
-  width: 'inherit',
-}));
-
-const StyledDelete = styled('div')(({ theme }) => ({
-  flex: '0 1 auto',
-  paddingTop: theme.spacing(2),
-  paddingLeft: 0,
-  marginLeft: 0,
-}));
-
-const StyledMiddleColumn = styled('div')(({ theme }) => ({
-  display: 'flex',
-  flex: 1,
-  flexDirection: 'column',
-  marginRight: theme.spacing(1),
-}));
-
-const StyledErrorText = styled('div')(({ theme }) => ({
-  fontSize: theme.typography.fontSize - 2,
-  color: theme.palette.error.main,
-}));
-
-export class ChoiceConfiguration extends React.Component {
-  static propTypes = {
-    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,
-      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;
-
-    return (
-      <StyledTopRow>
-        {index > 0 && (
-          <StyledIndex type="title">
-            {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
-          </StyledIndex>
-        )}
-
-        <StyledToggle>
-          <InputToggle
-            onChange={this.onCheckedChange}
-            label={!noLabels ? 'Correct' : ''}
-            checked={!!data.correct}
-            error={noCorrectAnswerError}
-          />
-        </StyledToggle>
-
-        <StyledMiddleColumn>
-          <EditableHtmlContainer
-            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 && <StyledErrorText>{error}</StyledErrorText>}
-
-          {allowFeedBack && (
-            <Feedback
-              {...data.feedback}
-              correct={data.correct}
-              defaults={defaultFeedback}
-              onChange={this.onFeedbackValueChange}
-              toolbarOpts={toolbarOpts}
-            />
-          )}
-        </StyledMiddleColumn>
-
-        {allowFeedBack && (
-          <StyledFeedback>
-            <InputContainer label={!noLabels ? 'Feedback' : ''}>
-              <StyledFeedbackIcon>
-                <FeedbackMenu onChange={this.onFeedbackTypeChange} value={data.feedback} />
-              </StyledFeedbackIcon>
-            </InputContainer>
-          </StyledFeedback>
-        )}
-
-        {allowDelete && (
-          <StyledDelete>
-            <InputContainer label={!noLabels ? 'Delete' : ''}>
-              <StyledDeleteIcon>
-                <IconButton aria-label="delete" onClick={onDelete} size="large">
-                  <ActionDelete />
-                </IconButton>
-              </StyledDeleteIcon>
-            </InputContainer>
-          </StyledDelete>
-        )}
-      </StyledTopRow>
-    );
-  }
-}
-
-export default ChoiceConfiguration;

package/src/choice-utils.js

@@ -1,30 +0,0 @@
-import { includes } from 'lodash-es';
-
-/**
- * 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

@@ -1,112 +0,0 @@
-import EditableHtml from '@pie-lib/editable-html-tip-tap';
-import { InputContainer } from '@pie-lib/render-ui';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import Group from './group';
-
-// - mathquill error window not defined
-const StyledEditableHTML = styled(EditableHtml)(({ theme }) => ({
-  fontFamily: theme.typography.fontFamily,
-}));
-
-const feedbackLabels = {
-  default: 'Simple Feedback',
-  none: 'No Feedback',
-  custom: 'Customized Feedback',
-};
-
-const StyledFeedbackSelector = styled('div')(({ theme }) => ({
-  marginBottom: theme.spacing(1),
-}));
-
-const StyledInputContainer = styled(InputContainer)(() => ({
-  paddingBottom: 0,
-}));
-
-const StyledCustomHolder = styled('div')(({ theme }) => ({
-  marginTop: '0px',
-  background: theme.palette.grey[300],
-  padding: 0,
-  marginBottom: theme.spacing(2),
-  borderRadius: '4px',
-}));
-
-const StyledDefaultHolder = styled('div')(({ theme }) => ({
-  marginTop: '0px',
-  background: theme.palette.grey[300],
-  padding: theme.spacing(2),
-  marginBottom: theme.spacing(2),
-  borderRadius: '4px',
-  fontFamily: theme.typography.fontFamily,
-  cursor: 'default',
-}));
-
-const StyledGroup = styled(Group)(({ theme }) => ({
-  paddingTop: theme.spacing(1),
-}));
-
-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),
-    label: PropTypes.string.isRequired,
-    feedback: PropTypes.shape(FeedbackType).isRequired,
-    onChange: PropTypes.func.isRequired,
-    toolbarOpts: PropTypes.object,
-    mathMlOptions: 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, label, feedback, toolbarOpts, mathMlOptions = {} } = this.props;
-
-    const feedbackKeys = keys || Object.keys(feedbackLabels);
-
-    return (
-      <StyledFeedbackSelector>
-        <StyledInputContainer label={label} extraClasses={{ label: { transform: 'translateY(-20%)' } }}>
-          <StyledGroup
-            keys={feedbackKeys}
-            label={label}
-            value={feedback.type}
-            onChange={this.changeType}
-            feedbackLabels={feedbackLabels}
-          />
-        </StyledInputContainer>
-
-        {feedback.type === 'custom' && (
-          <StyledCustomHolder>
-            <StyledEditableHTML
-              onChange={this.changeCustom}
-              markup={feedback.custom || ''}
-              toolbarOpts={toolbarOpts}
-              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-              mathMlOptions={mathMlOptions}
-            />
-          </StyledCustomHolder>
-        )}
-
-        {feedback.type === 'default' && <StyledDefaultHolder> {feedback.default}</StyledDefaultHolder>}
-      </StyledFeedbackSelector>
-    );
-  }
-}
-
-export default FeedbackSelector;

package/src/feedback-config/group.jsx

@@ -1,51 +0,0 @@
-import PropTypes from 'prop-types';
-import RadioWithLabel from '../radio-with-label';
-import React from 'react';
-import { styled } from '@mui/material/styles';
-
-const StyledChoiceHolder = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledChoice = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledRadioWithLabel = styled(RadioWithLabel)(({ theme }) => ({
-  '& .MuiFormControlLabel-label': {
-    fontSize: theme.typography.fontSize - 2,
-  },
-}));
-
-const Group = (props) => {
-  const { feedbackLabels, value, className, onChange, keys } = props;
-
-  return (
-    <StyledChoiceHolder className={className}>
-      {keys.map((key) => {
-        return (
-          <StyledChoice key={key}>
-            <StyledRadioWithLabel
-              value={key}
-              checked={value === key}
-              onChange={(e) => onChange(e.currentTarget.value)}
-              label={feedbackLabels[key]}
-            />
-          </StyledChoice>
-        );
-      })}
-    </StyledChoiceHolder>
-  );
-};
-
-Group.propTypes = {
-  className: PropTypes.string,
-  feedbackLabels: PropTypes.object.isRequired,
-  value: PropTypes.string.isRequired,
-  keys: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func,
-};
-
-export default Group;