demountable

Back Back Up Advanced Editor

import { cn } from '@Functions/utils';
import { forwardRef, Fragment, useState } from '@wordpress/element';
import { Select, Input, Checkbox, Label, Text } from '@bsf/force-ui';
import { __ } from '@wordpress/i18n';
import MediaPreview from '../admin-components/media-preview';
import { createMediaFrame } from '@/global/utils/utils';

// Track which elements have already been initially focused
const initiallyFocusedElements = new WeakMap();

export const focusHelper = ( el ) => {
	if (
		el &&
		typeof el.focus === 'function' &&
		! initiallyFocusedElements.get( el )
	) {
		// Use setTimeout to ensure the element is fully rendered and avoid focusing during re-renders
		setTimeout( () => {
			el.focus();
		}, 0 );
		initiallyFocusedElements.set( el, true );
	}
};

export const renderField = ( field, fieldValue, onChange, error, option ) => {
	const {
		label,
		name,
		type,
		options: fieldOptions,
		defaultValue,
		width = 'full',
		combobox = false,
		size = 'md',
		description = null,
	} = field;

const handleClick = ( event ) => {
		//prevent native file input from opening
		event.preventDefault();
		const frame = createMediaFrame( {
			title: field?.label,
			button: {
				text: field?.label,
			},
			multiple: false,
		} );

frame.on( 'select', () => {
			const attachment = frame
				.state()
				.get( 'selection' )
				.first()
				.toJSON();
			const attachmentId = attachment.id || null;
			const fileName = attachment.filename || null;
			const fileUrl = attachment.url || null;
			const fileType = attachment?.type || null;
			const fileSize = attachment?.filesizeInBytes || null;
			onChange( {
				attachment_id: attachmentId,
				name: fileName,
				size: fileSize,
				url: fileUrl,
				type: fileType,
			} );

frame.close();
		} );

frame.open();
	};

return (
		<div
			className={ cn(
				width !== 'full' ? 'grow w-full md:w-5/12' : 'w-full'
			) }
		>
			{ children }
		</div>
	);
};

const SelectWithCustomSearch = forwardRef(
	(
		{
			id,
			searchFn,
			size,
			combobox,
			label,
			defaultValue,
			value,
			onChange,
			options = [],
			by = 'value',
		},
		ref
	) => {
		const [ selectOptions, setSelectOptions ] = useState( options );

const handleSearch = searchFn
			? async ( keyword ) => {
					const results = await searchFn( keyword );
					setSelectOptions( results );
			  }
			: undefined;

const formatWithSpace = ( value ) => {
	if ( ! value || typeof value !== 'string' ) {
		return value;
	}
	return value
		.replace( /([a-z])([A-Z])/g, '$1 $2' )
		.replace( /([A-Z])([A-Z][a-z])/g, '$1 $2' );
};

const SelectWithGroup = forwardRef(
	( { id, label, value, onChange, options = [] }, ref ) => {
		return (
			<Select size="md" value={ value } onChange={ onChange }>
				<Select.Button
					id={ id }
					label={ label }
					render={ ( selectedValue ) =>
						formatWithSpace( selectedValue )
					}
					type="button"
					ref={ ref }
				/>
				<Select.Portal id="surerank-root">
					<Select.Options>
						{ options.map( ( group, index ) => (
							<Select.OptionGroup
								key={ index }
								label={ group.label }
							>
								{ Object.entries( group.options ).map(
									( [ key, valueLabel ] ) => (
										<Select.Option
											key={ key }
											value={ key }
										>
											{ formatWithSpace( valueLabel ) }
										</Select.Option>
									)
								) }
							</Select.OptionGroup>
						) ) }
					</Select.Options>
				</Select.Portal>
			</Select>
		);
	}
);