@pie-lib/config-ui 11.30.0-mui-update.0 → 11.30.1-beta-1

package/src/choice-configuration/index.jsx

@@ -1,179 +1,117 @@
 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 { 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 EditableHtml from '@pie-lib/editable-html-tip-tap';
 import { InputCheckbox, InputRadio } from '../inputs';
 import FeedbackMenu from './feedback-menu';
 
-// - mathquill error window not defined
-let EditableHtml;
-if (typeof window !== 'undefined') {
-  EditableHtml = require('@pie-lib/editable-html')['default'];
-}
-
-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 = {},
-}) => {
-  const names = classNames(className);
-
-  return (
-    <InputContainer label={label} className={names}>
-      <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 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);
 
-const StyledFeedbackContainer = styled('div')(() => ({
-  position: 'relative',
-}));
-
-const StyledArrowIcon = styled(ArrowRight)(({ theme }) => ({
-  fill: theme.palette.grey[400],
-  left: -56,
-  position: 'absolute',
-  top: 20,
-}));
-
-const StyledTextField = styled(TextField)(() => ({
-  width: '100%',
-}));
-
-const StyledEditableHtmlContainer = styled(EditableHtmlContainer)(() => ({
-  width: '100%',
-}));
-
-const Feedback = ({ value, onChange, type, correct, defaults, toolbarOpts, mathMlOptions = {} }) => {
+    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 (
-      <StyledFeedbackContainer>
-        <StyledArrowIcon />
-        <StyledTextField
+      <div className={classes.feedbackContainer}>
+        <ArrowRight className={classes.arrowIcon} />
+        <TextField
+          className={classes.text}
           label="Feedback Text"
           value={correct ? defaults.correct : defaults.incorrect}
         />
-      </StyledFeedbackContainer>
+      </div>
     );
   } else {
     return (
-      <StyledFeedbackContainer>
-        <StyledArrowIcon />
-        <StyledEditableHtmlContainer
+      <div className={classes.feedbackContainer}>
+        <ArrowRight className={classes.arrowIcon} />
+        <EditableHtmlContainer
+          className={classes.text}
           label="Feedback Text"
           value={value}
           onChange={onChange}
           toolbarOpts={toolbarOpts}
           mathMlOptions={mathMlOptions}
         />
-      </StyledFeedbackContainer>
+      </div>
     );
   }
-};
-
-const StyledIndex = styled('span')(({ theme }) => ({
-  paddingRight: theme.spacing(1),
-  paddingTop: theme.spacing(3.5),
-}));
-
-const StyledTopRow = styled('div')(() => ({
-  display: 'flex',
-}));
-
-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 StyledInput = styled('div')(() => ({
-  marginRight: 0,
-}));
-
-const StyledErrorText = styled('div')(({ theme }) => ({
-  fontSize: theme.typography.fontSize - 2,
-  color: theme.palette.error.main,
-}));
+});
 
 export class ChoiceConfiguration extends React.Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     noLabels: PropTypes.bool,
     useLetterOrdering: PropTypes.bool,
     className: PropTypes.string,
