@pie-lib/graphing 2.34.2-next.0 → 2.35.0-mui-update.0

package/src/key-legend.jsx

@@ -1,44 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { color } from '@pie-lib/render-ui';
 
-const styles = (theme) => ({
-  container: {
-    backgroundColor: color.defaults.WHITE,
-    padding: '20px',
-    width: '355px',
-    boxShadow: '0px 1px 5px 0px #9297A6',
-  },
-  row: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '10px',
-  },
-  title: {
-    fontSize: theme.typography.h6.fontSize,
-    marginLeft: '30px',
-    fontWeight: '700',
-    marginBottom: '10px',
-  },
-  text: {
-    textAlign: 'right',
-    marginRight: '10px',
-    width: '175px',
-    fontSize: '15px',
-  },
+const StyledContainer = styled('div')(({ theme }) => ({
+  backgroundColor: color.defaults.WHITE,
+  padding: '20px',
+  width: '355px',
+  boxShadow: '0px 1px 5px 0px #9297A6',
+}));
+
+const StyledRow = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '10px',
 });
 
-const KeyLegend = ({ className, classes, isLabelAvailable }) => {
-  const names = classNames(classes.formControl, className);
+const StyledTitle = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.h6.fontSize,
+  marginLeft: '30px',
+  fontWeight: '700',
+  marginBottom: '10px',
+}));
+
+const StyledText = styled('div')({
+  textAlign: 'right',
+  marginRight: '10px',
+  width: '175px',
+  fontSize: '15px',
+});
 
