react-form-maker - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

dist/index.js

@@ -28,3 +28,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   if (!attributes.type) attributes.type = 'text';
-  if (!attributes.label) attributes.label = attributes.id;
+  if (!attributes.label && attributes.id) attributes.label = attributes.id;
+  if (!attributes.label && attributes.name) attributes.label = attributes.name;
   var formGroupClassName;
@@ -93,2 +94,3 @@
         });
+        delete attributes.options;
         return /*#__PURE__*/React.createElement("div", {
@@ -107,2 +109,45 @@ className: formGroupClassName,
 
+    case 'radio':
+      {
+        var _optionTags = attributes.options.map(function (option, i) {
+          var text = option.text ? option.text : option.value;
+          var id = option.id ? option.id : option.value;
+          delete option.text;
+          delete option.id;
+          return /*#__PURE__*/React.createElement("div", {
+            className: attributes.radioGroupClassName,
+            style: attributes.radioGroupStyle,
+            key: i
+          }, /*#__PURE__*/React.createElement("input", _extends({
+            id: id,
+            type: "radio",
+            className: attributes.radioClassName,
+            style: attributes.radioStyle,
+            name: attributes.name
+          }, option)), /*#__PURE__*/React.createElement("label", {
+            htmlFor: id,
+            className: attributes.radioLabelClassName,
+            style: attributes.radioLabelStyle
+          }, text));
+        });
+
+        delete attributes.options;
+        delete attributes.radioClassName;
+        delete attributes.radioGroupClassName;
+        delete attributes.radioLabelClassName;
+        delete attributes.radioStyle;
+        delete attributes.radioGroupStyle;
+        delete attributes.radioLabelStyle;
+        return /*#__PURE__*/React.createElement("div", {
+          className: formGroupClassName,
+          style: formGroupStyle
+        }, /*#__PURE__*/React.createElement("label", {
+          className: labelClassName,
+          style: labelStyle
+        }, attributes.label), /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
+          style: inputStyle,
+          className: attributes.inputClassName
+        }), _optionTags));
+      }
+
     case ('submit'):
@@ -109,0 +154,0 @@ {

dist/index.modern.js

@@ -26,3 +26,4 @@ import React from 'react';
   if (!attributes.type) attributes.type = 'text';
-  if (!attributes.label) attributes.label = attributes.id;
+  if (!attributes.label && attributes.id) attributes.label = attributes.id;
+  if (!attributes.label && attributes.name) attributes.label = attributes.name;
   var formGroupClassName;
@@ -91,2 +92,3 @@
         });
+        delete attributes.options;
         return /*#__PURE__*/React.createElement("div", {
@@ -105,2 +107,45 @@ className: formGroupClassName,
 
+    case 'radio':
+      {
+        var _optionTags = attributes.options.map(function (option, i) {
+          var text = option.text ? option.text : option.value;
+          var id = option.id ? option.id : option.value;
+          delete option.text;
+          delete option.id;
+          return /*#__PURE__*/React.createElement("div", {
+            className: attributes.radioGroupClassName,
+            style: attributes.radioGroupStyle,
+            key: i
+          }, /*#__PURE__*/React.createElement("input", _extends({
+            id: id,
+            type: "radio",
+            className: attributes.radioClassName,
+            style: attributes.radioStyle,
+            name: attributes.name
+          }, option)), /*#__PURE__*/React.createElement("label", {
+            htmlFor: id,
+            className: attributes.radioLabelClassName,
+            style: attributes.radioLabelStyle
+          }, text));
+        });
+
+        delete attributes.options;
+        delete attributes.radioClassName;
+        delete attributes.radioGroupClassName;
+        delete attributes.radioLabelClassName;
+        delete attributes.radioStyle;
+        delete attributes.radioGroupStyle;
+        delete attributes.radioLabelStyle;
+        return /*#__PURE__*/React.createElement("div", {
+          className: formGroupClassName,
+          style: formGroupStyle
+        }, /*#__PURE__*/React.createElement("label", {
+          className: labelClassName,
+          style: labelStyle
+        }, attributes.label), /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
+          style: inputStyle,
+          className: attributes.inputClassName
+        }), _optionTags));
+      }
+
     case ('submit'):
