| @@ -7,95 +7,13 @@ | ||
| 7 | 7 | * @since 1.0.0 |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | 10 | /** |
| 11 | - * WordPress dependencies. | |
| 12 | - */ | |
| 13 | -import { __, _x, sprintf } from '@wordpress/i18n'; | |
| 14 | - | |
| 15 | -/** | |
| 16 | 11 | * Internal dependencies. |
| 17 | 12 | */ |
| 18 | -import { $ } from './_common-functions'; | |
| 13 | +import { initializeReactComponent } from './common/react-loader'; | |
| 14 | +import Screen from './export/screen'; | |
| 19 | 15 | |
| 20 | -const $tables_export_dropdown = $( '#tables-export' ); | |
| 21 | -const $cb_tables_export_zip_file = $( '#tables-export-zip-file' ); | |
| 22 | - | |
| 23 | -/** | |
| 24 | - * Change keyboard keys for multi-table export when the user is using a Mac. | |
| 25 | - * | |
| 26 | - * @since 2.0.0 | |
| 27 | - */ | |
| 28 | -if ( window?.navigator?.platform?.includes( 'Mac' ) ) { | |
| 29 | - const description = $( '#tables-export-shortcut-description' ); | |
| 30 | - if ( description ) { | |
| 31 | - description.textContent = sprintf( __( 'You can select multiple tables by holding down the “%1$s” key or the “%2$s” key for ranges.', 'tablepress' ), _x( '⌘', 'keyboard shortcut modifier key on a Mac keyboard', 'tablepress' ), _x( 'Shift', 'keyboard key', 'tablepress' ) ); | |
| 32 | - } | |
| 33 | -} | |
| 34 | - | |
| 35 | -/** | |
| 36 | - * Check, whether inputs are valid. | |
| 37 | - * | |
| 38 | - * @since 1.0.0 | |
| 39 | - */ | |
| 40 | -document.querySelector( '#tablepress-page form' ).addEventListener( 'submit', function ( event ) { | |
| 41 | - const selected_tables = [ ...$tables_export_dropdown.selectedOptions ].map( ( option ) => option.value ); | |
| 42 | - | |
| 43 | - // Don't submit the form if no table was selected. | |
| 44 | - if ( 0 === selected_tables.length ) { | |
| 45 | - event.preventDefault(); | |
| 46 | - return; | |
| 47 | - } | |
| 48 | - | |
| 49 | - /* | |
| 50 | - * Add selected tables as a comma-separated list to a hidden field. | |
| 51 | - * The import will then prefer that value over the transmitted array values of the dropdown. | |
| 52 | - */ | |
| 53 | - $( '#tables-export-list' ).value = selected_tables.join(); | |
| 54 | - | |
| 55 | - // On form submit: Enable disabled fields, so that they are sent in the HTTP POST request. | |
| 56 | - $cb_tables_export_zip_file.disabled = false; | |
| 57 | -} ); | |
| 58 | - | |
| 59 | -/** | |
| 60 | - * Show export delimiter dropdown box only if export format is CSV. | |
| 61 | - * | |
| 62 | - * @since 1.0.0 | |
| 63 | - */ | |
| 64 | -const $tables_export_format_dropdown = $( '#tables-export-format' ); | |
| 65 | -$tables_export_format_dropdown.addEventListener( 'change', function () { | |
| 66 | - const non_csv_selected = ( 'csv' !== this.value ); | |
| 67 | - $( '#tables-export-csv-delimiter' ).disabled = non_csv_selected; | |
| 68 | - $( '#tables-export-csv-delimiter-description' ).style.display = non_csv_selected ? 'inline' : 'none'; | |
| 69 | -} ); | |
| 70 | -$tables_export_format_dropdown.dispatchEvent( new Event( 'change' ) ); | |
| 71 | - | |
| 72 | -/** | |
| 73 | - * Automatically check and disable the "ZIP file" checkbox whenever more than one table is selected. | |
| 74 | - * | |
| 75 | - * @since 1.0.0 | |
| 76 | - */ | |
| 77 | -let zip_file_manually_checked = false; | |
| 78 | -$cb_tables_export_zip_file.addEventListener( 'change', function () { | |
| 79 | - zip_file_manually_checked = this.checked; | |
| 80 | -} ); | |
| 81 | - | |
| 82 | -const $cb_tables_export_select_all = $( '#tables-export-select-all' ); | |
| 83 | -$tables_export_dropdown.addEventListener( 'change', function () { | |
| 84 | - const zip_file_required = ( $tables_export_dropdown.selectedOptions.length > 1 ); | |
| 85 | - $cb_tables_export_zip_file.disabled = zip_file_required; | |
| 86 | - $cb_tables_export_zip_file.checked = ( zip_file_required || zip_file_manually_checked ); | |
| 87 | - $( '#tables-export-zip-file-description' ).style.display = zip_file_required ? 'inline' : 'none'; | |
| 88 | - // Set state of "Select all" checkbox, depending on whether all tables are selected. | |
| 89 | - $cb_tables_export_select_all.checked = ( $tables_export_dropdown.options.length === $tables_export_dropdown.selectedOptions.length ); | |
| 90 | -} ); | |
| 91 | -$tables_export_dropdown.dispatchEvent( new Event( 'change' ) ); | |
| 92 | - | |
| 93 | -/** | |
| 94 | - * (De-)select all entries from the multiple-select tables dropdown when the "Select All" checkbox is toggled. | |
| 95 | - * | |
| 96 | - * @since 1.0.0 | |
| 97 | - */ | |
| 98 | -$cb_tables_export_select_all.addEventListener( 'change', function () { | |
| 99 | - [ ...$tables_export_dropdown.options ].forEach( ( option ) => ( option.selected = this.checked ) ); | |
| 100 | - $tables_export_dropdown.dispatchEvent( new Event( 'change' ) ); // Update ZIP file checkbox. | |
| 101 | -} ); | |
| 16 | +initializeReactComponent( | |
| 17 | + 'tablepress-export-screen', | |
| 18 | + <Screen /> | |
| 19 | +); | |
