@pie-element/hotspot 9.3.4-next.3 → 10.0.0-beta.0

package/configure/src/hotspot-circle.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Circle, Group, Rect, Transformer } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
+import { Circle, Group, Transformer } from 'react-konva';
 import DeleteWidget from './DeleteWidget';
 
 class CircleComponent extends React.Component {
@@ -77,7 +76,6 @@ class CircleComponent extends React.Component {
 
   render() {
     const {
-      classes,
       correct,
       radius,
       hotspotColor,
@@ -95,9 +93,8 @@ class CircleComponent extends React.Component {
     const validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;
 
     return (
-      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
+      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>
         <Circle
-          classes={classes.base}
           ref={this.shapeRef}
           radius={validRadius}
           fill={correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
@@ -112,6 +109,8 @@ class CircleComponent extends React.Component {
           onTransformEnd={this.onResizeEnd}
           x={x}
           y={y}
+          opacity={0.5}
+          cursor="pointer"
         />
 
         {!isDragging && hovered && (
@@ -158,19 +157,7 @@ class CircleComponent extends React.Component {
   }
 }
 
-const styles = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5,
-  },
-
-  group: {
-    padding: '12px',
-  },
-});
-
 CircleComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
   correct: PropTypes.bool,
   isDrawing: PropTypes.bool.isRequired,
   id: PropTypes.string.isRequired,
@@ -191,4 +178,4 @@ CircleComponent.defaultProps = {
   correct: false,
 };
 
-export default withStyles(styles)(CircleComponent);
+export default CircleComponent;

package/configure/src/hotspot-container.jsx

@@ -1,17 +1,65 @@
-import { withStyles } from '@material-ui/core/styles/index';
-import classNames from 'classnames';
-import { SUPPORTED_SHAPES } from './shapes';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
 import Button from './button';
 import { CircleButton } from './buttons/circle';
 import { PolygonButton } from './buttons/polygon';
 import { RectangleButton } from './buttons/rectangle';
-
+import { SUPPORTED_SHAPES } from './shapes';
 import Drawable from './hotspot-drawable';
 import UploadControl from './upload-control';
 import { getAllShapes, groupShapes } from './utils';
 
+const BaseContainer = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(1.5),
+  marginBottom: theme.spacing(2.5),
+}));
+
+const BoxContainer = styled('div')(({ theme, hasErrors, dropzoneActive }) => ({
+  border: '1px solid #E0E1E6',
+  borderRadius: '5px',
+  ...(dropzoneActive && {
+    border: '1px solid #0032C2',
+  }),
+  ...(hasErrors && !dropzoneActive && {
+    border: `1px solid ${theme.palette.error.main}`,
+  }),
+}));
+
+const ButtonShape = styled('div')({
+  marginRight: '5px',
+  '&:hover': {
+    cursor: 'pointer',
+  },
+});
+
+const CenteredContainer = styled('div')({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+});
+
+const DrawableHeight = styled('div')(({ theme }) => ({
+  minHeight: 350,
+  paddingBottom: theme.spacing(5),
+  paddingRight: theme.spacing(5),
+}));
+
+const Toolbar = styled('div')(({ theme }) => ({
+  backgroundColor: '#FFF',
+  borderBottom: '1px solid #E0E1E6',
+  borderTopLeftRadius: '5px',
+  borderTopRightRadius: '5px',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: theme.spacing(1),
+}));
+
+const ReplaceSection = styled('div')({
+  marginRight: 'auto',
+});
+
 const isImage = (file) => {
   const imageType = /image.*/;
 
@@ -147,7 +195,6 @@ export class Container extends Component {
 
   render() {
     const {
-      classes,
       dimensions,
       hasErrors,
       hotspotColor,
@@ -160,17 +207,15 @@ export class Container extends Component {
       hoverOutlineColor,
       selectedHotspotColor,
     } = this.props;
-    
+
     const { dropzoneActive, dragEnabled } = this.state;
     const { shapes, selectedShape } = this.state;
 
     return (
-      <div className={classes.base}>
-        <div
-          className={classNames(classes.box, {
-            [classes.boxError]: hasErrors && !dropzoneActive,
-            [classes.boxActive]: dropzoneActive,
-          })}
+      <BaseContainer>
+        <BoxContainer
+          hasErrors={hasErrors}
+          dropzoneActive={dropzoneActive}
           {...(dragEnabled
             ? {
                 onDragExit: this.handleOnDragExit,
@@ -181,45 +226,41 @@ export class Container extends Component {
               }
             : {})}
         >
-          <div className={classes.toolbar}>
-            <div
+          <Toolbar>
+            <ButtonShape
               onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.RECTANGLE ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.RECTANGLE })}
-              className={classes.buttonShape}
             >
               <RectangleButton isActive={selectedShape === SUPPORTED_SHAPES.RECTANGLE} />
-            </div>
-            <div
+            </ButtonShape>
+            <ButtonShape
               onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.POLYGON ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.POLYGON })}
-              className={classes.buttonShape}
             >
               <PolygonButton isActive={selectedShape === SUPPORTED_SHAPES.POLYGON} />
-            </div>
-            <div
+            </ButtonShape>
+            <ButtonShape
               onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.CIRCLE ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.CIRCLE })}
