#7 add disabled prop to submit button, need that.

CalderaWP · Apr 9, 2019 · c2d6923 · c2d6923
1 parent 4acbc96
commit c2d6923
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 5 deletions.
diff --git a/packages/components/src/components/fields/SubmitButton/SubmitButton.js b/packages/components/src/components/fields/SubmitButton/SubmitButton.js
@@ -1,7 +1,7 @@
 import {FormTokenField} from '@wordpress/components';
 import { BaseControl } from '@wordpress/components';
 import React from "react";
-import {fieldClassNames} from "../util";
+import {fieldClassNames, parseAttributes} from "../util";
 export const SubmitButton = (props) => {
 	const {
 		label,
@@ -12,8 +12,15 @@ export const SubmitButton = (props) => {
 		value,
 		onChange,
 		onBlur,
-		options
+		options,
+		attributes
 	} = props;
+	const _attributes = {
+		disabled: 'object' === typeof  attributes
+			&& attributes.hasOwnProperty('disabled')
+			&& true == attributes.disabled,
+	}
+	const {disabled} = _attributes;
 	return (
 		<BaseControl
 			id={fieldId}
@@ -23,6 +30,7 @@ export const SubmitButton = (props) => {
 				type={'submit'}
 				id={fieldId}
 				value={label}
+				disabled={disabled}
 			/>
 		</BaseControl>
 	);

diff --git a/packages/components/src/components/fields/SubmitButton/SubmitButton.test.js b/packages/components/src/components/fields/SubmitButton/SubmitButton.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
-
+import {mount} from 'enzyme';
 import { SubmitButton } from './SubmitButton';
 
 describe('Select Field component', () => {
@@ -19,5 +19,43 @@ describe('Select Field component', () => {
 		expect(component.toJSON()).toMatchSnapshot();
 	});
 
+	it('Passes disabled attribute when set to true', () => {
+		const component = mount(
+			<SubmitButton
+				label={'Send Message'}
+				description={'Click to sendu'}
+				attributes={{
+					disabled: true
+				}}
+				fieldId={'button'}
+			/>
+		);
+		expect(component.find('input').props().disabled ).toBe(true);
+	});
+
+	it('Does not disabled attribute when set to false', () => {
+		const component = mount(
+			<SubmitButton
+				label={'Send Message'}
+				description={'Click to sendu'}
+				attributes={{
+					disabled: false
+				}}
+				fieldId={'button'}
+			/>
+		);
+		expect(component.find('input').props().disabled ).toBe(false);
+	});
+
+	it('Does not disabled attribute when not supplied', () => {
+		const component = mount(
+			<SubmitButton
+				label={'Send Message'}
+				description={'Click to sendu'}
+				fieldId={'button'}
+			/>
+		);
+		expect(component.find('input').props().disabled ).toBe(false);
+	});
 
 });
diff --git a/...ges/components/src/components/fields/SubmitButton/__snapshots__/SubmitButton.test.js.snap b/...ges/components/src/components/fields/SubmitButton/__snapshots__/SubmitButton.test.js.snap
@@ -8,6 +8,7 @@ exports[`Select Field component matches snapshot 1`] = `
     className="components-base-control__field"
   >
     <input
+      disabled={false}
       id="button"
       type="submit"
       value="Send Message"

diff --git a/packages/components/src/components/fields/util/parseAttributes.js b/packages/components/src/components/fields/util/parseAttributes.js
@@ -68,6 +68,9 @@ export const parseAttributes = (attributes, allowed = null) => {
 		case 'textarea':
 			allowed = textAreaAttrs;
 			break;
+		case 'submit':
+			allowed = [ ...['disabled'], allowed ];
+			break;
 		case 'text':
 		case 'default':
 		case null:

diff --git a/packages/components/src/factory/factories/__snapshots__/fieldFactory.test.js.snap b/packages/components/src/factory/factories/__snapshots__/fieldFactory.test.js.snap
@@ -208,6 +208,7 @@ exports[`fieldFactory Creates a submit button 1`] = `
     className="components-base-control__field"
   >
     <input
+      disabled={false}
       id="clickButton"
       type="submit"
       value="Click Me"

diff --git a/packages/forms/src/CalderaForm/CalderaForm.story.js b/packages/forms/src/CalderaForm/CalderaForm.story.js
@@ -57,14 +57,14 @@ const form = {
 		},
 		{
 			type: 'disable',
-			rule: createFieldRule('is', emailField.fieldId, '' ),
+			rule: createFieldRule('empty', emailField.fieldId, null ),
 			fields: [
 				submitButton.fieldId
 			]
 		},
 		{
 			type: 'disable',
-			rule: createFieldRule('is', textField.fieldId, '' ),
+			rule: createFieldRule('empty', textField.fieldId,null ),
 			fields: [
 				submitButton.fieldId
 			]