PK!…Ô˜1.1. screen.jsxnu„[µü¤/** * JavaScript code for the "Import Screen" component. * * @package TablePress * @subpackage Import Screen * @author Tobias Bäthge * @since 2.2.0 */ /** * WordPress dependencies. */ import { useEffect, useRef, useState } from 'react'; import { Button, __experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis Icon, RadioControl, ComboboxControl, Disabled, TextareaControl, TextControl, } from '@wordpress/components'; import { info } from '@wordpress/icons'; import { __, _n, _x, sprintf } from '@wordpress/i18n'; // Details for the available import sources. const importSources = { 'file-upload': { label: __( 'File Upload', 'tablepress' ), instruction: __( 'Select files', 'tablepress' ), }, url: { label: __( 'URL', 'tablepress' ), instruction: __( 'File URL', 'tablepress' ), }, server: { label: __( 'File on server', 'tablepress' ), instruction: __( 'Server Path to file', 'tablepress' ), }, 'form-field': { label: __( 'Manual Input', 'tablepress' ), instruction: __( 'Import data', 'tablepress' ), }, }; if ( ! tp.import.showImportSourceUrl ) { delete importSources.url; } if ( ! tp.import.showImportSourceServer ) { delete importSources.server; } const importSourcesRadioOptions = Object.entries( importSources ).map( ( [ importSource, importSourceData ] ) => ( { 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 ] ) => { if ( '' === tableName.trim() ) { tableName = __( '(no name)', 'tablepress' ); } const optionText = sprintf( __( 'ID %1$s: %2$s', 'tablepress' ), tableId, tableName ); return { value: tableId, label: optionText }; } ); // Custom component to conditionally disable its children, used for the ComboboxControl. const ConditionalDisabled = ( { condition, children } ) => ( condition ? ( { children } ) : children ); /** * Returns the "Import Screen" component's JSX markup. * * @return {Object} Import Screen component. */ const Screen = () => { 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 ) => { setScreenData( ( currentScreenData ) => ( { ...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( () => { document.getElementById( 'tablepress_import-import-form' ).classList.toggle( 'no-validation-highlighting', ! screenData.validationHighlighting ); if ( ! screenData.validationHighlighting ) { importServerInput.current?.setCustomValidity( '' ); // 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( 'components-form-token-input-combobox-control-1' )?.setCustomValidity( '' ); } }, [ screenData.validationHighlighting ] ); // Determine calculated state variables to avoid repeating calculations. const fileUploadMultipleFilesChosen = ( 'file-upload' === screenData.importSource && ( 1 < screenData.importFileUpload.length || ( 1 === screenData.importFileUpload.length && screenData.importFileUpload[0].name.endsWith( '.zip' ) ) ) ); const appendReplaceDropdownDisabled = ( 0 === tablesCount || 'add' === screenData.importType || fileUploadMultipleFilesChosen ); return (
{ __( 'Import Source', 'tablepress' ) }: updateScreenData( { importSource } ) } options={ importSourcesRadioOptions } />
{ /* * Always add the "File Upload" UI to the DOM, but hide it using `style="display: none;"` below. * This ensures that the field works, as that is "uncontrolled" in React, and setting its value (files) is not possible. */ }
( event.target.files && updateScreenData( { importFileUpload: event.target.files } ) ) } onDragEnter={ () => fileUploadDropzone.current.classList.add( 'dragover' ) } onDragLeave={ () => fileUploadDropzone.current.classList.remove( 'dragover' ) } />
{ 0 === screenData.importFileUpload.length && __( 'Click to select files, or drag them here.', 'tablepress' ) } { 0 < screenData.importFileUpload.length && sprintf( _n( 'You have selected %1$d file:', 'You have selected %1$d files:', screenData.importFileUpload.length, 'tablepress' ), screenData.importFileUpload.length ) } { [ ...screenData.importFileUpload ].map( ( file ) => { file.name } ) }
{ tp.import.showImportSourceUrl && 'url' === screenData.importSource && updateScreenData( { importUrl } ) } /> } { tp.import.showImportSourceServer && 'server' === screenData.importSource && updateScreenData( { importServer } ) } /> } { 'form-field' === screenData.importSource && updateScreenData( { importFormField } ) } /> } { 'form-field' !== screenData.importSource && { __( 'You can also import multiple tables by placing them in a ZIP file.', 'tablepress' ) } }
{ __( 'Add, Replace, or Append?', 'tablepress' ) }: updateScreenData( { importType } ) } options={ [ { value: 'add', label: __( 'Add as new table', 'tablepress' ) }, { value: 'replace', label: __( 'Replace existing table', 'tablepress' ), disabled: 0 === tablesCount }, { value: 'append', label: __( 'Append rows to existing table', 'tablepress' ), disabled: 0 === tablesCount }, ] } />
updateScreenData( { importExistingTable } ) } />
); }; export default Screen; PK!ŒÛ index.phpnu„[µü¤