Revert "#19 get buttons in RenderGroups sort of working, failing test…

…s indicate work to be done" This reverts commit db15879.
CalderaWP · Jul 26, 2018 · 6505d11 · 6505d11
1 parent db15879
commit 6505d11
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 257 deletions.
diff --git a/src/components/RenderGroup.js b/src/components/RenderGroup.js
@@ -108,6 +108,5 @@ RenderGroup.classNames = {
 	fieldGroup: 'caldera-config-group',
 	fieldWrapper: 'caldera-config-field',
 	input: 'field-config',
-	button: 'caldera-config-button',
 
 };
diff --git a/src/components/__snapshots__/renderGroup.test.js.snap b/src/components/__snapshots__/renderGroup.test.js.snap
@@ -1,66 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`The render group component Button fields inside render groups Button RenderGroup snapshots Renders a regular button 1`] = `
-<div
-  className="caldera-config-field-setup"
->
-  <div
-    className="caldera-config-group"
-  >
-    <div
-      className="caldera-config-field"
-    >
-      <label
-        htmlFor="RendersARegularButtonSnapShotTest"
-      >
-        Submit
-      </label>
-      <button
-        aria-describedby={null}
-        className="field-config field-config caldera-config-button"
-        disabled={false}
-        id="RendersARegularButtonSnapShotTest"
-        onBlur={undefined}
-        onClick={undefined}
-        onFocus={undefined}
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`The render group component Button fields inside render groups Button RenderGroup snapshots Renders a submit button 1`] = `
-<div
-  className="caldera-config-field-setup"
->
-  <div
-    className="caldera-config-group"
-  >
-    <div
-      className="caldera-config-field"
-    >
-      <label
-        htmlFor="cf-button-example"
-      >
-        Submit
-      </label>
-      <input
-        aria-describedby={null}
-        className="field-config field-config caldera-config-button"
-        disabled={false}
-        id="cf-button-example"
-        onBlur={undefined}
-        onClick={undefined}
-        onFocus={undefined}
-        required={undefined}
-        type="submit"
-        value={undefined}
-      />
-    </div>
-  </div>
-</div>
-`;
-
 exports[`The render group component Rendering with fields Does not error when passed empty array of fields 1`] = `
 <div
   className="caldera-config-field-setup"

diff --git a/src/components/fields/FieldInner.js b/src/components/fields/FieldInner.js
@@ -6,8 +6,6 @@ import {ariaDescribedbyAttr} from './util';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {RenderGroup} from '../RenderGroup';
-import {Button} from "./button/Button";
-
 /**
  * Creates the field inside of a field group
  *
@@ -33,58 +31,44 @@ export const FieldInner = (props) => {
 	 */
 	function inputClassName() {
 		return classNames([
-				props.fieldClassName,
-				RenderGroup.classNames.input
-			]
+			props.fieldClassName,
+			RenderGroup.classNames.input
+		]
 		);
 	}
 
