@pie-lib/graphing-solution-set 2.34.3-next.2 → 2.34.4-next.0

package/src/tools/shared/point/base-point.jsx

@@ -1,15 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { types } from '@pie-lib/plot';
 import CoordinatesLabel from '../../../coordinates-label';
 import ReactDOM from 'react-dom';
 import { thinnerShapesNeeded } from '../../../utils';
 import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
+import { disabled as disabledStyle, correct, incorrect, missing } from '../styles';
+
+const StyledPointGroup = styled('g')(({ disabled, correctness }) => ({
+  cursor: 'pointer',
+  '& circle': {
+    fill: 'currentColor',
+  },
+  ...(disabled && {
+    ...disabledStyle('fill'),
+    ...disabledStyle('color'),
+  }),
+  ...(correctness === 'correct' && {
+    ...correct('fill'),
+    ...correct('color'),
+  }),
+  ...(correctness === 'incorrect' && {
+    ...incorrect('fill'),
+    ...incorrect('color'),
+  }),
+  ...(correctness === 'missing' && {
+    ...missing('fill'),
+    ...missing('color'),
+  }),
+}));
 
 export class RawBp extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     coordinatesOnHover: PropTypes.bool,
     correctness: PropTypes.string,
@@ -18,6 +41,9 @@ export class RawBp extends React.Component {
     x: PropTypes.number,
     y: PropTypes.number,
     graphProps: types.GraphPropsType.isRequired,
+    onClick: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    onTouchEnd: PropTypes.func,
   };
 
   constructor(props) {
@@ -27,7 +53,6 @@ export class RawBp extends React.Component {
 
   render() {
     const {
-      classes,
       className,
       coordinatesOnHover,
       x,
@@ -63,8 +88,10 @@ export class RawBp extends React.Component {
           onTouchEnd={onTouchEnd}
           onClick={onClick}
         />
-        <g
-          className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}
+        <StyledPointGroup
+          disabled={disabled}
+          correctness={correctness}
+          className={className}
           onMouseEnter={() => this.setState({ showCoordinates: true })}
           onMouseLeave={() => this.setState({ showCoordinates: false })}
         >
@@ -79,7 +106,7 @@ export class RawBp extends React.Component {
             coordinatesOnHover &&
             showCoordinates &&
             ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}
-        </g>
+        </StyledPointGroup>
       </>
     );
   }

package/src/tools/shared/point/index.jsx

@@ -1,4 +1,6 @@
-import { withStyles } from '@material-ui/core/styles/index';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import { gridDraggable } from '@pie-lib/plot';
 import * as utils from '../../../utils';
 import { disabled, correct, incorrect, missing } from '../styles';
@@ -24,37 +26,33 @@ const opts = {
   },
 };
 
-const styles = () => {
-  return {
-    point: {
-      '& circle, & polygon': {
-        cursor: 'pointer',
-        fill: color.defaults.SECONDARY,
-      },
-    },
-    disabled: {
-      '& circle, & polygon': {
-        ...disabled(),
-      },
-    },
-    correct: {
-      '& circle, & polygon': {
-        ...correct(),
-      },
-    },
-    incorrect: {
-      '& circle, & polygon': {
-        ...incorrect(),
-      },
-    },
-    missing: {
-      '& circle, & polygon': {
-        ...missing(),
-      },
-    },
+const StyledPointWrapper = styled('g', {
+  shouldForwardProp: (prop) => !['disabled', 'correctness'].includes(prop),
+})(({ disabled: isDisabled, correctness }) => ({
+  '& circle, & polygon': {
+    cursor: 'pointer',
+    fill: color.defaults.SECONDARY,
+    ...(isDisabled && disabled()),
+    ...(correctness === 'correct' && correct()),
+    ...(correctness === 'incorrect' && incorrect()),
+    ...(correctness === 'missing' && missing()),
+  },
+}));
+
+const withStyledWrapper = (WrappedComponent) => {
+  const WrappedComponentWithStyles = (props) => (
+    <StyledPointWrapper disabled={props.disabled} correctness={props.correctness}>
+      <WrappedComponent {...props} />
+    </StyledPointWrapper>
+  );
+  WrappedComponentWithStyles.displayName = `withStyledWrapper(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  WrappedComponentWithStyles.propTypes = {
+    disabled: PropTypes.bool,
+    correctness: PropTypes.string,
   };
+  return WrappedComponentWithStyles;
 };
 
-export const BasePoint = withStyles(styles)(gridDraggable(opts)(RawBp));
-export const ArrowPoint = withStyles(styles)(gridDraggable(opts)(RawArrow));
-export const Arrow = withStyles(styles)(gridDraggable(opts)(BaseArrow));
+export const BasePoint = gridDraggable(opts)(withStyledWrapper(RawBp));
+export const ArrowPoint = gridDraggable(opts)(withStyledWrapper(RawArrow));
+export const Arrow = gridDraggable(opts)(withStyledWrapper(BaseArrow));

package/src/undo-redo.jsx

@@ -1,16 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 import { color } from '@pie-lib/render-ui';
 import Translator from '@pie-lib/translator';
 
 const { translator } = Translator;
 
+const StyledButton = styled(Button)(({ theme }) => ({
+  color: color.text(),
+  fontWeight: 'bold',
+  marginBottom: theme.spacing(0.5),
+  '&:not(:last-of-type)': {
+    marginRight: theme.spacing(0.5),
+  },
+}));
+
 export class UndoRedo extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     onReset: PropTypes.func.isRequired,
     language: PropTypes.string,
@@ -18,30 +25,15 @@ export class UndoRedo extends React.Component {
   static defaultProps = {};
 
   render() {
-    const { classes, className, onReset = false, language } = this.props;
+    const { className, onReset = false, language } = this.props;
     return (
-      <div className={classNames(className)}>
-        <Button classes={{ root: classes.button }} onClick={() => onReset()}>
+      <div className={className}>
+        <StyledButton onClick={() => onReset()}>
           {translator.t('graphing.reset', { lng: language })}
-        </Button>
+        </StyledButton>
       </div>
     );
   }
 }
 
-const styles = (theme) => ({
-  button: {
-    color: color.text(),
-    fontWeight: 'bold',
-    marginBottom: theme.spacing.unit / 2,
-    '&:not(:last-of-type)': {
-      marginRight: theme.spacing.unit / 2,
-    },
-  },
-  undoRedoDiv: {
-    display: 'flex',
-    flexDirection: 'row',
-  },
-});
-
-export default withStyles(styles)(UndoRedo);
+export default UndoRedo;