diff --git a/src/components/__snapshots__/renderGroup.test.js.snap b/src/components/__snapshots__/renderGroup.test.js.snap
index 8b46a0a..92d30af 100644
--- a/src/components/__snapshots__/renderGroup.test.js.snap
+++ b/src/components/__snapshots__/renderGroup.test.js.snap
@@ -1,5 +1,66 @@
// 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`] = `
+
+`;
+
+exports[`The render group component Button fields inside render groups Button RenderGroup snapshots Renders a submit input 1`] = `
+
+`;
+
exports[`The render group component Rendering with fields Does not error when passed empty array of fields 1`] = `
{
});
+ describe( 'fields export', () => {
+ const {fields} = Components;
+ it( 'exports FieldGroup', () => {
+ expect( typeof fields.FieldGroup ).toEqual( 'function' );
+ });
+ it( 'exports SelectField', () => {
+ expect( typeof fields.SelectField ).toEqual( 'function' );
+ });
+ it( 'exports Input', () => {
+ expect( typeof fields.Input ).toEqual( 'function' );
+ });
+ it( 'exports Message', () => {
+ expect( typeof fields.Message ).toEqual( 'function' );
+ });
+ it( 'exports ButtonGroup', () => {
+ expect( typeof fields.ButtonGroup ).toEqual( 'function' );
+ });
+ it( 'exports Button', () => {
+ expect( typeof fields.Button ).toEqual( 'function' );
+ });
+ });
+
+
+
});
diff --git a/src/components/fields/FieldInner.js b/src/components/fields/FieldInner.js
index 2892122..62d9327 100644
--- a/src/components/fields/FieldInner.js
+++ b/src/components/fields/FieldInner.js
@@ -6,6 +6,8 @@ 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
*
@@ -31,44 +33,59 @@ 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 (
-
- );
- default:
- case 'input':
- return (
- );
+ switch (props.type) {
+ case 'select':
+ case 'dropdown':
+ const options = Array.isArray(props.options) ? props.options : [];
+ return (
+
+ );
+ case 'button' :
+ return (
+
+ );
+ default:
+ case 'input':
+ return (
+ );
}
};
diff --git a/src/components/fields/button/Button.js b/src/components/fields/button/Button.js
index 33d44d4..de40e0b 100644
--- a/src/components/fields/button/Button.js
+++ b/src/components/fields/button/Button.js
@@ -51,7 +51,7 @@ export const Button = (props) => {
};
let propTypes = fieldPropTypes;
-delete fieldPropTypes.onValueChange;
+delete propTypes.onValueChange;
/**
* Prop type definitions for Button Component
diff --git a/src/components/fields/factories/prepareFieldConfig.js b/src/components/fields/factories/prepareFieldConfig.js
index 2b7fea9..993d0ff 100644
--- a/src/components/fields/factories/prepareFieldConfig.js
+++ b/src/components/fields/factories/prepareFieldConfig.js
@@ -11,6 +11,24 @@ 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
*
diff --git a/src/components/fields/index.js b/src/components/fields/index.js
index 28af3d8..b32decd 100644
--- a/src/components/fields/index.js
+++ b/src/components/fields/index.js
@@ -5,11 +5,13 @@ import {SelectField} from './select/SelectField';
import {Input} from './input/Input';
import {Message} from './messages/Message';
import {ButtonGroup} from './button-group/ButtonGroup';
+import {Button} from "./button/Button";
module.exports = {
FieldGroup,
SelectField: SelectField,
Input,
Message,
- ButtonGroup
+ ButtonGroup,
+ Button
};
\ No newline at end of file
diff --git a/src/components/renderGroup.test.js b/src/components/renderGroup.test.js
index a5adba4..1f9839d 100644
--- a/src/components/renderGroup.test.js
+++ b/src/components/renderGroup.test.js
@@ -4,6 +4,7 @@ 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()});
@@ -513,17 +514,19 @@ describe('The render group component', () => {
it('Get values update ', () => {
let value = '1';
const component = mount(
- {
- value = newValue;
+ {
+ value = newValue;
+ }
}
- }
- ]}/>
+ ]}
+ />
);
- component.find('input').simulate('change', { target: { value: 3 } });
+ component.find('input').simulate('change', {target: {value: 3}});
expect(value).toBe(3);
});
@@ -542,7 +545,7 @@ describe('The render group component', () => {
inputType: 'submit'
};
- it( 'Allows inputType of button', () => {
+ it('Allows inputType of button', () => {
const field = {
...buttonField,
inputType: 'button'
@@ -552,23 +555,25 @@ describe('The render group component', () => {
expect(prepared.inputType).toBe('button');
});
- it( 'Allows onClick prop to pass', () => {
+ it('Allows onClick prop to pass', () => {
const prepared = prepareFieldConfig(buttonField);
expect(typeof buttonField.onClick).toBe('function');
- expect(typeof prepared.onClick ).toBe( 'function' );
+ expect(typeof prepared.onClick).toBe('function');
});
- describe( 'Button RenderGroup snapshots', () => {
- it( 'Renders a submit input', ( ) => {
+ describe('Button RenderGroup snapshots', () => {
+ it('Renders a submit input', () => {
const component = renderer.create(
{
+ }}
/>
);
expect(component.toJSON()).toMatchSnapshot();
});
- it( 'Renders a regular button', ( ) => {
+ it('Renders a regular button', () => {
const component = renderer.create(
{
});
- it( 'Renders a submit button', ( ) => {
+ it('Renders a submit button', () => {
const component = mount(
{
});
- it( 'Renders a regular button', ( ) => {
+ it('Renders a regular button', () => {
const component = mount(
{
});
- describe( 'onClick callback', ( ) => {
- it( 'Clicks submit inputs', () => {
+ describe('onClick callback', () => {
+ it('Clicks submit inputs', () => {
let clicked = false;
const component = mount(
{
}]}
/>
);
- component.find( 'input' ).simulate('click' );
+ component.find('input').simulate('click');
expect(clicked).toBe(true);
});
- it( 'Clicks button inputs', () => {
+ it('Clicks button inputs', () => {
let clicked = false;
const component = mount(
{
}]}
/>
);
- component.find( 'button' ).simulate('click' );
+ component.find('button').simulate('click');
expect(clicked).toBe(true);
});