-              className={classes.buttonShape}
             >
               <CircleButton isActive={selectedShape === SUPPORTED_SHAPES.CIRCLE} />
-            </div>
+            </ButtonShape>
 
             {imageUrl && (
-              <UploadControl
-                classNameButton={classes.replaceButton}
-                classNameSection={classes.replaceSection}
-                label="Replace Image"
-                onInputClick={this.handleInputClick}
-                setRef={(ref) => {
-                  this.input = ref;
-                }}
-              />
+              <ReplaceSection>
+                <UploadControl
+                  label="Replace Image"
+                  onInputClick={this.handleInputClick}
+                  setRef={(ref) => {
+                    this.input = ref;
+                  }}
+                />
+              </ReplaceSection>
             )}
             <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label="Clear all" />
-          </div>
+          </Toolbar>
 
-          <div
+          <DrawableHeight
             ref={(ref) => {
               this.imageSection = ref;
             }}
-            className={classes.drawableHeight}
           >
             {imageUrl ? (
               <Drawable
@@ -242,7 +283,7 @@ export class Container extends Component {
                 preserveAspectRatioEnabled={preserveAspectRatioEnabled}
               />
             ) : (
-              <div className={classNames(classes.drawableHeight, classes.centered)}>
+              <CenteredContainer>
                 <label>Drag and drop or upload image from computer</label>
                 <br />
                 <UploadControl
@@ -252,73 +293,16 @@ export class Container extends Component {
                     this.input = ref;
                   }}
                 />
-              </div>
+              </CenteredContainer>
             )}
-          </div>
-        </div>
-      </div>
+          </DrawableHeight>
+        </BoxContainer>
+      </BaseContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  buttonShape: {
-    marginRight: '5px',
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-  base: {
-    marginTop: theme.spacing.unit * 1.5,
-    marginBottom: theme.spacing.unit * 2.5,
-  },
-  box: {
-    border: '1px solid #E0E1E6',
-    borderRadius: '5px',
-  },
-  boxActive: {
-    border: '1px solid #0032C2',
-  },
-  boxError: {
-    border: `1px solid ${theme.palette.error.main}`,
-  },
-  centered: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  },
-  drawableHeight: {
-    minHeight: 350,
-    paddingBottom: theme.spacing.unit * 5,
-    paddingRight: theme.spacing.unit * 5,
-  },
-  icon: {
-    '&:hover': {
-      color: '#333131',
-      cursor: 'help',
-    },
-    color: '#C1C1C1',
-  },
-  replaceButton: {
-    marginLeft: 0,
-  },
-  replaceSection: {
-    marginRight: 'auto',
-  },
-  toolbar: {
-    backgroundColor: '#FFF',
-    borderBottom: '1px solid #E0E1E6',
-    borderTopLeftRadius: '5px',
-    borderTopRightRadius: '5px',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    padding: theme.spacing.unit,
-  },
-});
-
 Container.propTypes = {
-  classes: PropTypes.object.isRequired,
   dimensions: PropTypes.object.isRequired,
   imageUrl: PropTypes.string.isRequired,
   hotspotColor: PropTypes.string.isRequired,
@@ -343,4 +327,4 @@ Container.defaultProps = {
   strokeWidth: 5,
 };
 
-export default withStyles(styles)(Container);
+export default Container;

package/configure/src/hotspot-drawable.jsx

@@ -2,13 +2,46 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Layer, Stage } from 'react-konva';
 import cloneDeep from 'lodash/cloneDeep';
