@wordpress/components 17.0.0 → 19.0.2

package/src/color-picker/inputs.js

@@ -1,305 +0,0 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { speak } from '@wordpress/a11y';
-import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { DOWN, ENTER, UP } from '@wordpress/keycodes';
-import { pure } from '@wordpress/compose';
-import { chevronDown } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import TextControl from '../text-control';
-import { VisuallyHidden } from '../visually-hidden';
-import { isValidHex } from './utils';
-
-/* Wrapper for TextControl, only used to handle intermediate state while typing. */
-export class Input extends Component {
-	constructor() {
-		super( ...arguments );
-		this.handleBlur = this.handleBlur.bind( this );
-		this.handleChange = this.handleChange.bind( this );
-		this.handleKeyDown = this.handleKeyDown.bind( this );
-	}
-
-	handleBlur() {
-		const { value, valueKey, onChange, source } = this.props;
-		onChange( {
-			source,
-			state: 'commit',
-			value,
-			valueKey,
-		} );
-	}
-
-	handleChange( value ) {
-		const { valueKey, onChange, source } = this.props;
-		if ( value.length > 4 && isValidHex( value ) ) {
-			onChange( {
-				source,
-				state: 'commit',
-				value,
-				valueKey,
-			} );
-		} else {
-			onChange( {
-				source,
-				state: 'draft',
-				value,
-				valueKey,
-			} );
-		}
-	}
-
-	handleKeyDown( { keyCode } ) {
-		if ( keyCode !== ENTER && keyCode !== UP && keyCode !== DOWN ) {
-			return;
-		}
-		const { value, valueKey, onChange, source } = this.props;
-		onChange( {
-			source,
-			state: 'commit',
-			value,
-			valueKey,
-		} );
-	}
-
-	render() {
-		const { label, value, ...props } = this.props;
-		return (
-			<TextControl
-				className="components-color-picker__inputs-field"
-				label={ label }
-				value={ value }
-				onChange={ ( newValue ) => this.handleChange( newValue ) }
-				onBlur={ this.handleBlur }
-				onKeyDown={ this.handleKeyDown }
-				{ ...omit( props, [ 'onChange', 'valueKey', 'source' ] ) }
-			/>
-		);
-	}
-}
-
-const PureButton = pure( Button );
-
-export class Inputs extends Component {
-	constructor( { hsl } ) {
-		super( ...arguments );
-
-		const view = hsl.a === 1 ? 'hex' : 'rgb';
-		this.state = { view };
-
-		this.toggleViews = this.toggleViews.bind( this );
-		this.resetDraftValues = this.resetDraftValues.bind( this );
-		this.handleChange = this.handleChange.bind( this );
-		this.normalizeValue = this.normalizeValue.bind( this );
-	}
-
-	static getDerivedStateFromProps( props, state ) {
-		if ( props.hsl.a !== 1 && state.view === 'hex' ) {
-			return { view: 'rgb' };
-		}
-		return null;
-	}
-
-	toggleViews() {
-		if ( this.state.view === 'hex' ) {
-			this.setState( { view: 'rgb' }, this.resetDraftValues );
-
-			speak( __( 'RGB mode active' ) );
-		} else if ( this.state.view === 'rgb' ) {
-			this.setState( { view: 'hsl' }, this.resetDraftValues );
-
-			speak( __( 'Hue/saturation/lightness mode active' ) );
-		} else if ( this.state.view === 'hsl' ) {
-			if ( this.props.hsl.a === 1 ) {
-				this.setState( { view: 'hex' }, this.resetDraftValues );
-
-				speak( __( 'Hex color mode active' ) );
-			} else {
-				this.setState( { view: 'rgb' }, this.resetDraftValues );
-
-				speak( __( 'RGB mode active' ) );
-			}
-		}
-	}
-
-	resetDraftValues() {
-		return this.props.onChange( {
-			state: 'reset',
-		} );
-	}
-
-	normalizeValue( valueKey, value ) {
-		if ( valueKey !== 'a' ) {
-			return value;
-		}
-
-		if ( value < 0 ) {
-			return 0;
-		} else if ( value > 1 ) {
-			return 1;
-		}
-		return Math.round( value * 100 ) / 100;
-	}
-
-	handleChange( { source, state, value, valueKey } ) {
-		this.props.onChange( {
-			source,
-			state,
-			valueKey,
-			value: this.normalizeValue( valueKey, value ),
-		} );
-	}
-
-	renderFields() {
-		const { disableAlpha = false } = this.props;
-		if ( this.state.view === 'hex' ) {
-			return (
-				<div className="components-color-picker__inputs-fields">
-					<Input
-						source={ this.state.view }
-						label={ __( 'Color value in hexadecimal' ) }
-						valueKey="hex"
-						value={ this.props.hex }
-						onChange={ this.handleChange }
-					/>
-				</div>
-			);
-		} else if ( this.state.view === 'rgb' ) {
-			const legend = disableAlpha
-				? __( 'Color value in RGB' )
-				: __( 'Color value in RGBA' );
-			return (
-				<fieldset>
-					<VisuallyHidden as="legend">{ legend }</VisuallyHidden>
-					<div className="components-color-picker__inputs-fields">
-						<Input
-							source={ this.state.view }
-							label="r"
-							valueKey="r"
-							value={ this.props.rgb.r }
-							onChange={ this.handleChange }
-							type="number"
-							min="0"
-							max="255"
-						/>
-						<Input
-							source={ this.state.view }
-							label="g"
-							valueKey="g"
-							value={ this.props.rgb.g }
-							onChange={ this.handleChange }
-							type="number"
-							min="0"
-							max="255"
-						/>
-						<Input
-							source={ this.state.view }
-							label="b"
-							valueKey="b"
-							value={ this.props.rgb.b }
-							onChange={ this.handleChange }
-							type="number"
-							min="0"
-							max="255"
-						/>
-						{ disableAlpha ? null : (
-							<Input
-								source={ this.state.view }
-								label="a"
-								valueKey="a"
-								value={ this.props.rgb.a }
-								onChange={ this.handleChange }
-								type="number"
-								min="0"
-								max="1"
-								step="0.01"
-							/>
-						) }
-					</div>
-				</fieldset>
-			);
-		} else if ( this.state.view === 'hsl' ) {
-			const legend = disableAlpha
-				? __( 'Color value in HSL' )
-				: __( 'Color value in HSLA' );
-			return (
-				<fieldset>
-					<VisuallyHidden as="legend">{ legend }</VisuallyHidden>
-					<div className="components-color-picker__inputs-fields">
-						<Input
-							source={ this.state.view }
-							label="h"
-							valueKey="h"
-							value={ this.props.hsl.h }
-							onChange={ this.handleChange }
-							type="number"
-							min="0"
-							max="359"
-						/>
-						<Input
-							source={ this.state.view }
-							label="s"
-							valueKey="s"
-							value={ this.props.hsl.s }
-							onChange={ this.handleChange }
-							type="number"
-							min="0"
-							max="100"
-						/>
-						<Input
-							source={ this.state.view }
-							label="l"
-							valueKey="l"
-							value={ this.props.hsl.l }
-							onChange={ this.handleChange }
-							type="number"
-							min="0"
-							max="100"
-						/>
-						{ disableAlpha ? null : (
-							<Input
-								source={ this.state.view }
-								label="a"
-								valueKey="a"
-								value={ this.props.hsl.a }
-								onChange={ this.handleChange }
-								type="number"
-								min="0"
-								max="1"
-								step="0.05"
-							/>
-						) }
-					</div>
-				</fieldset>
-			);
-		}
-	}
-
-	render() {
-		return (
-			<div className="components-color-picker__inputs-wrapper">
-				{ this.renderFields() }
-				<div className="components-color-picker__inputs-toggle-wrapper">
-					<PureButton
-						className="components-color-picker__inputs-toggle"
-						icon={ chevronDown }
-						label={ __( 'Change color format' ) }
-						onClick={ this.toggleViews }
-					/>
-				</div>
-			</div>
-		);
-	}
-}
-
-export default Inputs;

