packages/format-library/src/link/css-classes-setting.js - trunk - githubmirror/gutenberg

packages/format-library/src/link/css-classes-setting.js
85 строк3 KB
Marco Ciampini
ESLint: Replace strict config with bulk suppressions (#81248)
07 авг 2026, 14:34
07 авг 2026, 14:347f43eaf
import { useState } from '@wordpress/element';
import { useInstanceId } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import {
	__experimentalInputControl as InputControl,
	CheckboxControl,
} from '@wordpress/components';
import { Stack, VisuallyHidden } from '@wordpress/ui';

/**
 * CSSClassesSettingComponent
 *
 * Presents a toggleable text input for editing link CSS classes. The input
 * is shown when the toggle is enabled or when there is already a value. When
 * toggled off and a value exists, it resets the value to an empty string.
 *
 * @param {Object}   props          - Component props.
 * @param {Object}   props.setting  - Setting configuration object.
 * @param {Object}   props.value    - Current link value object.
 * @param {Function} props.onChange - Callback when value changes.
 */
const CSSClassesSettingComponent = ( { setting, value, onChange } ) => {
	const hasValue = value ? value?.cssClasses?.length > 0 : false;
	const [ isSettingActive, setIsSettingActive ] = useState( hasValue );
	const instanceId = useInstanceId( CSSClassesSettingComponent );
	const controlledRegionId = `css-classes-setting-${ instanceId }`;

	// Sanitize user input: replace commas with spaces, collapse repeated spaces, and trim
	const handleSettingChange = ( newValue ) => {
		const sanitizedValue =
			typeof newValue === 'string'
				? newValue.replace( /,/g, ' ' ).replace( /\s+/g, ' ' ).trim()
				: newValue;
		onChange( {
			...value,
			[ setting.id ]: sanitizedValue,
		} );
	};

	const handleCheckboxChange = () => {
		if ( isSettingActive ) {
			if ( hasValue ) {
				// Reset the value when hiding the input and a value exists.
				handleSettingChange( '' );
			}
			setIsSettingActive( false );
		} else {
			setIsSettingActive( true );
		}
	};

	return (
		<fieldset>
			<VisuallyHidden render={ <legend /> }>
				{ setting.title }
			</VisuallyHidden>
			<Stack direction="column" gap="md">
				<CheckboxControl
					label={ setting.title }
					onChange={ handleCheckboxChange }
					checked={ isSettingActive || hasValue }
					aria-expanded={ isSettingActive }
					aria-controls={
						isSettingActive ? controlledRegionId : undefined
					}
				/>
				{ isSettingActive && (
					<div id={ controlledRegionId }>
						<InputControl
							label={ __( 'CSS classes' ) }
							value={ value?.cssClasses }
							onChange={ handleSettingChange }
							help={ __(
								'Separate multiple classes with spaces.'
							) }
							__unstableInputWidth="100%"
						/>
					</div>
				) }
			</Stack>
		</fieldset>
	);
};

export default CSSClassesSettingComponent;