@wordpress/components 18.0.0 → 19.0.3

package/src/color-picker/index.js

@@ -1,264 +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 classnames from 'classnames';
-import { debounce, noop, partial } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Alpha from './alpha';
-import Hue from './hue';
-import Inputs from './inputs';
-import Saturation from './saturation';
-import { colorToState, simpleCheckForValidColor, isValidHex } from './utils';
-
-const toLowerCase = ( value ) => String( value ).toLowerCase();
-const isValueEmpty = ( data ) => {
-	if ( data.source === 'hex' && data.hex === undefined ) {
-		return true;
-	}
-
-	if (
-		data.source === 'hsl' &&
-		( data.h === undefined || data.s === undefined || data.l === undefined )
-	) {
-		return true;
-	}
-
-	/**
-	 * Check that if source is `rgb`:
-	 * `r`, `g` or `b` properties are not undefined
-	 * OR (||) `h`, `s`, `v` or `a` properties are not undefined
-	 * OR (||) `h`, `s`, `l` or `a` properties are not undefined
-	 *
-	 * before it was checking with NOT(!) statement witch for `0` (bool|int) values returns `true`
-	 * this is a typecasting issue only visible for hex values that derive from #000000
-	 */
-	return (
-		data.source === 'rgb' &&
-		( data.r === undefined ||
-			data.g === undefined ||
-			data.b === undefined ) &&
-		( data.h === undefined ||
-			data.s === undefined ||
-			data.v === undefined ||
-			data.a === undefined ) &&
-		( data.h === undefined ||
-			data.s === undefined ||
-			data.l === undefined ||
-			data.a === undefined )
-	);
-};
-
-const isValidColor = ( colors ) =>
-	colors.hex ? isValidHex( colors.hex ) : simpleCheckForValidColor( colors );
-
-/**
- * Function that creates the new color object
- * from old data and the new value.
- *
- * @param {Object}        oldColors          The old color object.
- * @param {string}        oldColors.hex
- * @param {Object}        oldColors.rgb
- * @param {number}        oldColors.rgb.r
- * @param {number}        oldColors.rgb.g
- * @param {number}        oldColors.rgb.b
- * @param {number}        oldColors.rgb.a
- * @param {Object}        oldColors.hsl
- * @param {number}        oldColors.hsl.h
- * @param {number}        oldColors.hsl.s
- * @param {number}        oldColors.hsl.l
- * @param {number}        oldColors.hsl.a
- * @param {string}        oldColors.draftHex Same format as oldColors.hex
- * @param {Object}        oldColors.draftRgb Same format as oldColors.rgb
- * @param {Object}        oldColors.draftHsl Same format as oldColors.hsl
- * @param {Object}        data               Data containing the new value to update.
- * @param {Object}        data.source        One of `hex`, `rgb`, `hsl`.
- * @param {string|number} data.value         Value to update.
- * @param {string}        data.valueKey      Depends on `data.source` values:
- *                                           - when source = `rgb`, valuKey can be `r`, `g`, `b`, or `a`.
- *                                           - when source = `hsl`, valuKey can be `h`, `s`, `l`, or `a`.
- * @return {Object} A new color object for a specific source. For example:
- * { source: 'rgb', r: 1, g: 2, b:3, a:0 }
- */
-const dataToColors = ( oldColors, { source, valueKey, value } ) => {
-	if ( source === 'hex' ) {
-		return {
-			source,
-			[ source ]: value,
-		};
-	}
-	return {
-		source,
-		...{ ...oldColors[ source ], ...{ [ valueKey ]: value } },
-	};
-};
-
-export default class ColorPicker extends Component {
-	constructor( { color = '0071a1' } ) {
-		super( ...arguments );
-		const colors = colorToState( color );
-		this.state = {
-			...colors,
-			draftHex: toLowerCase( colors.hex ),
-			draftRgb: colors.rgb,
-			draftHsl: colors.hsl,
-		};
-		this.commitValues = this.commitValues.bind( this );
-		this.setDraftValues = this.setDraftValues.bind( this );
-		this.resetDraftValues = this.resetDraftValues.bind( this );
-		this.handleInputChange = this.handleInputChange.bind( this );
-	}
-
-	commitValues( data ) {
-		const { oldHue, onChangeComplete = noop } = this.props;
-
-		if ( isValidColor( data ) ) {
-			const colors = colorToState( data, data.h || oldHue );
-			this.setState(
-				{
-					...colors,
-					draftHex: toLowerCase( colors.hex ),
-					draftHsl: colors.hsl,
-					draftRgb: colors.rgb,
-				},
-				debounce( partial( onChangeComplete, colors ), 100 )
-			);
-		}
-	}
-
-	resetDraftValues() {
-		this.setState( {
-			draftHex: this.state.hex,
-			draftHsl: this.state.hsl,
-			draftRgb: this.state.rgb,
-		} );
-	}
-
-	setDraftValues( data ) {
-		switch ( data.source ) {
-			case 'hex':
-				this.setState( { draftHex: toLowerCase( data.hex ) } );
-				break;
-			case 'rgb':
-				this.setState( { draftRgb: data } );
-				break;
-			case 'hsl':
-				this.setState( { draftHsl: data } );
-				break;
-		}
-	}
-
-	handleInputChange( data ) {
-		switch ( data.state ) {
-			case 'reset':
-				this.resetDraftValues();
-				break;
-			case 'commit':
-				const colors = dataToColors( this.state, data );
-				if ( ! isValueEmpty( colors ) ) {
-					this.commitValues( colors );
-				}
-				break;
-			case 'draft':
-				this.setDraftValues( dataToColors( this.state, data ) );
-				break;
-		}
-	}
-
-	render() {
-		const { className, disableAlpha } = this.props;
-		const {
-			color,
-			hsl,
-			hsv,
-			rgb,
-			draftHex,
-			draftHsl,
-			draftRgb,
-		} = this.state;
-		const classes = classnames( className, {
-			'components-color-picker': true,
-			'is-alpha-disabled': disableAlpha,
-			'is-alpha-enabled': ! disableAlpha,
-		} );
-
-		return (
-			<div className={ classes }>
-				<div className="components-color-picker__saturation">
-					<Saturation
-						hsl={ hsl }
-						hsv={ hsv }
-						onChange={ this.commitValues }
-					/>
-				</div>
-
-				<div className="components-color-picker__body">
-					<div className="components-color-picker__controls">
-						<div className="components-color-picker__swatch">
-							<div
-								className="components-color-picker__active"
-								style={ {
-									backgroundColor:
-										color && color.toRgbString(),
-								} }
-							/>
-						</div>
-
-						<div className="components-color-picker__toggles">
-							<Hue hsl={ hsl } onChange={ this.commitValues } />
-							{ disableAlpha ? null : (
-								<Alpha
-									rgb={ rgb }
-									hsl={ hsl }
-									onChange={ this.commitValues }
-								/>
-							) }
-						</div>
-					</div>
-
-					<Inputs
-						rgb={ draftRgb }
-						hsl={ draftHsl }
-						hex={ draftHex }
-						onChange={ this.handleInputChange }
-						disableAlpha={ disableAlpha }
-					/>
-				</div>
-			</div>
-		);
-	}
-}

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;