@pie-lib/math-toolbar 1.31.1 → 1.32.0-mui-update.0

package/src/editor-and-pad.jsx

@@ -2,10 +2,10 @@ 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';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import isEqual from 'lodash/isEqual';
 
 import { HorizontalKeypad, mq, updateSpans } from '@pie-lib/math-input';
@@ -17,6 +17,198 @@ const log = debug('@pie-lib:math-toolbar:editor-and-pad');
 
 const decimalRegex = /\.|,/g;
 
+const MathToolbarContainer = styled('div')(({ theme }) => ({
+  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': {
+    top: '7.8px',
+    marginTop: '0px',
+    minWidth: '1.23em',
+  },
+  '& .mq-parallelogram': {
+    lineHeight: 0.85,
+  },
+}));
+
+const InputAndTypeContainer = styled('div')(({ theme, hide }) => ({
+  display: hide ? 'none' : 'flex',
+  alignItems: 'center',
+  '& .mq-editable-field .mq-cursor': {
+    top: '-4px',
+  },
+  '& .mq-math-mode .mq-selection, .mq-editable-field .mq-selection': {
+    paddingTop: '18px',
+  },
+  '& .mq-math-mode .mq-overarrow': {
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+  },
+  '& .mq-math-mode .mq-overline .mq-overline-inner': {
+    paddingTop: '0.4em !important',
+  },
+  '& .mq-overarrow.mq-arrow-both': {
+    minWidth: '1.23em',
+    '& *': {
+      lineHeight: '1 !important',
+    },
+    '&:before': {
+      top: '-0.45em',
+      left: '-1px',
+    },
+    '&:after': {
+      position: 'absolute !important',
+      top: '0px !important',
+      right: '-2px',
+    },
+    '&.mq-empty:after': {
+      top: '-0.45em',
+    },
+  },
+  '& .mq-overarrow.mq-arrow-right': {
+    '&:before': {
+      top: '-0.4em',
+      right: '-1px',
+    },
+  },
+  '& *': {
+    ...commonMqFontStyles,
+    ...supsubStyles,
+    ...longdivStyles,
+    '& .mq-math-mode .mq-sqrt-prefix': {
+      verticalAlign: 'baseline !important',
+      top: '1px !important',
+      left: '-0.1em !important',
+    },
+    '& .mq-math-mode .mq-overarc ': {
+      paddingTop: '0.45em !important',
+    },
+    '& .mq-math-mode .mq-empty': {
+      padding: '9px 1px !important',
+    },
+    '& .mq-math-mode .mq-root-block': {
+      paddingTop: '10px',
+    },
+    '& .mq-scaled .mq-sqrt-prefix': {
+      top: '0 !important',
+    },
+    '& .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
+      marginLeft: '4px !important',
+      paddingTop: '6px !important',
+      paddingLeft: '6px !important',
+    },
+    '& .mq-math-mode .mq-paren': {
+      verticalAlign: 'top !important',
+      padding: '1px 0.1em !important',
+    },
+    '& .mq-math-mode .mq-sqrt-stem': {
+      borderTop: '0.07em solid',
+      marginLeft: '-1.5px',
+      marginTop: '-2px !important',
+      paddingTop: '5px !important',
+    },
+    '& .mq-math-mode .mq-denominator': {
+      marginTop: '-5px !important',
+      padding: '0.5em 0.1em 0.1em !important',
+    },
+    '& .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {
+      padding: '0 0.1em !important',
+      paddingBottom: '0 !important',
+      marginBottom: '-2px',
+    },
+  },
+  '& span[data-prime="true"]': {
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+  },
+}));
+
+const SelectContainer = styled(InputContainer)({
+  flex: 'initial',
+  width: '25%',
+  minWidth: '100px',
+  marginLeft: '15px',
+  marginTop: '5px',
+  marginBottom: '5px',
+  marginRight: '5px',
+  '& label': {
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+  },
+  '& div': {
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+  },
+});
+
+const StyledSelect = styled(Select)({});
+
+const InputContainerDiv = styled('div')(({ theme, error }) => ({
+  minWidth: '500px',
+  maxWidth: '900px',
+  minHeight: '30px',
+  width: '100%',
+  display: 'flex',
+  marginTop: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+  ...(error && {
+    border: '2px solid red',
+  }),
+  '& .mq-sqrt-prefix .mq-scaled': {
+    verticalAlign: 'middle !important',
+  },
+}));
+
+const MathEditor = styled(mq.Input)(({ controlledKeypadMode }) => ({
+  maxWidth: controlledKeypadMode ? '400px' : '500px',
+  color: color.text(),
+  backgroundColor: color.background(),
+  padding: '2px',
+}));
+
+const AddAnswerBlockButton = styled(Button)({
+  position: 'absolute',
+  right: '12px',
+  border: '1px solid lightgrey',
+});
+
+const StyledHr = styled('hr')(({ theme }) => ({
+  padding: 0,
+  margin: 0,
+  height: '1px',
+  border: 'none',
+  borderBottom: `solid 1px ${theme.palette.primary.main}`,
+}));
+
+const KeyboardContainer = styled(HorizontalKeypad)(({ mode }) => ({
+  ...commonMqKeyboardStyles,
+  ...(mode === 'language' && {
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    },
+  }),
+}));
+
 const toNodeData = (data) => {
   if (!data) {
     return;
@@ -56,7 +248,6 @@ export class EditorAndPad extends React.Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object,
     setKeypadInteraction: PropTypes.func,
   };
 
@@ -218,7 +409,6 @@ export class EditorAndPad extends React.Component {
       latex,
       onFocus,
       onBlur,
-      classes,
       error,
     } = this.props;
     const shouldShowKeypad = !controlledKeypad || (controlledKeypad && showKeypad);
@@ -227,11 +417,11 @@ export class EditorAndPad extends React.Component {
     log('[render]', latex);
 
     return (
-      <div className={cx(classes.mathToolbar, classNames.mathToolbar)}>
-        <div className={cx(classes.inputAndTypeContainer, { [classes.hide]: hideInput })}>
+      <MathToolbarContainer className={cx(classNames.mathToolbar)}>
+        <InputAndTypeContainer hide={hideInput}>
           {controlledKeypadMode && (
-            <InputContainer label="Equation Editor" className={classes.selectContainer}>
-              <Select className={classes.select} onChange={this.onEditorTypeChange} value={this.state.equationEditor}>
+            <SelectContainer label="Equation Editor">
+              <StyledSelect 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>
@@ -244,11 +434,11 @@ export class EditorAndPad extends React.Component {
                 <MenuItem value={'advanced-algebra'}>Advanced Algebra</MenuItem>
                 <MenuItem value={'statistics'}>Statistics</MenuItem>
                 <MenuItem value={'item-authoring'}>Item Authoring</MenuItem>
-              </Select>
-            </InputContainer>
+              </StyledSelect>
+            </SelectContainer>
           )}
-          <div className={cx(classes.inputContainer, error ? classes.error : '')}>
-            <mq.Input
+          <InputContainerDiv error={error}>
+            <MathEditor
               onFocus={() => {
                 onFocus && onFocus();
                 this.updateDisable(false);
@@ -257,243 +447,39 @@ export class EditorAndPad extends React.Component {
                 this.updateDisable(false);
                 onBlur && onBlur(event);
               }}
-              className={cx(classes.mathEditor, classNames.editor, !controlledKeypadMode ? classes.longMathEditor : '')}
+              className={cx(classNames.editor)}
+              controlledKeypadMode={controlledKeypadMode}
               innerRef={(r) => (this.input = r)}
               latex={latex}
               onChange={this.onEditorChange}
             />
-          </div>
-        </div>
+          </InputContainerDiv>
+        </InputAndTypeContainer>
         {allowAnswerBlock && (
-          <Button
-            className={classes.addAnswerBlockButton}
+          <AddAnswerBlockButton
             type="primary"
             style={{ bottom: shouldShowKeypad ? '320px' : '20px' }}
             onClick={this.onAnswerBlockClick}
             disabled={addDisabled}
           >
             + Response Area
-          </Button>
+          </AddAnswerBlockButton>
         )}
-        <hr className={classes.hr} />
+        <StyledHr />
         {shouldShowKeypad && (
-          <HorizontalKeypad
-            className={cx(classes[keypadMode], classes.keyboard)}
+          <KeyboardContainer
+            mode={controlledKeypadMode ? this.state.equationEditor : keypadMode}
             controlledKeypadMode={controlledKeypadMode}
             layoutForKeyPad={layoutForKeyPad}
             additionalKeys={additionalKeys}
-            mode={controlledKeypadMode ? this.state.equationEditor : keypadMode}
             onClick={this.onClick}
             noDecimal={noDecimal}
             setKeypadInteraction={setKeypadInteraction}
           />
         )}
-      </div>
+      </MathToolbarContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  inputAndTypeContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    '& .mq-editable-field .mq-cursor': {
-      top: '-4px',
-    },
-    '& .mq-math-mode .mq-selection, .mq-editable-field .mq-selection': {
-      paddingTop: '18px',
-    },
-    '& .mq-math-mode .mq-overarrow': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-    '& .mq-math-mode .mq-overline .mq-overline-inner': {
-      paddingTop: '0.4em !important',
-    },
-    '& .mq-overarrow.mq-arrow-both': {
-      minWidth: '1.23em',
-      '& *': {
-        lineHeight: '1 !important',
-      },
-      '&:before': {
-        top: '-0.45em',
-        left: '-1px',
-      },
-      '&:after': {
-        position: 'absolute !important',
-        top: '0px !important',
-        right: '-2px',
-      },
-      '&.mq-empty:after': {
-        top: '-0.45em',
-      },
-    },
-    '& .mq-overarrow.mq-arrow-right': {
-      '&:before': {
-        top: '-0.4em',
-        right: '-1px',
-      },
-    },
-
-    '& *': {
-      ...commonMqFontStyles,
-      ...supsubStyles,
-      ...longdivStyles,
-      '& .mq-math-mode .mq-sqrt-prefix': {
-        verticalAlign: 'baseline !important',
-        top: '1px !important',
-        left: '-0.1em !important',
-      },
-
-      '& .mq-math-mode .mq-overarc ': {
-        paddingTop: '0.45em !important',
-      },
-
-      '& .mq-math-mode .mq-empty': {
-        padding: '9px 1px !important',
-      },
-
-      '& .mq-math-mode .mq-root-block': {
-        paddingTop: '10px',
-      },
-
-      '& .mq-scaled .mq-sqrt-prefix': {
-        top: '0 !important',
-      },
-
-      '& .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
-        marginLeft: '4px !important',
-        paddingTop: '6px !important',
-        paddingLeft: '6px !important',
-      },
-
-      '& .mq-math-mode .mq-paren': {
-        verticalAlign: 'top !important',
-        padding: '1px 0.1em !important',
-      },
-
-      '& .mq-math-mode .mq-sqrt-stem': {
-        borderTop: '0.07em solid',
-        marginLeft: '-1.5px',
-        marginTop: '-2px !important',
-        paddingTop: '5px !important',
-      },
-
-      '& .mq-math-mode .mq-denominator': {
-        marginTop: '-5px !important',
-        padding: '0.5em 0.1em 0.1em !important',
-      },
-
-      '& .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {
-        padding: '0 0.1em !important',
-        paddingBottom: '0 !important',
-        marginBottom: '-2px',
-      },
-    },
-
-    '& span[data-prime="true"]': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-  },
-  hide: {
-    display: 'none',
-  },
-  selectContainer: {
-    flex: 'initial',
-    width: '25%',
-    minWidth: '100px',
-    marginLeft: '15px',
-    marginTop: '5px',
-    marginBottom: '5px',
-    marginRight: '5px',
-
-    '& label': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-
-    '& div': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-  },
-  mathEditor: {
-    maxWidth: '400px',
-    color: color.text(),
-    backgroundColor: color.background(),
-    padding: '2px',
-  },
-  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': {
-      top: '7.8px',
-      marginTop: '0px',
-      minWidth: '1.23em',
-    },
-    '& .mq-parallelogram': {
-      lineHeight: 0.85,
-    },
-  },
-  inputContainer: {
-    minWidth: '500px',
-    maxWidth: '900px',
-    minHeight: '30px',
-    width: '100%',
-    display: 'flex',
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
-
-    '& .mq-sqrt-prefix .mq-scaled': {
-      verticalAlign: 'middle !important',
-    },
-  },
-  error: {
-    border: '2px solid red',
-  },
-  keyboard: commonMqKeyboardStyles,
-  language: {
-    '& *': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-  },
-});
-
-export default withStyles(styles)(EditorAndPad);
+export default EditorAndPad;

