Change enum to union type

[shmuli9]

Describe the bug
I am attempting to programmatically reset the component path state. I found the dispatchPathAction function on the instance of the component, and I can see there is a convenient action to reset defined in the enum pathActions.

I am having a bug when importing pathActions into my app to use the dispatch function. Due to the way enums work the string "RESET" does not match the enum RESET = "RESET" so I am forced to import the original enum from the lib directory like so:
import {pathActions} from "react-lasso-select/lib/pathReducer";

This import fails when running the app. From a little research this is an issue with enums (see here), that they cannot be imported from *.d.ts files.

This could be solved by simply changing the enum into a union type similar to this:

export type pathActions {
    "ADD" | "DELETE" | "MODIFY" | "MOVE" | "RESET" | "CHANGE"
}

This would be exportable, and would also have the benefit of allowing dispatch to work with string literals e.g. dispatchPathAction({type: "RESET"}).

To Reproduce
Steps to reproduce the behavior:

1. Import pathActions into a component (eg import {pathActions} from "react-lasso-select/lib/pathReducer";)
2. Attempt to use pathActions.ACTION in the dispatchPatchAction function (eg lassoRef.current.dispatchPathAction({type: pathActions.RESET}))
3. npm/yarn start
4. See error

Expected behavior
Type/enum should be imported successfully, and code should run

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome 91
• Version react-lasso-select@1.1.2

[akcyp]

Hello,
I do not recommend accessing the internal methods of the component in this case. The best way to reset a component is to set the "value" param to an empty array.

const [points, setPoints] = useState([]);
return (
  <div className="App">
    <ReactLassoSelect
      value={points}
      src="./demo.jpg"
      onChange={(path) => {
        setPoints(path);
      }}
    />
    <button onClick={() => setPoints([]) }>Reset</button>
  </div>
 );

However, if you want to use the dispatcher you can use little typescript trick:

import { pathActions } from "react-lasso-select/lib/pathReducer";
// ...
lassoRef.current.dispatchPathAction({
  type: "RESET" as pathActions.RESET
});

[shmuli9]

Thanks for your response.

I ended up using your idea to use the values prop to control the Lasso component. Works perfectly.

As far as the TypeScript trick, I didn’t know about that, appreciate you sharing it!