@pie-element/ebsr 6.6.3-next.1086 → 6.6.3-next.1097

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

@@ -1,388 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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);