Skip to content

Commit

Permalink
Merge pull request #83 from easeq/master
Browse files Browse the repository at this point in the history 
0.5.1
  • Loading branch information
@easeq
easeq authored Mar 25, 2020
2 parents 2cae601 + ef034a3 commit 29f65b1
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 28 deletions.
46 changes: 28 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,8 @@ containers and keys or use the ones that come with the module.
| editable-grid, tabs | elements | {} | is an object that can hold one or more fields or containers within it. |
| editable-grid, button-group | prefixNameToElement | Bool | |
| | showWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) |
| | comment | String | comment / description for the container |
| | commentClass | String | html class for the comment element |

| | comment | String | comment / description for the container |
| | commentClass | String | html class for the comment element |

#### Container specific properties

Expand All @@ -151,13 +150,17 @@ containers and keys or use the ones that come with the module.
| editable-grid | renderer | String | editable-grid |
| | fields | {} | An object with one or more field definitions in a key-value pair |
| | buttons | `{"add": "Add", "remove": "X", "duplicate": "Duplicate"}` | has 3 properties, all optional. These can be either function that returns the button or string which is the label for a button |
| | isObject | Bool | whether the grid displays an object. If set to true, buttons (add, remove and duplicate) will be disabled. |
| | isObject | Bool | whether the grid displays an object. If set to true, buttons (add, remove and duplicate) will be disabled. |
| | isSortable | Bool | whether the grid rows can be dragged and sorted |
| | tableContainerClass | String | htmlClass for the div wrapping the editable-grid |
| | tableClass | String | htmlClass for the main editable grid |
| div | renderer | String | div |
| | name | String | is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true. |
| | htmlClass | String | htmlClass for the div element |
| html-tag | renderer | String | html-tag |
| | name | String | is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true. |
| | as | String | html tag to be used (Default: 'div') |
| | htmlClass | String | htmlClass for the html-tag element |
| fieldset | renderer | String | fieldset |
| | name | String | is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true. |
| | title | String | label for the fieldset |
Expand Down Expand Up @@ -187,20 +190,23 @@ containers and keys or use the ones that come with the module.

#### Common field properties

| Field | Type | Property | Description | |
| :---- | :------------- | :-------------: | :----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | name | String | html field name attribute | |
| | label | String | the label for the field | |
| | type | String | "field" | |
| | labelClass | String | html class for the label html element | |
| | formGroupClass | String | html class for the div that wraps the form field | |
| | validation | String | Check [yup-schema](https://github.com/flipbyte/yup-schema) | |
| | showWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) | |
| | enabledWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) | |
| | fieldClass | String | html class for the main html/3-rd party form field | |
| | comment | String | comment / description that goes below the field | |
| | commentClass | String | html class for the comment element | |
| | template | React Component | String | define your custom template for the field (check `src/FieldTemplate.js`) or set the template in the template registry using `registerTemplate` and pass the string key here |
| Field | Type | Property | Description | |
| :---- | :------------- | :-------------: | :---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | name | String | html field name attribute | |
| | label | String | the label for the field | |
| | type | String | "field" | |
| | labelClass | String | html class for the label html element | |
| | formGroupClass | String | html class for the div that wraps the form field | |
| | validation | String | Check [yup-schema](https://github.com/flipbyte/yup-schema) | |
| | showWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) | |
| | enabledWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) | |
| | fieldClass | String | html class for the main html/3-rd party form field | |
| | comment | String | comment / description that goes below the field | |
| | commentAs | String | define the HTML tag to be used for wrapping the comment. (Default: <small />) | |
| | commentClass | String | html class for the comment element | |
| | template | React Component | String | define your custom template for the field (check `src/FieldTemplate.js`) or set the template in the template registry using `registerTemplate` and pass the string key here |
| | errorAs | String | define the HTML tag to be used for wrapping the error. (Default: <div />) | |
| | errorClass | String | html class for the error element | |

#### Field specific properties

Expand Down Expand Up @@ -254,6 +260,10 @@ containers and keys or use the ones that come with the module.
| file-uploader | renderer | String | fileuploader |
| | options | {} | Options available in [react-dropzone plugin](https://react-dropzone.js.org/) |
| | formGroupClass | String | html class for the div that wraps the form field |
| inner-text | renderer | String | inner-text |
| | as | String | HTML tag to use for the inner-text field |
| | htmlClass | String | HTML class for the tag used |
| | defaultValue | String | Either used as a static value for the HTML element or as a placeholder when is not defined |
| button | renderer | String | button |
| | content | String | button inner html |

Expand Down
10 changes: 7 additions & 3 deletions demo/src/schema/all-available-fields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ export default {
type: "field",
renderer: "text",
fieldType: "text",
wrapAs: null
wrapAs: null,
comment: 'This is a field comment. You can add your text here',
commentAs: 'small',
commentClass: 'd-block text-muted order-last w-100',
validation: [['string'], ['required'], ['min', 100]]
},
append: {
type: 'container',
Expand All @@ -76,9 +80,9 @@ export default {
type: 'field',
renderer: 'inner-text',
name: 'innerText',
as: 'small',
as: 'p',
htmlClass: 'text-muted d-block mb-3 mt-1',
defaultValue: 'This is a field comment. You can add your text here'
defaultValue: 'This is some raw html text content: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum'
},
autocomplete: {
name: "autocomplete",
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@flipbyte/formik-json",
"version": "0.5.0",
"version": "0.5.1",
"description": "formik-json is a wrapper for Formik to easily create forms using JSON / Javascript Object for defining the elements",
"main": "lib/index.js",
"module": "es/index.js",
Expand Down
9 changes: 7 additions & 2 deletions src/Field/ErrorMessage.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import React from 'react';

const ErrorMessage = ({ name, error }) => error && (
<div className="invalid-feedback">{ error }</div>
const ErrorMessage = ({
name,
error,
className = 'invalid-feedback order-last',
as: Component = 'div'
}) => error && (
<Component className={ className }>{ error }</Component>
);

export default React.memo(ErrorMessage);
Loading

0 comments on commit 29f65b1

Please sign in to comment.