-import { withStyles } from '@material-ui/core/styles/index';
+import { styled } from '@mui/material/styles';
 
 import Rectangle from './hotspot-rectangle';
 import Polygon from './hotspot-polygon';
 import Circle from './hotspot-circle';
 import { getUpdatedShapes, updateImageDimensions } from './utils';
 import { RectangleShape, CircleShape, PolygonShape, SUPPORTED_SHAPES, SHAPE_GROUPS } from './shapes';
+
+const BaseContainer = styled('div')({
+  position: 'relative',
+});
+
+const ImageContainer = styled('div')({
+  position: 'relative',
+  width: 'fit-content',
+});
+
+const Image = styled('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+const ResizeHandle = styled('div')({
+  borderBottom: '1px solid #727272',
+  borderRight: '1px solid #727272',
+  bottom: '-10px',
+  cursor: 'se-resize',
+  height: '10px',
+  position: 'absolute',
+  right: '-10px',
+  width: '10px',
+});
+
+const StyledStage = styled(Stage)({
+  left: 0,
+  top: 0,
+  position: 'absolute',
+});
+
 const IMAGE_MAX_WIDTH = 800;
 
 export class Drawable extends React.Component {
@@ -373,7 +406,6 @@ export class Drawable extends React.Component {
 
   render() {
     const {
-      classes,
       imageUrl,
       dimensions: { height, width },
       hotspotColor,
@@ -392,11 +424,10 @@ export class Drawable extends React.Component {
     const shapesToUse = stateShapes || shapes;
 
     return (
-      <div className={classes.base}>
+      <BaseContainer>
         {imageUrl && (
-          <div className={classes.imageContainer}>
-            <img
-              className={classes.image}
+          <ImageContainer>
+            <Image
               onLoad={this.handleOnImageLoad}
               ref={(ref) => {
                 this.image = ref;
@@ -404,17 +435,15 @@ export class Drawable extends React.Component {
               src={imageUrl}
               {...(height && width ? { style: { height, width } } : {})}
             />
-            <div
+            <ResizeHandle
               ref={(ref) => {
                 this.resize = ref;
               }}
-              className={classes.resize}
             />
-          </div>
+          </ImageContainer>
         )}
 
-        <Stage
-          className={classes.stage}
+        <StyledStage
           height={heightFromState || height}
           width={widthFromState || width}
           onMouseDown={this.handleOnMouseDown}
@@ -469,44 +498,13 @@ export class Drawable extends React.Component {
               );
             })}
           </Layer>
-        </Stage>
-      </div>
+        </StyledStage>
+      </BaseContainer>
     );
   }
 }
 
-const styles = () => ({
-  base: {
-    position: 'relative',
-  },
-  image: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content',
-  },
-  resize: {
-    borderBottom: '1px solid #727272',
-    borderRight: '1px solid #727272',
-    bottom: '-10px',
-    cursor: 'se-resize',
-    height: '10px',
-    position: 'absolute',
-    right: '-10px',
-    width: '10px',
-  },
-  stage: {
-    left: 0,
-    top: 0,
-    position: 'absolute',
-  },
-});
-
 Drawable.propTypes = {
-  classes: PropTypes.object.isRequired,
   disableDrag: PropTypes.func.isRequired,
   dimensions: PropTypes.object.isRequired,
   enableDrag: PropTypes.func.isRequired,
@@ -526,4 +524,4 @@ Drawable.propTypes = {
   preserveAspectRatioEnabled: PropTypes.bool,
 };
 
-export default withStyles(styles)(Drawable);
+export default Drawable;

package/configure/src/hotspot-palette.jsx

@@ -1,9 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputContainer } from '@pie-lib/config-ui';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import { withStyles } from '@material-ui/core/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+
+const BaseContainer = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  display: 'flex',
+}));
+
+const StyledInputContainer = styled(InputContainer)({
+  flex: 1,
+  width: '90%',
+});
+
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  borderRadius: '2px',
+  height: '22px',
+  marginLeft: theme.spacing(2),
+  marginRight: theme.spacing(2),
+  marginTop: theme.spacing(2),
+}));
 
 class Palette extends React.Component {
   onChange = (name) => (event) => {
@@ -18,59 +36,49 @@ class Palette extends React.Component {
   };
 
   render() {
-    const { classes, hotspotColor, outlineColor, hotspotList, outlineList } = this.props;
+    const { hotspotColor, outlineColor, hotspotList, outlineList } = this.props;
 
     return (
-      <div className={classes.base}>
-        <InputContainer label="Hot Spot" className={classes.input}>
-          <Select className={classes.select} onChange={this.onChange('hotspot')} value={hotspotColor}>
+      <BaseContainer>
+        <StyledInputContainer label="Hot Spot">
+          <Select 
+            onChange={this.onChange('hotspot')} 
+            value={hotspotColor}
+            variant='standard'
+            MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
+            >
             {hotspotList.map((hotspot) => (
-              <MenuItem key={hotspot} value={hotspot} className={classes.item} style={{ backgroundColor: hotspot }}>
+              <StyledMenuItem key={hotspot} value={hotspot} style={{ backgroundColor: hotspot }}>
                 {hotspot}
-              </MenuItem>
+              </StyledMenuItem>
             ))}
           </Select>
-        </InputContainer>
+        </StyledInputContainer>
 
-        <InputContainer label="Response Outline" className={classes.input}>
-          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>
+        <StyledInputContainer label="Response Outline">
+          <Select 
+            onChange={this.onChange('outline')} 
+            value={outlineColor} 
+            variant='standard'
+            MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
+          >
             {outlineList.map((outline) => (
-              <MenuItem
+              <StyledMenuItem
                 key={outline}
                 value={outline}
-                className={classes.item}
                 style={{ border: `2px solid ${outline}` }}
               >
                 {outline}
-              </MenuItem>
+              </StyledMenuItem>
             ))}
           </Select>
-        </InputContainer>
-      </div>
+        </StyledInputContainer>
+      </BaseContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  base: {
-    marginTop: theme.spacing.unit * 2,
-    display: 'flex',
-  },
-  input: {
-    flex: 1,
-    width: '90%',
-  },
-  item: {
-    borderRadius: '2px',
-    height: '22px',
-    marginLeft: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
-  },
-});
-
 Palette.propTypes = {
-  classes: PropTypes.object.isRequired,
   hotspotColor: PropTypes.string.isRequired,
   hotspotList: PropTypes.array.isRequired,
   onHotspotColorChange: PropTypes.func.isRequired,
@@ -79,4 +87,4 @@ Palette.propTypes = {
   outlineList: PropTypes.array.isRequired,
 };
 
-export default withStyles(styles)(Palette);
+export default Palette;

package/configure/src/hotspot-polygon.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Group, Line, Circle } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles/index';
 import { Rect } from 'react-konva/lib/ReactKonvaCore';
 import DeleteWidget from './DeleteWidget';
 
@@ -188,7 +187,6 @@ class PolComponent extends React.Component {
 
   render() {
     const {
-      classes,
       correct,
       id,
       hotspotColor,
@@ -208,7 +206,7 @@ class PolComponent extends React.Component {
     const calculatedFill = correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor;
 
     return (
-      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
+      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         {hoverOutlineColor && hovered && (
           <Rect
             x={boundingBox.x}
@@ -221,7 +219,6 @@ class PolComponent extends React.Component {
           />
         )}
         <Line
-          classes={classes.base}
           points={this.serialize(points)}
           closed={!isInProgress}
           fill={isInProgress ? 'transparent' : calculatedFill}
@@ -235,13 +232,13 @@ class PolComponent extends React.Component {
           onDragEnd={(e) => this.handleOnDragEnd(e, true)}
           x={x}
           y={y}
+          opacity={0.5}
         />
 
         {showPoints &&
           points.map((point, index) => (
             <Circle
               key={index}
-              className={classes.circle}
               x={point.x}
               y={point.y}
               radius={5}
@@ -257,6 +254,7 @@ class PolComponent extends React.Component {
                 this.handleOnDragVertex(e, index, true);
               }}
               draggable
+              opacity={4}
             />
           ))}
         {!this.state.isDragging && this.state.hovered && (
@@ -267,21 +265,7 @@ class PolComponent extends React.Component {
   }
 }
 
-const styles = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5,
-  },
-  circle: {
-    opacity: 4,
-  },
-  group: {
-    padding: '12px',
-  },
-});
-
 PolComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
   correct: PropTypes.bool,
   isDrawing: PropTypes.bool.isRequired,
   id: PropTypes.string.isRequired,
@@ -308,4 +292,4 @@ PolComponent.defaultProps = {
   correct: false,
 };
 
-export default withStyles(styles)(PolComponent);
+export default PolComponent;