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

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

@@ -1,22 +1,20 @@
-import { withStyles } from '@material-ui/core/styles/index';
+import React from 'react';
+import { styled } from '@mui/material/styles';
 import { gridDraggable } from '@pie-lib/plot';
 import * as utils from '../../../utils';
-import { disabled, correct, incorrect, missing, disabledSecondary } from '../styles';
 import { RawBp } from './base-point';
 import { RawArrow } from './arrow-point';
-import { color } from '@pie-lib/render-ui';
-import BaseArrow from './arrow';
+import { BaseArrow } from './arrow';
 
+// Drag & bounds options
 const opts = {
   bounds: (props, { domain, range }) => {
     const { x, y } = props;
     const area = { left: x, top: y, bottom: y, right: x };
-
     return utils.bounds(area, domain, range);
   },
   anchorPoint: (props) => {
     const { x, y } = props;
-
     return { x, y };
   },
   fromDelta: (props, delta) => {
@@ -24,42 +22,27 @@ const opts = {
   },
 };
 
-const styles = () => {
-  return {
-    point: {
-      '& circle, & polygon': {
-        cursor: 'pointer',
-        fill: color.defaults.BLACK,
-      },
-    },
-    disabled: {
-      '& circle, & polygon': {
-        ...disabled(),
-      },
-    },
-    disabledSecondary: {
-      '& circle, & polygon': {
-        ...disabledSecondary(),
-      },
-    },
-    correct: {
-      '& circle, & polygon': {
-        ...correct(),
-      },
-    },
-    incorrect: {
-      '& circle, & polygon': {
-        ...incorrect(),
-      },
-    },
-    missing: {
-      '& circle, & polygon': {
-        ...missing(),
-      },
-    },
-  };
-};
+// Common styled point
+const PointStyle = styled('g')(() => ({
+  '& circle, & polygon': {
+    cursor: 'pointer',
+  },
+}));
+
+export const BasePoint = gridDraggable(opts)((props) => (
+  <PointStyle {...props}>
+    <RawBp {...props} />
+  </PointStyle>
+));
+
+export const ArrowPoint = gridDraggable(opts)((props) => (
+  <PointStyle {...props}>
+    <RawArrow {...props} />
+  </PointStyle>
+));
 
-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 Arrow = gridDraggable(opts)((props) => (
+  <PointStyle {...props}>
+    <BaseArrow {...props} />
+  </PointStyle>
+));

package/src/tools/vector/component.jsx

@@ -3,23 +3,18 @@ import { Arrow } from '../shared/point';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { getDistanceBetweenTwoPoints } from '../../utils';
 
-const lineStyles = (theme) => ({
-  line: styles.line(theme),
-  disabled: styles.disabled(theme),
-  disabledSecondary: styles.disabledSecondary(theme),
-  correct: styles.correct(theme, 'stroke'),
-  incorrect: styles.incorrect(theme, 'stroke'),
-  missing: styles.missing(theme, 'stroke'),
-});
+const StyledLine = styled('line')(({ theme, disabled, correctness }) => ({
+  ...styles.line(theme),
+  ...(disabled && styles.disabledSecondary(theme)),
+  ...(correctness && styles[correctness] && styles[correctness](theme, 'stroke')),
+}));
 
 export const Line = (props) => {
   const {
     className,
-    classes,
     disabled,
     correctness,
     graphProps: { scale },
@@ -32,8 +27,10 @@ export const Line = (props) => {
   const length = getDistanceBetweenTwoPoints(startPoint, endPoint);
 
   return (
-    <line
-      className={classNames(classes.line, disabled && classes.disabledSecondary, classes[correctness], className)}
+    <StyledLine
+      className={className}
+      disabled={disabled}
+      correctness={correctness}
       x1={startPoint.x}
       y1={startPoint.y}
       x2={endPoint.x}
@@ -46,7 +43,6 @@ export const Line = (props) => {
 
 Line.propTypes = {
   className: PropTypes.string,
-  classes: PropTypes.object,
   disabled: PropTypes.bool,
   correctness: PropTypes.string,
   graphProps: PropTypes.any,
@@ -54,8 +50,7 @@ Line.propTypes = {
   to: types.PointType,
 };
 
-const StyledLine = withStyles(lineStyles)(Line);
-const Vector = lineBase(StyledLine, { to: Arrow });
+const Vector = lineBase(Line, { to: Arrow });
 const Component = lineToolComponent(Vector);
 
 export default Component;

package/src/undo-redo.jsx

@@ -1,16 +1,24 @@
 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 Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
 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,
     onUndo: PropTypes.func.isRequired,
     onRedo: PropTypes.func.isRequired,
@@ -20,31 +28,21 @@ export class UndoRedo extends React.Component {
   static defaultProps = {};
 
   render() {
-    const { classes, className, onUndo, onRedo, onReset, language } = this.props;
+    const { className, onUndo, onRedo, onReset, language } = this.props;
     return (
       <div className={classNames(className)}>
-        <Button classes={{ root: classes.button }} onClick={() => onUndo(true)}>
+        <StyledButton onClick={() => onUndo(true)}>
           {translator.t('common:undo', { lng: language })}
-        </Button>
-        <Button classes={{ root: classes.button }} onClick={() => onRedo(true)}>
+        </StyledButton>
+        <StyledButton onClick={() => onRedo(true)}>
           {translator.t('graphing.redo', { lng: language })}
-        </Button>
-        <Button classes={{ root: classes.button }} onClick={() => onReset()}>
+        </StyledButton>
+        <StyledButton onClick={() => onReset()}>
           {translator.t('graphing.reset', { lng: language })}
-        </Button>
+        </StyledButton>
       </div>
     );
   }
 }
 
-const styles = (theme) => ({
-  button: {
-    color: color.text(),
-    marginBottom: theme.spacing.unit / 2,
-    '&:not(:last-of-type)': {
-      marginRight: theme.spacing.unit / 2,
-    },
-  },
-});
-
-export default withStyles(styles)(UndoRedo);
+export default UndoRedo;