package/src/index.jsx

@@ -3,11 +3,18 @@ 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 { styled } from '@mui/material/styles';
 import MathPreview from './math-preview';
 
 export { MathPreview };
 
+const PureToolbarContainer = styled('div')({
+  display: 'flex',
+  width: '100%',
+  zIndex: 8,
+  alignItems: 'center',
+});
+
 export class MathToolbar extends React.Component {
   static propTypes = {
     autoFocus: PropTypes.bool,
@@ -131,7 +138,6 @@ export class RawPureToolbar extends React.Component {
     onAnswerBlockAdd: PropTypes.func,
     additionalKeys: PropTypes.array,
     onFocus: PropTypes.func,
-    classes: PropTypes.object.isRequired,
     autoFocus: PropTypes.bool,
     noDecimal: PropTypes.bool,
     allowAnswerBlock: PropTypes.bool,
@@ -175,13 +181,12 @@ export class RawPureToolbar extends React.Component {
       onBlur,
       hideDoneButton,
       hideDoneButtonBackground,
-      classes,
       error,
       maxResponseAreas,
     } = this.props;
 
     return (
-      <div className={cx(classes.pureToolbar, (classNames || {}).toolbar)} ref={keyPadCharacterRef}>
+      <PureToolbarContainer className={cx((classNames || {}).toolbar)} ref={keyPadCharacterRef}>
         <div />
         <EditorAndPad
           autoFocus={autoFocus}
@@ -208,17 +213,9 @@ export class RawPureToolbar extends React.Component {
         {(!controlledKeypad || (controlledKeypad && showKeypad)) && !hideDoneButton && (
           <DoneButton hideBackground={hideDoneButtonBackground} onClick={onDone} />
         )}
-      </div>
+      </PureToolbarContainer>
     );
   }
 }
-const styles = () => ({
-  pureToolbar: {
-    display: 'flex',
-    width: '100%',
-    zIndex: 8,
-    alignItems: 'center',
-  },
-});
 
-export const PureToolbar = withStyles(styles)(RawPureToolbar);
+export const PureToolbar = RawPureToolbar;