fix: update readme docs. Add submit btn props from reactstrap

start-at-root · Aug 25, 2019 · c85a815 · c85a815
1 parent 0cf8478
commit c85a815
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -11,16 +11,26 @@ Quickly render bootstrap styled react hook forms using a schema file.
 ## Notice
 **Currently under development**
 ```
-Versions 1.x.xx are under heavy development, and may have breaking changes.
+Versions 1.x.xx are under development, and may have breaking changes
 ```
 
+## Required peer dependencies
+* [react-hook-form](https://www.npmjs.com/package/react-hook-form)
+* [react-i18next](https://www.npmjs.com/package/react-i18next)
+* [react-select](https://www.npmjs.com/package/react-select)
+* [reactstrap](https://www.npmjs.com/package/reactstrap)
+
 ## Quick example
 Convert a configuration object such as:
 ```jsx
 const form = [
   {
     name: "intro",
-    type: <div className="my-3">This is a quick example</div>
+    type: (
+      <div className="my-3" style={{ color: "green", fontWeight: "bold" }}>
+        Quick example / Ejemplo rápido
+      </div>
+    )
   },
   {
     name: "name",
@@ -36,10 +46,11 @@ const form = [
         className: "mt-4",
         inputType: "text",
         name: "firstName",
-        placeholder: "common:first",
+        placeholder: "common:firstName",
         required: "common:requiredField",
         type: "input",
-        validate: (value) => value === "James" || "common:invalidName"
+        validate: (value: any) =>
+          !value.includes("test") || "common:invalidName"
       },
       {
         className: "mt-4",
@@ -70,10 +81,9 @@ const form = [
         inputType: "select",
         placeholder: "common:language",
         options: [
-          { label: "common:en", value: "en" },
-          { label: "common:es", value: "es" }
-        ],
-        required: true
+          { label: "common:english", value: "en" },
+          { label: "common:spanish", value: "es" }
+        ]
       }
     ]
   },
@@ -90,15 +100,18 @@ const form = [
 function App() {
   return (
     <div className="App">
-        <Form onSubmit={(data: any) => console.log("Data", data)} 
+        <Form onSubmit={(data) => console.log("Data", data)} 
               form={form} />
     </div>
   );
 }
 ```
-**Output:**
 
-https://qywrh.csb.app/
+## Interactive demo
+Demo: [CodeSandBox](https://codesandbox.io/s/rbf-quick-example-qywrh)
+
+## All configuration options
+All possible configuration options are defined in the [FormConfig interface file](https://github.com/start-at-root/react-breeze-form/blob/master/src/interfaces/FormConfig.ts#L15)
 
 ## Contributors ✨
 

diff --git a/src/components/SubmitBtn.tsx b/src/components/SubmitBtn.tsx
@@ -7,7 +7,7 @@ import {DefaultInputProps} from '../interfaces/FormConfig';
 /** Submit button */
 export default (props: DefaultInputProps) => {
   const {
-    elementConfig: {block, className, col, placeholder},
+    elementConfig: {block, className, col, color, disabled, placeholder},
   } = props;
   const {t} = useTranslation();
 
@@ -17,7 +17,9 @@ export default (props: DefaultInputProps) => {
         <Button
           className={`${className} gradient mt-4`}
           type="submit"
-          block={block || false}>
+          block={block || false}
+          color={color || 'secondary'}
+          disabled={disabled || false}>
           {t(placeholder)}
         </Button>
       </Col>

diff --git a/src/interfaces/FormConfig.ts b/src/interfaces/FormConfig.ts
@@ -1,4 +1,5 @@
 import {FormProps} from 'react-hook-form/dist/types';
+import {ButtonProps} from 'reactstrap/lib/Button';
 import {InputType} from 'reactstrap/lib/Input';
 
 export interface SelectSelectionInterface {
@@ -12,7 +13,7 @@ export interface FormHeader {
   className?: string;
 }
 
-export interface FormConfig {
+export interface FormConfig extends Omit<ButtonProps, 'type'> {
   name: string;
   type: string | React.ReactNode;
   col?: number;
@@ -37,7 +38,6 @@ export interface FormConfig {
   pattern?: RegExp;
   validate?: any;
   isMulti?: boolean;
-  block?: boolean;
 }
 
 export interface DefaultInputProps