@@ -263,6 +201,7 @@ export class ChoiceConfiguration extends React.Component {
   render() {
     const {
       data,
+      classes,
       mode,
       onDelete,
       defaultFeedback,
@@ -288,47 +227,45 @@ export class ChoiceConfiguration extends React.Component {
     } = this.props;
 
     const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
-    const names = classNames(className);
+    const names = classNames(classes.choiceConfiguration, className);
 
     return (
       <div className={names}>
-        <StyledTopRow>
+        <div className={classes.topRow}>
           {index > 0 && (
-            <StyledIndex type="title">
+            <span className={classes.index} type="title">
               {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
-            </StyledIndex>
+            </span>
           )}
 
-          <StyledToggle>
-            <InputToggle
-              onChange={this.onCheckedChange}
-              label={!noLabels ? 'Correct' : ''}
-              checked={!!data.correct}
-              error={noCorrectAnswerError}
+          <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}
             />
-          </StyledToggle>
-
-          <StyledMiddleColumn>
-            <StyledInput>
-              <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}
-              />
-            </StyledInput>
-            {error && <StyledErrorText>{error}</StyledErrorText>}
+            {error && <div className={classes.errorText}>{error}</div>}
 
             {allowFeedBack && (
               <Feedback
@@ -339,39 +276,90 @@ export class ChoiceConfiguration extends React.Component {
                 toolbarOpts={toolbarOpts}
               />
             )}
-          </StyledMiddleColumn>
+          </div>
 
           {allowFeedBack && (
-            <StyledFeedback>
-              <InputContainer label={!noLabels ? 'Feedback' : ''}>
-                <StyledFeedbackIcon>
-                  <FeedbackMenu
-                    onChange={this.onFeedbackTypeChange}
-                    value={data.feedback}
-                  />
-                </StyledFeedbackIcon>
-              </InputContainer>
-            </StyledFeedback>
+            <InputContainer className={classes.feedback} label={!noLabels ? 'Feedback' : ''}>
+              <FeedbackMenu
+                onChange={this.onFeedbackTypeChange}
+                value={data.feedback}
+                classes={{
+                  icon: classes.feedbackIcon,
+                }}
+              />
+            </InputContainer>
           )}
 
           {allowDelete && (
-            <StyledDelete>
-              <InputContainer label={!noLabels ? 'Delete' : ''}>
-                <StyledDeleteIcon>
-                  <IconButton
-                    aria-label="delete"
-                    onClick={onDelete}
-                    size="large">
-                    <ActionDelete />
-                  </IconButton>
-                </StyledDeleteIcon>
-              </InputContainer>
-            </StyledDelete>
+            <InputContainer className={classes.delete} label={!noLabels ? 'Delete' : ''}>
+              <IconButton aria-label="delete" className={classes.deleteIcon} onClick={onDelete}>
+                <ActionDelete />
+              </IconButton>
+            </InputContainer>
           )}
-        </StyledTopRow>
+        </div>
       </div>
     );
   }
 }
 
-export default ChoiceConfiguration;
+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/src/feedback-config/feedback-selector.jsx

@@ -1,56 +1,54 @@
-//import EditableHTML from '@pie-lib/editable-html';
+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 { withStyles } from '@material-ui/core/styles';
 import Group from './group';
 
-
-// - mathquill error window not defined
-let EditableHtml;
-let StyledEditableHTML;
-if (typeof window !== 'undefined') {
-  EditableHtml = require('@pie-lib/editable-html')['default'];
-  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 }) => ({
+const holder = (theme, extras) => ({
   marginTop: '0px',
   background: theme.palette.grey[300],
-  padding: 0,
-  marginBottom: theme.spacing(2),
+  padding: theme.spacing.unit,
+  marginBottom: theme.spacing.unit * 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),
-}));
+  ...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']),
@@ -61,6 +59,7 @@ export const FeedbackType = {
 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,
@@ -80,41 +79,44 @@ export class FeedbackSelector extends React.Component {
   };
 
   render() {
-    const { keys, label, feedback, toolbarOpts, mathMlOptions = {} } = this.props;
+    const { keys, classes, label, feedback, toolbarOpts, mathMlOptions = {} } = this.props;
 
     const feedbackKeys = keys || Object.keys(feedbackLabels);
 
     return (
-      <StyledFeedbackSelector>
-        <StyledInputContainer
+      <div className={classes.feedbackSelector}>
+        <InputContainer
           label={label}
-          extraClasses={{ label: { transform: 'translateY(-20%)' } }}
+          className={classes.feedbackInputContainer}
+          extraClasses={{ label: classes.inputContainerLabel }}
         >
-          <StyledGroup
+          <Group
+            className={classes.group}
             keys={feedbackKeys}
             label={label}
             value={feedback.type}
             onChange={this.changeType}
             feedbackLabels={feedbackLabels}
           />
-        </StyledInputContainer>
+        </InputContainer>
 
         {feedback.type === 'custom' && (
-          <StyledCustomHolder>
-            <StyledEditableHTML
+          <div className={classes.customHolder}>
+            <EditableHTML
+              className={classes.editor}
               onChange={this.changeCustom}
               markup={feedback.custom || ''}
               toolbarOpts={toolbarOpts}
               languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
               mathMlOptions={mathMlOptions}
             />
-          </StyledCustomHolder>
+          </div>
         )}
 
-        {feedback.type === 'default' && <StyledDefaultHolder> {feedback.default}</StyledDefaultHolder>}
-      </StyledFeedbackSelector>
+        {feedback.type === 'default' && <div className={classes.defaultHolder}> {feedback.default}</div>}
+      </div>
     );
   }
 }
 
-export default FeedbackSelector;
+export default withStyles(style)(FeedbackSelector);