Skip to content

Commit 29f65b1

Browse files
easeqeaseq
authored
Merge pull request #83 from easeq/master
0.5.1
2 parents 2cae601 + ef034a3 commit 29f65b1

File tree

6 files changed

+50
-28
lines changed

6 files changed

+50
-28
lines changed

‎README.md‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,8 @@ containers and keys or use the ones that come with the module.
140140
| editable-grid, tabs | elements | {} | is an object that can hold one or more fields or containers within it. |
141141
| editable-grid, button-group | prefixNameToElement | Bool | |
142142
| | showWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) |
143-
| | comment | String | comment / description for the container |
144-
| | commentClass | String | html class for the comment element |
145-
143+
| | comment | String | comment / description for the container |
144+
| | commentClass | String | html class for the comment element |
146145

147146
#### Container specific properties
148147

@@ -151,13 +150,17 @@ containers and keys or use the ones that come with the module.
151150
| editable-grid | renderer | String | editable-grid |
152151
| | fields | {} | An object with one or more field definitions in a key-value pair |
153152
| | 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 |
154-
| | isObject | Bool | whether the grid displays an object. If set to true, buttons (add, remove and duplicate) will be disabled. |
153+
| | isObject | Bool | whether the grid displays an object. If set to true, buttons (add, remove and duplicate) will be disabled. |
155154
| | isSortable | Bool | whether the grid rows can be dragged and sorted |
156155
| | tableContainerClass | String | htmlClass for the div wrapping the editable-grid |
157156
| | tableClass | String | htmlClass for the main editable grid |
158157
| div | renderer | String | div |
159158
| | name | String | is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true. |
160159
| | htmlClass | String | htmlClass for the div element |
160+
| html-tag | renderer | String | html-tag |
161+
| | name | String | is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true. |
162+
| | as | String | html tag to be used (Default: 'div') |
163+
| | htmlClass | String | htmlClass for the html-tag element |
161164
| fieldset | renderer | String | fieldset |
162165
| | name | String | is used to prepend parent container's name to the children fields when "prefixNameToElement" is set to true. |
163166
| | title | String | label for the fieldset |
@@ -187,20 +190,23 @@ containers and keys or use the ones that come with the module.
187190

188191
#### Common field properties
189192

190-
| Field | Type | Property | Description | |
191-
| :---- | :------------- | :-------------: | :----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
192-
| | name | String | html field name attribute | |
193-
| | label | String | the label for the field | |
194-
| | type | String | "field" | |
195-
| | labelClass | String | html class for the label html element | |
196-
| | formGroupClass | String | html class for the div that wraps the form field | |
197-
| | validation | String | Check [yup-schema](https://github.com/flipbyte/yup-schema) | |
198-
| | showWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) | |
199-
| | enabledWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) | |
200-
| | fieldClass | String | html class for the main html/3-rd party form field | |
201-
| | comment | String | comment / description that goes below the field | |
202-
| | commentClass | String | html class for the comment element | |
203-
| | 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 |
193+
| Field | Type | Property | Description | |
194+
| :---- | :------------- | :-------------: | :---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
195+
| | name | String | html field name attribute | |
196+
| | label | String | the label for the field | |
197+
| | type | String | "field" | |
198+
| | labelClass | String | html class for the label html element | |
199+
| | formGroupClass | String | html class for the div that wraps the form field | |
200+
| | validation | String | Check [yup-schema](https://github.com/flipbyte/yup-schema) | |
201+
| | showWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) | |
202+
| | enabledWhen | String | Check [when-condition](https://github.com/flipbyte/when-condition) | |
203+
| | fieldClass | String | html class for the main html/3-rd party form field | |
204+
| | comment | String | comment / description that goes below the field | |
205+
| | commentAs | String | define the HTML tag to be used for wrapping the comment. (Default: <small />) | |
206+
| | commentClass | String | html class for the comment element | |
207+
| | 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 |
208+
| | errorAs | String | define the HTML tag to be used for wrapping the error. (Default: <div />) | |
209+
| | errorClass | String | html class for the error element | |
204210

205211
#### Field specific properties
206212

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

‎demo/src/schema/all-available-fields.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,11 @@ export default {
5353
type: "field",
5454
renderer: "text",
5555
fieldType: "text",
56-
wrapAs: null
56+
wrapAs: null,
57+
comment: 'This is a field comment. You can add your text here',
58+
commentAs: 'small',
59+
commentClass: 'd-block text-muted order-last w-100',
60+
validation: [['string'], ['required'], ['min', 100]]
5761
},
5862
append: {
5963
type: 'container',
@@ -76,9 +80,9 @@ export default {
7680
type: 'field',
7781
renderer: 'inner-text',
7882
name: 'innerText',
79-
as: 'small',
83+
as: 'p',
8084
htmlClass: 'text-muted d-block mb-3 mt-1',
81-
defaultValue: 'This is a field comment. You can add your text here'
85+
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'
8286
},
8387
autocomplete: {
8488
name: "autocomplete",

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@flipbyte/formik-json",
3-
"version": "0.5.0",
3+
"version": "0.5.1",
44
"description": "formik-json is a wrapper for Formik to easily create forms using JSON / Javascript Object for defining the elements",
55
"main": "lib/index.js",
66
"module": "es/index.js",

‎src/Field/ErrorMessage.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React from 'react';
22

3-
const ErrorMessage = ({ name, error }) => error && (
4-
<div className="invalid-feedback">{ error }</div>
3+
const ErrorMessage = ({
4+
name,
5+
error,
6+
className = 'invalid-feedback order-last',
7+
as: Component = 'div'
8+
}) => error && (
9+
<Component className={ className }>{ error }</Component>
510
);
611

712
export default React.memo(ErrorMessage);

0 commit comments

Comments
 (0)