| @@ -1,6 +1,6 @@ | ||
| 1 | 1 | /** |
| 2 | - * JavaScript code for the "Export" screen | |
| 2 | + * JavaScript code for the "Export" screen. | |
| 3 | 3 | * |
| 4 | 4 | * @package TablePress |
| 5 | 5 | * @subpackage Views JavaScript |
| 6 | 6 | * @author Tobias Bäthge |
| @@ -6,84 +6,14 @@ | ||
| 6 | 6 | * @author Tobias Bäthge |
| 7 | 7 | * @since 1.0.0 |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | -jQuery( document ).ready( function( $ ) { | |
| 10 | +/** | |
| 11 | + * Internal dependencies. | |
| 12 | + */ | |
| 13 | +import { initializeReactComponent } from './common/react-loader'; | |
| 14 | +import Screen from './export/screen'; | |
| 11 | 15 | |
| 12 | - 'use strict'; | |
| 13 | - | |
| 14 | - /** | |
| 15 | - * Check, whether inputs are valid | |
| 16 | - * | |
| 17 | - * @since 1.0.0 | |
| 18 | - */ | |
| 19 | - $( '#tablepress-page' ).find( 'form' ).on( 'submit', function( /* event */ ) { | |
| 20 | - var selected_tables = $( '#tables-export' ).val(), | |
| 21 | - num_selected = ( selected_tables ) ? selected_tables.length : 0; | |
| 22 | - | |
| 23 | - // only submit form, if at least one table was selected | |
| 24 | - if ( 0 === num_selected ) { | |
| 25 | - return false; | |
| 26 | - } | |
| 27 | - | |
| 28 | - // at this point, the form is valid and will be submitted | |
| 29 | - | |
| 30 | - // add selected tables as a list to a hidden field | |
| 31 | - $( '#tables-export-list' ).val( selected_tables.join( ',' ) ); | |
| 32 | - | |
| 33 | - // on form submit: Enable disabled fields, so that they are transmitted in the POST request | |
| 34 | - $( '#tables-export-zip-file' ).prop( 'disabled', false ); | |
| 35 | - } ); | |
| 36 | - | |
| 37 | - /** | |
| 38 | - * Show export delimiter dropdown box only if export format is CSV | |
| 39 | - * | |
| 40 | - * @since 1.0.0 | |
| 41 | - */ | |
| 42 | - $( '#tables-export-format' ).on( 'change', function() { | |
| 43 | - var non_csv_selected = ( 'csv' !== $(this).val() ); | |
| 44 | - $( '#tables-export-csv-delimiter' ).prop( 'disabled', non_csv_selected ); | |
| 45 | - $( '#tables-export-csv-delimiter-description' ).toggle( non_csv_selected ); | |
| 46 | - } ) | |
| 47 | - .change(); | |
| 48 | - | |
| 49 | - /** | |
| 50 | - * Automatically check and disable the "ZIP file" checkbox whenever more than one table is selected | |
| 51 | - * | |
| 52 | - * @since 1.0.0 | |
| 53 | - */ | |
| 54 | - var zip_file_manually_checked = false; | |
| 55 | - $( '#tables-export-zip-file' ).on( 'change', function() { | |
| 56 | - zip_file_manually_checked = $(this).prop( 'checked' ); | |
| 57 | - } ); | |
| 58 | - $( '#tables-export' ).on( 'change', function() { | |
| 59 | - var selected_tables = $(this).val(), | |
| 60 | - num_selected = ( selected_tables ) ? selected_tables.length : 0, | |
| 61 | - zip_file_required = ( num_selected > 1 ); | |
| 62 | - $( '#tables-export-zip-file' ) | |
| 63 | - .prop( 'disabled', zip_file_required ) | |
| 64 | - .prop( 'checked', zip_file_required || zip_file_manually_checked ); | |
| 65 | - $( '#tables-export-zip-file-description' ).toggle( zip_file_required ); | |
| 66 | - // set state of "Select all" checkbox | |
| 67 | - $( '#tables-export-select-all' ).prop( 'checked', 0 === $(this).find( 'option' ).not( ':selected' ).length ); | |
| 68 | - } ) | |
| 69 | - .change(); | |
| 70 | - | |
| 71 | - /** | |
| 72 | - * Select all entries from the multiple-select dropdown on checkbox change | |
| 73 | - * | |
| 74 | - * @since 1.0.0 | |
| 75 | - */ | |
| 76 | - $( '#tables-export-select-all' ).on( 'change', function() { | |
| 77 | - var $tables = $( '#tables-export' ); | |
| 78 | - $tables.find( 'option' ).prop( 'selected', $(this).prop( 'checked' ) ); | |
| 79 | - $tables.change(); // to update ZIP file checkbox | |
| 80 | - } ); | |
| 81 | - | |
| 82 | - /** | |
| 83 | - * Automatically focus the tables dropdown | |
| 84 | - * | |
| 85 | - * @since 1.0.0 | |
| 86 | - */ | |
| 87 | - $( '#tables-export' ).focus(); | |
| 88 | - | |
| 89 | -} ); | |
| 16 | +initializeReactComponent( | |
| 17 | + 'tablepress-export-screen', | |
| 18 | + <Screen /> | |
| 19 | +); | |
