react-reorder
react-reorder copied to clipboard
JakeSidSmith
TypeError: this.state.draggedStyle is null
UPDATE 3
Unfortunately, I was unable to find the root cause. If you see an issue with my code, please let me know. I will try to find the time to make a minimal, reproducible example. The fact that draggedStyle is set correctly every second mouse event leads me to believe that this is a bug in react-reorder. The only workaround I found involved forking react-reorder, I opted to use react-dnd instead, which is a lot more complicated, but it works.
UPDATE 2
I couldn't tell you the root problem. I'm also having a different issue causing me to be unable to debug the application (connection refused), so I'm relying on console.log. Logging every time draggedStyle is written to with something vs. null, I would not expect it to be null when this error occurs, but it is. Every second time. However, this seems to fix the issue:
if (this.state.draggedStyle === null) {
console.log("Skipping because draggedStyle is null.");
return;
}
this.state.draggedStyle.transform = createOffsetStyles(event, this.props);
store.setDraggedStyle(this.props.reorderId, this.props.reorderGroup, this.state.draggedStyle);
This seems to have no side-effects, and reordering, drag and drop are perfectly smooth.
My only issue now is one that I also had before this: If I drag an item from "left-side" to "right-side" or vice versa, the component disappears from the source list and its "ghost" (my translucent clone placeholder) appears in the destination list (as expected) while still dragging. When I release it, it goes back to its source list, in the same position. Note that both lists have the same components.
UPDATE 1
Second time writing this update for some reason. Props are set correctly, and the stylesheet is also loaded. The names match up, and the bug has nothing to do with draggedClassName. I noticed something weird when inspecting state where the error occurs: It's only sometimes undefined. I narrowed it down to not being set on children in render:
// index.js
var isDragged = this.isDragging() && this.isDraggingFrom() && index === this.state.draggedIndex;
var draggedStyle = isDragged ? assign({}, child.props.style, this.state.draggedStyle) : child.props.style;
In the above code, draggedStyle will be undefined if child.props.style is undefined and isDragged is false. The child would be my WidgetWrapper, which in the default state has no style. I thought the fix would be:
var childStyle = child.props.style ?? {}; // <-- here
var draggedStyle = isDragged ? assign({}, childStyle, this.state.draggedStyle) : childStyle;
But this still isn't working. The expectation that style.transform is defined also needs to be dealt with. Still investigating.
ORIGINAL BODY
Edit: Irrelevant info removed
I'm using react-reorder with Typescript and self-declared types (please add types!). Before migrating to Typescript, it was working fine. Now, when I drag a component, I get this output in the console:
Uncaught TypeError: this.state.draggedStyle is null
onWindowMove index.js:647
componentDidMount index.js:688
chainedFunction factory.js:741
React 6
unstable_runWithPriority scheduler.development.js:468
React 9
tsx index.tsx:7
tsx main.chunk.js:2609
Webpack 7
__webpack_require__
fn
1
__webpack_require__
checkDeferredModules
webpackJsonpCallback
<anonymous>
I'm using a Reorder component with draggedClassName={widgetStyles.Dragged}, where widgetStyles is a sass stylesheet imported as widgetStyles. widgetStyles.Dragged resolves to something like WidgetWrapper_Dragged__3VyWh, but even using a regular css stylesheet with just .dragged { styles go here } and using "dragged" as draggedClassName results in the same error.
The console prints the error on every mouse event (edit: turns out to be every second mouse event) and it's very laggy. Traceback excerpt:
644 |
645 | }
646 |
> 647 | this.state.draggedStyle.transform = createOffsetStyles(event, this.props);
| ^ 648 | store.setDraggedStyle(this.props.reorderId, this.props.reorderGroup, this.state.draggedStyle);
649 |
650 | mouseOffset = {
Hey. 😁
Can you let me now which version you're using? When the error is seen? (is it when the cursor moves after starting a drag?) And if possible, whip up an example of your code?
Since this has only started happening since you moved to typescript then I imagine the issue could be caused by something in your build/typescript config (however there are a number of things that could have caused it).
Side note: I plan to re-write this lib in typescript, just haven't found the need/time yet. 😊
Thanks for the response!
Can you let me now which version you're using?
^3.0.0-alpha.7
When the error is seen? (is it when the cursor moves after starting a drag?)
Yes; the error is seen when the cursor moves after a drag has been started. It only occurs after the hold time has passed and the component is actually mobile.
And if possible, whip up an example of your code?
Sure, here's the relevant code (can't give access to the repo):
// src/components/LayerInfo/LayerInfo.tsx
import React from "react";
import styles from "./LayerInfo.module.sass";
import widgetStyles from "../WidgetWrapper/WidgetWrapper.module.sass";
import {ForegroundContainer} from "../../shared/components/ForegroundContainer/ForegroundContainer";
import Reorder, {reorder, reorderFromToImmutable, reorderImmutable} from "react-reorder";
import {WidgetWrapper} from "../WidgetWrapper/WidgetWrapper";
import {IssueProgressWidget} from "../../widgets/IssueProgressWidget/IssueProgressWidget";
import {EmptyWidget} from "../../widgets/EmptyWidget/EmptyWidget";
// import "./dragged.css";
interface Props {
reorder_group_id: string
}
// TODO: This is duplicated
interface ListItem {
index: number
widget_type: string
}
interface State {
list: Array<ListItem>
[name: string]: any
}
// TODO: See https://github.com/JakeSidSmith/react-reorder/issues/101#issuecomment-847201025
class LayerInfo extends React.Component<Props, State> {
state: Readonly<State> = {
list: []
}
constructor(props: Props) {
super(props);
this.onReorder = this.onReorder.bind(this);
// Example TODO: Database
let list: Array<ListItem> = [
{
index: 0,
widget_type: "IssueProgressWidget",
},
{
index: 1,
widget_type: "EmptyWidget",
},
];
this.state = {
list: list
}
}
renderWidget(item: ListItem) {
// TODO: Use database
switch (item.widget_type) {
case "EmptyWidget":
return (
<EmptyWidget/>
);
case "IssueProgressWidget":
return (
<IssueProgressWidget/>
);
default:
// TODO: Error
return (
<div>Hello :)</div>
);
}
}
render() {
return (
<div className={styles.FlexContainer}>
<ForegroundContainer
title={"Widgets"}
margin_bottom={true}
margin_top={true}
flex={true}
widgets={true}
padding={8}
scroll={true}
>
<Reorder
reorderId={this.props.reorder_group_id} // Unique ID that is used internally to track this list (required)
reorderGroup="widgets" // A group ID that allows items to be dragged between lists of the same group (optional)
// getRef={this.storeRef.bind(this)} // Function that is passed a reference to the root node when mounted (optional)
component="div" // Tag name or Component to be used for the wrapping element (optional), defaults to 'div'
placeholderClassName={widgetStyles.Placeholder}
// draggedClassName={"dragged"}
draggedClassName={widgetStyles.Dragged}
// lock="horizontal" // Lock the dragging direction (optional): vertical, horizontal (do not use with groups)
touchHoldTime={500} // Hold time before dragging begins on touch devices (optional), defaults to holdTime
mouseHoldTime={500} // Hold time before dragging begins with mouse (optional), defaults to holdTime
onReorder={this.onReorder.bind(this)} // Callback when an item is dropped (you will need this to update your state)
autoScroll={false} // Enable auto-scrolling when the pointer is close to the edge of the Reorder component (optional), defaults to true
disabled={false} // Disable reordering (optional), defaults to false
disableContextMenus={true} // Disable context menus when holding on touch devices (optional), defaults to true
>
{
this.state.list.map((item: ListItem) => (
<div key={item.index}>
<WidgetWrapper>
{this.renderWidget(item)}
</WidgetWrapper>
</div>
))
}
</Reorder>
</ForegroundContainer>
</div>
)
}
onReorder (event: any, previousIndex: number, nextIndex: number, _fromId: string, _toId: string) {
this.setState({
list: reorder(this.state.list, previousIndex, nextIndex)
});
// TODO: Save
}
onReorderGroup (event: any, previousIndex: number, nextIndex: number, fromId: string, toId: string) {
if (fromId === toId) {
const list = reorderImmutable(this.state[fromId], previousIndex, nextIndex);
this.setState({
[fromId]: list
});
} else {
const lists = reorderFromToImmutable({
from: this.state[fromId],
to: this.state[toId]
}, previousIndex, nextIndex);
this.setState({
[fromId]: lists.from,
[toId]: lists.to
});
}
}
}
export {LayerInfo}
My tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./",
"noImplicitAny": false // TODO: Remove
},
"include": [
"src"
],
"typesRoot": [
"node_modules/@types",
"src/@custom_types/react-reorder"
],
"exclude": [
"node_modules",
"src/@custom_types"
]
}
src/components/WidgetWrapper/WidgetWrapper.tsx:
import React, {useCallback, useEffect} from "react";
import styles from "./WidgetWrapper.module.sass";
const WidgetWrapper = (props: any) => {
// Whether or not to mirror react-reorder's behavior of resetting the hold time when the mouse moves
const useReoderRules = true;
// States
const [isMouseDown, setIsMouseDown] = React.useState(false);
const [isHovering, setIsHovering] = React.useState(false);
const [mouseLeftDuringPress, setMouseLeftDuringPress] = React.useState(false);
const [waitingForDone, setWaitingForDone] = React.useState(false);
// Event handlers
const onMouseDown = () => {
setIsMouseDown(true); // Fact
}
const onMouseUp = () => {
setIsMouseDown(false); // Fact
}
// NOTE: onMouseEnter does not bubble and would be unreliable for widgets with child elements.
const onMouseMove = useCallback(() => {
if (isHovering) {
if (isMouseDown && useReoderRules) {
// react-reorder resets the hold time when the mouse is moved during a drag. Use the else clause if this is
// ever fixed (I suppose it's a matter of personal preference).
setMouseLeftDuringPress(true);
setIsMouseDown(false);
} else if (mouseLeftDuringPress) {
// Require continuous press; pretend like the button was released.
setMouseLeftDuringPress(false);
setIsMouseDown(false);
}
} else {
setIsHovering(true);
}
}, [isHovering, isMouseDown, mouseLeftDuringPress, useReoderRules])
const onMouseLeave = () => {
setIsHovering(false);
setMouseLeftDuringPress(isMouseDown);
}
const onMouseEnter = () => {
setIsHovering(true);
}
// Misc
const reset = () => {
// NOTE: Do not set isHovering = false (the state of isHovering is always semantically true and accurate)
setIsMouseDown(false);
setMouseLeftDuringPress(false);
setWaitingForDone(false);
setWaitingForDone(false);
}
// Logic
let pressedIndicatorClsNames = [styles.PressedIndicator];
let pressing = false;
if (mouseLeftDuringPress) {
pressedIndicatorClsNames.push(styles.PressedUnknown);
} else if (isMouseDown && isHovering) {
pressing = true;
pressedIndicatorClsNames.push(styles.Pressed);
}
let wrapperClsNames = [styles.WidgetWrapper]
if (isHovering) { wrapperClsNames.push(styles.Hovering); }
useEffect(() => {
if (pressing && !waitingForDone) {
setTimeout(() => {
onMouseMove();
reset();
}, 500);
setWaitingForDone(true);
}
}, [pressing, waitingForDone, onMouseMove])
return (
<div
className={wrapperClsNames.join(" ")}
onMouseDown={_e => onMouseDown()}
onMouseUp={_e => onMouseUp()}
onMouseLeave={_e => onMouseLeave()}
onMouseEnter={_e => onMouseEnter()}
onMouseMove={_e => onMouseMove()}
>
{props.children}
<div className={pressedIndicatorClsNames.join(" ")}/>
</div>
)
}
export {WidgetWrapper}
WidgetWrapper.module.sass:
.WidgetWrapper
width: 100%
background-color: white
min-height: 50px
user-select: none
box-sizing: border-box
position: relative
border-radius: 5px
border: 1px solid gray
z-index: 1
margin-bottom: 10px
.PressedIndicator
width: 0
height: 8px
bottom: -4px
left: -1px
right: 1px
z-index: -1
background-color: #1a85ff
content: ''
transition: width
border-bottom-left-radius: 5px // TODO: Display below parent element somehow
position: absolute
.Hovering // TODO: Try to remove
z-index: 2
.Placeholder
@extend .WidgetWrapper
background-color: transparent
box-shadow: 0 0 5px rgba(26, 133, 255, 0.7)
opacity: 0.2
// For when we know for sure that the component is being pressed (building up to drag).
// Applies to the "pressed indicator."
.Pressed
width: 100%
transition-delay: 150ms
transition-duration: 250ms
// For when we don't know if the component is being dragged because the mouse left the component.
// Applies to the "pressed indicator."
.PressedUnknown
width: 0
z-index: 2
transition-duration: 0ms
.Dragged > .WidgetWrapper
border: 1px solid #1a85ff
z-index: 2
I'm new to Typescript, so you're probably right about the issue being something I'm doing wrong. It's unlike any other typed language I've used.
(Almost) everything should be up to date, as I (recently) created the app using the latest version of create-react-app with the typescript template and node.js, only adding latest (or latest stable) versions of packages.
Side note: I plan to re-write this lib in typescript, just haven't found the need/time yet. 😊
Totally understand. Even just adding type declarations for now would help, ie.: (Note that my type declarations are not great and that they only work for my project specifically, but they allow me to use react-reorder without disabling all type checking globally.)
// index.d.ts
declare module "react-reorder" {
// TODO: This is duplicated
export interface ListItem {
index: number
widget_type: string
}
export function reorder(list: Array<ListItem>, prevIndex: number, nextIndex: number): Array<ListItem>;
export function reorderImmutable(item: ListItem, prevIndex: number, nextIndex: number): Array<ListItem>;
export function reorderFromToImmutable(from_to: Object, prevIndex: number, nextIndex: number): { from: string, to: string };
// @ts-ignore TODO: Fix
import React from 'react';
export interface ReorderComponentProps {
reorderId: string // Unique ID that is used internally to track this list (required)
reorderGroup?: string // A group ID that allows items to be dragged between lists of the same group (optional)
getRef?: Function // Function that is passed a reference to the root node when mounted (optional)
component?: string // Tag name or Component to be used for the wrapping element (optional), defaults to 'div'
placeholderClassName: string // The class name to use for styling the placeholder
draggedClassName: string // The class name to use for styling dragged components
lock?: boolean // Lock the dragging direction (optional): vertical, horizontal (do not use with groups)
touchHoldTime?: number // Hold time before dragging begins on touch devices (optional), defaults to holdTime
mouseHoldTime?: number // Hold time before dragging begins with mouse (optional), defaults to holdTime
onReorder: Function // Callback when an item is dropped (you will need this to update your state)
autoScroll?: boolean // Enable auto-scrolling when the pointer is close to the edge of the Reorder component (optional), defaults to true
disabled?: boolean // Disable reordering (optional), defaults to false
disableContextMenus?: boolean // Disable context menus when holding on touch devices (optional), defaults to true
children?: any
}
const Reorder: (props: ReorderComponentProps) => React.ReactElement<ReorderComponentProps>;
export default Reorder;
}