@pie-lib/config-ui 11.3.12 → 12.0.0-beta.1

package/src/choice-configuration/index.jsx

@@ -11,29 +11,27 @@ 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) => ({
+const EditableHtmlContainer = withStyles(theme => ({
   labelContainer: {},
   editorHolder: {
-    marginTop: theme.spacing.unit * 2,
-  },
+    marginTop: theme.spacing.unit * 2
+  }
 }))(
   ({
-    label,
-    classes,
-    onChange,
-    value,
-    className,
-    imageSupport,
-    disableImageAlignmentButtons,
-    disabled,
-    spellCheck,
-    nonEmpty,
-    toolbarOpts,
-    error,
-    maxImageWidth,
-    maxImageHeight,
-    uploadSoundSupport,
-  }) => {
+     label,
+     classes,
+     onChange,
+     value,
+     className,
+     imageSupport,
+     disabled,
+     spellCheck,
+     nonEmpty,
+     toolbarOpts,
+     error,
+     maxImageWidth,
+     maxImageHeight
+   }) => {
     const names = classNames(classes.labelContainer, className);
 
     return (
@@ -46,34 +44,31 @@ const EditableHtmlContainer = withStyles((theme) => ({
             nonEmpty={nonEmpty}
             onChange={onChange}
             imageSupport={imageSupport}
-            disableImageAlignmentButtons={disableImageAlignmentButtons}
             className={classes.editor}
             toolbarOpts={toolbarOpts}
             error={error}
             maxImageWidth={maxImageWidth}
             maxImageHeight={maxImageHeight}
-            uploadSoundSupport={uploadSoundSupport}
-            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
           />
         </div>
       </InputContainer>
     );
-  },
+  }
 );
 
-const Feedback = withStyles((theme) => ({
+const Feedback = withStyles(() => ({
   text: {
-    width: '100%',
+    width: '100%'
   },
   feedbackContainer: {
-    position: 'relative',
+    position: 'relative'
   },
   arrowIcon: {
-    fill: theme.palette.grey[400],
+    fill: '#ccc',
     left: -56,
     position: 'absolute',
-    top: 20,
-  },
+    top: 20
+  }
 }))(({ value, onChange, type, correct, classes, defaults, toolbarOpts }) => {
   if (!type || type === 'none') {
     return null;
@@ -120,20 +115,19 @@ export class ChoiceConfiguration extends React.Component {
       correct: PropTypes.bool,
       feedback: PropTypes.shape({
         type: PropTypes.string,
-        value: 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,
+      delete: PropTypes.func.isRequired
     }),
-    disableImageAlignmentButtons: PropTypes.bool,
     allowFeedBack: PropTypes.bool,
     allowDelete: PropTypes.bool,
-    toolbarOpts: PropTypes.object,
+    toolbarOpts: PropTypes.object
   };
 
   static defaultProps = {
@@ -141,12 +135,11 @@ export class ChoiceConfiguration extends React.Component {
     noLabels: false,
     useLetterOrdering: false,
     allowFeedBack: true,
-    allowDelete: true,
+    allowDelete: true
   };
 
-  _changeFn = (key) => (update) => {
+  _changeFn = key => update => {
     const { data, onChange } = this.props;
-
     if (onChange) {
       onChange({ ...data, [key]: update });
     }
@@ -154,7 +147,7 @@ export class ChoiceConfiguration extends React.Component {
 
   onLabelChange = this._changeFn('label');
 
-  onCheckedChange = (event) => {
+  onCheckedChange = event => {
     const correct = event.target.checked;
     const { data, onChange } = this.props;
 
@@ -163,7 +156,7 @@ export class ChoiceConfiguration extends React.Component {
     }
   };
 
-  onFeedbackValueChange = (v) => {
+  onFeedbackValueChange = v => {
     const { data, onChange } = this.props;
 
     if (data.feedback.type !== 'custom') {
@@ -175,10 +168,9 @@ export class ChoiceConfiguration extends React.Component {
     if (onChange) onChange({ ...data, feedback: fb });
   };
 
-  onFeedbackTypeChange = (t) => {
+  onFeedbackTypeChange = t => {
     const { data, onChange } = this.props;
     const fb = { ...data.feedback, type: t };
-
     if (fb.type !== 'custom') {
       fb.value = undefined;
     }
@@ -198,7 +190,6 @@ export class ChoiceConfiguration extends React.Component {
       noLabels,
       useLetterOrdering,
       imageSupport,
-      disableImageAlignmentButtons,
       disabled,
       spellCheck,
       nonEmpty,
@@ -206,13 +197,11 @@ export class ChoiceConfiguration extends React.Component {
       allowDelete,
       toolbarOpts,
       error,
-      noCorrectAnswerError,
-      uploadSoundSupport,
+      noCorrectAnswerError
     } = this.props;
 
     const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
     const names = classNames(classes.choiceConfiguration, className);
-
     return (
       <div className={names}>
         <div className={classes.topRow}>
@@ -221,7 +210,6 @@ export class ChoiceConfiguration extends React.Component {
               {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
             </span>
           )}
-
           <InputToggle
             className={classes.toggle}
             onChange={this.onCheckedChange}
@@ -229,20 +217,17 @@ export class ChoiceConfiguration extends React.Component {
             checked={!!data.correct}
             error={noCorrectAnswerError}
           />
-
           <div className={classes.middleColumn}>
             <EditableHtmlContainer
               label={!noLabels ? 'Label' : ''}
               value={data.label}
               onChange={this.onLabelChange}
               imageSupport={imageSupport}
-              disableImageAlignmentButtons={disableImageAlignmentButtons}
               disabled={disabled}
               spellCheck={spellCheck}
               nonEmpty={nonEmpty}
               toolbarOpts={toolbarOpts}
               error={error}
-              uploadSoundSupport={uploadSoundSupport}
             />
             {error && <div className={classes.errorText}>{error}</div>}
 
@@ -256,19 +241,17 @@ export class ChoiceConfiguration extends React.Component {
               />
             )}
           </div>
-
           {allowFeedBack && (
             <InputContainer className={classes.feedback} label={!noLabels ? 'Feedback' : ''}>
               <FeedbackMenu
                 onChange={this.onFeedbackTypeChange}
                 value={data.feedback}
                 classes={{
-                  icon: classes.feedbackIcon,
+                  icon: classes.feedbackIcon
                 }}
               />
             </InputContainer>
           )}
-
           {allowDelete && (
             <InputContainer className={classes.delete} label={!noLabels ? 'Delete' : ''}>
               <IconButton aria-label="delete" className={classes.deleteIcon} onClick={onDelete}>
@@ -282,55 +265,55 @@ export class ChoiceConfiguration extends React.Component {
   }
 }
 
-const styles = (theme) => ({
+const styles = theme => ({
   index: {
-    padding: '24px 8px 0 0',
+    padding: '24px 10px 0 0'
   },
   choiceConfiguration: {},
   topRow: {
-    display: 'flex',
+    display: 'flex'
   },
   value: {
     flex: '0.5',
-    paddingRight: theme.spacing.unit,
+    paddingRight: theme.spacing.unit
   },
   editorHolder: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing.unit * 2
   },
   toggle: {
-    flex: '0 1 auto',
+    flex: '0 1 auto'
   },
   feedback: {
     flex: '0 1 auto',
     paddingTop: theme.spacing.unit,
     paddingLeft: 0,
     marginLeft: 0,
-    paddingRight: theme.spacing.unit * 3,
+    paddingRight: theme.spacing.unit * 3
   },
   feedbackIcon: {
     margin: 0,
     paddingLeft: 0,
-    width: 'inherit',
+    width: 'inherit'
   },
   deleteIcon: {
     margin: 0,
-    width: 'inherit',
+    width: 'inherit'
   },
   delete: {
     flex: '0 1 auto',
     paddingTop: theme.spacing.unit,
     paddingLeft: 0,
-    marginLeft: 0,
+    marginLeft: 0
   },
   middleColumn: {
     display: 'flex',
     flex: 1,
-    flexDirection: 'column',
+    flexDirection: 'column'
   },
   errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-  },
+    fontSize: '12px',
+    color: 'red'
+  }
 });
 
 export default withStyles(styles)(ChoiceConfiguration);

package/src/choice-utils.js

@@ -5,7 +5,7 @@ import includes from 'lodash/includes';
  * @param {Object} model the model to normalize
  * @return {Object} the updated model
  */
-export const normalizeChoices = (model) => {
+export const normalizeChoices = model => {
   const choices = model.choices.map((c, index) => {
     if (!c.value) {
       c.value = `${index}`;

package/src/feedback-config/feedback-selector.jsx

@@ -8,51 +8,50 @@ import Group from './group';
 const feedbackLabels = {
   default: 'Simple Feedback',
   none: 'No Feedback',
-  custom: 'Customized Feedback',
+  custom: 'Customized Feedback'
 };
 
 const holder = (theme, extras) => ({
   marginTop: '0px',
-  background: theme.palette.grey[300],
-  padding: theme.spacing.unit,
+  background: '#e0dee0',
+  padding: theme.spacing.unit * 0.9,
   marginBottom: theme.spacing.unit * 2,
-  borderRadius: '4px',
-  ...extras,
+  ...extras
 });
 
-const style = (theme) => ({
+const style = theme => ({
   feedbackSelector: {
-    marginBottom: theme.spacing.unit,
+    marginBottom: theme.spacing.unit
   },
   label: {
-    cursor: 'pointer',
+    cursor: 'pointer'
   },
   inputContainerLabel: {
-    transform: 'translateY(-20%)',
+    transform: 'translateY(-20%)'
   },
   feedbackInputContainer: {
-    paddingBottom: 0,
+    paddingBottom: 0
   },
   customHolder: holder(theme, {
-    background: theme.palette.grey[400],
-    padding: 0,
+    background: '#e0dee0',
+    padding: 0
   }),
   defaultHolder: holder(theme, {
     fontFamily: theme.typography.fontFamily,
-    cursor: 'default',
+    cursor: 'default'
   }),
   editor: {
-    fontFamily: theme.typography.fontFamily,
+    fontFamily: theme.typography.fontFamily
   },
   group: {
-    paddingTop: theme.spacing.unit,
-  },
+    paddingTop: theme.spacing.unit
+  }
 });
 
 export const FeedbackType = {
   type: PropTypes.oneOf(['default', 'custom', 'none']),
   default: PropTypes.string,
-  custom: PropTypes.string,
+  custom: PropTypes.string
 };
 
 export class FeedbackSelector extends React.Component {
@@ -62,18 +61,16 @@ export class FeedbackSelector extends React.Component {
     label: PropTypes.string.isRequired,
     feedback: PropTypes.shape(FeedbackType).isRequired,
     onChange: PropTypes.func.isRequired,
-    toolbarOpts: PropTypes.object,
+    toolbarOpts: PropTypes.object
   };
 
-  changeType = (type) => {
+  changeType = type => {
     const { onChange, feedback } = this.props;
-
     onChange({ ...feedback, type });
   };
 
-  changeCustom = (custom) => {
+  changeCustom = custom => {
     const { onChange, feedback } = this.props;
-
     onChange({ ...feedback, type: 'custom', custom });
   };
 
@@ -98,7 +95,6 @@ export class FeedbackSelector extends React.Component {
             feedbackLabels={feedbackLabels}
           />
         </InputContainer>
-
         {feedback.type === 'custom' && (
           <div className={classes.customHolder}>
             <EditableHTML
@@ -106,12 +102,12 @@ export class FeedbackSelector extends React.Component {
               onChange={this.changeCustom}
               markup={feedback.custom || ''}
               toolbarOpts={toolbarOpts}
-              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
             />
           </div>
         )}
-
-        {feedback.type === 'default' && <div className={classes.defaultHolder}> {feedback.default}</div>}
+        {feedback.type === 'default' && (
+          <div className={classes.defaultHolder}> {feedback.default}</div>
+        )}
       </div>
     );
   }

package/src/feedback-config/group.jsx

@@ -4,33 +4,35 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 
-const styles = (theme) => ({
+const styles = () => ({
   radioLabel: {
-    fontSize: theme.typography.fontSize - 2,
+    fontSize: '12px'
   },
   choice: {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   choiceHolder: {
     display: 'flex',
-    alignItems: 'center',
-  },
+    alignItems: 'center'
+  }
 });
 
-const Group = (props) => {
+const Group = props => {
   const { feedbackLabels, value, classes, className, onChange, keys } = props;
 
   return (
     <div className={classNames(classes.choiceHolder, className)}>
-      {keys.map((key) => {
+      {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)}
+              classes={{
+                label: classes.radioLabel
+              }}
+              onChange={e => onChange(e.currentTarget.value)}
               label={feedbackLabels[key]}
             />
           </div>
@@ -46,7 +48,7 @@ Group.propTypes = {
   value: PropTypes.string.isRequired,
   classes: PropTypes.object.isRequired,
   keys: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func,
+  onChange: PropTypes.func
 };
 
 export default withStyles(styles)(Group);

package/src/feedback-config/index.jsx

@@ -14,19 +14,19 @@ export { FeedbackSelector };
 const style = {
   feedbackContainer: {
     display: 'flex',
-    flexDirection: 'column',
-  },
+    flexDirection: 'column'
+  }
 };
 
-export const buildDefaults = (input) => {
+export const buildDefaults = input => {
   return merge(
     {},
     {
       correct: { type: 'default', default: 'Correct' },
       incorrect: { type: 'default', default: 'Incorrect' },
-      partial: { type: 'default', default: 'Nearly' },
+      partial: { type: 'default', default: 'Nearly' }
     },
-    input,
+    input
   );
 };
 
@@ -36,29 +36,26 @@ export class FeedbackConfig extends React.Component {
     feedback: PropTypes.shape({
       correct: PropTypes.shape(FeedbackType),
       incorrect: PropTypes.shape(FeedbackType),
-      partial: PropTypes.shape(FeedbackType),
+      partial: PropTypes.shape(FeedbackType)
     }),
     onChange: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
-    toolbarOpts: PropTypes.object,
+    toolbarOpts: PropTypes.object
   };
 
   static defaultProps = {
     allowPartial: true,
-    feedback: buildDefaults(),
+    feedback: buildDefaults()
   };
 
   onChange(key, config) {
     const { feedback, onChange } = this.props;
     const update = { ...feedback, [key]: config };
-
     onChange(update);
   }
 
   onCorrectChange = this.onChange.bind(this, 'correct');
-
   onIncorrectChange = this.onChange.bind(this, 'incorrect');
-
   onPartialChange = this.onChange.bind(this, 'partial');
 
   render() {
@@ -69,7 +66,6 @@ export class FeedbackConfig extends React.Component {
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Typography className={classes.heading}>Feedback</Typography>
         </ExpansionPanelSummary>
-
         <ExpansionPanelDetails>
           <div className={classes.feedbackContainer}>
             <FeedbackSelector
@@ -78,7 +74,6 @@ export class FeedbackConfig extends React.Component {
               onChange={this.onCorrectChange}
               toolbarOpts={toolbarOpts}
             />
-
             {allowPartial && (
               <FeedbackSelector
                 label="If partially correct, show"
@@ -87,7 +82,6 @@ export class FeedbackConfig extends React.Component {
                 toolbarOpts={toolbarOpts}
               />
             )}
-
             <FeedbackSelector
               label="If incorrect, show"
               feedback={feedback.incorrect}

package/src/form-section.jsx

@@ -3,14 +3,14 @@ import Typography from '@material-ui/core/Typography';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 
-const styles = (theme) => ({
+const styles = theme => ({
   formSection: {
     marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
   },
   label: {
-    marginBottom: theme.spacing.unit,
-  },
+    marginBottom: theme.spacing.unit
+  }
 });
 
 export default withStyles(styles)(({ className, classes, label, children, labelExtraStyle }) => (

package/src/help.jsx

@@ -14,26 +14,25 @@ import { withStyles } from '@material-ui/core/styles';
 const RawHelpButton = ({ onClick, classes }) => (
   <IconButton
     classes={{
-      label: classes.icon,
+      label: classes.icon
     }}
     onClick={onClick}
   >
     <HelpIcon />
   </IconButton>
 );
-
 RawHelpButton.propTypes = {
   onClick: PropTypes.func,
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
 };
 
-export const HelpButton = withStyles((theme) => ({
+export const HelpButton = withStyles({
   icon: {
     '&:hover': {
-      color: theme.palette.grey[300],
-    },
-  },
-}))(RawHelpButton);
+      color: '#ddd'
+    }
+  }
+})(RawHelpButton);
 
 export const HelpDialog = ({ open, onClose, children, title }) => (
   <Dialog open={open} onRequestClose={onClose}>
@@ -53,30 +52,32 @@ HelpDialog.propTypes = {
   open: PropTypes.bool,
   onClose: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
 };
 
 class Help extends React.Component {
   static propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    title: PropTypes.string,
+    title: PropTypes.string
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      open: false,
+      open: false
     };
   }
 
   render() {
     const { children, title } = this.props;
-
     return (
       <div>
         <HelpButton color="accent" onClick={() => this.setState({ open: true })} />
-
-        <HelpDialog open={this.state.open} title={title} onClose={() => this.setState({ open: false })}>
+        <HelpDialog
+          open={this.state.open}
+          title={title}
+          onClose={() => this.setState({ open: false })}
+        >
           {children}
         </HelpDialog>
       </div>

package/src/index.js

@@ -1,5 +1,8 @@
 import AlertDialog from './alert-dialog';
-import FeedbackConfig, { FeedbackSelector, buildDefaults as feedbackConfigDefaults } from './feedback-config';
+import FeedbackConfig, {
+  FeedbackSelector,
+  buildDefaults as feedbackConfigDefaults
+} from './feedback-config';
 import { InputCheckbox, InputSwitch, InputRadio } from './inputs';
 import Langs, { LanguageControls } from './langs';
 import Tabs from './tabs';
@@ -51,5 +54,5 @@ export {
   withStatefulModel,
   Toggle,
   DisplaySize,
-  settings,
+  settings
 };