| @@ -1,59 +1,19 @@ | ||
| 1 | 1 | /** |
| 2 | - * JavaScript code for the "Add New" screen | |
| 2 | + * JavaScript code for the "Add New" screen. | |
| 3 | 3 | * |
| 4 | 4 | * @package TablePress |
| 5 | 5 | * @subpackage Views JavaScript |
| 6 | 6 | * @author Tobias Bäthge |
| 7 | - * @since 1.0.0 | |
| 7 | + * @since 3.0.0 | |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | -/* global validateForm */ | |
| 10 | +/** | |
| 11 | + * Internal dependencies. | |
| 12 | + */ | |
| 13 | +import { initializeReactComponent } from './common/react-loader'; | |
| 14 | +import Screen from './add/screen'; | |
| 11 | 15 | |
| 12 | -jQuery( document ).ready( function( $ ) { | |
| 13 | - | |
| 14 | - 'use strict'; | |
| 15 | - | |
| 16 | - /** | |
| 17 | - * Check, whether entered numbers for rows and columns are valid | |
| 18 | - * | |
| 19 | - * @since 1.0.0 | |
| 20 | - */ | |
| 21 | - $( '#tablepress-page' ).find( 'form' ).on( 'submit', function( /* event */ ) { | |
| 22 | - var valid_form = true; | |
| 23 | - | |
| 24 | - // WordPress validation function, checks if required fields (.form-required) are non-empty | |
| 25 | - if ( ! validateForm( $(this) ) ) { | |
| 26 | - valid_form = false; | |
| 27 | - } | |
| 28 | - | |
| 29 | - // validate numerical values (.form-field-numbers-only): only 1 < x < 9...9 (up to maxlength) are allowed | |
| 30 | - $( '#tablepress-page' ).find( '.form-field-numbers-only' ).find( 'input' ).each( function() { | |
| 31 | - var $field = $(this), | |
| 32 | - maxlength = parseInt( $field.attr( 'maxlength' ), 10 ), | |
| 33 | - regexp_number; | |
| 34 | - | |
| 35 | - if ( ! isNaN( maxlength ) ) { | |
| 36 | - maxlength += -1; // first number is handled already in RegExp | |
| 37 | - } else { | |
| 38 | - maxlength = ''; | |
| 39 | - } | |
| 40 | - | |
| 41 | - regexp_number = new RegExp( '^[1-9][0-9]{0,' + maxlength + '}$' ); | |
| 42 | - if ( regexp_number.test( $field.val() ) ) { | |
| 43 | - return; // field is valid | |
| 44 | - } | |
| 45 | - | |
| 46 | - $field | |
| 47 | - .one( 'change', function() { $(this).closest( '.form-invalid' ).removeClass( 'form-invalid' ); } ) | |
| 48 | - .focus().select() | |
| 49 | - .closest( '.form-field' ).addClass( 'form-invalid' ); | |
| 50 | - valid_form = false; | |
| 51 | - } ); | |
| 52 | - | |
| 53 | - // Don't submit the form if it's not valid. | |
| 54 | - if ( ! valid_form ) { | |
| 55 | - return false; | |
| 56 | - } | |
| 57 | - } ); | |
| 58 | - | |
| 59 | -} ); | |
| 16 | +initializeReactComponent( | |
| 17 | + 'tablepress-add-screen', | |
| 18 | + <Screen /> | |
| 19 | +); | |
