feat: add Field help, updated Field row;

CHANGELOG.md

@@ -1,7 +1,8 @@
-## [0.6.20] - 2018-11-05
+## [0.7.0] - 2018-11-07
 
 ### Added
 - Field row
+- Field help
 
 ## [0.6.15] - 2018-11-01
 

demo/src/index.js

@@ -30,7 +30,7 @@ class Demo extends Component {
       <div style={{ width: '70%' }}>
         <h1>Demo</h1>
 
-        <nav>
+        <nav style={{ marginBottom: 10 }}>
           {Object.keys(Views).map(v => {
             return (
               <a href="javascript:;" data-name={v} onClick={this.show} style={{ marginRight: 20 }}>

lib/EzField.js

@@ -33,30 +33,35 @@ var getClasses = function (use, isHorizontal) {
         group: '',
         label: 'ez-label',
         control: 'ez-field',
+        row: 'ez-row',
         file: 'ez-field',
         toggle: 'ez-toggle',
-        row: 'ez-row',
         invalidControl: 'ez-field-error',
-        error: 'ez-error'
+        error: 'ez-error',
+        help: 'ez-help'
     };
     if (use === 'bootstrap3' || use === 'bootstrap4') {
         defaults.group = 'form-group' + (isHorizontal ? ' row' : '');
         defaults.control = 'form-control';
+        defaults.row = 'form-row';
         defaults.file = 'ez-field ez-bootstrap-file';
         defaults.toggle = 'ez-bootstrap-toggle'; // custom css for bootstrap
         defaults.invalidControl = 'is-invalid';
         defaults.error = 'invalid-feedback';
+        defaults.help = 'form-text text-muted';
     }
     if (use === 'spectre') {
         defaults.group = 'form-group';
-        defaults.label = 'form-label';
+        defaults.label = 'form-label form-inline';
         defaults.control = 'form-input';
+        defaults.row = 'input-group';
         // defaults.toggle = 'ez-spectre-toggle'; // no need yet
         defaults.invalidControl = 'is-error';
         defaults.error = 'form-input-hint';
     }
     if (use === 'semanticui2') {
         defaults.group = isHorizontal ? 'field inline' : 'field';
+        defaults.row = 'equal width fields';
         defaults.file = 'ez-field ez-semanticui2-file';
         defaults.toggle = 'ez-semanticui2-toggle';
     }
@@ -159,7 +164,7 @@ function Row(props) {
             });
         });
     }
-    return (React.createElement("div", { className: "form-row" }, renderChildren()));
+    return (React.createElement("div", { className: props.className }, renderChildren()));
 }
 var EzField = function (props) {
     var _a = Utils_1.getChildrenParts(props), label = _a.label, placeholder = _a.placeholder, fieldName = _a.fieldName;
@@ -181,6 +186,8 @@ var EzField = function (props) {
     var rowClass = Utils_1.cn(classes.row, rowCss);
     var errorCss = css.error || props.errorCss || '';
     var errorClass = Utils_1.cn(classes.error, errorCss);
+    var helpCss = css.help || props.helpCss || '';
+    var helpClass = Utils_1.cn(classes.help, helpCss);
     var options = null;
     if (Utils_1.isOptionArray(props.options)) {
         options = props.options.map(function (opt) { return React.createElement("option", { key: opt.value, value: opt.value }, opt.label); });
@@ -216,7 +223,8 @@ var EzField = function (props) {
             React.createElement(Label, null),
             React.createElement("div", { className: "ez-field-full " + (hasErrors ? classes.invalidControl : '') }, props.options.map(function (opt) { return (React.createElement(Checkbox, { key: opt.value, label: opt.label, name: fieldName, value: opt.value, onChange: props.onChange })); })))) : (React.createElement(React.Fragment, null,
             React.createElement(Label, null),
-            React.createElement(formik_1.FastField, __assign({ name: fieldName, placeholder: placeholder, onChange: function (val) { props.formik.handleChange(val); props.onChange && props.onChange(val); }, validate: props.validate }, (typeof props.children !== 'string' ? clonedProps : {}), moreProps, { className: controlClass + " " + (hasErrors ? classes.invalidControl : '') }), options))),
+            React.createElement(formik_1.FastField, __assign({ name: fieldName, placeholder: placeholder, onChange: function (val) { props.formik.handleChange(val); props.onChange && props.onChange(val); }, validate: props.validate }, (typeof props.children !== 'string' ? clonedProps : {}), moreProps, { className: controlClass + " " + (hasErrors ? classes.invalidControl : '') }), options),
+            React.createElement("small", { className: helpClass }, props.help))),
         hasErrors && React.createElement("span", { className: errorClass }, errors[fieldName])));
 };
 exports["default"] = formik_1.connect(EzField);

