File "index.js"

Full path: /home/webcknlt/admissiontell.com/wp-content/plugins/generateblocks/src/components/unit-control/index.js
File size: 4.64 B (4.64 KB bytes)
MIME-type: text/x-java
Charset: utf-8

Download   Open   Edit   Advanced Editor &nnbsp; Back

/**
 * External dependencies
 */
import { useEffect, useState, useRef } from '@wordpress/element';
import { TextControl, BaseControl } from '@wordpress/components';
import classnames from 'classnames';
import { useUpdateEffect } from 'react-use';

/**
 * Internal dependencies
 */

import './editor.scss';
import UnitDropdown from './unit-dropdown';
import unitList from './unit-list';

export default function UnitControl( props ) {
	const {
		label,
		units = [],
		defaultUnit = '',
		unitCount = 7,
		min = 0,
		max,
		step,
		id,
		disabled = false,
		overrideValue = null,
		overrideAction = () => null,
		onChange,
		value,
		placeholder,
		help = '',
		focusOnMount = false,
		onFocus = () => null,
	} = props;

	const visibleUnits = units.concat( unitList ).slice( 0, unitCount );
	const [ unitValue, setUnitValue ] = useState( '' );
	const [ numericValue, setNumericValue ] = useState( '' );
	const [ placeholderValue, setPlaceholderValue ] = useState( '' );
	const wrapperRef = useRef( false );
	const inputRef = useRef( false );

	const splitValues = ( values ) => {
		const unitRegex = unitList.join( '|' );
		const splitRegex = new RegExp( `(${ unitRegex })` );

		return values
			? values.toString().toLowerCase().split( splitRegex ).filter( ( singleValue ) => '' !== singleValue )
			: [];
	};

	const getNumericValue = ( values ) => values.length > 0 ? values[ 0 ].trim() : '';
	const defaultUnitValue = defaultUnit ? defaultUnit : visibleUnits[ 0 ];
	const getUnitValue = ( values ) => values.length > 1 ? values[ 1 ] : defaultUnitValue;

	// Test if the value starts with a number, decimal or a single dash.
	const startsWithNumber = ( number ) => /^([-]?\d|[-]?\.)/.test( number );

	const setPlaceholders = () => {
		if ( ! value ) {
			const placeholderValues = overrideValue
				? splitValues( overrideValue )
				: splitValues( placeholder );

			setPlaceholderValue( getNumericValue( placeholderValues ) );
			setUnitValue( getUnitValue( placeholderValues ) );
		}
	};

	// Split the number and unit into two values.
	useEffect( () => {
		const newValue = overrideValue && disabled ? overrideValue : value;

		// Split our values if we're starting with a number.
		if ( startsWithNumber( newValue ) ) {
			const values = splitValues( newValue );

			setNumericValue( getNumericValue( values ) );
			setUnitValue( getUnitValue( values ) );
		} else {
			setNumericValue( newValue );
			setUnitValue( '' );
		}

		setPlaceholders();
	}, [ value, overrideValue ] );

	useUpdateEffect( () => {
		const hasOverride = !! overrideValue && !! disabled;

		const fullValue = startsWithNumber( numericValue )
			? numericValue + unitValue
			: numericValue;

		// Clear the placeholder if the units don't match.
		if ( ! fullValue ) {
			if ( unitValue !== getUnitValue( splitValues( placeholder ) ) ) {
				setPlaceholderValue( '' );
			} else {
				setPlaceholders();
			}
		}

		if ( ! hasOverride && fullValue !== value ) {
			onChange( fullValue );
		}
	}, [ numericValue, unitValue ] );

	useEffect( () => {
		if ( focusOnMount && inputRef?.current ) {
			inputRef.current.focus();
		}
	}, [ label ] );

	return (
		<BaseControl
			label={ label }
			help={ help }
			id={ id }
			className={ classnames( {
				'gblocks-unit-control': true,
				'gblocks-unit-control__disabled': !! disabled,
			} ) }
		>
			<div className="gblocks-unit-control__input" ref={ wrapperRef }>
				<TextControl
					type="text"
					value={ numericValue }
					placeholder={ placeholderValue }
					id={ id }
					min={ min }
					max={ max }
					step={ step }
					autoComplete="off"
					disabled={ disabled }
					onKeyDown={ ( event ) => {
						const keyPressed = event.key;
						const newValue = event.target.value;

						if ( keyPressed === 'ArrowUp' ) {
							if ( ! isNaN( newValue ) ) {
								setNumericValue( +newValue + 1 );
							}
						} else if ( keyPressed === 'ArrowDown' ) {
							if ( ! isNaN( newValue ) ) {
								setNumericValue( +newValue - 1 );
							}
						}
					} }
					onChange={ ( newValue ) => setNumericValue( newValue ) }
					onFocus={ () => {
						onFocus();
					} }
					ref={ inputRef }
				/>

				<div className="gblocks-unit-control__input--action">
					{ !! overrideAction && <div className="gblocks-unit-control__override-action">{ overrideAction() } </div> }

					{ (
						startsWithNumber( numericValue ) ||
						(
							! numericValue &&
							( ! placeholderValue || startsWithNumber( placeholderValue ) )
						)
					) &&
						<UnitDropdown
							value={ unitValue }
							disabled={ disabled || 1 === visibleUnits.length }
							units={ visibleUnits }
							onChange={ ( newValue ) => setUnitValue( newValue ) }
						/>
					}
				</div>
			</div>
		</BaseControl>
	);
}