Skip to content

Refactor: ColorPicker to use hooks #26770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
daddou-ma wants to merge 18 commits into from
Closed

Refactor: ColorPicker to use hooks #26770

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
ff00077
Refactor: ColorPicker to use hooks
daddou-ma Nov 4, 2020
8fa7621
Refactor: ColorPicker Alpha to use hooks
daddou-ma Nov 4, 2020
4fef2f6
Refactor: ColorPicker Hue to use hooks
daddou-ma Nov 5, 2020
ac33a47
Refactor: ColorPicker Saturation to use hooks
daddou-ma Nov 5, 2020
e881492
Refactor: ColorPicker Inputs to use hooks
daddou-ma Nov 6, 2020
667fa30
Refactor: put ColorPicker Tests inside act() function
daddou-ma Nov 6, 2020
db90799
update: ColorPalette Snapshots no use of Pure and withInstance
daddou-ma Nov 6, 2020
cfe01d4
using named functions instead of arrow function
daddou-ma Nov 8, 2020
73716b2
use ownerDocument instead of window for mousemove/mouseup listeners
daddou-ma Nov 8, 2020
be692d1
remove omit props from Input
daddou-ma Nov 8, 2020
0236da8
remove listners only in the effect cleanup
daddou-ma Nov 9, 2020
894c37d
use useDebounce instead of lodash.debounce
daddou-ma Nov 9, 2020
edcde58
remove renderFields function from Inputs Component
daddou-ma Nov 9, 2020
7b7114d
adding useThrottle hook in compose package
daddou-ma Nov 9, 2020
1b41700
use useThrottle hook in ColorPicker Saturation Component
daddou-ma Nov 9, 2020
6c2ca5a
mocking ref for ColorPicker tests
daddou-ma Nov 9, 2020
7c9fd35
clean up only if mouseDown is true
daddou-ma Nov 9, 2020
98e0fdf
wrap useDebounce and useThrottle in useCallback hook
daddou-ma Nov 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
use ownerDocument instead of window for mousemove/mouseup listeners
  • Loading branch information
@daddou-ma
daddou-ma committed Mar 21, 2021
commit 73716b2b5a8603ffa7eeec710095a9b7bcdc34f9
20 changes: 9 additions & 11 deletions packages/components/src/color-picker/alpha.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,20 +60,10 @@ export default function Alpha( { rgb, hsl, onChange = noop } ) {
}
}

function handleMouseDown() {
window.addEventListener( 'mousemove', handleChange );
window.addEventListener( 'mouseup', handleMouseUp );
}

function handleMouseUp() {
setMouseDown( false );
}

function unbindEventListeners() {
window.removeEventListener( 'mousemove', handleChange );
window.removeEventListener( 'mouseup', handleMouseUp );
}

function preventKeyEvents( event ) {
if ( event.keyCode === TAB ) {
return;
Expand All @@ -82,8 +72,16 @@ export default function Alpha( { rgb, hsl, onChange = noop } ) {
}

useEffect( () => {
const { ownerDocument } = container.current;

function unbindEventListeners() {
ownerDocument.removeEventListener( 'mousemove', handleChange );
ownerDocument.removeEventListener( 'mouseup', handleMouseUp );
}

if ( mouseDown ) {
handleMouseDown();
ownerDocument.addEventListener( 'mousemove', handleChange );
ownerDocument.addEventListener( 'mouseup', handleMouseUp );
} else {
unbindEventListeners();
}
Expand Down
20 changes: 9 additions & 11 deletions packages/components/src/color-picker/hue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,20 +60,10 @@ export default function Hue( { hsl, onChange = noop } ) {
}
}

function handleMouseDown() {
window.addEventListener( 'mousemove', handleChange );
window.addEventListener( 'mouseup', handleMouseUp );
}

function handleMouseUp() {
setMouseDown( false );
}

function unbindEventListeners() {
window.removeEventListener( 'mousemove', handleChange );
window.removeEventListener( 'mouseup', handleMouseUp );
}

function preventKeyEvents( event ) {
if ( event.keyCode === TAB ) {
return;
Expand All @@ -82,8 +72,16 @@ export default function Hue( { hsl, onChange = noop } ) {
}

useEffect( () => {
const { ownerDocument } = container.current;

function unbindEventListeners() {
ownerDocument.removeEventListener( 'mousemove', handleChange );
ownerDocument.removeEventListener( 'mouseup', handleMouseUp );
}

if ( mouseDown ) {
handleMouseDown();
ownerDocument.addEventListener( 'mousemove', handleChange );
ownerDocument.addEventListener( 'mouseup', handleMouseUp );
} else {
unbindEventListeners();
}
Expand Down
20 changes: 9 additions & 11 deletions packages/components/src/color-picker/saturation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,6 @@ export default function Saturation( { hsv, hsl, onChange = noop } ) {
throttle( onChange, change, e );
}

function handleMouseDown() {
window.addEventListener( 'mousemove', handleChange );
window.addEventListener( 'mouseup', handleMouseUp );
}

function handleMouseUp() {
setMouseDown( false );
}
Expand All @@ -115,14 +110,17 @@ export default function Saturation( { hsv, hsl, onChange = noop } ) {
e.preventDefault();
}

function unbindEventListeners() {
window.removeEventListener( 'mousemove', handleChange );
window.removeEventListener( 'mouseup', handleMouseUp );
}

useEffect( () => {
const { ownerDocument } = container.current;

function unbindEventListeners() {
ownerDocument.removeEventListener( 'mousemove', handleChange );
ownerDocument.removeEventListener( 'mouseup', handleMouseUp );
}

if ( mouseDown ) {
handleMouseDown();
ownerDocument.addEventListener( 'mousemove', handleChange );
ownerDocument.addEventListener( 'mouseup', handleMouseUp );
} else {
unbindEventListeners();
}
Expand Down