Make button text always an option #2766

CalderaWP · Nov 14, 2018 · c850d41 · c850d41
1 parent 67c1427
commit c850d41
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 28 deletions.
diff --git a/clients/blocks/build/index.min.js.map b/clients/blocks/build/index.min.js.map
diff --git a/clients/privacy/build/index.min.js.map b/clients/privacy/build/index.min.js.map
diff --git a/clients/pro/build/index.min.js.map b/clients/pro/build/index.min.js.map
diff --git a/clients/render/build/index.min.js b/clients/render/build/index.min.js
@@ -29070,6 +29070,10 @@ FileInput.fieldConfigToProps = function (fieldConfig) {
 				props.usePreviews = false;
 			}
 		}
+
+		if (configOptions.multiUploadText === false) {
+			props.multiUploadText = 'Drop files or click to select files to Upload';
+		}
 	}
 
 	return props;

diff --git a/clients/render/build/index.min.js.map b/clients/render/build/index.min.js.map
diff --git a/clients/render/components/Fields/FileInput.js b/clients/render/components/Fields/FileInput.js
@@ -237,6 +237,10 @@ FileInput.fieldConfigToProps = (fieldConfig) => {
       }
     }
 
+    if(configOptions.multiUploadText === false){
+			props.multiUploadText = 'Drop files or click to select files to Upload';
+		}
+
 	}
 
 	return props;

diff --git a/clients/tests/unit/render/Fields/FileInput.test.js b/clients/tests/unit/render/Fields/FileInput.test.js
@@ -65,6 +65,11 @@ describe('File Field ', () => {
     expect(prepared.previewWidth).toEqual( 40 );
 	});
 
+  it('Prepares props and sets multiUploadText', () => {
+    const prepared = FileInput.fieldConfigToProps(fileFieldConfigs.required_multiple_has_button_text);
+    expect(prepared.multiUploadText).toEqual( 'The Custom Text' );
+  });
+
 	it.skip('Prepares props and sets the allowed types in inputProps when it should', () => {
 		const prepared = FileInput.fieldConfigToProps(fileFieldConfigs.required_single);
 		//expect( fileFieldConfigs ).toEqual( 'image/png');

diff --git a/clients/tests/unit/render/Fields/Mocks/MockFileRenderer.test.js b/clients/tests/unit/render/Fields/Mocks/MockFileRenderer.test.js
@@ -175,5 +175,21 @@ describe( 'DOM testing file components', () => {
     expect( component.find( '.cf2-file-field-img-preview' ).html() ).toBe("<img class=\"cf2-file-field-img-preview\" width=\"24\" height=\"24\" src=\"pic.png\" alt=\"pic.png\">");
 	});
 
+  it( 'Shows default and custom button text', () => {
+    let prepared = FileInput.fieldConfigToProps(fileFieldConfigs.not_required_multiple_no_button_text);
+    let field = prepared.field;
+    const component = mount(
+      <FileInput
+        field={field}
+      />
+    );
+    component.setProps(prepared);
+    expect( component.find( '.btn' ).text() ).toEqual("Drop files or click to select files to Upload");
+
+    prepared = FileInput.fieldConfigToProps(fileFieldConfigs.required_multiple_has_button_text);
+    component.setProps(prepared);
+    expect( component.find( '.btn' ).text() ).toEqual("The Custom Text");
+  });
+
 
 });