@@ -107,0 +152,0 @@ {

package.json

 {
   "name": "react-form-maker",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "make a react form faster by object",
@@ -5,0 +5,0 @@ "author": "ronny1020",

README.md

@@ -41,5 +41,20 @@ # react-form-maker
   {
+    type: 'radio',
+    name: 'framework',
+
+    radioClassName: 'form-check-input',
+    radioGroupClassName: 'form-check',
+    radioLabelClassName: 'form-check-label',
+    options: [
+      { value: 'React' },
+      { value: 'Angular' },
+      { value: 'Vue', text: 'Vue.js' }
+    ]
+  },
+  {
     id: 'gender',
     type: 'select',
-    options: [{ value: 'male', tag: 'Male' }, { value: 'female' }]
+    formGroupClassName: 'form-group mb-5',
+
+    options: [{ value: 'male', text: 'Male' }, { value: 'female' }]
   },
@@ -55,8 +70,10 @@ {
   return (
-    <ReactFormMaker
-      className='container'
-      header={<h1>react-form-maker demo</h1>}
-      formItems={formItems}
-      formClassName={formClassName}
-    />
+    <>
+      <ReactFormMaker
+        className='container'
+        header={<h1>react-form-maker demo</h1>}
+        formItems={formItems}
+        formClassName={formClassName}
+      />
+    </>
   )
@@ -92,59 +109,101 @@ }
 
-- formClassName : Object
-  formGroupClassName: string (className of the formGroup)
-  labelClassName:string (className of the label)
-  inputClassName:string (className of the input)
+#### formClassName : Object
 
-- formStyle : Object
-  formGroupStyle: Object (style of the formGroup)
-  labelStyle: Object (style of the label)
-  inputStyle: Object (style of the input)
+formGroupClassName: string (className of the formGroup)
+labelClassName:string (className of the label)
+inputClassName:string (className of the input)
 
-  Ps.The way to write the ClassName and style is the way you write in JSX
+#### formStyle : Object
 
-- formItems : Object
-  For more detail, please read the next section.
+formGroupStyle: Object (style of the formGroup)
+labelStyle: Object (style of the label)
+inputStyle: Object (style of the input)
 
-- header : JSX
-  Add any content before the formItems by JSX.
+Ps.The way to write the ClassName and style is the way you write in JSX
 
-- footer : JSX
-  Add any content after the formItems by JSX.
+#### formItems : Object
 
-- other attributes
-  Those Would be the attributes of <form>
+For more detail, please read the next section.
 
+#### header : JSX
+
+Add any content before the formItems by JSX.
+
+#### footer : JSX
+
+Add any content after the formItems by JSX.
+
+#### other attributes
+
+Those Would be the attributes of <form>
+
 ## formItems
 
-- id : string
-  This is the id of the <input> and the htmlFor of the <label>
+#### id : string
 
-- label : string
-  The text in the <label></label>
-  The default is the defined "id"
+This is the id of the <input> and the htmlFor of the <label>
 
-- formGroupClassName: string (className of the formGroup)
-- labelClassName:string (className of the label)
-- inputClassName:string (className of the input)
-- formGroupStyle: Object (style of the formGroup)
-- labelStyle: Object (style of the label)
-- inputStyle: Object (style of the input)
+#### label : string
 
-  Ps.The way to write the ClassName and style is the way you write in JSX
-  "className" or "style" in formItems have priority than in the formClassName or formStyle
+The text in the <label></label>
+The default is the defined "id"
 
-- other attributes
-  Those Would be the attributes of <input>
+#### formGroupClassName: string (className of the formGroup)
 
-- {type:select}
-  Use (options : array) to create list of <option>
-  In options use Object to create each <option>, which contain key value & text.
-  Key of 'text' would be the text in <option></option>, the default is the defined "value"
+#### labelClassName:string (className of the label)
 
-- {type:button}
-  If you use button or submit, there would be no div of formGroup.
-  Simply use "className" or "style" to change the style.
+#### inputClassName:string (className of the input)
 
+#### formGroupStyle: Object (style of the formGroup)
+
+#### labelStyle: Object (style of the label)
+
+#### inputStyle: Object (style of the input)
+
+Ps.The way to write the ClassName and style is the way you write in JSX
+"className" or "style" in formItems have priority than in the formClassName or formStyle
+
+#### other attributes
+
+Those Would be the attributes of <input>
+
+#### {type:select}
+
+Use (options : array) to create list of <option>
+In options use Object to create each <option>, which contain key value & text.
+Key of 'text' would be the text in <option></option>, the default is the defined "value"
+
+#### {type:radio}
+
+Use (options : array) to create list of following components
+
+```jsx
+<div>
+  <input type='radio' />
+  <label>{text}</label>
+</div>
+```
+
+Like inputGroup, the outer <div> would be radioGroup.
+Use property "radioGroupClassName" or "radioGroupStyle" to change the radioGroup style.
+Use property "radioClassName" or "radioStyle" to change the radio style.
+Use property "radioLabelClassName" or "radioLabelStyle" to change the label style.
+
+##### The "options" property of {type:radio}
+
+"text" property is the text of the label, the default is the defined "value".
+Like inputGroup, "id" would be used to the id of input and the htmlFor of label, the default is also the defined "value" .
+Other properties would be the attributes of input, such as "defaultChecked:true"
+
+#### {type:button}
+
+If you use button or submit, there would be no div of formGroup.
+Simply use "className" or "style" to change the style.
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+
 ## License
 
 MIT © [ronny1020](https://github.com/ronny1020)

No alert changes

Improved metrics

Total package byte prevSize

42938

increased by38.87%

Lines of code

333

increased by30.59%

Number of lines in readme file

207

increased by39.86%

No dependency changes