-	switch (props.type) {
-		case 'select':
-		case 'dropdown':
-			const options = Array.isArray(props.options) ? props.options : [];
-			return (
-				<SelectField
-					id={props.id}
-					fieldClassName={inputClassName()}
-					ariaDescribedbyAttr={ariaIdAttr()}
-					value={props.value}
-					onValueChange={props.onValueChange}
-					inputType={props.inputType}
-					options={options}
-					disabled={props.disabled}
-					onBlur={props.onBlur}
-					onFocus={props.onFocus}
-				/>
-			);
-		case 'button' :
-			return (
-				<Button
-					onClick={props.onClick}
-					id={props.id}
-					fieldClassName={inputClassName()}
-					ariaDescribedbyAttr={ariaIdAttr()}
-					value={props.value}
-					inputType={props.inputType}
-					disabled={props.disabled}
-					onBlur={props.onBlur}
-					onFocus={props.onFocus}
-				/>
-			);
-		default:
-		case 'input':
-			return (
-				<Input
-					id={props.id}
-					fieldClassName={inputClassName()}
-					ariaDescribedbyAttr={ariaIdAttr()}
-					value={props.value}
-					onValueChange={props.onValueChange}
-					inputType={props.inputType}
-					disabled={props.disabled}
-					onBlur={props.onBlur}
-					onFocus={props.onFocus}
-				/>);
+	switch( props.type ){
+	case 'select':
+	case 'dropdown':
+		const options = Array.isArray(props.options) ? props.options : [];
+		return (
+			<SelectField
+				id={props.id}
+				fieldClassName={inputClassName()}
+				ariaDescribedbyAttr={ariaIdAttr()}
+				value={props.value}
+				onValueChange={props.onValueChange}
+				inputType={props.inputType}
+				options={options}
+				disabled={props.disabled}
+				onBlur={props.onBlur}
+				onFocus={props.onFocus}
+			/>
+		);
+	default:
+	case 'input':
+		return (
+			<Input
+				id={props.id}
+				fieldClassName={inputClassName()}
+				ariaDescribedbyAttr={ariaIdAttr()}
+				value={props.value}
+				onValueChange={props.onValueChange}
+				inputType={props.inputType}
+				disabled={props.disabled}
+				onBlur={props.onBlur}
+				onFocus={props.onFocus}
+			/>);
 	}
 
 };