diff --git a/clients/tests/unit/render/Fields/Mocks/fileFieldConfigs.js b/clients/tests/unit/render/Fields/Mocks/fileFieldConfigs.js
@@ -61,7 +61,7 @@ export const fileFieldConfigs  = {
 			configOptions:
 				{
 					multiple: 1,
-					multiUploadText: 'false',
+					multiUploadText: false,
 					allowedTypes: 'false',
           usePreviews: 1,
 					previewHeight: 24,
@@ -83,7 +83,7 @@ export const fileFieldConfigs  = {
 			configOptions:
 				{
 					multiple: 1,
-					multiUploadText: 'The Default Text',
+					multiUploadText: 'The Custom Text',
 					allowedTypes: 'false',
 					usePreviews: 1,
 					previewHeight: 24,
@@ -105,7 +105,7 @@ export const fileFieldConfigs  = {
 			configOptions:
 				{
 					multiple: 'false',
-					multiUploadText: 'false',
+					multiUploadText: false,
 					allowedTypes: 'false',
           usePreviews: 1,
 					previewHeight: 24,
@@ -127,7 +127,7 @@ export const fileFieldConfigs  = {
 			configOptions:
 				{
 					multiple: 1,
-					multiUploadText: 'false',
+					multiUploadText: false,
 					allowedTypes: 'false',
           usePreviews: 1,
 					previewHeight: 24,

diff --git a/fields/cf2_file/config.php b/fields/cf2_file/config.php
@@ -1,3 +1,13 @@
+<div class="caldera-config-group">
+    <label for="{{_id}}_allow_multiple_text">
+        <?php echo esc_html__('Button Text', 'caldera-forms'); ?>
+    </label>
+    <div class="caldera-config-field">
+        <input id="{{_id}}_allow_multiple_text" type="text" class="field-config" name="{{_name}}[multi_upload_text]"
+               value="{{#if multi_upload_text}}{{multi_upload_text}}{{/if}}">
+    </div>
+</div>
+
 <div class="caldera-config-group">
     <label role="presentation"></label>
     <div class="caldera-config-field">
@@ -31,16 +41,6 @@
 </div>
 
 
-<div class="caldera-config-group" id="{{_id}}_allow_multiple_text_wrap">
-    <label for="{{_id}}_allow_multiple_text">
-		<?php echo esc_html__('Button Text', 'caldera-forms'); ?>
-    </label>
-    <div class="caldera-config-field">
-        <input id="{{_id}}_allow_multiple_text" type="text" class="field-config" name="{{_name}}[multi_upload_text]"
-               value="{{#if multi_upload_text}}{{multi_upload_text}}{{/if}}">
-    </div>
-</div>
-
 <div class="caldera-config-group">
     <label for="{{_id}}_allowed"><?php echo esc_html__('Allowed Types', 'caldera-forms'); ?></label>
     <div class="caldera-config-field">
@@ -103,16 +103,6 @@ class="field-config"
 {{#script}}
 jQuery(function($){
 
-//Multiple button text
-$('#{{_id}}_allow_multiple').change(function(){
-    if( $(this).prop('checked') ){
-        $('#{{_id}}_allow_multiple_text_wrap').show();
-    }else{
-        $('#{{_id}}_allow_multiple_text_wrap').hide();
-    }
-});
-$('#{{_id}}_allow_multiple').trigger('change');
-
 //Image previews sizes
 $('#{{_id}}_use_image_previews').change(function(){
     if( $(this).prop('checked') ){

diff --git a/tests/Unit/RenderFieldTest.php b/tests/Unit/RenderFieldTest.php
@@ -227,6 +227,35 @@ public function testPreviewSizeForFileFieldsDefaults(){
 		$this->assertSame(24,$data['configOptions' ][ 'previewWidth'] );
 		$this->assertSame(24,$data['configOptions' ][ 'previewHeight'] );
 	}
+
+    /**
+     * @covers \calderawp\calderaforms\cf2\Fields\RenderField::data();
+     */
+    public function testButtonDefaultTextForFileFields(){
+        $field = $this->fieldForRenderFactory('required_multiple_no_button_text');
+        $field[ 'type' ] = 'cf2_file';
+        $formIdAttr = 'cf2_1';
+        $renderer = new RenderField($formIdAttr,$field );
+        $data = $renderer->data();
+
+        $this->assertArrayHasKey('multiUploadText',$data['configOptions' ] );
+        $this->assertSame('Try dropping some files here, or click to select file to upload.',$data[ 'configOptions' ][ 'multiUploadText' ] );
+    }
+
+    /**
+     * @covers \calderawp\calderaforms\cf2\Fields\RenderField::data();
+     */
+    public function testButtonSetTextForFileFields(){
+        $field = $this->fieldForRenderFactory('required_multiple_has_button_text');
+        $field[ 'type' ] = 'cf2_file';
+        $formIdAttr = 'cf2_1';
+        $renderer = new RenderField($formIdAttr,$field );
+        $data = $renderer->data();
+
+        $this->assertArrayHasKey('multiUploadText',$data['configOptions' ] );
+        $this->assertSame('The Default Text',$data[ 'configOptions' ][ 'multiUploadText' ] );
+    }
+
     /**
      * @return array
      */