+ summary
+
+
+
+ public
+
+
+
+
+
+
+
+ F
+
+
+ Button (props: * ): *
+
+
+
+
+
+
+
+
+
+
@@ -1640,6 +1679,7 @@ components/validation
+
diff --git a/docs/index.html b/docs/index.html
index e591b43..0a5a16f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -66,11 +66,19 @@
Text field that is not required Text field with help text Number Field Group Submit Button Field Group Button Field Group Select Field Groups Magic Select Groups Import With webpack Example Select Fields Import With webpack Example Fieldsets Submit Buttons and Other Types Of Buttons Import With webpack Exampel Submit Button Button Group Import With webpack Examples Structure of class attributes The
values.two=newValue;
}}
/>
+
Submit Button Field Group <FieldGroup
+ id={'control-24'}
+ label={'This will go in the label element'}
+ type={'button'}
+ innertype={'submit'}
+ value={'Submit Form'}
+ onClick={() => {
+ //do stuff when clicked
+ }}
+/>
+
+Button Field Group <FieldGroup
+ id={'control-24'}
+ label={'This will go in the label element'}
+ type={'button'}
+ innertype={'button'}
+ value={false}
+ onClick={() => {
+ //do stuff when clicked
+ }}
+/>
Select Field Groups Select field groups happen when you pass "select" to the type prop.
Select fields take an array of options in the prop option. Options in that collection must conform the shape defined here
let selectFieldValue = '';
<FieldGroup
type={'select'}
@@ -518,22 +547,8 @@ Structure of class attributes The
label: 'Two'
}
]}
-/>
-
-## Magic Select Groups
-Magic select groups use `MagicSelect` fields, which wrap [reactjs/react-autocomple](https://github.com/reactjs/react-autocomplete) to create a UI for [Caldera Forms magic tags](https://calderaforms.com/doc/using-magic-tags-caldera-forms/).
-
-These fields groups show options from two lists, one is passed in the prop `fieldsList` and represents the fields of the form, and the other is in `systemTagsList`, which represents the system values such as the current user info.
-
-The property `isOpen` controls if the auto-complete list is open.
-
-### Import With webpack
-import {MagicFieldGroup} from '@caldera-labs/components';
-
-### Example
-
-```js
-let magicFieldValue ='';
+/>
+Magic Select Groups Magic select groups use MagicSelect fields, which wrap reactjs/react-autocomple to create a UI for Caldera Forms magic tags .
These fields groups show options from two lists, one is passed in the prop fieldsList and represents the fields of the form, and the other is in systemTagsList, which represents the system values such as the current user info.
The property isOpen controls if the auto-complete list is open.
Import With webpack import {MagicFieldGroup} from '@caldera-labs/components';
Example let magicFieldValue ='';
<MagicFieldGroup
id={'magic-5'}
@@ -610,6 +625,20 @@ Structure of class attributes The
}
]}
/>
+Submit Buttons and Other Types Of Buttons In general, for submit inputs and <button> elements, instead of using an Input component, you should use the Button component.
Import With webpack import {fields} from '@caldera-labs/components';
+const {Button} = fields;
+
+Exampel Submit Button <Button
+ id={'control-button'}
+ label={'Click To Submit Form'}
+ type={'button'}
+ innertype={'submit'}
+ value={'Submit Form'}
+ onClick={() => {
+ //do stuff when clicked
+ }}
+/>
+
Button Group Button groups are select fields. One button can be selected at once.
This is a field, not a group (like FieldGroup or MagicFieldGroup) so it does not handle its own label.
Button groups fields take an array of options in the prop option. Options in that collection must conform the shape defined here
Import With webpack import {fields} from '@caldera-labs/components';
const {ButtonGroup} = fields;
Examples Button Group With Two Options <ButtonGroup
diff --git a/docs/index.json b/docs/index.json
index 0d4ec40..b22db40 100644
--- a/docs/index.json
+++ b/docs/index.json
@@ -890,7 +890,7 @@
"__docId__": 64,
"kind": "file",
"name": "src/components/RenderGroup.js",
- "content": "import React from 'react';\nimport propTypes from 'prop-types';\nimport {fieldSetFactory} from './fields/factories/fieldSetFactory';\n\n/**\n * Component for rendering an array of field configs\n */\nexport class RenderGroup extends React.Component {\n\n\n\t/**\n\t * Constructor for RenderGroup component\n\t * @param {Object} props\n\t */\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.createComponents = this.createComponents.bind(this);\n\t}\n\n\t/**\n\t * Create components\n\t *\n\t * @return {Array}\n\t */\n\tcreateComponents() {\n\t\tlet configFields = this.props.configFields;\n\n\t\t/**\n\t\t * Find config field ID/id\n\t\t *\n\t\t * @param {Object} configField\n\t\t * @return {boolean}\n\t\t */\n\t\tfunction findFieldId(configField) {\n\t\t\treturn configField.ID ? configField.ID : configField.id ? configField.id : false;\n\t\t}\n\n\t\tif( 'function' === typeof this.props.onBlur ){\n\t\t\tconfigFields.forEach((configField, configFieldIndex ) => {\n\t\t\t\tconst configFieldId = findFieldId(configField);\n\t\t\t\tif( configFieldId ){\n\t\t\t\t\tconfigFields[configFieldIndex].onBlur = () => {\n\t\t\t\t\t\tthis.props.onBlur(configFieldId);\n\t\t\t\t\t};\n\n\t\t\t\t}\n\n\t\t\t});\n\n\t\t}\n\t\tif( 'function' === typeof this.props.onFocus ){\n\t\t\tconfigFields.forEach((configField, configFieldIndex ) => {\n\t\t\t\tconst configFieldId = findFieldId(configField);\n\t\t\t\tif( configFieldId ){\n\t\t\t\t\tconfigFields[configFieldIndex].onFocus = () => {\n\t\t\t\t\t\tthis.props.onFocus(configFieldId);\n\t\t\t\t\t};\n\n\t\t\t\t}\n\n\t\t\t});\n\t\t}\n\t\treturn fieldSetFactory(configFields);\n\t}\n\n\t/**\n\t * Renderer for RenderGroup component\n\t *\n\t * @return {*}\n\t */\n\trender() {\n\t\treturn (\n\t\t\t\n\t\t\t\t{this.createComponents().map((configField, i) => {\n\t\t\t\t\treturn React.createElement(\n\t\t\t\t\t\t'div', {\n\t\t\t\t\t\t\tkey: i,\n\t\t\t\t\t\t\tclassName: RenderGroup.classNames.fieldGroup\n\t\t\t\t\t\t},\n\t\t\t\t\t\tconfigField\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\n\t\t);\n\t}\n}\n\n/**\n * Prop definitions for RenderGroup component\n * @type {{configFields: *, className: shim}}\n */\nRenderGroup.propTypes = {\n\tconfigFields: propTypes.array.isRequired,\n\tclassName: propTypes.string,\n\tonBlur: propTypes.func,\n\tonFocus: propTypes.func\n};\n\n/**\n * Classnames for elements (wrappers, field groups and form fields)\n *\n * @type {{renderGroupWrapper: string, fieldWrapper: string}}\n */\nRenderGroup.classNames = {\n\trenderGroupWrapper: 'caldera-config-field-setup',\n\tfieldGroup: 'caldera-config-group',\n\tfieldWrapper: 'caldera-config-field',\n\tinput: 'field-config',\n\n};",
+ "content": "import React from 'react';\nimport propTypes from 'prop-types';\nimport {fieldSetFactory} from './fields/factories/fieldSetFactory';\n\n/**\n * Component for rendering an array of field configs\n */\nexport class RenderGroup extends React.Component {\n\n\n\t/**\n\t * Constructor for RenderGroup component\n\t * @param {Object} props\n\t */\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.createComponents = this.createComponents.bind(this);\n\t}\n\n\t/**\n\t * Create components\n\t *\n\t * @return {Array}\n\t */\n\tcreateComponents() {\n\t\tlet configFields = this.props.configFields;\n\n\t\t/**\n\t\t * Find config field ID/id\n\t\t *\n\t\t * @param {Object} configField\n\t\t * @return {boolean}\n\t\t */\n\t\tfunction findFieldId(configField) {\n\t\t\treturn configField.ID ? configField.ID : configField.id ? configField.id : false;\n\t\t}\n\n\t\tif( 'function' === typeof this.props.onBlur ){\n\t\t\tconfigFields.forEach((configField, configFieldIndex ) => {\n\t\t\t\tconst configFieldId = findFieldId(configField);\n\t\t\t\tif( configFieldId ){\n\t\t\t\t\tconfigFields[configFieldIndex].onBlur = () => {\n\t\t\t\t\t\tthis.props.onBlur(configFieldId);\n\t\t\t\t\t};\n\n\t\t\t\t}\n\n\t\t\t});\n\n\t\t}\n\t\tif( 'function' === typeof this.props.onFocus ){\n\t\t\tconfigFields.forEach((configField, configFieldIndex ) => {\n\t\t\t\tconst configFieldId = findFieldId(configField);\n\t\t\t\tif( configFieldId ){\n\t\t\t\t\tconfigFields[configFieldIndex].onFocus = () => {\n\t\t\t\t\t\tthis.props.onFocus(configFieldId);\n\t\t\t\t\t};\n\n\t\t\t\t}\n\n\t\t\t});\n\t\t}\n\t\treturn fieldSetFactory(configFields);\n\t}\n\n\t/**\n\t * Renderer for RenderGroup component\n\t *\n\t * @return {*}\n\t */\n\trender() {\n\t\treturn (\n\t\t\t\n\t\t\t\t{this.createComponents().map((configField, i) => {\n\t\t\t\t\treturn React.createElement(\n\t\t\t\t\t\t'div', {\n\t\t\t\t\t\t\tkey: i,\n\t\t\t\t\t\t\tclassName: RenderGroup.classNames.fieldGroup\n\t\t\t\t\t\t},\n\t\t\t\t\t\tconfigField\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\n\t\t);\n\t}\n}\n\n/**\n * Prop definitions for RenderGroup component\n * @type {{configFields: *, className: shim}}\n */\nRenderGroup.propTypes = {\n\tconfigFields: propTypes.array.isRequired,\n\tclassName: propTypes.string,\n\tonBlur: propTypes.func,\n\tonFocus: propTypes.func\n};\n\n/**\n * Classnames for elements (wrappers, field groups and form fields)\n *\n * @type {{renderGroupWrapper: string, fieldWrapper: string}}\n */\nRenderGroup.classNames = {\n\trenderGroupWrapper: 'caldera-config-field-setup',\n\tfieldGroup: 'caldera-config-group',\n\tfieldWrapper: 'caldera-config-field',\n\tinput: 'field-config',\n\tbutton: 'caldera-config-button',\n\n};",
"static": true,
"longname": "/Users/josh/caldera-js/components/src/components/RenderGroup.js",
"access": "public",
@@ -1336,7 +1336,7 @@
"__docId__": 84,
"kind": "file",
"name": "src/components/fields/FieldGroup.js",
- "content": "import React from 'react';\nimport classNames from 'classnames';\nimport {ariaDescribedbyAttr} from './util';\nimport {\n\tfieldGroupPropTypes,\n} from './propTypes';\n\nimport {FieldInner} from './FieldInner';\nimport {RenderGroup} from '../RenderGroup';\nimport {Message} from './messages/Message';\nimport {messageObjectFactory} from './messages/messageObjectFactory';\nimport {fieldsetCheckboxHandler} from './field-group-change-handlers/fieldsetCheckboxHandler';\nimport {MagicFieldGroup} from './magic-select/MagicFieldGroup';\n\n/**\n * Represents one configField -- wrapper, label and input.\n *\n * @param props\n * @return {*}\n * @constructor\n */\nexport const FieldGroup = (props) => {\n\tif( 'magic' === props.type ){\n\t\treturn \n\t\t\t\t\t\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t \n\t\t\t\t\t{props.options.map(option => {\n\n\n\t\t\t\t\t\t//Call this same function, as a regular checkbox\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{fieldInner({\n\t\t\t\t\t\t\t\t\ttype: 'input',\n\t\t\t\t\t\t\t\t\tinputType: 'checkbox',\n\t\t\t\t\t\t\t\t\tid: `${props.id}-${option.value}`,\n\t\t\t\t\t\t\t\t\tvalue: isCheckedOption(option, props.value),\n\t\t\t\t\t\t\t\t\tfieldClassName: getFieldClassName({\n\t\t\t\t\t\t\t\t\t\t'fieldset-checkbox': true,\n\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\tlabel: option.label,\n\t\t\t\t\t\t\t\t\tdisabled: props.disabled,\n\t\t\t\t\t\t\t\t\tonValueChange: () => fieldsetCheckboxHandler(option, props.values, props.onValueChange),\n\t\t\t\t\t\t\t\t\tonBlur: props.onBlur,\n\t\t\t\t\t\t\t\t\tonFocus: props.onFocus\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\n\t\t\t);\n\t\t} else if ('hidden' === fieldProps.inputType) {\n\t\t\treturn (\n\t\t\t\tFieldInner(\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: props.type,\n\t\t\t\t\t\tid: props.id,\n\t\t\t\t\t\tfieldClassName: getFieldClassName(),\n\t\t\t\t\t\tvalue: fieldProps.value,\n\t\t\t\t\t\tonValueChange: fieldProps.onValueChange,\n\t\t\t\t\t\tinputType: fieldProps.inputType,\n\t\t\t\t\t\tdisabled: props.disabled,\n\t\t\t\t\t\tonBlur: props.onBlur,\n\t\t\t\t\t\tonFocus: props.onFocus\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t{fieldProps.help}\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t);\n\t\t}\n\n\t}\n\n\t/**\n\t * Render field group\n\t */\n\treturn fieldInner(props);\n};\n\n/**\n * The prop type definitions for FieldGroup components\n *\n * @type {{id: (boolean|shim|*), isBlockInput: shim, isRequired: shim, help: shim, label: (boolean|shim|*), type: shim, value: shim, onValueChange: (boolean|shim|*), inputType: shim}}\n */\nFieldGroup.propTypes = fieldGroupPropTypes;\n\n/**\n * Default props for FieldGroups\n *\n * @type {{isBlockInput: boolean, isRequired: boolean, help: string}}\n */\nFieldGroup.defaultProps = {\n\tisBlockInput: true,\n\tisRequired: false,\n\thelp: ''\n};\n\n/**\n * Creates the FieldGroup's label component\n *\n * @param {Object} props\n * @return {*}\n * @constructor\n */\nFieldGroup.Label = (props) => {\n\treturn (\n\t\t\n\t\t\t{props.label}\n\t\t\n\t);\n};",
+ "content": "import React from 'react';\nimport classNames from 'classnames';\nimport {ariaDescribedbyAttr} from './util';\nimport {\n\tfieldGroupPropTypes,\n} from './propTypes';\n\nimport {FieldInner} from './FieldInner';\nimport {RenderGroup} from '../RenderGroup';\nimport {Message} from './messages/Message';\nimport {messageObjectFactory} from './messages/messageObjectFactory';\nimport {fieldsetCheckboxHandler} from './field-group-change-handlers/fieldsetCheckboxHandler';\nimport {MagicFieldGroup} from './magic-select/MagicFieldGroup';\n\n/**\n * Represents one configField -- wrapper, label and input.\n *\n * @param props\n * @return {*}\n * @constructor\n */\nexport const FieldGroup = (props) => {\n\tif( 'magic' === props.type ){\n\t\treturn \n\t\t\t\t\t\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t \n\t\t\t\t\t{props.options.map(option => {\n\n\n\t\t\t\t\t\t//Call this same function, as a regular checkbox\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{fieldInner({\n\t\t\t\t\t\t\t\t\ttype: 'input',\n\t\t\t\t\t\t\t\t\tinputType: 'checkbox',\n\t\t\t\t\t\t\t\t\tid: `${props.id}-${option.value}`,\n\t\t\t\t\t\t\t\t\tvalue: isCheckedOption(option, props.value),\n\t\t\t\t\t\t\t\t\tfieldClassName: getFieldClassName({\n\t\t\t\t\t\t\t\t\t\t'fieldset-checkbox': true,\n\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\tlabel: option.label,\n\t\t\t\t\t\t\t\t\tdisabled: props.disabled,\n\t\t\t\t\t\t\t\t\tonValueChange: () => fieldsetCheckboxHandler(option, props.values, props.onValueChange),\n\t\t\t\t\t\t\t\t\tonBlur: props.onBlur,\n\t\t\t\t\t\t\t\t\tonFocus: props.onFocus\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\n\t\t\t);\n\t\t} else if ('hidden' === fieldProps.inputType) {\n\t\t\treturn (\n\t\t\t\tFieldInner(\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: props.type,\n\t\t\t\t\t\tid: props.id,\n\t\t\t\t\t\tfieldClassName: getFieldClassName(),\n\t\t\t\t\t\tvalue: fieldProps.value,\n\t\t\t\t\t\tonValueChange: fieldProps.onValueChange,\n\t\t\t\t\t\tinputType: fieldProps.inputType,\n\t\t\t\t\t\tdisabled: props.disabled,\n\t\t\t\t\t\tonBlur: props.onBlur,\n\t\t\t\t\t\tonFocus: props.onFocus\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t{fieldProps.help}\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t);\n\t\t}\n\n\t}\n\n\t/**\n\t * Render field group\n\t */\n\treturn fieldInner(props);\n};\n\n/**\n * The prop type definitions for FieldGroup components\n *\n * @type {{id: (boolean|shim|*), isBlockInput: shim, isRequired: shim, help: shim, label: (boolean|shim|*), type: shim, value: shim, onValueChange: (boolean|shim|*), inputType: shim}}\n */\nFieldGroup.propTypes = fieldGroupPropTypes;\n\n/**\n * Default props for FieldGroups\n *\n * @type {{isBlockInput: boolean, isRequired: boolean, help: string}}\n */\nFieldGroup.defaultProps = {\n\tisBlockInput: true,\n\tisRequired: false,\n\thelp: ''\n};\n\n/**\n * Creates the FieldGroup's label component\n *\n * @param {Object} props\n * @return {*}\n * @constructor\n */\nFieldGroup.Label = (props) => {\n\treturn (\n\t\t\n\t\t\t{props.label}\n\t\t\n\t);\n};",
"static": true,
"longname": "/Users/josh/caldera-js/components/src/components/fields/FieldGroup.js",
"access": "public",
@@ -1389,7 +1389,7 @@
"__docId__": 86,
"kind": "file",
"name": "src/components/fields/FieldInner.js",
- "content": "import {fieldInnerPropTypes} from './propTypes';\nimport React from 'react';\nimport {Input} from './input/Input';\nimport {SelectField} from './select/SelectField';\nimport {ariaDescribedbyAttr} from './util';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {RenderGroup} from '../RenderGroup';\n/**\n * Creates the field inside of a field group\n *\n * @param {Object} props\n * @returns {*}\n * @constructor\n */\nexport const FieldInner = (props) => {\n\n\t/**\n\t * Get the ID for the description element if it will be created\n\t *\n\t * @return {String|null}\n\t */\n\tfunction ariaIdAttr() {\n\t\treturn ariaDescribedbyAttr(props.id, props.help);\n\t}\n\n\t/**\n\t * Get the className prop for the\n\t *\n\t * @return {String}\n\t */\n\tfunction inputClassName() {\n\t\treturn classNames([\n\t\t\tprops.fieldClassName,\n\t\t\tRenderGroup.classNames.input\n\t\t]\n\t\t);\n\t}\n\n\tswitch( props.type ){\n\tcase 'select':\n\tcase 'dropdown':\n\t\tconst options = Array.isArray(props.options) ? props.options : [];\n\t\treturn (\n\t\t\t\n\t\t\t{props.value}\n\t\t\n\t);\n};\n\nlet propTypes = fieldPropTypes;\ndelete fieldPropTypes.onValueChange;\n\n/**\n * Prop type definitions for Button Component\n * @type {{id: (*), fieldClassName: (*), help: shim, value: shim, onValueChange: (*), inputType: shim, onClick: *}}\n */\nButton.propTypes = {\n\t...propTypes,\n\tinnerType: PropTypes.oneOf(['submit','button'] ),\n\tonClick: PropTypes.func.isRequired,\n};\n\nButton.defaultProps = {\n\tinputType: 'submit'\n}",
+ "static": true,
+ "longname": "/Users/josh/caldera-js/components/src/components/fields/button/Button.js",
+ "access": "public",
+ "description": null,
+ "lineNumber": 1
+ },
+ {
+ "__docId__": 89,
+ "kind": "function",
+ "name": "Button",
+ "memberof": "src/components/fields/button/Button.js",
+ "generator": false,
+ "async": false,
+ "static": true,
+ "longname": "src/components/fields/button/Button.js~Button",
+ "access": "public",
+ "export": true,
+ "importPath": "@caldera-labs/components/src/components/fields/button/Button.js",
+ "importStyle": "{Button}",
+ "description": null,
+ "lineNumber": 8,
+ "undocument": true,
+ "params": [
+ {
+ "name": "props",
+ "types": [
+ "*"
+ ]
+ }
+ ],
+ "return": {
+ "types": [
+ "*"
+ ]
+ }
+ },
+ {
+ "__docId__": 90,
+ "kind": "variable",
+ "name": "propTypes",
+ "memberof": "src/components/fields/button/Button.js",
+ "static": true,
+ "longname": "src/components/fields/button/Button.js~propTypes",
+ "access": "public",
+ "export": false,
+ "importPath": "@caldera-labs/components/src/components/fields/button/Button.js",
+ "importStyle": null,
+ "description": null,
+ "lineNumber": 54,
+ "undocument": true,
+ "type": {
+ "types": [
+ "*"
+ ]
+ },
+ "ignore": true
+ },
+ {
+ "__docId__": 91,
+ "kind": "file",
"name": "src/components/fields/button-group/ButtonGroup.js",
"content": "import React from 'react';\nimport {optionShape} from '../propTypes';\nimport PropTypes from 'prop-types';\n/**\n * Creates a button group field\n *\n * @param {Object} props\n * @returns {*}\n * @constructor\n */\nexport const ButtonGroup = (props) => {\n\t/**\n\t * Dispatches new value(s) to parent\n\t *\n\t * @param selection\n\t * @returns {*}\n\t */\n\tfunction changeHandler(selection) {\n\t\treturn props.onChange(selection);\n\t}\n\n\t/**\n\t * Render a button group\n\t */\n\treturn (\n\t\t\n\t\t\t{props.options.map(option => {\n\t\t\t\treturn {\n\t\t\t\t\t\treturn changeHandler(option.value);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{option.hasOwnProperty('icon')&&\n\t\t\t\t\t\t{option.label} \n\t\t\t\t\t}\n\n\t\t\t\t;\n\t\t\t})}\n\t\t\n\t);\n};\n\n/**\n * Prop definition for select fields\n *\n * @type {{}}\n */\nButtonGroup.propTypes = {\n\tonChange: PropTypes.func.isRequired,\n\toptions: PropTypes.arrayOf(\n\t\tPropTypes.shape({\n\t\t\t...optionShape,\n\t\t\ticon:PropTypes.string,\n\t\t\tariaLabel:PropTypes.string\n\t\t})\n\t),\n\tvalue: PropTypes.oneOfType([\n\t\tPropTypes.number,\n\t\tPropTypes.string\n\t])\n};\n\n/**\n * Default props for select fields\n *\n * @type {{options: Array}}\n */\nButtonGroup.defaultProps = {\n\toptions: []\n};",
"static": true,
@@ -1454,7 +1516,7 @@
"lineNumber": 1
},
{
- "__docId__": 89,
+ "__docId__": 92,
"kind": "function",
"name": "ButtonGroup",
"memberof": "src/components/fields/button-group/ButtonGroup.js",
@@ -1500,7 +1562,7 @@
}
},
{
- "__docId__": 90,
+ "__docId__": 93,
"kind": "file",
"name": "src/components/fields/factories/fieldFactory.js",
"content": "import {prepareFieldConfig} from './prepareFieldConfig';\nimport {FieldGroup} from '../FieldGroup';\n\n\n/**\n * Generates field controls\n *\n * @param {Object} fieldArgs Field config\n * @returns {*}\n */\nexport const fieldFactory = (fieldArgs) =>{\n\treturn FieldGroup(prepareFieldConfig(fieldArgs));\n};\n",
@@ -1511,7 +1573,7 @@
"lineNumber": 1
},
{
- "__docId__": 91,
+ "__docId__": 94,
"kind": "function",
"name": "fieldFactory",
"memberof": "src/components/fields/factories/fieldFactory.js",
@@ -1553,7 +1615,7 @@
}
},
{
- "__docId__": 92,
+ "__docId__": 95,
"kind": "file",
"name": "src/components/fields/factories/fieldSetFactory.js",
"content": "import {fieldFactory} from './fieldFactory';\n\n/**\n * Given an array of field configs, generates and array of field controls\n *\n * Should be used for a group of settings, such as all settings for a processor.\n *\n * @param {Array} fields Field configs\n * @returns {Array}\n */\nexport const fieldSetFactory = (fields) =>{\n\tlet out = [];\n\tObject.values(fields).forEach( field => {\n\t\tout.push(fieldFactory(field));\n\t});\n\treturn out;\n};",
@@ -1564,7 +1626,7 @@
"lineNumber": 1
},
{
- "__docId__": 93,
+ "__docId__": 96,
"kind": "function",
"name": "fieldSetFactory",
"memberof": "src/components/fields/factories/fieldSetFactory.js",
@@ -1606,7 +1668,7 @@
}
},
{
- "__docId__": 94,
+ "__docId__": 97,
"kind": "file",
"name": "src/components/fields/factories/index.js",
"content": "/*eslint no-undef: \"error\"*/\n/*eslint-env node*/\nimport {fieldFactory} from './fieldFactory';\nimport {fieldSetFactory} from './fieldSetFactory';\n\nmodule.exports = {\n\tfieldFactory,\n\tfieldSetFactory\n};",
@@ -1617,10 +1679,10 @@
"lineNumber": 1
},
{
- "__docId__": 95,
+ "__docId__": 98,
"kind": "file",
"name": "src/components/fields/factories/prepareFieldConfig.js",
- "content": "import {fieldGroupPropTypes,magicGroupPropTypes} from '../propTypes';\nimport {isValidHtml5type, toBoolean} from '../util';\nimport {messageObjectFactory} from '../messages/messageObjectFactory';\n\n/**\n * Validates field configurations\n *\n * NOTE: This is called internally by factory. You probably do not want to call this.\n *\n * @param {Object}fieldArgs\n * @returns {*}\n */\nexport const prepareFieldConfig = (fieldArgs) => {\n\t/**\n\t * Pick whitelisted keys from object\n\t *\n\t * @see http://www.jstips.co/en/javascript/picking-and-rejecting-object-properties/\n\t *\n\t * @param {Object} obj The object to pick from\n\t * @param {Array} keys The whitelist of keys\n\t * @return {*}\n\t */\n\tfunction pick(obj, keys) {\n\t\treturn keys.map(k => k in obj ? {[k]: obj[k]} : {})\n\t\t\t.reduce((res, o) => Object.assign(res, o), {});\n\t}\n\n\tswitch (fieldArgs.type) {\n\tcase 'select':\n\tcase 'dropdown':\n\t\tfieldArgs.type = 'select';\n\t\tbreak;\n\tcase 'fieldset':\n\t\tfieldArgs.type = 'fieldset';\n\t\tbreak;\n\tcase 'text':\n\tcase 'number':\n\tdefault:\n\t\tfieldArgs.inputType = isValidHtml5type(fieldArgs.type) ? fieldArgs.type : 'text';\n\t\tfieldArgs.type = 'input';\n\t\tbreak;\n\t}\n\n\tif (fieldArgs.hasOwnProperty('desc')) {\n\t\tfieldArgs.help = fieldArgs.desc;\n\t}\n\tif (fieldArgs.hasOwnProperty('description')) {\n\t\tfieldArgs.help = fieldArgs.description;\n\t}\n\n\tlet validators = [];\n\tif( fieldArgs.hasOwnProperty('validators') && Array.isArray(fieldArgs.validators )){\n\t\tvalidators = fieldArgs.validators;\n\t}\n\n\tconst keys = 'magic' === fieldArgs.type ? magicGroupPropTypes : fieldGroupPropTypes;\n\tfieldArgs = pick(fieldArgs, Object.keys(keys));\n\tfieldArgs.disabled = toBoolean(fieldArgs.disabled);\n\tfieldArgs.message = 'object' === typeof fieldArgs.message\n\t\t? messageObjectFactory(fieldArgs.message)\n\t\t: messageObjectFactory({message:null, error: false });\n\n\tfieldArgs.validators = validators;\n\treturn fieldArgs;\n};",
+ "content": "import {fieldGroupPropTypes, magicGroupPropTypes} from '../propTypes';\nimport {isValidHtml5type, toBoolean} from '../util';\nimport {messageObjectFactory} from '../messages/messageObjectFactory';\n\n/**\n * Validates field configurations\n *\n * NOTE: This is called internally by factory. You probably do not want to call this.\n *\n * @param {Object}fieldArgs\n * @returns {*}\n */\nexport const prepareFieldConfig = (fieldArgs) => {\n\tfunction addMessageArg(fieldArgs) {\n\t\tfieldArgs.disabled = toBoolean(fieldArgs.disabled);\n\t\tfieldArgs.message = 'object' === typeof fieldArgs.message\n\t\t\t? messageObjectFactory(fieldArgs.message)\n\t\t\t: messageObjectFactory({message: null, error: false});\n\t\treturn fieldArgs;\n\t}\n\n\n\tif( 'button' === fieldArgs.type ) {\n\t\tif ('submit' !== fieldArgs.inputType) {\n\t\t\tfieldArgs.inputType = 'button';\n\t\t}\n\n\t\treturn addMessageArg(fieldArgs);\n\t}\n\n\n\t/**\n\t * Pick whitelisted keys from object\n\t *\n\t * @see http://www.jstips.co/en/javascript/picking-and-rejecting-object-properties/\n\t *\n\t * @param {Object} obj The object to pick from\n\t * @param {Array} keys The whitelist of keys\n\t * @return {*}\n\t */\n\tfunction pick(obj, keys) {\n\t\treturn keys.map(k => k in obj ? {[k]: obj[k]} : {})\n\t\t\t.reduce((res, o) => Object.assign(res, o), {});\n\t}\n\n\tswitch (fieldArgs.type) {\n\tcase 'select':\n\tcase 'dropdown':\n\t\tfieldArgs.type = 'select';\n\t\tbreak;\n\tcase 'fieldset':\n\t\tfieldArgs.type = 'fieldset';\n\t\tbreak;\n\tcase 'text':\n\tcase 'number':\n\tdefault:\n\t\tfieldArgs.inputType = isValidHtml5type(fieldArgs.type) ? fieldArgs.type : 'text';\n\t\tfieldArgs.type = 'input';\n\t\tbreak;\n\t}\n\n\tif (fieldArgs.hasOwnProperty('desc')) {\n\t\tfieldArgs.help = fieldArgs.desc;\n\t}\n\tif (fieldArgs.hasOwnProperty('description')) {\n\t\tfieldArgs.help = fieldArgs.description;\n\t}\n\n\tlet validators = [];\n\tif (fieldArgs.hasOwnProperty('validators') && Array.isArray(fieldArgs.validators)) {\n\t\tvalidators = fieldArgs.validators;\n\t}\n\n\tconst keys = 'magic' === fieldArgs.type ? magicGroupPropTypes : fieldGroupPropTypes;\n\tfieldArgs = pick(fieldArgs, Object.keys(keys));\n\tfieldArgs = addMessageArg(fieldArgs);\n\tfieldArgs.validators = validators;\n\treturn fieldArgs;\n};",
"static": true,
"longname": "/Users/josh/caldera-js/components/src/components/fields/factories/prepareFieldConfig.js",
"access": "public",
@@ -1628,7 +1690,7 @@
"lineNumber": 1
},
{
- "__docId__": 96,
+ "__docId__": 99,
"kind": "function",
"name": "prepareFieldConfig",
"memberof": "src/components/fields/factories/prepareFieldConfig.js",
@@ -1670,7 +1732,7 @@
}
},
{
- "__docId__": 97,
+ "__docId__": 100,
"kind": "file",
"name": "src/components/fields/field-group-change-handlers/fieldsetCheckboxHandler.js",
"content": "import {addOrRemoveFromArray} from '../util';\n\n/**\n * Change handler for a checkbox that is a part of a group\n * @param {Object} option Option that is being changed. Shape: `{value:String|number,label:String}`,\n * @param {Array|string|number} values Current values\n * @param {Function} onValueChange Function to call with updated value\n */\nexport const fieldsetCheckboxHandler = (option, values, onValueChange) => {\n\tif (!Array.isArray(values)) {\n\t\tif ('string' === typeof values || 'number' === typeof values) {\n\t\t\tvalues = [values];\n\t\t} else {\n\t\t\tvalues = [];\n\n\t\t}\n\t}\n\tvalues = addOrRemoveFromArray(option.value, values);\n\tonValueChange(values);\n};",
@@ -1681,7 +1743,7 @@
"lineNumber": 1
},
{
- "__docId__": 98,
+ "__docId__": 101,
"kind": "function",
"name": "fieldsetCheckboxHandler",
"memberof": "src/components/fields/field-group-change-handlers/fieldsetCheckboxHandler.js",
@@ -1732,7 +1794,7 @@
"return": null
},
{
- "__docId__": 99,
+ "__docId__": 102,
"kind": "file",
"name": "src/components/fields/index.js",
"content": "/*eslint no-undef: \"error\"*/\n/*eslint-env node*/\nimport {FieldGroup} from './FieldGroup';\nimport {SelectField} from './select/SelectField';\nimport {Input} from './input/Input';\nimport {Message} from './messages/Message';\nimport {ButtonGroup} from './button-group/ButtonGroup';\n\nmodule.exports = {\n\tFieldGroup,\n\tSelectField: SelectField,\n\tInput,\n\tMessage,\n\tButtonGroup\n};",
@@ -1743,7 +1805,7 @@
"lineNumber": 1
},
{
- "__docId__": 100,
+ "__docId__": 103,
"kind": "file",
"name": "src/components/fields/input/Input.js",
"content": "import React from 'react';\nimport {fieldPropTypes} from '../propTypes';\nimport classNames from 'classnames';\nimport {RenderGroup} from '../../RenderGroup';\n/**\n * Input component for any HTML5 input type\n *\n * @param {Object} props\n * @returns {*}\n * @constructor\n */\nexport const Input = (props) => {\n\t/**\n\t * Dispatches value of input when it changes\n\t * @param event\n\t * @return {*}\n\t */\n\tfunction changeHandler(event){\n\t\treturn props.onValueChange(event.target.value);\n\t}\n\n\t/**\n\t * Dispatches value when checkbox is checked\n\t * @return {*}\n\t */\n\tfunction checkboxChangeHandler() {\n\t\treturn props.onValueChange(! props.value);\n\t}\n\n\n\t/**\n\t * Get the className prop for inputs\n\t *\n\t * @return {String}\n\t */\n\tfunction inputClassName() {\n\t\treturn classNames(\n\t\t\tprops.fieldClassName,\n\t\t\tRenderGroup.classNames.input\n\t\t);\n\t}\n\n\tif( 'checkbox' === props.inputType ){\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\n\t\t);\n\t}\n}\n\n\n/**\n * Prop definitions for MagicSelect component\n */\nMagicSelect.propTypes = {\n\tid: PropTypes.string.isRequired,\n\toptions: optionsShapeProp,\n\tisRequired: PropTypes.bool,\n\thelp: PropTypes.string,\n\tvalue: valuePropType,\n\tonValueChange: onValueChangePropType,\n\tdisabled: PropTypes.bool,\n\tisOpen: PropTypes.bool,\n\tonBlur: PropTypes.func,\n\tonFocus: PropTypes.func,\n\tclassName: PropTypes.string\n};\n\n/**\n * Default property values for MagicSelect component\n *\n * @type {{}}\n */\nMagicSelect.defaultProps = {\n\tdefaultList: 'fields',\n\tisOpen: false,\n\toptions:[]\n};",
@@ -2198,7 +2260,7 @@
"lineNumber": 1
},
{
- "__docId__": 129,
+ "__docId__": 132,
"kind": "class",
"name": "MagicSelect",
"memberof": "src/components/fields/magic-select/MagicSelect.js",
@@ -2216,7 +2278,7 @@
]
},
{
- "__docId__": 130,
+ "__docId__": 133,
"kind": "constructor",
"name": "constructor",
"memberof": "src/components/fields/magic-select/MagicSelect.js~MagicSelect",
@@ -2241,7 +2303,7 @@
]
},
{
- "__docId__": 138,
+ "__docId__": 141,
"kind": "method",
"name": "onChange",
"memberof": "src/components/fields/magic-select/MagicSelect.js~MagicSelect",
@@ -2267,7 +2329,7 @@
"return": null
},
{
- "__docId__": 139,
+ "__docId__": 142,
"kind": "method",
"name": "onInputFocus",
"memberof": "src/components/fields/magic-select/MagicSelect.js~MagicSelect",
@@ -2282,7 +2344,7 @@
"return": null
},
{
- "__docId__": 140,
+ "__docId__": 143,
"kind": "method",
"name": "onInputBlur",
"memberof": "src/components/fields/magic-select/MagicSelect.js~MagicSelect",
@@ -2297,7 +2359,7 @@
"return": null
},
{
- "__docId__": 141,
+ "__docId__": 144,
"kind": "method",
"name": "onSelect",
"memberof": "src/components/fields/magic-select/MagicSelect.js~MagicSelect",
@@ -2324,7 +2386,7 @@
"return": null
},
{
- "__docId__": 142,
+ "__docId__": 145,
"kind": "method",
"name": "renderItem",
"memberof": "src/components/fields/magic-select/MagicSelect.js~MagicSelect",
@@ -2367,7 +2429,7 @@
}
},
{
- "__docId__": 143,
+ "__docId__": 146,
"kind": "method",
"name": "getItemValue",
"memberof": "src/components/fields/magic-select/MagicSelect.js~MagicSelect",
@@ -2400,7 +2462,7 @@
}
},
{
- "__docId__": 144,
+ "__docId__": 147,
"kind": "method",
"name": "render",
"memberof": "src/components/fields/magic-select/MagicSelect.js~MagicSelect",
@@ -2422,7 +2484,7 @@
"params": []
},
{
- "__docId__": 145,
+ "__docId__": 148,
"kind": "file",
"name": "src/components/fields/messages/Message.js",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport {messagePropShape} from './messagePropTypes';\nimport classNames from 'classnames';\n\n/**\n * The class that message components always wrap messages in\n * @type {string}\n */\nexport const MESSAGE_CLASS = 'caldera-components-message';\n\n/**\n * Prop for showing a validation message\n *\n * Use or for errors and such\n *\n * @param {object} props\n * @return {*}\n * @constructor\n */\nexport const Message = (props) => {\n\tconst {message,error} = props.message;\n\tif( !message || '' === message ){\n\t\treturn \n\t\t\t{message}\n\t\t\n\t);\n};\n\n/**\n * Prop types for Message components\n *\n * @type {{className: shim, message}}\n */\nMessage.propTypes = {\n\tclassName: PropTypes.string,\n\tmessage: messagePropShape,\n};\n\n",
@@ -2433,7 +2495,7 @@
"lineNumber": 1
},
{
- "__docId__": 146,
+ "__docId__": 149,
"kind": "variable",
"name": "MESSAGE_CLASS",
"memberof": "src/components/fields/messages/Message.js",
@@ -2455,7 +2517,7 @@
}
},
{
- "__docId__": 147,
+ "__docId__": 150,
"kind": "function",
"name": "Message",
"memberof": "src/components/fields/messages/Message.js",
@@ -2497,7 +2559,7 @@
}
},
{
- "__docId__": 148,
+ "__docId__": 151,
"kind": "file",
"name": "src/components/fields/messages/messageObjectFactory.js",
"content": "import {toBoolean} from '../util';\n\n/**\n * Prepares messages object in fieldConfigs\n *\n * @param {Object} message\n * @param {Boolean} error\n * @return {{message: *, error: boolean}}\n */\nexport const messageObjectFactory = ({message,error}) => {\n\tif( 'string' !== typeof message ){\n\t\tmessage = '';\n\t}\n\treturn{\n\t\tmessage: message,\n\t\terror: toBoolean(error)\n\t};\n};",
@@ -2508,7 +2570,7 @@
"lineNumber": 1
},
{
- "__docId__": 149,
+ "__docId__": 152,
"kind": "function",
"name": "messageObjectFactory",
"memberof": "src/components/fields/messages/messageObjectFactory.js",
@@ -2554,7 +2616,7 @@
}
},
{
- "__docId__": 150,
+ "__docId__": 153,
"kind": "file",
"name": "src/components/fields/messages/messagePropTypes.js",
"content": "import PropTypes from 'prop-types';\n\n/**\n * The shape of the message object passed to Message compoent\n *\n * @type {shim}\n */\nexport const messagePropShape = PropTypes.shape(\n\t{\n\t\terror: PropTypes.bool,\n\t\ttext: PropTypes.string\n\t}\n);",
@@ -2565,7 +2627,7 @@
"lineNumber": 1
},
{
- "__docId__": 151,
+ "__docId__": 154,
"kind": "variable",
"name": "messagePropShape",
"memberof": "src/components/fields/messages/messagePropTypes.js",
@@ -2587,7 +2649,7 @@
}
},
{
- "__docId__": 152,
+ "__docId__": 155,
"kind": "file",
"name": "src/components/fields/propTypes.js",
"content": "import PropTypes from 'prop-types';\nimport {messagePropShape} from './messages/messagePropTypes';\n\n/**\n * PropType for the field value used in multiple components\n *\n * @type {shim}\n */\nexport const valuePropType = PropTypes.oneOfType([\n\tPropTypes.string,\n\tPropTypes.number,\n\tPropTypes.array,\n\tPropTypes.bool\n]);\n\n/**\n * PropType for the field value change event used in multiple components\n *\n * @type {shim}\n */\nexport const onValueChangePropType = PropTypes.func.isRequired;\n\n/**\n * Proptypes for Input component\n * @type {shim}\n */\nexport const inputTypeProp = PropTypes.string;\n\n/**\n * PropTypes for field groups\n *\n * @type {{id: (boolean|shim|*), isBlockInput: shim, isRequired: shim, help: shim, label: (boolean|shim|*), type: shim, value: shim, onValueChange: (boolean|shim|*), inputType: shim}}\n */\nexport const fieldGroupPropTypes = {\n\tid: PropTypes.string.isRequired,\n\tisBlockInput: PropTypes.bool,\n\tisRequired: PropTypes.bool,\n\thelp: PropTypes.string,\n\tlabel: PropTypes.string.isRequired,\n\ttype: PropTypes.oneOf(['input', 'select', 'fieldset', 'magic']),\n\tvalue: valuePropType,\n\tonValueChange: onValueChangePropType,\n\toptions: PropTypes.array,\n\tinputType: inputTypeProp,\n\tdisabled: PropTypes.bool,\n\tmessage: messagePropShape,\n\tonBlur: PropTypes.func,\n\tonFocus: PropTypes.func\n};\n\n/**\n * PropTypes for the InnerField component\n *\n * @type {{id: (boolean|shim|*), fieldClassName: (boolean|shim|*), help: shim, value: shim, onValueChange: (boolean|shim|*), inputType: shim}}\n */\nexport const fieldInnerPropTypes = {\n\tid: PropTypes.string.isRequired,\n\tfieldClassName: PropTypes.string.isRequired,\n\thelp: PropTypes.string,\n\tvalue: valuePropType,\n\tonValueChange: onValueChangePropType,\n\tinputType: inputTypeProp,\n\tariaDescribedbyAttr: PropTypes.string,\n\tonBlur: PropTypes.func,\n\tonFocus: PropTypes.func\n};\n\nexport const fieldPropTypes = fieldInnerPropTypes;\n\n/**\n * The shape of one option for a select field\n *\n * @type {{label: shim, value: shim}}\n */\nexport const optionShape = {\n\tlabel: PropTypes.string,\n\tvalue: PropTypes.oneOfType([\n\t\tPropTypes.string,\n\t\tPropTypes.number,\n\t])\n};\n\n/**\n * Shape of options prop for select fields\n *\n * @type {shim}\n */\nexport const optionsShapeProp = PropTypes.arrayOf(\n\tPropTypes.shape(optionShape)\n);\n\nexport const magicGroupPropTypes = {\n\t...fieldGroupPropTypes,\n\tfieldsList: optionsShapeProp,\n\tsystemTagsList: optionsShapeProp,\n\tdefaultList: PropTypes.string,\n\tisOpen: PropTypes.bool,\n\ttype: PropTypes.string\n};",
@@ -2598,7 +2660,7 @@
"lineNumber": 1
},
{
- "__docId__": 153,
+ "__docId__": 156,
"kind": "variable",
"name": "valuePropType",
"memberof": "src/components/fields/propTypes.js",
@@ -2620,7 +2682,7 @@
}
},
{
- "__docId__": 154,
+ "__docId__": 157,
"kind": "variable",
"name": "onValueChangePropType",
"memberof": "src/components/fields/propTypes.js",
@@ -2642,7 +2704,7 @@
}
},
{
- "__docId__": 155,
+ "__docId__": 158,
"kind": "variable",
"name": "inputTypeProp",
"memberof": "src/components/fields/propTypes.js",
@@ -2664,7 +2726,7 @@
}
},
{
- "__docId__": 156,
+ "__docId__": 159,
"kind": "variable",
"name": "fieldGroupPropTypes",
"memberof": "src/components/fields/propTypes.js",
@@ -2686,7 +2748,7 @@
}
},
{
- "__docId__": 157,
+ "__docId__": 160,
"kind": "variable",
"name": "fieldInnerPropTypes",
"memberof": "src/components/fields/propTypes.js",
@@ -2708,7 +2770,7 @@
}
},
{
- "__docId__": 158,
+ "__docId__": 161,
"kind": "variable",
"name": "fieldPropTypes",
"memberof": "src/components/fields/propTypes.js",
@@ -2728,7 +2790,7 @@
}
},
{
- "__docId__": 159,
+ "__docId__": 162,
"kind": "variable",
"name": "optionShape",
"memberof": "src/components/fields/propTypes.js",
@@ -2750,7 +2812,7 @@
}
},
{
- "__docId__": 160,
+ "__docId__": 163,
"kind": "variable",
"name": "optionsShapeProp",
"memberof": "src/components/fields/propTypes.js",
@@ -2772,7 +2834,7 @@
}
},
{
- "__docId__": 161,
+ "__docId__": 164,
"kind": "variable",
"name": "magicGroupPropTypes",
"memberof": "src/components/fields/propTypes.js",
@@ -2792,7 +2854,7 @@
}
},
{
- "__docId__": 162,
+ "__docId__": 165,
"kind": "file",
"name": "src/components/fields/select/SelectField.js",
"content": "import React from 'react';\nimport {fieldPropTypes} from '../propTypes';\nimport classNames from 'classnames';\nimport {RenderGroup} from '../../RenderGroup';\nimport {optionsShapeProp} from '../propTypes';\n\n/**\n * Creates a select field\n *\n * @param {Object} props\n * @returns {*}\n * @constructor\n */\nexport const SelectField = (props) => {\n\t/**\n\t * Dispatches new value(s) to parent\n\t *\n\t * @param selection\n\t * @returns {*}\n\t */\n\tfunction changeHandler(selection) {\n\t\treturn props.onValueChange(selection);\n\t}\n\n\t/**\n\t * Get the className prop for the select element\n\t *\n\t * @return {String}\n\t */\n\tfunction selectClassNames() {\n\t\treturn classNames(\n\t\t\tprops.fieldClassName,\n\t\t\tRenderGroup.classNames.input\n\t\t);\n\t}\n\n\treturn (\n\t\t\n\t\t\t{props.options\n\t\t\t\t.map((item,i) => {\n\t\t\t\t\tconst key = 'string' === typeof item.value ? item.value : i;\n\t\t\t\t\treturn(\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\n\t\t\t\t\t);\n\t\t\t\t})\n\t\t\t}\n\t\t\n\n\n\n\t);\n};\n\n/**\n * Prop definition for select fields\n *\n * @type {{}}\n */\nSelectField.propTypes = {\n\t...fieldPropTypes,\n\toptions: optionsShapeProp\n\n};\n\n/**\n * Default props for select fields\n *\n * @type {{options: Array}}\n */\nSelectField.defaultProps = {\n\toptions: []\n};",
@@ -2803,7 +2865,7 @@
"lineNumber": 1
},
{
- "__docId__": 163,
+ "__docId__": 166,
"kind": "function",
"name": "SelectField",
"memberof": "src/components/fields/select/SelectField.js",
@@ -2849,7 +2911,7 @@
}
},
{
- "__docId__": 164,
+ "__docId__": 167,
"kind": "file",
"name": "src/components/fields/select/SelectFieldFancy.js",
"content": "import React from 'react';\nimport Downshift from 'downshift';\nimport PropTypes from 'prop-types';\nimport {fieldPropTypes} from '../propTypes';\n\n/**\n * Creates a select field\n *\n * Wraps [downshift](https://github.com/paypal/downshift)\n *\n * @param {Object} props\n * @returns {*}\n * @constructor\n */\nexport const SelectFieldFancy = (props) => {\n\t/**\n\t * Dispatches new value(s) to parent\n\t *\n\t * @param selection\n\t * @returns {*}\n\t */\n\tfunction changeHandler(selection) {\n\t\treturn props.onValueChange(selection);\n\t}\n\n\treturn (\n\t\t (item ? item.value : '')}\n\t\t\tdefaultIsOpen={props.isOpen}\n\t\t>\n\t\t\t{({\n\t\t\t\tgetInputProps,\n\t\t\t\tgetItemProps,\n\t\t\t\tisOpen,\n\t\t\t\tinputValue,\n\t\t\t\thighlightedIndex,\n\t\t\t\tselectedItem,\n\t\t\t}) => (\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t{isOpen ? (\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{props.options\n\t\t\t\t\t\t\t\t.filter(item => !inputValue || item.value.includes(inputValue))\n\t\t\t\t\t\t\t\t.map((item, index) => (\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t{item.value}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t
\n\n```\n\n### Add onFocus Event For All Fields Of Render Group\nYou can add an onFocus event that fires when ever any field is focused. The callback function gets the config field's ID as its only parameter.\n```js\n console.log(fieldId)}\n /> \n\n```\n\n### Add onBlur Event For All Fields Of Render Group\nYou can add an `onBlur` event that fires when ever any field is blurred. The callback function gets the config field's ID as its only parameter.\n\n```js\n console.log(fieldId)}\n /> \n\n```\n\n\n## Field Groups\nIf you have to use a component, please use `FieldGroup` not its inner components.\n\n* [Reference](https://calderalabs.org/caldera-components/function/index.html#static-function-Input)\n\n\n### Import With webpack\n`import {FieldGroup} from '@caldera-labs/components';`\n\n### Text Field Groups\nIf the prop `type` is input, the type of input is controlled by the `inputType` props, which by default is `text`. Therefore, by default input field groups have inputs with the HTML5 input `type` attribute of \"text\". Also, `inputType` could be \"number\" or \"data\", etc.\n\n#### Text field that is required\n```jsx\n {\n values.one=newValue;\n }}\n/>\n\n```\n\n#### Text field that is not required\n```jsx\n {\n values.two=newValue;\n }}\n/>\n```\n\n#### Text field with help text\n* Adding help text automatically ads `aria-describedby`\n\n```jsx\n {\n values.three=newValue;\n }}\n/>\n```\n\n\n### Number Field Group\n\n```jsx\n {\n values.two=newValue;\n }}\n/>\n```\n\n### Select Field Groups\n\nSelect field groups happen when you pass \"select\" to the `type` prop. \n\nSelect fields take an array of options in the prop option. Options in that collection must conform the shape [defined here](https://calderalabs.org/caldera-components/docs/file/src/components/fields/propTypes.js.html#lineNumber75)\n\n\n```\nlet selectFieldValue = '';\n {\n selectFieldValue = newValue;\n }}\n options={[\n {\n value: 1,\n label: 'One'\n },\n {\n value: 2,\n label: 'Two'\n }\n ]}\n/>\n\n## Magic Select Groups\nMagic select groups use `MagicSelect` fields, which wrap [reactjs/react-autocomple](https://github.com/reactjs/react-autocomplete) to create a UI for [Caldera Forms magic tags](https://calderaforms.com/doc/using-magic-tags-caldera-forms/).\n\nThese fields groups show options from two lists, one is passed in the prop `fieldsList` and represents the fields of the form, and the other is in `systemTagsList`, which represents the system values such as the current user info.\n\nThe property `isOpen` controls if the auto-complete list is open.\n\n### Import With webpack\nimport {MagicFieldGroup} from '@caldera-labs/components';\n\n### Example\n\n```js\nlet magicFieldValue ='';\n\n {\n magicFieldValue = newValue;\n } }\n fieldsList={[\n {\n label: 'Field One',\n value: '%fldOne%'\n },\n {\n label: 'Field Two',\n value: '%fldTwo%'\n },\n {\n label: 'Field Three',\n value: '%fldThree%'\n },\n ]}\n systemTagsList={[\n {\n label: 'User First Name',\n value: '{user:first_name}'\n }\n ]}\n isOpen={true}\n value={magicFieldValue}\n />\n```\n\n\n\n\n## Select Fields\n* [Reference](https://calderalabs.org/caldera-components/function/index.html#static-function-SelectField)\n\n### Import With webpack\n`import {fields} from '@caldera-labs/components';`\n\n### Example\n```\n {\n console.log(newValue)\n }} //Update callback\n options={[\n {\n value: '1,\n label: 'One'\n },\n {\n value: '2',\n label: 'Two'\n }\n ]}\n value={'2'} //The current value\n/>\n \n```\n\n## Fieldsets\nFor a `` element containing checkboxes, pass the value `fieldset` to the `type\n\n\n\n```js\nimport {FieldGroup} from '@caldera-labs/components';\n//Value is an array.\nlet checkBoxValue = ['1'];\n\n\n value={checkBoxValue} //value(s)\n id={'Checkbox1'} //id attribute for \n onValueChange={(newValue) => {\n \t//logic of removing/adding from array is handled internally\n checkBoxValue = newValue;\n }}\n options={[\n {\n value: '1', //this value is in array so box will be checked by default\n label: 'One'// Used for this checkbox's \n },\n {\n value: '2', //this value is NOT in array so box will NOT be checked by default\n label: 'Two'// Used for this checkbox's \n }\n ]}\n/>\n```\n\n## Button Group\nButton groups are select fields. One button can be selected at once.\n\nThis is a field, not a group (like `FieldGroup` or `MagicFieldGroup`) so it does not handle its own label.\n\nButton groups fields take an array of options in the prop option. Options in that collection must conform the shape [defined here](https://calderalabs.org/caldera-components/docs/file/src/components/fields/propTypes.js.html#lineNumber75)\n\n### Import With webpack\n```\nimport {fields} from '@caldera-labs/components';\nconst {ButtonGroup} = fields;\n```\n\n### Examples\n### Button Group With Two Options\n```js\n {\n \tconsole.log(selectedValue);\n }}\n options={[\n {\n value: 1,\n label: 'Option One',\n },\n {\n value: 2,\n label: 'Option Two',\n }\n ]}\n value={1}\n/>\n```\n\n#### Button Group With Icon\nIf options have `icon`, the rendered markup for the button will be like this:\n\n```html\n {\n \tconsole.log(selectedValue);\n }}\n options={[\n {\n value: 1,\n label: 'Option One',\n icon: 'fa-envelop'\n },\n {\n value: 2,\n label: 'Option Two',\n icon: 'fa-twitter'\n\n }\n ]}\n value={1}\n/>\n```\n\n#### Explicitly set `aria-label` Attribute\nBy default, the visual representation fo the option is `option.label`. That makes sense, if you're representing the option with words. Allowing the component to use `option.label` for the `aria-label` attribute, which is its default value, I think makes sense.\n\nBut, if the visual representation of the option is an emoji or image, then `aria-label` can not be an image, it has to be text that gives meaning to the image for users who can not see the image.\n\n```js\n {\n \tconsole.log(selectedValue);\n }}\n options={[\n {\n value: 'fields',\n label: '%',\n ariaLabel: 'Select from field values'\n },\n {\n value: 'system',\n label: '{}',\n ariaLabel: 'Select from system values'\n },\n ]}\n/>\n```\n\n## Message component\nThe `Message` component is used to display validation messages in a `FieldGroup` component. Messages have a shape defined in the `messagePropShape` object. This component, by design, returns nothing if `props.message.message` is not supplied, or is an empty string.\n\n### Import with webpack\n```\nimport {fields} from '@caldera-labs/components';\nconst {Message} = fields;\n```\n\n### An error message\n```js\n\n```\n\n## Admin Page Components\nMain admin UI components for Caldera Forms\n\n### Import Using webpack\n`import {Admin} from '@caldera-labs/components'`\n\n### List of Admin Components\n* `CalderaHeader` A component to create the header markup of a page.\n- Child props can be passed. They will be outputted inside of a `ul`. You must supply `li`.\n* `PageBody` Wraps the content of an admin page in a consistent wrapper.\n* `StatusIndicator` Conveys succesful green messages or red messages of failure.\n\n#### `StatusIndicator`\n* Conveys successful green messages or red messages of failure.\n* Relies on CSS in admin.css for style, which makes it look the same as existing similar components.\n* Designed to work the same way as status indicator used in Pro UI, which is VueJS.\n\n#### Examples Usage of `StatusIndicator` Component\nSuccess message:\n```js\nimport {Admin} from '@caldera-labs/components';\n\n```\n\nError/ warning:\n\n```js\nimport {Admin} from '@caldera-labs/components';\n\n\n```\n\n#### `CalderaHeader`\n```js\nimport {Admin} from '@caldera-labs/components';\n\n \n```\n\n\n#### `PageBody`\n```js\nimport {Admin} from '@caldera-labs/components';\n\n \n \n Hi Roy
\n\n```",
+ "content": "# Included Component\nThese components are used by the factories and follow their schema, [defined here](https://calderalabs.org/caldera-components/manual/factories.html#configfield-schema).\nIn general, use the `RenderGroup` component, do not use the low-level components. Use the factories or `RenderGroup`.\n\n## `RenderGroup`\nThe `RenderGroup` component takes an array of field configs and generates UI for them. \n\n* [Reference](https://calderalabs.org/caldera-components/class/src/components/RenderGroup.js~RenderGroup.html)\n\n### Import with wepback\n`import {RenderGroup} from '@caldera-labs/components';`\n### Example Of `RenderGroup` Component Usage\n\n```jsx \nconst textFieldConfig = {\n\t'id': 'cf-something-tags',\n\t'label': 'Tags',\n\t'desc': 'Comma separated list of tags.',\n\t'type': 'text',\n\t'description': false,\n\tvalue: 'Roy,Mike',\n\tonValueChange: (newValue) =>{\n\t\tconsole.log(newValue)\n\t}\n};\n\nconst hiddenFieldConfig = {\n\t'id': 'cf-something-sequence-id',\n\t'type': 'hidden',\n\t'label': 'Sequence ID',\n\t'description': false,\n\tvalue: '42',\n \tonValueChange: (newValue) =>{\n \t\tconsole.log(newValue)\n \t}\n};\n\nconst selectFieldConfig = {\n\t'id': 'cf-something-select-id',\n\t'type': 'dropdown',\n\t'label': 'Content type',\n\t'description': 'Choose content type, default is HTML',\n\toptions: [\n\t\t{\n\t\t\tlabel: 'HTML',\n\t\t\tvalue: 'html'\n\t\t},\n\t\t{\n\t\t\tlabel: 'Plain Text',\n\t\t\tvalue: 'plain'\n\t\t}\n\t],\n\tvalue: 'html',\n onValueChange: (newValue) =>{\n console.log(newValue)\n }\n};\n\nconst configFields = [\n\ttextFieldConfig,\n\thiddenFieldConfig,\n\tselectFieldConfig\n];\n\n\n\n```\n\n### Add onFocus Event For All Fields Of Render Group\nYou can add an onFocus event that fires when ever any field is focused. The callback function gets the config field's ID as its only parameter.\n```js\n console.log(fieldId)}\n /> \n\n```\n\n### Add onBlur Event For All Fields Of Render Group\nYou can add an `onBlur` event that fires when ever any field is blurred. The callback function gets the config field's ID as its only parameter.\n\n```js\n console.log(fieldId)}\n /> \n\n```\n\n\n## Field Groups\nIf you have to use a component, please use `FieldGroup` not its inner components.\n\n* [Reference](https://calderalabs.org/caldera-components/function/index.html#static-function-Input)\n\n\n### Import With webpack\n`import {FieldGroup} from '@caldera-labs/components';`\n\n### Text Field Groups\nIf the prop `type` is input, the type of input is controlled by the `inputType` props, which by default is `text`. Therefore, by default input field groups have inputs with the HTML5 input `type` attribute of \"text\". Also, `inputType` could be \"number\" or \"data\", etc.\n\n#### Text field that is required\n```jsx\n {\n values.one=newValue;\n }}\n/>\n\n```\n\n#### Text field that is not required\n```jsx\n {\n values.two=newValue;\n }}\n/>\n```\n\n#### Text field with help text\n* Adding help text automatically ads `aria-describedby`\n\n```jsx\n {\n values.three=newValue;\n }}\n/>\n```\n\n\n### Number Field Group\n\n```jsx\n {\n values.two=newValue;\n }}\n/>\n```\n\n### Submit Button Field Group\n```js\n {\n \t//do stuff when clicked\n }}\n/>\n\n```\n\n### Button Field Group\n```js\n {\n \t//do stuff when clicked\n }}\n/>\n```\n\n### Select Field Groups\n\nSelect field groups happen when you pass \"select\" to the `type` prop. \n\nSelect fields take an array of options in the prop option. Options in that collection must conform the shape [defined here](https://calderalabs.org/caldera-components/docs/file/src/components/fields/propTypes.js.html#lineNumber75)\n\n```\nlet selectFieldValue = '';\n {\n selectFieldValue = newValue;\n }}\n options={[\n {\n value: 1,\n label: 'One'\n },\n {\n value: 2,\n label: 'Two'\n }\n ]}\n/>\n```\n\n## Magic Select Groups\nMagic select groups use `MagicSelect` fields, which wrap [reactjs/react-autocomple](https://github.com/reactjs/react-autocomplete) to create a UI for [Caldera Forms magic tags](https://calderaforms.com/doc/using-magic-tags-caldera-forms/).\n\nThese fields groups show options from two lists, one is passed in the prop `fieldsList` and represents the fields of the form, and the other is in `systemTagsList`, which represents the system values such as the current user info.\n\nThe property `isOpen` controls if the auto-complete list is open.\n\n### Import With webpack\nimport {MagicFieldGroup} from '@caldera-labs/components';\n\n### Example\n\n```js\nlet magicFieldValue ='';\n\n {\n magicFieldValue = newValue;\n } }\n fieldsList={[\n {\n label: 'Field One',\n value: '%fldOne%'\n },\n {\n label: 'Field Two',\n value: '%fldTwo%'\n },\n {\n label: 'Field Three',\n value: '%fldThree%'\n },\n ]}\n systemTagsList={[\n {\n label: 'User First Name',\n value: '{user:first_name}'\n }\n ]}\n isOpen={true}\n value={magicFieldValue}\n />\n```\n\n\n\n\n## Select Fields\n* [Reference](https://calderalabs.org/caldera-components/function/index.html#static-function-SelectField)\n\n### Import With webpack\n`import {fields} from '@caldera-labs/components';`\n\n### Example\n```\n {\n console.log(newValue)\n }} //Update callback\n options={[\n {\n value: '1,\n label: 'One'\n },\n {\n value: '2',\n label: 'Two'\n }\n ]}\n value={'2'} //The current value\n/>\n \n```\n\n## Fieldsets\nFor a `` element containing checkboxes, pass the value `fieldset` to the `type\n\n\n\n```js\nimport {FieldGroup} from '@caldera-labs/components';\n//Value is an array.\nlet checkBoxValue = ['1'];\n\n\n value={checkBoxValue} //value(s)\n id={'Checkbox1'} //id attribute for \n onValueChange={(newValue) => {\n \t//logic of removing/adding from array is handled internally\n checkBoxValue = newValue;\n }}\n options={[\n {\n value: '1', //this value is in array so box will be checked by default\n label: 'One'// Used for this checkbox's \n },\n {\n value: '2', //this value is NOT in array so box will NOT be checked by default\n label: 'Two'// Used for this checkbox's \n }\n ]}\n/>\n```\n\n## Submit Buttons and Other Types Of Buttons\nIn general, for submit inputs and `` elements, instead of using an `Input` component, you should use the `Button` component.\n\n\n### Import With webpack\n```\nimport {fields} from '@caldera-labs/components';\nconst {Button} = fields;\n\n```\n\n### Exampel Submit Button\n```js\n {\n \t//do stuff when clicked\n }}\n/>\n\n```\n\n## Button Group\nButton groups are select fields. One button can be selected at once.\n\nThis is a field, not a group (like `FieldGroup` or `MagicFieldGroup`) so it does not handle its own label.\n\nButton groups fields take an array of options in the prop option. Options in that collection must conform the shape [defined here](https://calderalabs.org/caldera-components/docs/file/src/components/fields/propTypes.js.html#lineNumber75)\n\n### Import With webpack\n```\nimport {fields} from '@caldera-labs/components';\nconst {ButtonGroup} = fields;\n```\n\n### Examples\n### Button Group With Two Options\n```js\n {\n \tconsole.log(selectedValue);\n }}\n options={[\n {\n value: 1,\n label: 'Option One',\n },\n {\n value: 2,\n label: 'Option Two',\n }\n ]}\n value={1}\n/>\n```\n\n#### Button Group With Icon\nIf options have `icon`, the rendered markup for the button will be like this:\n\n```html\n {\n \tconsole.log(selectedValue);\n }}\n options={[\n {\n value: 1,\n label: 'Option One',\n icon: 'fa-envelop'\n },\n {\n value: 2,\n label: 'Option Two',\n icon: 'fa-twitter'\n\n }\n ]}\n value={1}\n/>\n```\n\n#### Explicitly set `aria-label` Attribute\nBy default, the visual representation fo the option is `option.label`. That makes sense, if you're representing the option with words. Allowing the component to use `option.label` for the `aria-label` attribute, which is its default value, I think makes sense.\n\nBut, if the visual representation of the option is an emoji or image, then `aria-label` can not be an image, it has to be text that gives meaning to the image for users who can not see the image.\n\n```js\n {\n \tconsole.log(selectedValue);\n }}\n options={[\n {\n value: 'fields',\n label: '%',\n ariaLabel: 'Select from field values'\n },\n {\n value: 'system',\n label: '{}',\n ariaLabel: 'Select from system values'\n },\n ]}\n/>\n```\n\n## Message component\nThe `Message` component is used to display validation messages in a `FieldGroup` component. Messages have a shape defined in the `messagePropShape` object. This component, by design, returns nothing if `props.message.message` is not supplied, or is an empty string.\n\n### Import with webpack\n```\nimport {fields} from '@caldera-labs/components';\nconst {Message} = fields;\n```\n\n### An error message\n```js\n\n```\n\n## Admin Page Components\nMain admin UI components for Caldera Forms\n\n### Import Using webpack\n`import {Admin} from '@caldera-labs/components'`\n\n### List of Admin Components\n* `CalderaHeader` A component to create the header markup of a page.\n- Child props can be passed. They will be outputted inside of a `ul`. You must supply `li`.\n* `PageBody` Wraps the content of an admin page in a consistent wrapper.\n* `StatusIndicator` Conveys succesful green messages or red messages of failure.\n\n#### `StatusIndicator`\n* Conveys successful green messages or red messages of failure.\n* Relies on CSS in admin.css for style, which makes it look the same as existing similar components.\n* Designed to work the same way as status indicator used in Pro UI, which is VueJS.\n\n#### Examples Usage of `StatusIndicator` Component\nSuccess message:\n```js\nimport {Admin} from '@caldera-labs/components';\n\n```\n\nError/ warning:\n\n```js\nimport {Admin} from '@caldera-labs/components';\n\n\n```\n\n#### `CalderaHeader`\n```js\nimport {Admin} from '@caldera-labs/components';\n\n \n```\n\n\n#### `PageBody`\n```js\nimport {Admin} from '@caldera-labs/components';\n\n \n \n Hi Roy
\n\n```",
"static": true,
"access": "public"
},
diff --git a/docs/manual/README.html b/docs/manual/README.html
index f0f2e4f..0143e55 100644
--- a/docs/manual/README.html
+++ b/docs/manual/README.html
@@ -66,11 +66,19 @@
Text field that is not required Text field with help text Number Field Group Submit Button Field Group Button Field Group Select Field Groups Magic Select Groups Import With webpack Example Select Fields Import With webpack Example Fieldsets Submit Buttons and Other Types Of Buttons Import With webpack Exampel Submit Button Button Group Import With webpack Examples Text field that is not required Text field with help text Number Field Group Submit Button Field Group Button Field Group Select Field Groups Magic Select Groups Import With webpack Example Select Fields Import With webpack Example Fieldsets Submit Buttons and Other Types Of Buttons Import With webpack Exampel Submit Button Button Group Import With webpack Examples Number Field Group <
}}
/>
<FieldGroup
+ id={'control-24'}
+ label={'This will go in the label element'}
+ type={'button'}
+ innertype={'submit'}
+ value={'Submit Form'}
+ onClick={() => {
+ //do stuff when clicked
+ }}
+/>
+
+<FieldGroup
+ id={'control-24'}
+ label={'This will go in the label element'}
+ type={'button'}
+ innertype={'button'}
+ value={false}
+ onClick={() => {
+ //do stuff when clicked
+ }}
+/>
+Select Field Groups Select field groups happen when you pass "select" to the type prop.
Select fields take an array of options in the prop option. Options in that collection must conform the shape defined here
let selectFieldValue = '';
@@ -351,22 +382,12 @@ Select Field Groups Select field groups happ
label: 'Two'
}
]}
-/>
-
-## Magic Select Groups
-Magic select groups use `MagicSelect` fields, which wrap [reactjs/react-autocomple](https://github.com/reactjs/react-autocomplete) to create a UI for [Caldera Forms magic tags](https://calderaforms.com/doc/using-magic-tags-caldera-forms/).
-
-These fields groups show options from two lists, one is passed in the prop `fieldsList` and represents the fields of the form, and the other is in `systemTagsList`, which represents the system values such as the current user info.
-
-The property `isOpen` controls if the auto-complete list is open.
-
-### Import With webpack
-import {MagicFieldGroup} from '@caldera-labs/components';
-
-### Example
-
-```js
-let magicFieldValue ='';
+/>
+Magic Select Groups Magic select groups use MagicSelect fields, which wrap reactjs/react-autocomple to create a UI for Caldera Forms magic tags .
+These fields groups show options from two lists, one is passed in the prop fieldsList and represents the fields of the form, and the other is in systemTagsList, which represents the system values such as the current user info.
+The property isOpen controls if the auto-complete list is open.
+Import With webpack import {MagicFieldGroup} from '@caldera-labs/components';
+Example let magicFieldValue ='';
<MagicFieldGroup
id={'magic-5'}
@@ -398,7 +419,8 @@ Select Field Groups Select field groups happ
isOpen={true}
value={magicFieldValue}
/>
-Select Fields &l
]}
/>
In general, for submit inputs and <button> elements, instead of using an Input component, you should use the Button component.
+Import With webpack import {fields} from '@caldera-labs/components';
+const {Button} = fields;
+
+<Button
+ id={'control-button'}
+ label={'Click To Submit Form'}
+ type={'button'}
+ innertype={'submit'}
+ value={'Submit Form'}
+ onClick={() => {
+ //do stuff when clicked
+ }}
+/>
+
+Button groups are select fields. One button can be selected at once.
This is a field, not a group (like FieldGroup or MagicFieldGroup) so it does not handle its own label.
Button groups fields take an array of options in the prop option. Options in that collection must conform the shape defined here
diff --git a/docs/manual/conditional-logic.html b/docs/manual/conditional-logic.html
index 11fb4e2..dcb5f92 100644
--- a/docs/manual/conditional-logic.html
+++ b/docs/manual/conditional-logic.html
@@ -66,11 +66,19 @@
Text field that is not required Text field with help text Number Field Group Submit Button Field Group Button Field Group Select Field Groups Magic Select Groups Import With webpack Example Select Fields Import With webpack Example Fieldsets Submit Buttons and Other Types Of Buttons Import With webpack Exampel Submit Button Button Group Import With webpack Examples Text field that is not required Text field with help text Number Field Group Submit Button Field Group Button Field Group Select Field Groups Magic Select Groups Import With webpack Example Select Fields Import With webpack Example Fieldsets Submit Buttons and Other Types Of Buttons Import With webpack Exampel Submit Button Button Group Import With webpack Examples Text field that is not required Text field with help text Number Field Group Submit Button Field Group Button Field Group Select Field Groups Magic Select Groups Import With webpack Example Select Fields Import With webpack Example Fieldsets Submit Buttons and Other Types Of Buttons Import With webpack Exampel Submit Button Button Group Import With webpack Examples Structure of class attributes The
values.two=newValue;
}}
/>
+
Submit Button Field Group <FieldGroup
+ id={'control-24'}
+ label={'This will go in the label element'}
+ type={'button'}
+ innertype={'submit'}
+ value={'Submit Form'}
+ onClick={() => {
+ //do stuff when clicked
+ }}
+/>
+
+Button Field Group <FieldGroup
+ id={'control-24'}
+ label={'This will go in the label element'}
+ type={'button'}
+ innertype={'button'}
+ value={false}
+ onClick={() => {
+ //do stuff when clicked
+ }}
+/>
Select Field Groups Select field groups happen when you pass "select" to the type prop.
Select fields take an array of options in the prop option. Options in that collection must conform the shape defined here
let selectFieldValue = '';
<FieldGroup
type={'select'}
@@ -518,22 +547,8 @@ Structure of class attributes The
label: 'Two'
}
]}
-/>
-
-## Magic Select Groups
-Magic select groups use `MagicSelect` fields, which wrap [reactjs/react-autocomple](https://github.com/reactjs/react-autocomplete) to create a UI for [Caldera Forms magic tags](https://calderaforms.com/doc/using-magic-tags-caldera-forms/).
-
-These fields groups show options from two lists, one is passed in the prop `fieldsList` and represents the fields of the form, and the other is in `systemTagsList`, which represents the system values such as the current user info.
-
-The property `isOpen` controls if the auto-complete list is open.
-
-### Import With webpack
-import {MagicFieldGroup} from '@caldera-labs/components';
-
-### Example
-
-```js
-let magicFieldValue ='';
+/>
+Magic Select Groups Magic select groups use MagicSelect fields, which wrap reactjs/react-autocomple to create a UI for Caldera Forms magic tags .
These fields groups show options from two lists, one is passed in the prop fieldsList and represents the fields of the form, and the other is in systemTagsList, which represents the system values such as the current user info.
The property isOpen controls if the auto-complete list is open.
Import With webpack import {MagicFieldGroup} from '@caldera-labs/components';
Example let magicFieldValue ='';
<MagicFieldGroup
id={'magic-5'}
@@ -610,6 +625,20 @@ Structure of class attributes The
}
]}
/>
+Submit Buttons and Other Types Of Buttons In general, for submit inputs and <button> elements, instead of using an Input component, you should use the Button component.
Import With webpack import {fields} from '@caldera-labs/components';
+const {Button} = fields;
+
+Exampel Submit Button <Button
+ id={'control-button'}
+ label={'Click To Submit Form'}
+ type={'button'}
+ innertype={'submit'}
+ value={'Submit Form'}
+ onClick={() => {
+ //do stuff when clicked
+ }}
+/>
+
Button Group Button groups are select fields. One button can be selected at once.
This is a field, not a group (like FieldGroup or MagicFieldGroup) so it does not handle its own label.
Button groups fields take an array of options in the prop option. Options in that collection must conform the shape defined here
Import With webpack import {fields} from '@caldera-labs/components';
const {ButtonGroup} = fields;
Examples Button Group With Two Options <ButtonGroup
diff --git a/docs/manual/testing.html b/docs/manual/testing.html
index 73883c2..ab29258 100644
--- a/docs/manual/testing.html
+++ b/docs/manual/testing.html
@@ -66,11 +66,19 @@
Text field that is not required Text field with help text Number Field Group Submit Button Field Group Button Field Group Select Field Groups Magic Select Groups Import With webpack Example Select Fields Import With webpack Example Fieldsets Submit Buttons and Other Types Of Buttons Import With webpack Exampel Submit Button Button Group Import With webpack Examples Text field that is not required Text field with help text Number Field Group Submit Button Field Group Button Field Group Select Field Groups Magic Select Groups Import With webpack Example Select Fields Import With webpack Example Fieldsets Submit Buttons and Other Types Of Buttons Import With webpack Exampel Submit Button Button Group Import With webpack Examples App @caldera-labs/components/src/App.js ",
"class"
],
+ [
+ "@caldera-labs/components/src/components/fields/button/button.js~button",
+ "function/index.html#static-function-Button",
+ "Button @caldera-labs/components/src/components/fields/button/Button.js ",
+ "function"
+ ],
[
"@caldera-labs/components/src/components/fields/button-group/buttongroup.js~buttongroup",
"function/index.html#static-function-ButtonGroup",
@@ -677,6 +683,12 @@ window.esdocSearchIndex = [
"src/components/fields/button-group/ButtonGroup.js",
"file"
],
+ [
+ "src/components/fields/button/button.js",
+ "file/src/components/fields/button/Button.js.html",
+ "src/components/fields/button/Button.js",
+ "file"
+ ],
[
"src/components/fields/factories/fieldfactory.js",
"file/src/components/fields/factories/fieldFactory.js.html",
diff --git a/docs/source.html b/docs/source.html
index f1ff59b..9d61a2f 100644
--- a/docs/source.html
+++ b/docs/source.html
@@ -55,6 +55,7 @@
V optionShape V optionsShapeProp V valuePropType components/fields/button F Button components/fields/button-group F ButtonGroup components/fields/factories F fieldFactory F fieldSetFactory Source 68/92
+
Source 68/94
@@ -103,15 +104,15 @@
0 % 0/15 6760 byte
353
- 2018-07-04 17:52:51 (UTC)
+ 2018-07-04 18:13:22 (UTC)
src/components/RenderGroup.js RenderGroup 100 % 4/4 2464 byte
- 111
- 2018-07-02 22:05:43 (UTC)
+ 2498 byte
+ 112
+ 2018-07-05 17:59:00 (UTC)
src/components/admin/CalderaHeader.js src/components/fields/FieldGroup.js FieldGroup 100 % 1/1 4655 byte
- 199
- 2018-07-03 22:32:14 (UTC)
+ 4691 byte
+ 200
+ 2018-07-05 18:08:22 (UTC)
src/components/fields/FieldInner.js FieldInner 100 % 1/1 1954 byte
- 92
- 2018-07-02 22:05:43 (UTC)
+ 2356 byte
+ 108
+ 2018-07-05 18:05:35 (UTC)
src/components/fields/button-group/ButtonGroup.js 77
2018-07-02 22:05:43 (UTC)
+
+ src/components/fields/button/Button.js Button 0 % 0/2 1493 byte
+ 68
+ 2018-07-05 17:59:00 (UTC)
+
src/components/fields/factories/fieldFactory.js fieldFactory 100 % 1/1 296 byte
13
- 2018-07-05 18:34:46 (UTC)
+ 2018-07-04 18:13:22 (UTC)
src/components/fields/factories/fieldSetFactory.js src/components/fields/factories/prepareFieldConfig.js prepareFieldConfig 100 % 1/1 1864 byte
- 64
- 2018-07-02 22:05:43 (UTC)
+ 2127 byte
+ 78
+ 2018-07-05 17:59:00 (UTC)
src/components/fields/field-group-change-handlers/fieldsetCheckboxHandler.js - 370 byte
14
- 2018-07-04 18:01:38 (UTC)
+ 2018-07-04 18:13:22 (UTC)
src/components/fields/input/Input.js - 766 byte
25
- 2018-07-04 18:01:38 (UTC)
+ 2018-07-04 18:13:22 (UTC)
src/components/validation/addAutomaticValidators.js V optionShape V optionsShapeProp V valuePropType components/fields/button F Button components/fields/button-group F ButtonGroup components/fields/factories F fieldFactory F fieldSetFactory
+
+ 
