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 all commits
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
4 changes: 2 additions & 2 deletions packages/components/src/color-palette/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`]
<div
className="components-color-picker__saturation"
>
<Pure(WithInstanceId(Saturation))
<Saturation
hsl={
Object {
"a": 1,
Expand Down Expand Up @@ -48,7 +48,7 @@ exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`]
<div
className="components-color-picker__toggles"
>
<Pure(WithInstanceId(Hue))
<Hue
hsl={
Object {
"a": 1,
Expand Down
196 changes: 88 additions & 108 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 @@ -34,34 +34,60 @@ import { noop } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component, createRef } from '@wordpress/element';
import { useState, useEffect, useRef } from '@wordpress/element';
import { TAB } from '@wordpress/keycodes';
import { pure } from '@wordpress/compose';

/**
* Internal dependencies
*/
import { calculateAlphaChange } from './utils';
import KeyboardShortcuts from '../keyboard-shortcuts';

export class Alpha extends Component {
constructor() {
super( ...arguments );
export default function Alpha( { rgb, hsl, onChange = noop } ) {
const [ mouseDown, setMouseDown ] = useState( false );
const container = useRef();

this.container = createRef();
this.increase = this.increase.bind( this );
this.decrease = this.decrease.bind( this );
this.handleChange = this.handleChange.bind( this );
this.handleMouseDown = this.handleMouseDown.bind( this );
this.handleMouseUp = this.handleMouseUp.bind( this );
const rgbString = `${ rgb.r },${ rgb.g },${ rgb.b }`;
const gradient = {
background: `linear-gradient(to right, rgba(${ rgbString }, 0) 0%, rgba(${ rgbString }, 1) 100%)`,
};
const pointerLocation = { left: `${ rgb.a * 100 }%` };

function handleChange( e ) {
const change = calculateAlphaChange( e, { hsl }, container.current );
if ( change ) {
onChange( change, e );
}
}

function handleMouseUp() {
setMouseDown( false );
}

componentWillUnmount() {
this.unbindEventListeners();
function preventKeyEvents( event ) {
if ( event.keyCode === TAB ) {
return;
}
event.preventDefault();
}

increase( amount = 0.01 ) {
const { hsl, onChange = noop } = this.props;
useEffect( () => {
const { ownerDocument } = container.current;

if ( ! mouseDown ) {
return;
}

ownerDocument.addEventListener( 'mousemove', handleChange );
ownerDocument.addEventListener( 'mouseup', handleMouseUp );

return () => {
ownerDocument.removeEventListener( 'mousemove', handleChange );
ownerDocument.removeEventListener( 'mouseup', handleMouseUp );
};
}, [ mouseDown ] );

function increase( amount = 0.01 ) {
amount = parseInt( amount * 100, 10 );
const change = {
h: hsl.h,
Expand All @@ -73,8 +99,7 @@ export class Alpha extends Component {
onChange( change );
}

decrease( amount = 0.01 ) {
const { hsl, onChange = noop } = this.props;
function decrease( amount = 0.01 ) {
const intValue =
parseInt( hsl.a * 100, 10 ) - parseInt( amount * 100, 10 );
const change = {
Expand All @@ -87,98 +112,53 @@ export class Alpha extends Component {
onChange( change );
}

handleChange( e ) {
const { onChange = noop } = this.props;
const change = calculateAlphaChange(
e,
this.props,
this.container.current
);
if ( change ) {
onChange( change, e );
}
}

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

handleMouseUp() {
this.unbindEventListeners();
}

preventKeyEvents( event ) {
if ( event.keyCode === TAB ) {
return;
}
event.preventDefault();
}

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

render() {
const { rgb } = this.props;
const rgbString = `${ rgb.r },${ rgb.g },${ rgb.b }`;
const gradient = {
background: `linear-gradient(to right, rgba(${ rgbString }, 0) 0%, rgba(${ rgbString }, 1) 100%)`,
};
const pointerLocation = { left: `${ rgb.a * 100 }%` };

const shortcuts = {
up: () => this.increase(),
right: () => this.increase(),
'shift+up': () => this.increase( 0.1 ),
'shift+right': () => this.increase( 0.1 ),
pageup: () => this.increase( 0.1 ),
end: () => this.increase( 1 ),
down: () => this.decrease(),
left: () => this.decrease(),
'shift+down': () => this.decrease( 0.1 ),
'shift+left': () => this.decrease( 0.1 ),
pagedown: () => this.decrease( 0.1 ),
home: () => this.decrease( 1 ),
};

return (
<KeyboardShortcuts shortcuts={ shortcuts }>
<div className="components-color-picker__alpha">
const shortcuts = {
up: () => increase(),
right: () => increase(),
'shift+up': () => increase( 0.1 ),
'shift+right': () => increase( 0.1 ),
pageup: () => increase( 0.1 ),
end: () => increase( 1 ),
down: () => decrease(),
left: () => decrease(),
'shift+down': () => decrease( 0.1 ),
'shift+left': () => decrease( 0.1 ),
pagedown: () => decrease( 0.1 ),
home: () => decrease( 1 ),
};

return (
<KeyboardShortcuts shortcuts={ shortcuts }>
<div className="components-color-picker__alpha">
<div
className="components-color-picker__alpha-gradient"
style={ gradient }
/>
{ /* eslint-disable jsx-a11y/no-static-element-interactions */ }
<div
className="components-color-picker__alpha-bar"
ref={ container }
onMouseDown={ () => setMouseDown( true ) }
onTouchMove={ handleChange }
onTouchStart={ handleChange }
>
<div
className="components-color-picker__alpha-gradient"
style={ gradient }
tabIndex="0"
role="slider"
aria-valuemax="1"
aria-valuemin="0"
aria-valuenow={ rgb.a }
aria-orientation="horizontal"
aria-label={ __(
'Alpha value, from 0 (transparent) to 1 (fully opaque).'
) }
className="components-color-picker__alpha-pointer"
style={ pointerLocation }
onKeyDown={ preventKeyEvents }
/>
{ /* eslint-disable jsx-a11y/no-static-element-interactions */ }
<div
className="components-color-picker__alpha-bar"
ref={ this.container }
onMouseDown={ this.handleMouseDown }
onTouchMove={ this.handleChange }
onTouchStart={ this.handleChange }
>
<div
tabIndex="0"
role="slider"
aria-valuemax="1"
aria-valuemin="0"
aria-valuenow={ rgb.a }
aria-orientation="horizontal"
aria-label={ __(
'Alpha value, from 0 (transparent) to 1 (fully opaque).'
) }
className="components-color-picker__alpha-pointer"
style={ pointerLocation }
onKeyDown={ this.preventKeyEvents }
/>
</div>
{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }
</div>
</KeyboardShortcuts>
);
}
{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }
</div>
</KeyboardShortcuts>
);
}

export default pure( Alpha );
Loading