pixelass / react-mops

🐶 Modify Orientation Position Size
https://react-mops.netlify.com/
MIT License
44 stars 7 forks source link

Upgrade to v2 causes rendering issue #13

Closed kyleknighted closed 4 years ago

kyleknighted commented 4 years ago

Describe the bug Upgraded to v2 beta.0 and now it no longer renders and I get an error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Expected behavior According to https://github.com/dekk-app/react-mops/issues/10#issuecomment-546963275 the API is remaining unchanged, but I guess something changed.

Additional context

import React from 'react';
import PropTypes from 'prop-types';
import { Box } from 'react-mops';
import styled from 'styled-components';

import 'react-mops/dist/esm/index.css';

const InvisibleMarker = styled.span`
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
`;

const Interactable = ({ children, size, ...props }) => {
  return (
    <Box size={size}
         marker={InvisibleMarker}
         fullHandles={false}
         hideGuides={() => true}
         drawBox={false}
         {...props}>
      {children}
    </Box>
  );
};

Interactable.propTypes = {
  children: PropTypes.node.isRequired,
  size: PropTypes.shape({
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
  }).isRequired,
};

export default Interactable;
pixelass commented 4 years ago

Here's a codesandbox: https://codesandbox.io/s/react-mops-issue-template-u2gnn

The export is now called GuidedBox (Box will be added later).
Also: rotation is mandatory.

I noticed an issue with the handles though (seems like the styles are not being applied correctly).

Sorry I'm very busy ATM so the next version might take a while. I'll see if I can at least fix the handles ASAP. (You could add them manually if this is urgent)

kyleknighted commented 4 years ago

Got it rendering using this template - thank you. I can get styles implemented locally no problem!