lib/examples/FieldTypeExample.js

@@ -48,7 +48,7 @@ var default_1 = /** @class */ (function (_super) {
         };
         _this.renderForm = function (props) {
             return (React.createElement(EzForm_1["default"], { use: "bootstrap4" },
-                React.createElement(EzField_1["default"], { label: "Text", name: "text" }),
+                React.createElement(EzField_1["default"], { label: "Text", name: "text", help: "This is a help text." }),
                 React.createElement(EzField_1["default"], { password: true, name: "password" }),
                 React.createElement(EzField_1["default"], { textarea: true, name: "textarea" }),
                 React.createElement(EzField_1["default"], { select: true, options: Utils_2.animals, name: "select" }),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ez-react-form",
-  "version": "0.6.20",
+  "version": "0.7.0",
   "description": "A simple way to work with Forms in React",
   "main": "lib/index.js",
   "module": "es/index.js",

src/EzField.tsx

@@ -8,30 +8,35 @@ const getClasses = (use: string, isHorizontal: boolean) => {
     group: '',
     label: 'ez-label',
     control: 'ez-field',
+    row: 'ez-row',
     file: 'ez-field',
     toggle: 'ez-toggle',
-    row: 'ez-row',
     invalidControl: 'ez-field-error',
-    error: 'ez-error'
+    error: 'ez-error',
+    help: 'ez-help'
   };
   if (use === 'bootstrap3' || use === 'bootstrap4') {
     defaults.group = 'form-group' + (isHorizontal ? ' row' : '');
     defaults.control = 'form-control';
+    defaults.row = 'form-row';
     defaults.file = 'ez-field ez-bootstrap-file';
     defaults.toggle = 'ez-bootstrap-toggle'; // custom css for bootstrap
     defaults.invalidControl = 'is-invalid';
     defaults.error = 'invalid-feedback';
+    defaults.help = 'form-text text-muted';
   }
   if (use === 'spectre') {
     defaults.group = 'form-group';
-    defaults.label = 'form-label';
+    defaults.label = 'form-label form-inline';
     defaults.control = 'form-input';
+    defaults.row = 'input-group';
     // defaults.toggle = 'ez-spectre-toggle'; // no need yet
     defaults.invalidControl = 'is-error';
     defaults.error = 'form-input-hint';
   }
   if (use === 'semanticui2') {
     defaults.group = isHorizontal ? 'field inline' : 'field';
+    defaults.row = 'equal width fields';
     defaults.file = 'ez-field ez-semanticui2-file';
     defaults.toggle = 'ez-semanticui2-toggle';
   }
@@ -179,7 +184,7 @@ function Row(props: any) {
   }
 
   return (
-    <div className="form-row">
+    <div className={props.className}>
       {renderChildren()}
     </div>
   )
@@ -193,9 +198,11 @@ interface EzFieldProps {
   fileCss?: string
   rowCss?: string
   errorCss?: string
+  helpCss?: string
   label?: string|any // TODO: use correct type string|JSX
   placeholder?: string
   name?: string
+  help?: string|any
   // --- field types:
   row?: string|boolean
   password?: string|boolean
@@ -251,6 +258,9 @@ const EzField = (props: EzFieldProps) => {
   const errorCss = css.error || props.errorCss || ''
   const errorClass = cn(classes.error, errorCss)
 
+  const helpCss = css.help || props.helpCss || ''
+  const helpClass = cn(classes.help, helpCss)
+
   let options = null
   if (isOptionArray(props.options)) {
     options = props.options.map((opt: any) => <option key={opt.value} value={opt.value}>{opt.label}</option>)
@@ -334,6 +344,7 @@ const EzField = (props: EzFieldProps) => {
             {...moreProps}
             className={`${controlClass} ${hasErrors ? classes.invalidControl : ''}`}
           >{options}</FastField>
+          <small className={helpClass}>{props.help}</small>
         </React.Fragment>
       )}
       {hasErrors && <span className={errorClass}>{errors[fieldName]}</span>}

src/examples/FieldTypeExample.tsx

@@ -25,7 +25,7 @@ export default class extends React.Component {
   renderForm = (props: any) => {
     return (
       <Form use="bootstrap4">
-        <Field label="Text" name="text" />
+        <Field label="Text" name="text" help="This is a help text." />
         <Field password name="password" />
         <Field textarea name="textarea" />
         <Field select options={animals} name="select" />