+const KeyLegend = ({ className, isLabelAvailable }) => {
   return (
-    <div className={classes.container}>
-      <div className={classes.title}>Key</div>
+    <StyledContainer className={className}>
+      <StyledTitle>Key</StyledTitle>
       {isLabelAvailable && (
-        <div className={classes.row}>
-          <div className={classes.text}> Missing Required Label </div>
+        <StyledRow>
+          <StyledText> Missing Required Label </StyledText>
           <svg width="34" height="16" viewBox="0 0 34 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="0.5" y="0.5" width="33" height="15" rx="3.5" fill="white" stroke="#BF0D00" />
             <path
@@ -50,10 +48,10 @@ const KeyLegend = ({ className, classes, isLabelAvailable }) => {
               fill="#BF0D00"
             />
           </svg>
-        </div>
+        </StyledRow>
       )}
-      <div className={classes.row}>
-        <div className={classes.text}> Answer Key Correct </div>
+      <StyledRow>
+        <StyledText> Answer Key Correct </StyledText>
         <svg width="75" height="15" viewBox="0 0 75 15" fill="none" xmlns="http://www.w3.org/2000/svg">
           <circle cx="7.5" cy="7.5" r="7.5" fill="#6A78A1" />
           <path
@@ -62,10 +60,10 @@ const KeyLegend = ({ className, classes, isLabelAvailable }) => {
           />
           <path d="M75 7L15 7" stroke="#6A78A1" strokeDasharray="4 2" />
         </svg>
-      </div>
+      </StyledRow>
       {isLabelAvailable && (
-        <div className={classes.row}>
-          <div className={classes.text}> Answer Key Correct Label </div>
+        <StyledRow>
+          <StyledText> Answer Key Correct Label </StyledText>
           <svg width="30" height="16" viewBox="0 0 30 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="0.5" y="0.5" width="29" height="15" rx="3.5" fill="white" />
             <rect x="0.5" y="0.5" width="29" height="15" rx="3.5" stroke="#6A78A1" />
@@ -74,10 +72,10 @@ const KeyLegend = ({ className, classes, isLabelAvailable }) => {
               fill="#6A78A1"
             />
           </svg>
-        </div>
+        </StyledRow>
       )}
-      <div className={classes.row}>
-        <div className={classes.text}> Student Incorrect </div>
+      <StyledRow>
+        <StyledText> Student Incorrect </StyledText>
         <svg width="77" height="16" viewBox="0 0 77 16" fill="none" xmlns="http://www.w3.org/2000/svg">
           <circle cx="8" cy="8" r="8" fill="#BF0D00" />
           <path
@@ -86,10 +84,10 @@ const KeyLegend = ({ className, classes, isLabelAvailable }) => {
           />
           <path d="M77 8L15 8" stroke="#BF0D00" strokeWidth="3" />
         </svg>
-      </div>
+      </StyledRow>
       {isLabelAvailable && (
-        <div className={classes.row}>
-          <div className={classes.text}> Incorrect Student Label </div>
+        <StyledRow>
+          <StyledText> Incorrect Student Label </StyledText>
           <svg width="42" height="16" viewBox="0 0 42 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="0.5" y="0.5" width="41" height="15" rx="3.5" fill="white" />
             <rect x="0.5" y="0.5" width="41" height="15" rx="3.5" stroke="#BF0D00" />
@@ -102,22 +100,21 @@ const KeyLegend = ({ className, classes, isLabelAvailable }) => {
               fill="#BF0D00"
             />
           </svg>
-        </div>
+        </StyledRow>
       )}
-      <div className={classes.row}>
-        <div className={classes.text}> Student Correct </div>
+      <StyledRow>
+        <StyledText> Student Correct </StyledText>
         <svg width="76" height="16" viewBox="0 0 76 16" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M76 8L14 8" stroke="#0B7D38" strokeWidth="3" />
           <circle cx="8" cy="8" r="8" fill="#0B7D38" />
           <path
             d="M12.1953 4.46875C12.3125 4.35156 12.5 4.35156 12.5938 4.46875L13.2734 5.125C13.3672 5.24219 13.3672 5.42969 13.2734 5.52344L6.24219 12.5547C6.125 12.6719 5.96094 12.6719 5.84375 12.5547L2.70312 9.4375C2.60938 9.32031 2.60938 9.13281 2.70312 9.03906L3.38281 8.35938C3.47656 8.26562 3.66406 8.26562 3.78125 8.35938L6.03125 10.6328L12.1953 4.46875Z"
             fill="white"
-          />
-        </svg>
-      </div>
+          />          </svg>
+      </StyledRow>
       {isLabelAvailable && (
-        <div className={classes.row}>
-          <div className={classes.text}> Student Correct Label </div>
+        <StyledRow>
+          <StyledText> Student Correct Label </StyledText>
           <svg width="43" height="16" viewBox="0 0 43 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="0.5" y="0.5" width="42" height="15" rx="3.5" fill="white" />
             <rect x="0.5" y="0.5" width="42" height="15" rx="3.5" stroke="#0B7D38" />
@@ -130,16 +127,15 @@ const KeyLegend = ({ className, classes, isLabelAvailable }) => {
               fill="#0B7D38"
             />
           </svg>
-        </div>
+        </StyledRow>
       )}
-    </div>
+    </StyledContainer>
   );
 };
 
 KeyLegend.propTypes = {
   className: PropTypes.string,
-  classes: PropTypes.object.isRequired,
   isLabelAvailable: PropTypes.bool,
 };
 
-export default withStyles(styles)(KeyLegend);
+export default KeyLegend;

package/src/labels.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { types } from '@pie-lib/plot';
-import { color, Readable } from '@pie-lib/render-ui';
+import { Readable } from '@pie-lib/render-ui';
 import EditableHtml from '@pie-lib/editable-html';
-import cn from 'classnames';
 
 const rotations = {
   left: -90,
@@ -43,11 +42,24 @@ const getY = (side, height) => {
   }
 };
 
+const StyledEditableHtml = styled(EditableHtml, {
+  shouldForwardProp: (prop) => !['side', 'disabledLabel'].includes(prop),
+})(({ theme, side, disabledLabel }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  textAlign: 'center',
+  padding: '0 4px',
+  ...(side === 'bottom' && {
+    marginTop: '44px',
+  }),
+  ...(disabledLabel && {
+    pointerEvents: 'none',
+  }),
+}));
+
 class RawLabel extends React.Component {
   static propTypes = {
     text: PropTypes.string,
     side: PropTypes.string,
-    classes: PropTypes.object,
     disabledLabel: PropTypes.bool,
     placeholder: PropTypes.string,
     graphProps: types.GraphPropsType.isRequired,
@@ -59,7 +71,7 @@ class RawLabel extends React.Component {
   };
 
   render() {
-    const { disabledLabel, placeholder, text, side, graphProps, classes, onChange, mathMlOptions = {} } = this.props;
+    const { disabledLabel, placeholder, text, side, graphProps, onChange, mathMlOptions = {} } = this.props;
     const { size, domain, range } = graphProps;
     const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
     const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
@@ -89,14 +101,9 @@ class RawLabel extends React.Component {
         textAnchor="middle"
       >
         <Readable false>
-          <EditableHtml
-            className={cn(
-              {
-                [classes.bottomLabel]: side === 'bottom',
-                [classes.disabledAxisLabel]: disabledLabel,
-              },
-              classes.axisLabel,
-            )}
+          <StyledEditableHtml
+            side={side}
+            disabledLabel={disabledLabel}
             markup={text || ''}
             onChange={onChange}
             placeholder={!disabledLabel && placeholder}
@@ -114,22 +121,7 @@ class RawLabel extends React.Component {
   }
 }
 
-const Label = withStyles((theme) => ({
-  label: {
-    fill: color.defaults.SECONDARY,
-  },
-  axisLabel: {
-    fontSize: theme.typography.fontSize - 2,
-    textAlign: 'center',
-    padding: '0 4px',
-  },
-  disabledAxisLabel: {
-    pointerEvents: 'none',
-  },
-  bottomLabel: {
-    marginTop: '44px',
-  },
-}))(RawLabel);
+const Label = RawLabel;
 
 export const LabelType = {
   left: PropTypes.string,
@@ -140,7 +132,6 @@ export const LabelType = {
 
 export class Labels extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     disabledLabels: PropTypes.bool,
     placeholders: PropTypes.object,

package/src/mark-label.jsx

@@ -1,71 +1,75 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import cn from 'classnames';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import AutosizeInput from 'react-input-autosize';
 import { useDebounce } from './use-debounce';
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import SvgIcon from './label-svg-icon';
 
-const inputStyles = (theme) => ({
+const StyledInputCorrect = styled('div')(({ theme }) => ({
   float: 'right',
-  padding: theme.spacing.unit * 0.5,
+  padding: theme.spacing(0.5),
   borderRadius: '4px',
   fontSize: '10px',
   backgroundColor: color.defaults.WHITE,
+  color: color.defaults.CORRECT_WITH_ICON,
+  border: `solid 1px ${color.defaults.CORRECT_WITH_ICON}`,
+}));
+
+const StyledInputIncorrect = styled('div')(({ theme }) => ({
+  float: 'right',
+  padding: theme.spacing(0.5),
+  borderRadius: '4px',
+  fontSize: '10px',
+  backgroundColor: color.defaults.WHITE,
+  color: color.defaults.INCORRECT_WITH_ICON,
+  border: `solid 1px ${color.defaults.INCORRECT_WITH_ICON}`,
+}));
+
+const StyledInputMissing = styled('div')(({ theme }) => ({
+  float: 'right',
+  padding: theme.spacing(0.5),
+  borderRadius: '4px',
+  fontSize: '10px',
+  backgroundColor: color.defaults.WHITE,
+  color: color.defaults.MISSING_WITH_ICON,
+  border: `solid 1px ${color.defaults.MISSING_WITH_ICON}`,
+  fontWeight: 'bold',
+}));
+
+const StyledIncorrect = styled('div')(({ theme }) => ({
+  float: 'right',
+  padding: 0,
+  borderRadius: '4px',
+  fontSize: '10px',
+  backgroundColor: color.defaults.WHITE,
+  color: color.defaults.INCORRECT_WITH_ICON,
+  fontWeight: 'bold',
+}));
+
+const getInputStyles = (theme, disabled, markDisabled) => ({
+  float: 'right',
+  padding: theme.spacing(0.5),
+  fontFamily: theme.typography.fontFamily,
+  fontSize: '10px',
+  border: disabled 
+    ? `solid 1px ${color.defaults.PRIMARY_DARK}`
+    : markDisabled 
+      ? `solid 1px ${color.disabled()}`
+      : `solid 1px ${color.defaults.SECONDARY}`,
+  borderRadius: '3px',
+  color: markDisabled ? color.disabled() : color.defaults.PRIMARY_DARK,
+  backgroundColor: color.defaults.WHITE,
+  WebkitOpacity: disabled ? '1' : undefined,
+  WebkitTextFillColor: markDisabled ? color.disabled() : undefined,
 });
 
-const styles = (theme) => ({
-  inputStudent: {
-    ...inputStyles(theme),
-    padding: '0',
-    border: 'none',
-    color: 'inherit',
-    fontWeight: 'bold',
-  },
-  input: {
-    float: 'right',
-    padding: theme.spacing.unit * 0.5,
-    fontFamily: theme.typography.fontFamily,
-    fontSize: '10px',
-    border: `solid 1px ${color.defaults.SECONDARY}`,
-    borderRadius: '3px',
-    color: color.defaults.PRIMARY_DARK,
-    backgroundColor: color.defaults.WHITE,
-  },
-  disabled: {
-    border: `solid 1px ${color.defaults.PRIMARY_DARK}`,
-    backgroundColor: color.defaults.WHITE,
-    '-webkit-opacity': '1',
-  },
-  disabledMark: {
-    border: `solid 1px ${color.disabled()}`,
-    color: color.disabled(),
-    '-webkit-text-fill-color': color.disabled(),
-  },
-  inputCorrect: {
-    ...inputStyles(theme),
-    color: color.defaults.CORRECT_WITH_ICON,
-    border: `solid 1px ${color.defaults.CORRECT_WITH_ICON}`,
-  },
-  inputIncorrect: {
-    ...inputStyles(theme),
-    color: color.defaults.INCORRECT_WITH_ICON,
-    border: `solid 1px ${color.defaults.INCORRECT_WITH_ICON}`,
-  },
-  inputMissing: {
-    ...inputStyles(theme),
-    color: color.defaults.MISSING_WITH_ICON,
-    border: `solid 1px ${color.defaults.MISSING_WITH_ICON}`,
-    fontWeight: 'bold',
-  },
-  incorrect: {
-    ...inputStyles(theme),
-    color: color.defaults.INCORRECT_WITH_ICON,
-    fontWeight: 'bold',
-    padding: '0',
-  },
+const getStudentInputStyles = () => ({
+  padding: '0',
+  border: 'none',
+  color: 'inherit',
+  fontWeight: 'bold',
 });
 
 export const position = (graphProps, mark, rect = { width: 0, height: 0 }) => {
@@ -99,14 +103,14 @@ export const coordinates = (graphProps, mark, rect = { width: 0, height: 0 }, po
   }
 };
 
-const LabelInput = ({ _ref, externalInputRef, label, disabled, inputClassName, onChange }) => (
+const LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, onChange }) => (
   <AutosizeInput
     inputRef={(r) => {
       _ref(r);
       externalInputRef(r);
     }}
     disabled={disabled}
-    inputClassName={inputClassName}
+    inputStyle={inputStyle}
     value={label}
     onChange={onChange}
   />
@@ -115,8 +119,9 @@ const LabelInput = ({ _ref, externalInputRef, label, disabled, inputClassName, o
 export const MarkLabel = (props) => {
   const [input, setInput] = useState(null);
   const _ref = useCallback((node) => setInput(node));
+  const theme = useTheme();
 
-  const { mark, graphProps, classes, disabled, inputRef: externalInputRef, theme } = props;
+  const { mark, graphProps, disabled, inputRef: externalInputRef } = props;
 
   const [label, setLabel] = useState(mark.label);
   const { correctness, correctnesslabel, correctlabel } = mark;
@@ -156,23 +161,25 @@ export const MarkLabel = (props) => {
 
   const disabledInput = disabled || mark.disabled;
 
-  const renderInput = (inputClass, labelValue) => (
+  const renderInput = (inputStyle, labelValue) => (
     <LabelInput
       _ref={_ref}
       externalInputRef={externalInputRef}
       label={labelValue}
       disabled={disabledInput}
-      inputClassName={cn(inputClass)}
+      inputStyle={inputStyle}
       onChange={onChange}
     />
   );
 
+  const studentInputStyle = getStudentInputStyles();
+
   if (correctness === 'correct' && correctnesslabel === 'correct' && correctlabel) {
     return (
-      <div className={classes.inputCorrect} style={style}>
+      <StyledInputCorrect style={style}>
         <SvgIcon type="correct" />
-        {renderInput(classes.inputStudent, correctlabel)}
-      </div>
+        {renderInput(studentInputStyle, correctlabel)}
+      </StyledInputCorrect>
     );
   }
 
@@ -184,44 +191,41 @@ export const MarkLabel = (props) => {
   if (correctness === 'correct' && correctnesslabel === 'incorrect') {
     return (
       <>
-        <div className={classes.inputIncorrect} style={style}>
+        <StyledInputIncorrect style={style}>
           <SvgIcon type="incorrect" />
           {label === '' ? (
             <SvgIcon type="empty" style={{ marginLeft: '3px' }} />
           ) : (
-            renderInput(classes.inputStudent, label)
+            renderInput(studentInputStyle, label)
           )}
-        </div>
-        <div className={classes.inputMissing} style={secondLabelStyle}>
-          {renderInput(classes.inputStudent, correctlabel)}
-        </div>
+        </StyledInputIncorrect>
+        <StyledInputMissing style={secondLabelStyle}>
+          {renderInput(studentInputStyle, correctlabel)}
+        </StyledInputMissing>
       </>
     );
   }
 
   if (correctness === 'missing') {
     return (
-      <div className={classes.inputMissing} style={style}>
-        {renderInput(classes.inputStudent, label)}
-      </div>
+      <StyledInputMissing style={style}>
+        {renderInput(studentInputStyle, label)}
+      </StyledInputMissing>
     );
   }
 
   if (correctness === 'incorrect') {
     return (
-      <div className={classes.incorrect} style={style}>
-        {renderInput(classes.inputStudent, label)}
-      </div>
+      <StyledIncorrect style={style}>
+        {renderInput(studentInputStyle, label)}
+      </StyledIncorrect>
     );
   }
 
   return (
     <div style={style}>
       {renderInput(
-        cn(classes.input, {
-          [classes.disabled]: disabled,
-          [classes.disabledMark]: mark.disabled,
-        }),
+        getInputStyles(theme, disabled, mark.disabled),
         label,
       )}
     </div>
@@ -232,10 +236,8 @@ MarkLabel.propTypes = {
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   graphProps: types.GraphPropsType,
-  classes: PropTypes.object,
   inputRef: PropTypes.func,
   mark: PropTypes.object,
-  theme: PropTypes.object,
 };
 
-export default withStyles(styles, { withTheme: true })(MarkLabel);
+export default MarkLabel;