@pie-lib/config-ui 11.0.24-next.4 → 11.0.25

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

@@ -9,18 +9,18 @@ export class IconMenu extends React.Component {
   static propTypes = {
     opts: PropTypes.object,
     onClick: PropTypes.func.isRequired,
-    iconButtonElement: PropTypes.any
+    iconButtonElement: PropTypes.any,
   };
 
   constructor(props) {
     super(props);
     this.state = {
       anchorEl: undefined,
-      open: false
+      open: false,
     };
   }
 
-  handleClick = event => {
+  handleClick = (event) => {
     this.setState({ open: true, anchorEl: event.currentTarget });
   };
 
@@ -33,7 +33,7 @@ export class IconMenu extends React.Component {
 
     const keys = Object.keys(opts);
 
-    const handleMenuClick = key => () => {
+    const handleMenuClick = (key) => () => {
       onClick(key);
       this.handleRequestClose();
     };
@@ -41,12 +41,7 @@ export class IconMenu extends React.Component {
     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}
-        >
+        <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]}
@@ -62,11 +57,11 @@ export default class FeedbackMenu extends React.Component {
   static propTypes = {
     value: PropTypes.object,
     onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired
+    classes: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
-    classes: {}
+    classes: {},
   };
 
   render() {
@@ -75,12 +70,7 @@ export default class FeedbackMenu extends React.Component {
     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 tooltip = t === 'custom' ? 'Custom Feedback' : t === 'default' ? 'Default Feedback' : 'Feedback disabled';
 
     const icon = (
       <IconButton className={classes.icon} aria-label={tooltip}>
@@ -91,11 +81,11 @@ export default class FeedbackMenu extends React.Component {
     return (
       <IconMenu
         iconButtonElement={icon}
-        onClick={key => onChange(key)}
+        onClick={(key) => onChange(key)}
         opts={{
           none: 'No Feedback',
           default: 'Default',
-          custom: 'Custom'
+          custom: 'Custom',
         }}
       />
     );

package/src/choice-configuration/index.jsx

@@ -11,11 +11,11 @@ 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,
@@ -32,7 +32,7 @@ const EditableHtmlContainer = withStyles(theme => ({
     error,
     maxImageWidth,
     maxImageHeight,
-    uploadSoundSupport
+    uploadSoundSupport,
   }) => {
     const names = classNames(classes.labelContainer, className);
 
@@ -58,22 +58,22 @@ const EditableHtmlContainer = withStyles(theme => ({
         </div>
       </InputContainer>
     );
-  }
+  },
 );
 
 const Feedback = withStyles(() => ({
   text: {
-    width: '100%'
+    width: '100%',
   },
   feedbackContainer: {
-    position: 'relative'
+    position: 'relative',
   },
   arrowIcon: {
     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 +120,20 @@ 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,10 +141,10 @@ 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 });
@@ -153,7 +153,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;
 
@@ -162,7 +162,7 @@ export class ChoiceConfiguration extends React.Component {
     }
   };
 
-  onFeedbackValueChange = v => {
+  onFeedbackValueChange = (v) => {
     const { data, onChange } = this.props;
 
     if (data.feedback.type !== 'custom') {
@@ -174,7 +174,7 @@ 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') {
@@ -205,7 +205,7 @@ export class ChoiceConfiguration extends React.Component {
       toolbarOpts,
       error,
       noCorrectAnswerError,
-      uploadSoundSupport
+      uploadSoundSupport,
     } = this.props;
 
     const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
@@ -257,7 +257,7 @@ export class ChoiceConfiguration extends React.Component {
                 onChange={this.onFeedbackTypeChange}
                 value={data.feedback}
                 classes={{
-                  icon: classes.feedbackIcon
+                  icon: classes.feedbackIcon,
                 }}
               />
             </InputContainer>
@@ -275,55 +275,55 @@ export class ChoiceConfiguration extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   index: {
-    padding: '24px 10px 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: '12px',
-    color: 'red'
-  }
+    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,7 +8,7 @@ import Group from './group';
 const feedbackLabels = {
   default: 'Simple Feedback',
   none: 'No Feedback',
-  custom: 'Customized Feedback'
+  custom: 'Customized Feedback',
 };
 
 const holder = (theme, extras) => ({
@@ -16,42 +16,42 @@ const holder = (theme, extras) => ({
   background: '#e0dee0',
   padding: theme.spacing.unit * 0.9,
   marginBottom: theme.spacing.unit * 2,
-  ...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: '#e0dee0',
-    padding: 0
+    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 {
@@ -61,15 +61,15 @@ 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 });
   };
@@ -106,9 +106,7 @@ export class FeedbackSelector extends React.Component {
             />
           </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

@@ -6,33 +6,33 @@ import classNames from 'classnames';
 
 const styles = () => ({
   radioLabel: {
-    fontSize: '12px'
+    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
+                label: classes.radioLabel,
               }}
-              onChange={e => onChange(e.currentTarget.value)}
+              onChange={(e) => onChange(e.currentTarget.value)}
               label={feedbackLabels[key]}
             />
           </div>
@@ -48,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,16 +36,16 @@ 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) {

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,7 +14,7 @@ import { withStyles } from '@material-ui/core/styles';
 const RawHelpButton = ({ onClick, classes }) => (
   <IconButton
     classes={{
-      label: classes.icon
+      label: classes.icon,
     }}
     onClick={onClick}
   >
@@ -23,15 +23,15 @@ const RawHelpButton = ({ onClick, classes }) => (
 );
 RawHelpButton.propTypes = {
   onClick: PropTypes.func,
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
 };
 
 export const HelpButton = withStyles({
   icon: {
     '&:hover': {
-      color: '#ddd'
-    }
-  }
+      color: '#ddd',
+    },
+  },
 })(RawHelpButton);
 
 export const HelpDialog = ({ open, onClose, children, title }) => (
@@ -52,19 +52,19 @@ 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,
     };
   }
 
@@ -73,11 +73,7 @@ class Help extends React.Component {
     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,8 +1,5 @@
 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';
@@ -54,5 +51,5 @@ export {
   withStatefulModel,
   Toggle,
   DisplaySize,
-  settings
+  settings,
 };

package/src/input.jsx

@@ -10,42 +10,42 @@ export default class Input extends React.Component {
     label: PropTypes.string,
     type: PropTypes.string.isRequired,
     error: PropTypes.func,
-    noModelUpdateOnError: PropTypes.bool
+    noModelUpdateOnError: PropTypes.bool,
   };
 
   static defaultProps = {
     type: 'text',
     error: (value, type) => (type === 'number' ? !value || isNaN(value) : !value),
-    noModelUpdateOnError: false
+    noModelUpdateOnError: false,
   };
 
   constructor(props) {
     super(props);
 
     this.state = {
-      value: props.value
+      value: props.value,
     };
   }
 
   componentWillReceiveProps(newProps) {
     this.setState({
-      value: newProps.value
+      value: newProps.value,
     });
   }
 
-  onChange = event => {
+  onChange = (event) => {
     const { type, onChange, error } = this.props;
     const value = event.target.value;
 
     if (error(value, type)) {
       this.setState({
         error: true,
-        value: event.target.value
+        value: event.target.value,
       });
     } else {
       this.setState({
         error: false,
-        value: event.target.value
+        value: event.target.value,
       });
 
       onChange(event);