Page MenuHomePhabricator

[Cashtab] Add click-outside-area closing effect for NavWrapper using event bubbling
Needs ReviewPublic

Authored by alitayin on Thu, Mar 6, 05:21.

Details

Reviewers
emack
bytesofman
Group Reviewers
Restricted Owners Package(Owns No Changed Paths)
Restricted Project
Summary

Implemented a click-outside closing mechanism for the settings window using event bubbling instead of useEffect, to maintain consistency with existing code style.
This approach allows the NavWrapper to automatically close when users click outside its boundaries.

Test Plan

Tested on Chrome and Safari browsers across various screen sizes, with the navigation menu closing effect working smoothly.
npm test passes.

Diff Detail

Repository
rABC Bitcoin ABC
Branch
alitayin
Lint
Lint Skipped
Unit
No Test Coverage
Build Status
Buildable 32601
Build 64690: Build Diffcashtab-tests
Build 64689: arc lint + arc unit

Event Timeline

Owners added a reviewer: Restricted Owners Package.Thu, Mar 6, 05:21
alitayin requested review of this revision.Thu, Mar 6, 05:21

Tail of the build log:

  npm audit fix

Run `npm audit` for details.

> ecash-lib@3.0.0 build
> tsc && tsc -p ./tsconfig.build.json && cp -r ./src/ffi ./dist

/work/modules/ecash-agora /work/abc-ci-builds/cashtab-tests

added 364 packages, and audited 367 packages in 2s

60 packages are looking for funding
  run `npm fund` for details

6 vulnerabilities (5 moderate, 1 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> ecash-agora@2.0.0 build
> tsc && tsc -p ./tsconfig.build.json

/work/cashtab /work/abc-ci-builds/cashtab-tests
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated eslint@8.56.0: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 1494 packages, and audited 3350 packages in 25s

328 packages are looking for funding
  run `npm fund` for details

9 vulnerabilities (8 moderate, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

> cashtab@3.17.4 build
> node scripts/build.js

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/components/App/App.tsx
  Line 5:39:  'useEffect' is defined but never used  @typescript-eslint/no-unused-vars


Build cashtab-tests failed with exit code 1
emack requested changes to this revision.Thu, Mar 6, 06:58

Implemented a click-outside closing mechanism for the settings window

where is this implemented? I'm not seeing event bubbling above, only the removal of the redundant useEffect.

This revision now requires changes to proceed.Thu, Mar 6, 06:58

Please prefix your title with [cashtab] so we now in the review queue what part of the code is changed

alitayin retitled this revision from Add click-outside-area closing effect for NavWrapper using event bubbling to [Cashtab] Add click-outside-area closing effect for NavWrapper using event bubbling.Thu, Mar 6, 08:40

Implemented a click-outside closing mechanism for the settings window

where is this implemented? I'm not seeing event bubbling above, only the removal of the redundant useEffect.

This is a update.
Perhaps my update method wasn't quite right? It created a new sub-diff, this is the initial submission https://reviews.bitcoinabc.org/D17756?id=52941

Implemented a click-outside closing mechanism for the settings window

where is this implemented? I'm not seeing event bubbling above, only the removal of the redundant useEffect.

This is a update.
Perhaps my update method wasn't quite right? It created a new sub-diff, this is the initial submission https://reviews.bitcoinabc.org/D17756?id=52941

You need to squash your commits and run arc diff again so we have all the changes showing up

Squashed commits as requested and removed unnecessary useEffec