@pie-element/ebsr 6.6.3-next.1075 → 6.6.3-next.1082

package/configure/node_modules/@pie-lib/math-toolbar/src/editor-and-pad.jsx

@@ -0,0 +1,388 @@
+import { HorizontalKeypad, mq } from '@pie-lib/math-input';
+import React from 'react';
+import debug from 'debug';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Button from '@material-ui/core/Button';
+import { withStyles } from '@material-ui/core/styles';
+const log = debug('@pie-lib:math-toolbar:editor-and-pad');
+import { color, InputContainer } from '@pie-lib/render-ui';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import { updateSpans } from '@pie-lib/math-input';
+import isEqual from 'lodash/isEqual';
+
+const decimalRegex = /\.|,/g;
+
+const toNodeData = data => {
+  if (!data) {
+    return;
+  }
+
+  const { type, value } = data;
+
+  if (type === 'command' || type === 'cursor') {
+    return data;
+  } else if (type === 'answer') {
+    return { type: 'answer', ...data };
+  } else if (value === 'clear') {
+    return { type: 'clear' };
+  } else {
+    return { type: 'write', value };
+  }
+};
+
+export class EditorAndPad extends React.Component {
+  static propTypes = {
+    classNames: PropTypes.object,
+    keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    autoFocus: PropTypes.bool,
+    allowAnswerBlock: PropTypes.bool,
+    showKeypad: PropTypes.bool,
+    controlledKeypad: PropTypes.bool,
+    controlledKeypadMode: PropTypes.bool,
+    noDecimal: PropTypes.bool,
+    hideInput: PropTypes.bool,
+    noLatexHandling: PropTypes.bool,
+    layoutForKeyPad: PropTypes.object,
+    additionalKeys: PropTypes.array,
+    latex: PropTypes.string.isRequired,
+    onAnswerBlockAdd: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = { equationEditor: 'item-authoring', addDisabled: false };
+  }
+
+  componentDidMount() {
+    if (this.input && this.props.autoFocus) {
+      this.input.focus();
+    }
+  }
+
+  onClick = data => {
+    const { noDecimal, noLatexHandling, onChange } = this.props;
+    const c = toNodeData(data);
+    log('mathChange: ', c);
+
+    if (noLatexHandling) {
+      onChange(c.value);
+      return;
+    }
+
+    // if decimals are not allowed for this response, we discard the input
+    if (noDecimal && (c.value === '.' || c.value === ',')) {
+      return;
+    }
+
+    if (c.type === 'clear') {
+      log('call clear...');
+      this.input.clear();
+    } else if (c.type === 'command') {
+      this.input.command(c.value);
+    } else if (c.type === 'cursor') {
+      this.input.keystroke(c.value);
+    } else if (c.type === 'answer') {
+      this.input.write('%response%');
+    } else {
+      this.input.write(c.value);
+    }
+  };
+
+  updateDisable = isEdit => {
+    const { maxResponseAreas } = this.props;
+
+    if (maxResponseAreas) {
+      const shouldDisable = this.checkResponseAreasNumber(maxResponseAreas, isEdit);
+
+      this.setState({ addDisabled: shouldDisable });
+    }
+  };
+
+  onAnswerBlockClick = () => {
+    this.props.onAnswerBlockAdd();
+    this.onClick({
+      type: 'answer'
+    });
+
+    this.updateDisable(true);
+  };
+
+  onEditorChange = latex => {
+    const { onChange, noDecimal } = this.props;
+
+    updateSpans();
+
+    this.updateDisable(true);
+
+    // if no decimals are allowed and the last change is a decimal dot, discard the change
+    if (noDecimal && (latex.indexOf('.') !== -1 || latex.indexOf(',') !== -1) && this.input) {
+      this.input.clear();
+      this.input.write(latex.replace(decimalRegex, ''));
+      return;
+    }
+
+    onChange(latex);
+  };
+
+  /** Only render if the mathquill instance's latex is different
+   * or the keypad state changed from one state to the other (shown / hidden) */
+  shouldComponentUpdate(nextProps, nextState) {
+    const inputIsDifferent = this.input.mathField.latex() !== nextProps.latex;
+    log('[shouldComponentUpdate] ', 'inputIsDifferent: ', inputIsDifferent);
+
+    if (!isEqual(this.props.error, nextProps.error)) {
+      return true;
+    }
+
+    if (!inputIsDifferent && this.props.keypadMode !== nextProps.keypadMode) {
+      return true;
+    }
+
+    if (!inputIsDifferent && this.props.noDecimal !== nextProps.noDecimal) {
+      return true;
+    }
+
+    if (!inputIsDifferent && this.state.equationEditor !== nextState.equationEditor) {
+      return true;
+    }
+
+    if (!inputIsDifferent && this.props.controlledKeypad) {
+      return this.props.showKeypad !== nextProps.showKeypad;
+    }
+
+    return inputIsDifferent;
+  }
+
+  onEditorTypeChange = evt => {
+    this.setState({ equationEditor: evt.target.value });
+  };
+
+  checkResponseAreasNumber = (maxResponseAreas, isEdit) => {
+    const { latex } = (this.input && this.input.props) || {};
+
+    if (latex) {
+      const count = (latex.match(/answerBlock/g) || []).length;
+
+      return isEdit ? count === maxResponseAreas - 1 : count === maxResponseAreas;
+    }
+
+    return false;
+  };
+
+  render() {
+    const {
+      classNames,
+      keypadMode,
+      allowAnswerBlock,
+      additionalKeys,
+      controlledKeypad,
+      controlledKeypadMode,
+      showKeypad,
+      noDecimal,
+      hideInput,
+      layoutForKeyPad,
+      latex,
+      onFocus,
+      onBlur,
+      classes,
+      error
+    } = this.props;
+    const shouldShowKeypad = !controlledKeypad || (controlledKeypad && showKeypad);
+    const { addDisabled } = this.state;
+
+    log('[render]', latex);
+
+    return (
+      <div className={cx(classes.mathToolbar, classNames.mathToolbar)}>
+        <div className={cx(classes.inputAndTypeContainer, { [classes.hide]: hideInput })}>
+          {controlledKeypadMode && (
+            <InputContainer label="Equation Editor" className={classes.selectContainer}>
+              <Select
+                className={classes.select}
+                onChange={this.onEditorTypeChange}
+                value={this.state.equationEditor}
+              >
+                <MenuItem value="non-negative-integers">Numeric - Non-Negative Integers</MenuItem>
+                <MenuItem value="integers">Numeric - Integers</MenuItem>
+                <MenuItem value="decimals">Numeric - Decimals</MenuItem>
+                <MenuItem value="fractions">Numeric - Fractions</MenuItem>
+                <MenuItem value={1}>Grade 1 - 2</MenuItem>
+                <MenuItem value={3}>Grade 3 - 5</MenuItem>
+                <MenuItem value={6}>Grade 6 - 7</MenuItem>
+                <MenuItem value={8}>Grade 8 - HS</MenuItem>
+                <MenuItem value={'geometry'}>Geometry</MenuItem>
+                <MenuItem value={'advanced-algebra'}>Advanced Algebra</MenuItem>
+                <MenuItem value={'statistics'}>Statistics</MenuItem>
+                <MenuItem value={'item-authoring'}>Item Authoring</MenuItem>
+                <MenuItem value={'language'}>Language</MenuItem>
+              </Select>
+            </InputContainer>
+          )}
+          <div className={cx(classes.inputContainer, error ? classes.error : '')}>
+            <mq.Input
+              onFocus={() => {
+                onFocus && onFocus();
+                this.updateDisable(false);
+              }}
+              onBlur={event => {
+                this.updateDisable(false);
+                onBlur && onBlur(event);
+              }}
+              className={cx(
+                classes.mathEditor,
+                classNames.editor,
+                !controlledKeypadMode ? classes.longMathEditor : ''
+              )}
+              innerRef={r => (this.input = r)}
+              latex={latex}
+              onChange={this.onEditorChange}
+            />
+          </div>
+        </div>
+        {allowAnswerBlock && (
+          <Button
+            className={classes.addAnswerBlockButton}
+            type="primary"
+            style={{ bottom: shouldShowKeypad ? '320px' : '20px' }}
+            onClick={this.onAnswerBlockClick}
+            disabled={addDisabled}
+          >
+            + Response Area
+          </Button>
+        )}
+        <hr className={classes.hr} />
+        {shouldShowKeypad && (
+          <HorizontalKeypad
+            layoutForKeyPad={layoutForKeyPad}
+            additionalKeys={additionalKeys}
+            mode={controlledKeypadMode ? this.state.equationEditor : keypadMode}
+            onClick={this.onClick}
+            noDecimal={noDecimal}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+const styles = theme => ({
+  inputAndTypeContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
+    },
+    '& .mq-overarrow.mq-arrow-both': {
+      minWidth: '1.23em',
+      '& *': {
+        lineHeight: '1 !important'
+      },
+      '&:before': {
+        top: '-0.4em',
+        left: '-1px'
+      },
+      '&:after': {
+        top: '-2.36em',
+        right: '-1px'
+      },
+      '&.mq-empty:after': {
+        top: '-0.45em'
+      }
+    },
+    '& .mq-overarrow.mq-arrow-right': {
+      '&:before': {
+        top: '-0.4em',
+        right: '-1px'
+      }
+    }
+  },
+  hide: {
+    display: 'none'
+  },
+  selectContainer: {
+    flex: 'initial',
+    width: '25%',
+    minWidth: '100px',
+    marginLeft: '15px',
+    marginTop: '5px',
+    marginBottom: '5px',
+    marginRight: '5px'
+  },
+  mathEditor: {
+    maxWidth: '400px',
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: theme.spacing.unit
+  },
+  longMathEditor: {
+    maxWidth: '500px'
+  },
+  addAnswerBlockButton: {
+    position: 'absolute',
+    right: '12px',
+    border: '1px solid lightgrey'
+  },
+  hr: {
+    padding: 0,
+    margin: 0,
+    height: '1px',
+    border: 'none',
+    borderBottom: `solid 1px ${theme.palette.primary.main}`
+  },
+  mathToolbar: {
+    zIndex: 9,
+    position: 'relative',
+    textAlign: 'center',
+    width: 'auto',
+    '& > .mq-math-mode': {
+      border: 'solid 1px lightgrey'
+    },
+    '& > .mq-focused': {
+      outline: 'none',
+      boxShadow: 'none',
+      border: `dotted 1px ${theme.palette.primary.main}`,
+      borderRadius: '0px'
+    },
+    '& .mq-overarrow-inner': {
+      border: 'none !important',
+      paddingTop: '0 !important'
+    },
+    '& .mq-overarrow-inner-right': {
+      display: 'none !important'
+    },
+    '& .mq-overarrow-inner-left': {
+      display: 'none !important'
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important'
+    },
+    '& .mq-overarrow.mq-arrow-both': {
+      minWidth: '1.23em'
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85
+    }
+  },
+  inputContainer: {
+    minWidth: '500px',
+    maxWidth: '900px',
+    minHeight: '40px',
+    width: '100%',
+    display: 'flex',
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit
+  },
+  error: {
+    border: '2px solid red'
+  }
+});
+
+export default withStyles(styles)(EditorAndPad);

package/configure/node_modules/@pie-lib/math-toolbar/src/index.jsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import EditorAndPad from './editor-and-pad';
+import { DoneButton } from './done-button';
+import { withStyles } from '@material-ui/core/styles';
+import MathPreview from './math-preview';
+
+export { MathPreview };
+
+export class MathToolbar extends React.Component {
+  static propTypes = {
+    autoFocus: PropTypes.bool,
+    allowAnswerBlock: PropTypes.bool,
+    controlledKeypad: PropTypes.bool,
+    controlledKeypadMode: PropTypes.bool,
+    keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    classNames: PropTypes.object,
+    showKeypad: PropTypes.bool,
+    noDecimal: PropTypes.bool,
+    additionalKeys: PropTypes.array,
+    latex: PropTypes.string.isRequired,
+    onAnswerBlockAdd: PropTypes.func,
+    onChange: PropTypes.func,
+    onDone: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    hideDoneButton: PropTypes.bool
+  };
+
+  static defaultProps = {
+    classNames: {},
+    keypadMode: 'item-authoring',
+    autoFocus: false,
+    allowAnswerBlock: false,
+    controlledKeypad: false,
+    controlledKeypadMode: false,
+    noDecimal: false,
+    showKeypad: true,
+    additionalKeys: [],
+    onChange: () => {},
+    onAnswerBlockAdd: () => {},
+    onFocus: () => {},
+    hideDoneButton: false
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      latex: props.latex
+    };
+  }
+
+  done = () => {
+    this.props.onDone(this.state.latex);
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({ latex: nextProps.latex });
+  }
+
+  onChange = latex => {
+    this.setState({ latex });
+    this.props.onChange(latex);
+  };
+
+  render() {
+    const { latex } = this.state;
+    const {
+      classNames,
+      autoFocus,
+      allowAnswerBlock,
+      onAnswerBlockAdd,
+      controlledKeypad,
+      controlledKeypadMode,
+      keypadMode,
+      noDecimal,
+      additionalKeys,
+      showKeypad,
+      onFocus,
+      onBlur,
+      hideDoneButton,
+      error,
+      maxResponseAreas
+    } = this.props;
+
+    return (
+      <PureToolbar
+        autoFocus={autoFocus}
+        classNames={classNames}
+        onAnswerBlockAdd={onAnswerBlockAdd}
+        allowAnswerBlock={allowAnswerBlock}
+        latex={latex}
+        additionalKeys={additionalKeys}
+        noDecimal={noDecimal}
+        keypadMode={keypadMode}
+        onChange={this.onChange}
+        onDone={this.done}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        showKeypad={showKeypad}
+        controlledKeypad={controlledKeypad}
+        controlledKeypadMode={controlledKeypadMode}
+        hideDoneButton={hideDoneButton}
+        error={error}
+        maxResponseAreas={maxResponseAreas}
+      />
+    );
+  }
+}
+
+export class RawPureToolbar extends React.Component {
+  static propTypes = {
+    classNames: PropTypes.object,
+    latex: PropTypes.string.isRequired,
+    keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    hideInput: PropTypes.bool,
+    noLatexHandling: PropTypes.bool,
+    layoutForKeyPad: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    onDone: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    onAnswerBlockAdd: PropTypes.func,
+    additionalKeys: PropTypes.array,
+    onFocus: PropTypes.func,
+    classes: PropTypes.object.isRequired,
+    autoFocus: PropTypes.bool,
+    noDecimal: PropTypes.bool,
+    allowAnswerBlock: PropTypes.bool,
+    controlledKeypad: PropTypes.bool,
+    controlledKeypadMode: PropTypes.bool,
+    showKeypad: PropTypes.bool,
+    hideDoneButton: PropTypes.bool
+  };
+
+  render() {
+    const {
+      classNames,
+      autoFocus,
+      allowAnswerBlock,
+      onAnswerBlockAdd,
+      controlledKeypad,
+      controlledKeypadMode,
+      additionalKeys,
+      showKeypad,
+      keypadMode,
+      noDecimal,
+      hideInput,
+      noLatexHandling,
+      layoutForKeyPad,
+      latex,
+      onChange,
+      onDone,
+      onFocus,
+      onBlur,
+      hideDoneButton,
+      classes,
+      error,
+      maxResponseAreas
+    } = this.props;
+
+    return (
+      <div className={cx(classes.pureToolbar, (classNames || {}).toolbar)}>
+        <div />
+        <EditorAndPad
+          autoFocus={autoFocus}
+          keypadMode={keypadMode}
+          classNames={classNames || {}}
+          controlledKeypad={controlledKeypad}
+          controlledKeypadMode={controlledKeypadMode}
+          noDecimal={noDecimal}
+          hideInput={hideInput}
+          noLatexHandling={noLatexHandling}
+          layoutForKeyPad={layoutForKeyPad}
+          showKeypad={showKeypad}
+          additionalKeys={additionalKeys}
+          allowAnswerBlock={allowAnswerBlock}
+          onAnswerBlockAdd={onAnswerBlockAdd}
+          latex={latex}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          error={error}
+          maxResponseAreas={maxResponseAreas}
+        />
+        {(!controlledKeypad || (controlledKeypad && showKeypad)) && !hideDoneButton && (
+          <DoneButton onClick={onDone} />
+        )}
+      </div>
+    );
+  }
+}
+const styles = () => ({
+  pureToolbar: {
+    display: 'flex',
+    width: '100%',
+    zIndex: 8,
+    alignItems: 'center'
+  }
+});
+
+export const PureToolbar = withStyles(styles)(RawPureToolbar);

package/configure/node_modules/@pie-lib/math-toolbar/src/math-preview.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import classNames from 'classnames';
+import debug from 'debug';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { mq } from '@pie-lib/math-input';
+
+const log = debug('@pie-lib:math-toolbar:math-preview');
+
+export class RawMathPreview extends React.Component {
+  static propTypes = {
+    latex: PropTypes.string,
+    node: PropTypes.object,
+    classes: PropTypes.object,
+    isSelected: PropTypes.bool,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func
+  };
+
+  render() {
+    log('[render] data: ', this.props.node.data);
+    const latex = this.props.node.data.get('latex');
+    const { classes, isSelected, onFocus, onBlur } = this.props;
+    return (
+      <div className={classNames(classes.root, isSelected && classes.selected)}>
+        {' '}
+        <span className={classes.insideOverlay} />
+        <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />
+      </div>
+    );
+  }
+}
+
+const mp = theme => ({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    position: 'relative',
+    '& > .mq-math-mode': {
+      border: 'solid 1px lightgrey'
+    },
+    '& > .mq-focused': {
+      outline: 'none',
+      boxShadow: 'none',
+      border: 'solid 1px black',
+      borderRadius: '0px'
+    },
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
+    },
+    '& .mq-overarrow-inner': {
+      paddingTop: '0 !important',
+      border: 'none !important'
+    },
+    '& .mq-overarrow.mq-arrow-both': {
+      minWidth: '1.23em',
+      '& *': {
+        lineHeight: '1 !important'
+      },
+      '&:before': {
+        top: '-0.4em',
+        left: '-1px'
+      },
+      '&:after': {
+        top: '-2.36em',
+        right: '-1px'
+      },
+      '&.mq-empty:after': {
+        top: '-0.45em'
+      }
+    },
+    '& .mq-overarrow.mq-arrow-right': {
+      '&:before': {
+        top: '-0.4em',
+        right: '-1px'
+      }
+    },
+    '& .mq-overarrow-inner-right': {
+      display: 'none !important'
+    },
+    '& .mq-overarrow-inner-left': {
+      display: 'none !important'
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important'
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85
+    }
+  },
+  selected: {
+    border: `solid 1px ${theme.palette.primary.main}`,
+    '& > .mq-math-mode': {
+      border: 'solid 0px lightgrey'
+    }
+  },
+  insideOverlay: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0
+  }
+});
+
+export default withStyles(mp)(RawMathPreview);