diff --git a/src/components/fields/button/Button.js b/src/components/fields/button/Button.js
@@ -14,8 +14,7 @@ export const Button = (props) => {
 	function inputClassName() {
 		return classNames(
 			props.fieldClassName,
-			RenderGroup.classNames.input,
-			RenderGroup.classNames.button
+			RenderGroup.classNames.input
 		);
 	}
 

diff --git a/src/components/fields/button/__snapshots__/Button.test.js.snap b/src/components/fields/button/__snapshots__/Button.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Button component props snapshot for button 1`] = `
 <button
   aria-describedby={undefined}
-  className="foo field-config caldera-config-button"
+  className="foo field-config"
   disabled={undefined}
   id="button-2"
   onBlur={undefined}
@@ -15,7 +15,7 @@ exports[`Button component props snapshot for button 1`] = `
 exports[`Button component props snapshot for submit 1`] = `
 <input
   aria-describedby={undefined}
-  className="foo field-config caldera-config-button"
+  className="foo field-config"
   disabled={undefined}
   id="button-1"
   onBlur={undefined}

diff --git a/src/components/fields/factories/prepareFieldConfig.js b/src/components/fields/factories/prepareFieldConfig.js
@@ -1,4 +1,4 @@
-import {fieldGroupPropTypes, magicGroupPropTypes} from '../propTypes';
+import {fieldGroupPropTypes,magicGroupPropTypes} from '../propTypes';
 import {isValidHtml5type, toBoolean} from '../util';
 import {messageObjectFactory} from '../messages/messageObjectFactory';
 
@@ -11,24 +11,6 @@ import {messageObjectFactory} from '../messages/messageObjectFactory';
  * @returns {*}
  */
 export const prepareFieldConfig = (fieldArgs) => {
-	function addMessageArg(fieldArgs) {
-		fieldArgs.disabled = toBoolean(fieldArgs.disabled);
-		fieldArgs.message = 'object' === typeof  fieldArgs.message
-			? messageObjectFactory(fieldArgs.message)
-			: messageObjectFactory({message: null, error: false});
-		return fieldArgs;
-	}
-
-
-	if( 'button' === fieldArgs.type ) {
-		if ('submit' !== fieldArgs.inputType) {
-			fieldArgs.inputType = 'button';
-		}
-
-		return addMessageArg(fieldArgs);
-	}
-
-
 	/**
 	 * Pick whitelisted keys from object
 	 *
@@ -67,13 +49,17 @@ export const prepareFieldConfig = (fieldArgs) => {
 	}
 
 	let validators = [];
-	if (fieldArgs.hasOwnProperty('validators') && Array.isArray(fieldArgs.validators)) {
+	if( fieldArgs.hasOwnProperty('validators') && Array.isArray(fieldArgs.validators )){
 		validators = fieldArgs.validators;
 	}
 
-	const keys = 'magic' === fieldArgs.type ? magicGroupPropTypes : fieldGroupPropTypes;
+	const keys = 'magic' === fieldArgs.type  ? magicGroupPropTypes : fieldGroupPropTypes;
 	fieldArgs = pick(fieldArgs, Object.keys(keys));
-	fieldArgs = addMessageArg(fieldArgs);
+	fieldArgs.disabled = toBoolean(fieldArgs.disabled);
+	fieldArgs.message = 'object' === typeof  fieldArgs.message
+		? messageObjectFactory(fieldArgs.message)
+		: messageObjectFactory({message:null, error: false });
+
 	fieldArgs.validators = validators;
 	return fieldArgs;
 };
diff --git a/src/components/renderGroup.test.js b/src/components/renderGroup.test.js
@@ -4,7 +4,6 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import renderer from 'react-test-renderer';
-import {prepareFieldConfig} from "./fields/factories/prepareFieldConfig";
 
 Enzyme.configure({adapter: new Adapter()});
 
@@ -531,123 +530,6 @@ describe('The render group component', () => {
 
 	});
 
-	describe('Button fields inside render groups', () => {
-
-		const buttonField = {
-			id: 'cf-button-example',
-			type: 'button',
-			label: 'Submit',
-			onClick: genericHandler(),
-			inputType: 'submit'
-		};
-
-		it( 'Allows inputType of button', () => {
-			const field = {
-				...buttonField,
-				inputType: 'button'
-			};
-			expect(field.inputType).toBe('button');
-			const prepared = prepareFieldConfig(field);
-			expect(prepared.inputType).toBe('button');
-		});
-
-		it( 'Allows onClick prop to pass', () => {
-			const prepared = prepareFieldConfig(buttonField);
-			expect(typeof prepared.onClick ).toBe( 'function' );
-		});
-
-		describe( 'Button RenderGroup snapshots', () => {
-			it( 'Renders a submit button', ( ) => {
-				const component = renderer.create(
-					<RenderGroup
-						configFields={[buttonField]}
-					/>
-				);
-				expect(component.toJSON()).toMatchSnapshot();
-			});
-
-			it( 'Renders a regular button', ( ) => {
-				const component = renderer.create(
-					<RenderGroup
-						configFields={[{
-							...buttonField,
-							inputType: 'button',
-							id: 'RendersARegularButtonSnapShotTest'
-						}]}
-					/>
-				);
-				expect(component.toJSON()).toMatchSnapshot();
-
-
-			});
-		});
-
-
-
-		it( 'Renders a submit button', ( ) => {
-			const component = mount(
-				<RenderGroup
-					configFields={[buttonField]}
-				/>
-			);
-			expect(component.find('input').length).toBe(1);
-
-		});
-
-
-		it( 'Renders a regular button', ( ) => {
-			const component = mount(
-				<RenderGroup
-					configFields={[{
-						...buttonField,
-						inputType: 'button',
-						id: 'RendersARegularButton'
-					}]}
-				/>
-			);
-			expect(component.find('button').length).toBe(1);
-
-		});
-
-
-		describe( 'onClick callback', ( ) => {
-			it( 'Clicks submit inputs', () => {
-				let clicked = false;
-				const component = mount(
-					<RenderGroup
-						configFields={[{
-							...buttonField,
-							onClick: () => {
-								clicked = true;
-							}
-						}]}
-					/>
-				);
-				component.find( 'input' ).simulate('click' );
-				expect(clicked).toBe(true);
-			});
-
-
-			it( 'Clicks button inputs', () => {
-				let clicked = false;
-				const component = mount(
-					<RenderGroup
-						configFields={[{
-							...buttonField,
-							inputType: 'button',
-							onClick: () => {
-								clicked = true;
-							}
-						}]}
-					/>
-				);
-				component.find( 'button' ).simulate('click' );
-				expect(clicked).toBe(true);
-			});
-
-
-		});
-	});
 
 });