search

ptmt / react-native-macos

[deprecated in favor of https://microsoft.github.io/react-native-windows/] React Native for macOS is an experimental fork for writing desktop apps using Cocoa
MIT License
11.25k stars 429 forks source link

Cursor won't remain set to its assigned style whilst click-and-dragging to move a View #204

Open shirakaba opened 6 years ago

shirakaba commented 6 years ago

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

$ node_modules/.bin/react-native-macos info

Environment:
  OS: macOS High Sierra 10.13.5
  Node: 9.11.1
  Yarn: 1.3.2
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.3.1 Build version 9E501
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.0.0-alpha.12 => 16.0.0-alpha.12
  react-native: Not Found

react-native-macos: 0.18.0-alpha.3

Aim

Basically I want the cursor to imitate the accessible behaviour you'd expect from NSSplitViewController: the cursor style should reflect whether it's hovering over the divider or not.

Steps to Reproduce

Run the code from the Reproducible Demo section.

  1. Move your cursor onto the pale-cloured divider bar
  2. Try clicking-and-dragging, moving it from side-to-side.
  3. Release your cursor.
  4. Move your cursor off the divider.

Expected Behaviour

  1. The cursor should become set to resizeLeftRight style.
  2. The cursor should remain in resizeLeftRight style.
  3. The cursor should remain in resizeLeftRight style provided that it's still overlapping the divider bar.
  4. The cursor should return to arrow style.

Actual Behavior

  1. ✅
  2. ╳ The cursor returns to arrow style. Even if an adaptation is added to restore resizeLeftRight style upon any call of the whilstDragging function, the cursor will repeatedly fight to return to arrow style. I think this is related to the divider changing position (possibly re-rendering in the process, and affecting the responder behaviour), but I'm not sure.
  3. ✅ (maybe by co-incidence)
  4. ✅ (maybe by co-incidence)

See video on Twitter.

Reproducible Demo

Use the code snippet from this Snack with react-native-macos.

Note: commit 7c8be91 from July 3rd 2018 to master must first be applied to fix the Cursor module import issue.

ptmt commented 6 years ago

A very good case of how tricky it could be to replicate native UX. Instead, it's appealing to rewrite this with the native component, which is not easy too. I have a little time this weekend, trying to fix as many bugs as I can. Will play with this too.