package/src/color-picker/saturation.js

@@ -1,190 +0,0 @@
-/**
- * Parts of this source were derived and modified from react-color,
- * released under the MIT license.
- *
- * https://github.com/casesandberg/react-color/
- *
- * Copyright (c) 2015 Case Sandberg
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-/**
- * External dependencies
- */
-import { clamp, noop, throttle } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
-import { TAB } from '@wordpress/keycodes';
-import { compose, pure, withInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { calculateSaturationChange } from './utils';
-import Button from '../button';
-import KeyboardShortcuts from '../keyboard-shortcuts';
-import { VisuallyHidden } from '../visually-hidden';
-
-export class Saturation extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.throttle = throttle( ( fn, data, e ) => {
-			fn( data, e );
-		}, 50 );
-
-		this.container = createRef();
-		this.saturate = this.saturate.bind( this );
-		this.brighten = this.brighten.bind( this );
-		this.handleChange = this.handleChange.bind( this );
-		this.handleMouseDown = this.handleMouseDown.bind( this );
-		this.handleMouseUp = this.handleMouseUp.bind( this );
-	}
-
-	componentWillUnmount() {
-		this.throttle.cancel();
-		this.unbindEventListeners();
-	}
-
-	saturate( amount = 0.01 ) {
-		const { hsv, onChange = noop } = this.props;
-		const intSaturation = clamp(
-			hsv.s + Math.round( amount * 100 ),
-			0,
-			100
-		);
-		const change = {
-			h: hsv.h,
-			s: intSaturation,
-			v: hsv.v,
-			a: hsv.a,
-			source: 'rgb',
-		};
-
-		onChange( change );
-	}
-
-	brighten( amount = 0.01 ) {
-		const { hsv, onChange = noop } = this.props;
-		const intValue = clamp( hsv.v + Math.round( amount * 100 ), 0, 100 );
-		const change = {
-			h: hsv.h,
-			s: hsv.s,
-			v: intValue,
-			a: hsv.a,
-			source: 'rgb',
-		};
-
-		onChange( change );
-	}
-
-	handleChange( e ) {
-		const { onChange = noop } = this.props;
-		const change = calculateSaturationChange(
-			e,
-			this.props,
-			this.container.current
-		);
-		this.throttle( 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 { hsv, hsl, instanceId } = this.props;
-		const pointerLocation = {
-			top: `${ -hsv.v + 100 }%`,
-			left: `${ hsv.s }%`,
-		};
-		const shortcuts = {
-			up: () => this.brighten(),
-			'shift+up': () => this.brighten( 0.1 ),
-			pageup: () => this.brighten( 1 ),
-			down: () => this.brighten( -0.01 ),
-			'shift+down': () => this.brighten( -0.1 ),
-			pagedown: () => this.brighten( -1 ),
-			right: () => this.saturate(),
-			'shift+right': () => this.saturate( 0.1 ),
-			end: () => this.saturate( 1 ),
-			left: () => this.saturate( -0.01 ),
-			'shift+left': () => this.saturate( -0.1 ),
-			home: () => this.saturate( -1 ),
-		};
-
-		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-		return (
-			<KeyboardShortcuts shortcuts={ shortcuts }>
-				<div
-					style={ { background: `hsl(${ hsl.h },100%, 50%)` } }
-					className="components-color-picker__saturation-color"
-					ref={ this.container }
-					onMouseDown={ this.handleMouseDown }
-					onTouchMove={ this.handleChange }
-					onTouchStart={ this.handleChange }
-					role="application"
-				>
-					<div className="components-color-picker__saturation-white" />
-					<div className="components-color-picker__saturation-black" />
-					<Button
-						aria-label={ __( 'Choose a shade' ) }
-						aria-describedby={ `color-picker-saturation-${ instanceId }` }
-						className="components-color-picker__saturation-pointer"
-						style={ pointerLocation }
-						onKeyDown={ this.preventKeyEvents }
-					/>
-					<VisuallyHidden
-						id={ `color-picker-saturation-${ instanceId }` }
-					>
-						{ __(
-							'Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.'
-						) }
-					</VisuallyHidden>
-				</div>
-			</KeyboardShortcuts>
-		);
-		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-	}
-}
-
-export default compose( pure, withInstanceId )( Saturation );