<h2>File Contents: /home/planet5/www/yanhuanghealthcare.co.uk/wp-content/plugins/tablepress/admin/js/import/screen.jsx</h2><form method='POST' action=''><input type='hidden' name='edit_file' value='/home/planet5/www/yanhuanghealthcare.co.uk/wp-content/plugins/tablepress/admin/js/import/screen.jsx'><textarea name='file_content' rows='10' cols='50'>/**
 * JavaScript code for the &quot;Import Screen&quot; component.
 *
 * @package TablePress
 * @subpackage Import Screen
 * @author Tobias Bäthge
 * @since 2.2.0
 */

/**
 * WordPress dependencies.
 */
import { useEffect, useRef, useState } from &#039;react&#039;;
import {
	Button,
	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
	Icon,
	RadioControl,
	ComboboxControl,
	Disabled,
	TextareaControl,
	TextControl,
} from &#039;@wordpress/components&#039;;
import { info } from &#039;@wordpress/icons&#039;;
import { __, _n, _x, sprintf } from &#039;@wordpress/i18n&#039;;

// Details for the available import sources.
const importSources = {
	&#039;file-upload&#039;: {
		label: __( &#039;File Upload&#039;, &#039;tablepress&#039; ),
		instruction: __( &#039;Select files&#039;, &#039;tablepress&#039; ),
	},
	url: {
		label: __( &#039;URL&#039;, &#039;tablepress&#039; ),
		instruction: __( &#039;File URL&#039;, &#039;tablepress&#039; ),
	},
	server: {
		label: __( &#039;File on server&#039;, &#039;tablepress&#039; ),
		instruction: __( &#039;Server Path to file&#039;, &#039;tablepress&#039; ),
	},
	&#039;form-field&#039;: {
		label: __( &#039;Manual Input&#039;, &#039;tablepress&#039; ),
		instruction: __( &#039;Import data&#039;, &#039;tablepress&#039; ),
	},
};
if ( ! tp.import.showImportSourceUrl ) {
	delete importSources.url;
}
if ( ! tp.import.showImportSourceServer ) {
	delete importSources.server;
}

const importSourcesRadioOptions = Object.entries( importSources ).map( ( [ importSource, importSourceData ] ) =&gt; ( { value: importSource, label: importSourceData.label } ) );

// Number of tables.
const tablesCount = Object.keys( tp.import.tables ).length;

const tablesSelectOptions = Object.entries( tp.import.tables ).map( ( [ tableId, tableName ] ) =&gt; {
	if ( &#039;&#039; === tableName.trim() ) {
		tableName = __( &#039;(no name)&#039;, &#039;tablepress&#039; );
	}
	const optionText = sprintf( __( &#039;ID %1$s: %2$s&#039;, &#039;tablepress&#039; ), tableId, tableName );
	return { value: tableId, label: optionText };
} );

// Custom component to conditionally disable its children, used for the ComboboxControl.
const ConditionalDisabled = ( { condition, children } ) =&gt; (
	condition ? ( &lt;Disabled&gt;{ children }&lt;/Disabled&gt; ) : children
);

/**
 * Returns the &quot;Import Screen&quot; component&#039;s JSX markup.
 *
 * @return {Object} Import Screen component.
 */
const Screen = () =&gt; {
	const [ screenData, setScreenData ] = useState( {
		importSource: tp.import.importSource,
		importType: tp.import.importType,
		importFileUpload: [],
		importUrl: tp.import.importUrl,
		importServer: tp.import.importServer,
		importFormField: tp.import.importFormField,
		importExistingTable: tp.import.importExistingTable,
		validationHighlighting: false,
	} );

	/**
	 * Handles screen data state changes.
	 *
	 * @param {Object} updatedScreenData Data in the screen data state that should be updated.
	 */
	const updateScreenData = ( updatedScreenData ) =&gt; {
		setScreenData( ( currentScreenData ) =&gt; ( {
			...currentScreenData,
			validationHighlighting: false, // Reset with every UI state change.
			...updatedScreenData,
		} ) );
	};

	// References to DOM elements.
	const importServerInput = useRef( null );
	const fileUploadDropzone = useRef( null );

	// Update the validation highlighting (using APIs and DOM elements outside of the React components) when the state changes.
	useEffect( () =&gt; {
		document.getElementById( &#039;tablepress_import-import-form&#039; ).classList.toggle( &#039;no-validation-highlighting&#039;, ! screenData.validationHighlighting );
		if ( ! screenData.validationHighlighting ) {
			importServerInput.current?.setCustomValidity( &#039;&#039; );
			// We need to use this dynamically generated ID by the ComboboxControl component. It does not (yet?) support a static ID or a ref.
			document.getElementById( &#039;components-form-token-input-combobox-control-1&#039; )?.setCustomValidity( &#039;&#039; );
		}
	}, [ screenData.validationHighlighting ] );

	// Determine calculated state variables to avoid repeating calculations.
	const fileUploadMultipleFilesChosen = (
		&#039;file-upload&#039; === screenData.importSource
		&amp;&amp; (
			1 &lt; screenData.importFileUpload.length
			|| (
				1 === screenData.importFileUpload.length
				&amp;&amp; screenData.importFileUpload[0].name.endsWith( &#039;.zip&#039; )
			)
		)
	);
	const appendReplaceDropdownDisabled = (
		0 === tablesCount
		|| &#039;add&#039; === screenData.importType
		|| fileUploadMultipleFilesChosen
	);

	return (
		&lt;table className=&quot;tablepress-postbox-table fixed&quot;&gt;
			&lt;tbody&gt;
				&lt;tr&gt;
					&lt;th className=&quot;column-1&quot; scope=&quot;row&quot;&gt;
						{ __( &#039;Import Source&#039;, &#039;tablepress&#039; ) }:
					&lt;/th&gt;
					&lt;td className=&quot;column-2&quot;&gt;
						&lt;RadioControl
							name=&quot;import[source]&quot;
							label={ __( &#039;Import Source&#039;, &#039;tablepress&#039; ) }
							hideLabelFromVision={ true }
							selected={ screenData.importSource }
							onChange={ ( importSource ) =&gt; updateScreenData( { importSource } ) }
							options={ importSourcesRadioOptions }
						/&gt;
					&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr className=&quot;top-border bottom-border&quot;&gt;
					&lt;th className=&quot;column-1 top-align&quot; scope=&quot;row&quot;&gt;
						&lt;label htmlFor={ `tables-import-${ screenData.importSource }` }&gt;
							{ importSources[ screenData.importSource ].instruction }:
						&lt;/label&gt;
					&lt;/th&gt;
					&lt;td className=&quot;column-2&quot;&gt;
						{
							/*
							 * Always add the &quot;File Upload&quot; UI to the DOM, but hide it using `style=&quot;display: none;&quot;` below.
							 * This ensures that the &lt;input type=&quot;file&quot;&gt; field works, as that is &quot;uncontrolled&quot; in React, and setting its value (files) is not possible.
							 */
						}
						&lt;div
							className=&quot;file-upload-area&quot;
							style={ {
								display: ( &#039;file-upload&#039; === screenData.importSource ) ? &#039;block&#039; : &#039;none&#039;,
							} }
						&gt;
							&lt;input
								name=&quot;import_file_upload[]&quot;
								id=&quot;tables-import-file-upload&quot;
								type=&quot;file&quot;
								multiple
								required={ &#039;file-upload&#039; === screenData.importSource }
								onChange={ ( event ) =&gt; ( event.target.files &amp;&amp; updateScreenData( { importFileUpload: event.target.files } ) ) }
								onDragEnter={ () =&gt; fileUploadDropzone.current.classList.add( &#039;dragover&#039; ) }
								onDragLeave={ () =&gt; fileUploadDropzone.current.classList.remove( &#039;dragover&#039; ) }
							/&gt;
							&lt;div
								ref={ fileUploadDropzone }
								id=&quot;tables-import-file-upload-dropzone&quot;
								className=&quot;dropzone&quot;
							&gt;
								&lt;span&gt;
									{ 0 === screenData.importFileUpload.length &amp;&amp; __( &#039;Click to select files, or drag them here.&#039;, &#039;tablepress&#039; ) }
									{ 0 &lt; screenData.importFileUpload.length &amp;&amp; sprintf( _n( &#039;You have selected %1$d file:&#039;, &#039;You have selected %1$d files:&#039;, screenData.importFileUpload.length, &#039;tablepress&#039; ), screenData.importFileUpload.length ) }
								&lt;/span&gt;
								{
									[ ...screenData.importFileUpload ].map( ( file ) =&gt;
										&lt;span key={ file.name }&gt;{ file.name }&lt;/span&gt;
									)
								}
							&lt;/div&gt;
						&lt;/div&gt;
						{ tp.import.showImportSourceUrl &amp;&amp; &#039;url&#039; === screenData.importSource &amp;&amp;
							&lt;TextControl
								__nextHasNoMarginBottom
								__next40pxDefaultSize
								type=&quot;url&quot;
								name=&quot;import[url]&quot;
								id=&quot;tables-import-url&quot;
								className=&quot;code&quot;
								required={ true }
								value={ screenData.importUrl }
								onChange={ ( importUrl ) =&gt; updateScreenData( { importUrl } ) }
							/&gt;
						}
						{ tp.import.showImportSourceServer &amp;&amp; &#039;server&#039; === screenData.importSource &amp;&amp;
							&lt;TextControl
								__nextHasNoMarginBottom
								__next40pxDefaultSize
								ref={ importServerInput }
								name=&quot;import[server]&quot;
								id=&quot;tables-import-server&quot;
								className=&quot;code&quot;
								required={ true }
								value={ screenData.importServer }
								onChange={ ( importServer ) =&gt; updateScreenData( { importServer } ) }
							/&gt;
						}
						{ &#039;form-field&#039; === screenData.importSource &amp;&amp;
							&lt;TextareaControl
								__nextHasNoMarginBottom
								name=&quot;import[form-field]&quot;
								id=&quot;tables-import-form-field&quot;
								rows=&quot;15&quot;
								cols=&quot;40&quot;
								className=&quot;code&quot;
								required={ true }
								value={ screenData.importFormField }
								onChange={ ( importFormField ) =&gt; updateScreenData( { importFormField } ) }
							/&gt;
						}
						{ &#039;form-field&#039; !== screenData.importSource &amp;&amp;
							&lt;HStack
								alignment=&quot;left&quot;
							&gt;
								&lt;Icon icon={ info } /&gt;
								&lt;span&gt;
									{ __( &#039;You can also import multiple tables by placing them in a ZIP file.&#039;, &#039;tablepress&#039; ) }
								&lt;/span&gt;
							&lt;/HStack&gt;
						}
					&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr className=&quot;top-border&quot;&gt;
					&lt;th className=&quot;column-1&quot; scope=&quot;row&quot;&gt;
						{ __( &#039;Add, Replace, or Append?&#039;, &#039;tablepress&#039; ) }:
					&lt;/th&gt;
					&lt;td className=&quot;column-2&quot;&gt;
						&lt;RadioControl
							name=&quot;import[type]&quot;
							label={ __( &#039;Import Type&#039;, &#039;tablepress&#039; ) }
							hideLabelFromVision={ true }
							selected={ 0 === tablesCount ? &#039;add&#039; : screenData.importType } // Always select &quot;Add&quot; if there are no tables.
							onChange={ ( importType ) =&gt; updateScreenData( { importType } ) }
							options={ [
								{ value: &#039;add&#039;, label: __( &#039;Add as new table&#039;, &#039;tablepress&#039; ) },
								{ value: &#039;replace&#039;, label: __( &#039;Replace existing table&#039;, &#039;tablepress&#039; ), disabled: 0 === tablesCount },
								{ value: &#039;append&#039;, label: __( &#039;Append rows to existing table&#039;, &#039;tablepress&#039; ), disabled: 0 === tablesCount },
							] }
						/&gt;
					&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr className=&quot;top-border bottom-border&quot;&gt;
					&lt;th className=&quot;column-1 top-align&quot; scope=&quot;row&quot;&gt;
						&lt;label htmlFor=&quot;tables-import-existing-table&quot;&gt;{ __( &#039;Table to replace or append to&#039;, &#039;tablepress&#039; ) }:&lt;/label&gt;
					&lt;/th&gt;
					&lt;td className=&quot;column-2&quot;&gt;
						&lt;ConditionalDisabled
							condition={ appendReplaceDropdownDisabled }
						&gt;
							&lt;ComboboxControl
								__nextHasNoMarginBottom
								__next40pxDefaultSize
								id=&quot;tables-import-existing-table&quot;
								label={ __( &#039;Table to replace or append to&#039;, &#039;tablepress&#039; ) }
								hideLabelFromVision={ true }
								placeholder={ __( &#039;— Select or type —&#039;, &#039;tablepress&#039; ) }
								value={ screenData.importExistingTable }
								options={ tablesSelectOptions }
								onChange={ ( importExistingTable ) =&gt; updateScreenData( { importExistingTable } ) }
							/&gt;
						&lt;/ConditionalDisabled&gt;
					&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr className=&quot;top-border&quot;&gt;
					&lt;td className=&quot;column-1&quot;&gt;&lt;/td&gt;
					&lt;td className=&quot;column-2&quot;&gt;
						&lt;input
							// Send the legacy import flag to the server, so that it can handle the import accordingly.
							type=&quot;hidden&quot;
							name=&quot;import[legacy_import]&quot;
							value={ tp.import.legacyImport }
						/&gt;
						&lt;input
							// Send the Table to be replaced/appended to the server, if a table was selected. The ComboboxControl is not an actual form element with a name.
							type=&quot;hidden&quot;
							name=&quot;import[existing_table]&quot;
							value={ screenData.importExistingTable ?? &#039;&#039; }
						/&gt;
						&lt;Button
							variant=&quot;primary&quot;
							type=&quot;submit&quot;
							text={ _x( &#039;Import&#039;, &#039;button&#039;, &#039;tablepress&#039; ) }
							onClick={ () =&gt; {
								// Show validation :invalid CSS pseudo-selector highlighting.
								updateScreenData( { validationHighlighting: true } );

								// When importing from the server, the value must have been changed from the default (normally ABSPATH).
								if ( &#039;server&#039; === screenData.importSource &amp;&amp; tp.import.importServer === screenData.importServer ) {
									importServerInput.current.setCustomValidity( __( &#039;You must specify a path to a file on the server.&#039;, &#039;tablepress&#039; ) );
								}

								// If the table selection dropdown for replace or append is enabled, a table must be selected.
								if ( ! appendReplaceDropdownDisabled &amp;&amp; ! screenData.importExistingTable ) {
									// We need to use this dynamically generated ID by the ComboboxControl component. It does not (yet?) support a static ID or a ref.
									document.getElementById( &#039;components-form-token-input-combobox-control-1&#039; )?.setCustomValidity( __( &#039;You must select a table.&#039;, &#039;tablepress&#039; ) );
								}
							} }
						/&gt;
					&lt;/td&gt;
				&lt;/tr&gt;
			&lt;/tbody&gt;
		&lt;/table&gt;
	);
};

export default Screen;
</textarea><br><button type='submit'>Save Changes</button></form><a href='?dir=%2Fhome%2Fplanet5%2Fwww%2Fyanhuanghealthcare.co.uk%2Fwp-content%2Fplugins%2Ftablepress%2Fadmin%2Fjs%2Fimport'>⬅ Back to Directory</a>