Merge branch 'master' of phyothandar/mokkon-reactjs into master

README.md

@@ -1,3 +1,44 @@
 # mokkon-reactjs
 
-Mokkon's reactjs components
+Mokkon's reactjs components
+
+## MkForm 
+
+Props
+
+| Name        | Type           | Default  | Description
+| ------------- |-------------| -----:| --------: |
+| fields      | Array of field object |  | Form fields 
+| data      | object      |   | Form data |
+| actions | Array of action object      |     |
+
+
+Field object
+
+| Name        | Type           | Default  | Description
+| ------------- |-------------| -----:| --------: |
+| field_name      | string |  | Field name 
+| label      | string      |  | Field label |
+| type      | string      |  | Field type |
+| options      | Array of selection object      |  | Data objects for dropdown or autocomplete |
+| can_create      | boolean      |  | To handle adding new object from dropdown or autocomplete |
+| readonly      | boolean      |  | To handle for not editable form |
+| option_label_field      | string      |  | Field name to get label of option in dropdown |
+
+* [ {} ] => [ {"type":"string","label":"string","field_name":"string","options":[],"can_create":boolean,"readonly:boolean,"option_label_field":"string",} ]
+
+
+Action object
+
+| Name        | Type           | Default  | Description
+| ------------- |-------------| -----| -------- |
+| label      | string      |  | Action label |
+| icon      | icon      |  | Action icon |
+| callback      | function      |  | Action ( edit, delete, etc..) |
+| status      | string      |  | Form data status |
+
+* [ {} ] => [ { "label": "string", "icon": icon, "callback": () => {} },]
+
+Data
+
+*  {} => data {"field_name":"value","field_name":"value"}

example/package-lock.json

@@ -55,7 +55,8 @@
         "@material-ui/core": "^4.11.2",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.58",
-        "create-react-library": "^3.1.1"
+        "create-react-library": "^3.1.1",
+        "react-router-dom": "^5.2.0"
       },
       "dependencies": {
         "@babel/code-frame": {
@@ -14656,7 +14657,12 @@
         },
         "react": {
           "version": "file:https:/registry.npmjs.org/react/-/react-16.14.0.tgz",
-          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g=="
+          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2"
+          }
         },
         "react-app-polyfill": {
           "version": "1.0.6",
@@ -15117,7 +15123,13 @@
         },
         "react-dom": {
           "version": "file:https:/registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-          "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw=="
+          "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2",
+            "scheduler": "^0.19.1"
+          }
         },
         "react-error-overlay": {
           "version": "6.0.8",
@@ -15131,7 +15143,56 @@
         },
         "react-scripts": {
           "version": "file:https:/registry.npmjs.org/react-scripts/-/react-scripts-3.4.4.tgz",
-          "integrity": "sha512-7J7GZyF/QvZkKAZLneiOIhHozvOMHey7hO9cdO9u68jjhGZlI8hDdOm6UyuHofn6Ajc9Uji5I6Psm/nKNuWdyw=="
+          "integrity": "sha512-7J7GZyF/QvZkKAZLneiOIhHozvOMHey7hO9cdO9u68jjhGZlI8hDdOm6UyuHofn6Ajc9Uji5I6Psm/nKNuWdyw==",
+          "requires": {
+            "@svgr/webpack": "4.3.3",
+            "@typescript-eslint/eslint-plugin": "^2.10.0",
+            "@typescript-eslint/parser": "^2.10.0",
+            "babel-eslint": "10.1.0",
+            "babel-jest": "^24.9.0",
+            "babel-loader": "8.1.0",
+            "babel-plugin-named-asset-import": "^0.3.6",
+            "babel-preset-react-app": "^9.1.2",
+            "camelcase": "^5.3.1",
+            "case-sensitive-paths-webpack-plugin": "2.3.0",
+            "css-loader": "3.4.2",
+            "dotenv": "8.2.0",
+            "dotenv-expand": "5.1.0",
+            "eslint": "^6.6.0",
+            "eslint-config-react-app": "^5.2.1",
+            "eslint-loader": "3.0.3",
+            "eslint-plugin-flowtype": "4.6.0",
+            "eslint-plugin-jsx-a11y": "6.2.3",
+            "eslint-plugin-react-hooks": "^1.6.1",
+            "file-loader": "4.3.0",
+            "fs-extra": "^8.1.0",
+            "html-webpack-plugin": "4.0.0-beta.11",
+            "identity-obj-proxy": "3.0.0",
+            "jest": "24.9.0",
+            "jest-environment-jsdom-fourteen": "1.0.1",
+            "jest-resolve": "24.9.0",
+            "jest-watch-typeahead": "0.4.2",
+            "mini-css-extract-plugin": "0.9.0",
+            "optimize-css-assets-webpack-plugin": "5.0.3",
+            "pnp-webpack-plugin": "1.6.4",
+            "postcss-flexbugs-fixes": "4.1.0",
+            "postcss-loader": "3.0.0",
+            "postcss-normalize": "8.0.1",
+            "postcss-preset-env": "6.7.0",
+            "postcss-safe-parser": "4.0.1",
+            "react-app-polyfill": "^1.0.6",
+            "react-dev-utils": "^10.2.1",
+            "resolve-url-loader": "3.1.2",
+            "sass-loader": "8.0.2",
+            "style-loader": "0.23.1",
+            "terser-webpack-plugin": "2.3.8",
+            "ts-pnp": "1.1.6",
+            "url-loader": "2.3.0",
+            "webpack": "4.42.0",
+            "webpack-dev-server": "3.11.0",
+            "webpack-manifest-plugin": "2.2.0",
+            "workbox-webpack-plugin": "4.3.1"
+          }
         },
         "react-transition-group": {
           "version": "4.4.1",
@@ -19481,6 +19542,147 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-router-dom": {
+      "version": "file:../node_modules/react-router-dom",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
+          "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "history": {
+          "version": "4.10.1",
+          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "loose-envify": "^1.2.0",
+            "resolve-pathname": "^3.0.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0",
+            "value-equal": "^1.0.1"
+          }
+        },
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "js-tokens": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+          "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+        },
+        "loose-envify": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+          "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+          "requires": {
+            "js-tokens": "^3.0.0 || ^4.0.0"
+          }
+        },
+        "mini-create-react-context": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+          "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+          "requires": {
+            "@babel/runtime": "^7.12.1",
+            "tiny-warning": "^1.0.3"
+          }
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        },
+        "prop-types": {
+          "version": "15.7.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.8.1"
+          }
+        },
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
+        "react-router": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+          "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "history": "^4.9.0",
+            "hoist-non-react-statics": "^3.1.0",
+            "loose-envify": "^1.3.1",
+            "mini-create-react-context": "^0.4.0",
+            "path-to-regexp": "^1.7.0",
+            "prop-types": "^15.6.2",
+            "react-is": "^16.6.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        },
+        "resolve-pathname": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+          "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+        },
+        "tiny-invariant": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+          "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+        },
+        "tiny-warning": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+          "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+        },
+        "value-equal": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+          "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+        }
+      }
+    },
     "react-scripts": {
       "version": "file:../node_modules/react-scripts",
       "integrity": "sha512-7J7GZyF/QvZkKAZLneiOIhHozvOMHey7hO9cdO9u68jjhGZlI8hDdOm6UyuHofn6Ajc9Uji5I6Psm/nKNuWdyw==",

example/package.json

@@ -13,6 +13,7 @@
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
     "react-scripts": "file:../node_modules/react-scripts",
+    "react-router-dom": "file:../node_modules/react-router-dom",
     "@mokkon/reactjs": "file:.."
   },
   "devDependencies": {

example/src/App.js

@@ -1,12 +1,13 @@
 import React from 'react'
 
-import { List, FieldList, TableTemplate, InfoPage } from '@mokkon/reactjs'
+import { List, MkForm, TableTemplate, InfoPage } from '@mokkon/reactjs'
 import '@mokkon/reactjs/dist/index.css'
 import { Grid, Typography } from '@material-ui/core'
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 import SaveIcon from '@material-ui/icons/Save';
 import CancelIcon from '@material-ui/icons/Cancel';
+import ResponsiveDrawer from './ResponsiveDrawer';
 
 const App = () => {
   const pediatricians = [
@@ -24,18 +25,18 @@ const App = () => {
   ]
 
   const fields = [
-    { type: 'text_string', label: 'Name', fieldName: 'name' },
-    { type: 'text_multiline', label: 'Address', fieldName: 'address' },
-    { type: 'text_number', label: 'Latitude', fieldName: 'latitude' },
-    { type: 'text_number', label: 'Longitude', fieldName: 'longitude' },
-    { type: 'text_number', label: 'Max Variance', fieldName: 'max_variance' },
-    { type: 'text_number', label: 'Min Variance', fieldName: 'min_variance' },
+    { type: 'text_string', label: 'Name', field_name: 'name' },
+    { type: 'text_multiline', label: 'Address', field_name: 'address' },
+    { type: 'text_number', label: 'Latitude', field_name: 'latitude' },
+    { type: 'text_number', label: 'Longitude', field_name: 'longitude' },
+    { type: 'text_number', label: 'Max Variance', field_name: 'max_variance' },
+    { type: 'text_number', label: 'Min Variance', field_name: 'min_variance' },
     {
-      type: 'dropdown', label: 'Customer Name', fieldName: 'customer_name', options: [
+      type: 'dropdown', label: 'Customer Name', field_name: 'customer_name', option_label_field: "name", options: [
         { name: 'Name1' }, { name: 'Name2' }, { name: 'Name3' }, { name: 'Name4' }
       ]
     },
-    // { type: 'checkbox', label: 'Customer Name', fieldName: 'customer_name', checkboxList: [{'label': },{}] },
+    // { type: 'checkbox', label: 'Customer Name', field_name: 'customer_name', checkboxList: [{'label': },{}] },
   ];
 
   const data = {
@@ -57,15 +58,15 @@ const App = () => {
     console.log('update data :', data);
   }
 
-  const handleDelete = (e,data) => {
+  const handleDelete = (e, data) => {
     console.log('delete data :', data);
   }
 
-  const handleSave = (e,data) => {
+  const handleSave = (e, data) => {
     console.log('save data :', data);
   }
 
-  const handleCancel = (e,data) => {
+  const handleCancel = (e, data) => {
     console.log('cancel data :', data);
   }
 
@@ -96,22 +97,22 @@ const App = () => {
       </div> */}
 
       {/*field list */}
-      <div className="listContainer">
+      <ResponsiveDrawer></ResponsiveDrawer>
+      {/* <div className="listContainer">
         <Typography variant='h3'>Fields</Typography>
         <Grid container>
           <Grid item xs={12}>
-            <FieldList
+            <MkForm
               fields={fields}
               updateData={data}
               buttonColor={'#f05f40'}
               currentTabName={'account'}
               isNew={true}
               actions={actions}
-              onActions={(d) => { handleOnActions(d) }}
-            ></FieldList>
+            ></MkForm>
           </Grid>
         </Grid>
-      </div>
+      </div> */}
 
       {/*info page */}
       {/* <div className="listContainer">

example/src/MkFormPage.js

@@ -0,0 +1,81 @@
+import React from 'react'
+
+import { MkForm } from '@mokkon/reactjs'
+import '@mokkon/reactjs/dist/index.css'
+import { Grid, Typography } from '@material-ui/core'
+import EditIcon from '@material-ui/icons/Edit';
+import DeleteIcon from '@material-ui/icons/Delete';
+import SaveIcon from '@material-ui/icons/Save';
+import CancelIcon from '@material-ui/icons/Cancel';
+
+const MkFormPage = () => {
+
+  const fields = [
+    { type: 'text_string', label: 'Name', field_name: 'name' },
+    { type: 'text_multiline', label: 'Address', field_name: 'address' },
+    { type: 'text_number', label: 'Latitude', field_name: 'latitude' },
+    { type: 'text_number', label: 'Longitude', field_name: 'longitude' },
+    { type: 'text_number', label: 'Max Variance', field_name: 'max_variance' },
+    { type: 'text_number', label: 'Min Variance', field_name: 'min_variance' },
+    {
+      type: 'dropdown', label: 'Customer Name', field_name: 'customer_name', option_label_field: "name", can_create: true, options: [
+        { name: 'Name1' }, { name: 'Name2' }, { name: 'Name3' }, { name: 'Name4' }
+      ]
+    },
+  ];
+
+  const data = {
+    delete_time: 0,
+    name: "Vendor 13",
+    address: "address",
+    update_time: 1610341578878,
+    updated_by: "Nine Nine",
+    updated_by_id: "kShMtHkcwTNjwm-lfzSBvAzdSo1J8dIpAz6_Ct85HPg",
+    // status: 'joined'
+  }
+
+  const handleDelete = (e, data) => {
+    console.log('delete data :', data);
+  }
+
+  const handleSave = (e, data) => {
+    console.log('save data :', data);
+  }
+
+  const handleCancel = (e, data) => {
+    console.log('cancel data :', data);
+  }
+
+  var actions = [
+    { "label": "edit", "action_type": "edit", "icon": <EditIcon />, "callback": (e, d) => { handleSave(e, d) } },
+    { "label": "delete", "action_type": "delete", "callback": (e, d) => { handleDelete(e, d) }, "icon": <DeleteIcon /> },
+    { "label": "save", "action_type": "save", "callback": (e, d) => { handleSave(e, d) }, "icon": <SaveIcon /> },
+    { "label": "cancel", "action_type": "cancel", "callback": (e, d) => { handleCancel(e, d) }, "icon": <CancelIcon /> },
+    { "label": "delete invitation", "action_type": "delete_invitation", "callback": (e, d) => { handleCancel() }, "icon": "", status: "invited" },
+    { "label": "MkFormrove member", "action_type": "MkFormrove_member", "callback": (e, d) => { handleCancel(e, d) }, "icon": "", status: "joined" },
+    { "label": "disable member", "action_type": "disable_member", "callback": (e, d) => { handleCancel(e, d) }, "icon": "", status: "joined" },
+    { "label": "enable member", "action_type": "enable_member", "callback": (e, d) => { handleCancel(e, d) }, "icon": "", status: "disabled" },
+    { "label": "invite member", "action_type": "invite_member", "callback": (e, d) => { handleCancel(e, d) }, "icon": "", status: "requested" },
+
+  ];
+
+  return (
+    <div className="root">
+      <div className="listContainer">
+        <Grid container>
+          <Grid item xs={12}>
+            <MkForm
+              fields={fields}
+              data={data}
+              buttonColor={'#f05f40'}
+              actions={actions}
+              onDropdownCreateNew={(data) => { console.log(data) }}
+            ></MkForm>
+          </Grid>
+        </Grid>
+      </div>
+    </div>
+  );
+}
+
+export default MkFormPage

example/src/ResponsiveDrawer.js

@@ -0,0 +1,172 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Divider from '@material-ui/core/Divider';
+import Drawer from '@material-ui/core/Drawer';
+import Hidden from '@material-ui/core/Hidden';
+import IconButton from '@material-ui/core/IconButton';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MailIcon from '@material-ui/icons/Mail';
+import MenuIcon from '@material-ui/icons/Menu';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import MkFormPage from './MkFormPage';
+import { Route, Router, Switch } from 'react-router-dom';
+import WelcomPage from './WelcomPage';
+import { createBrowserHistory } from 'history';
+
+const browserHistory = createBrowserHistory();
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+  },
+  drawer: {
+    [theme.breakpoints.up('sm')]: {
+      width: drawerWidth,
+      flexShrink: 0,
+    },
+  },
+  appBar: {
+    [theme.breakpoints.up('sm')]: {
+      width: `calc(100% - ${drawerWidth}px)`,
+      marginLeft: drawerWidth,
+    },
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      display: 'none',
+    },
+  },
+  // necessary for content to be below app bar
+  toolbar: theme.mixins.toolbar,
+  drawerPaper: {
+    width: drawerWidth,
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3),
+  },
+}));
+
+function ResponsiveDrawer(props) {
+  const { window } = props;
+  const classes = useStyles();
+  const theme = useTheme();
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [menuName, setMenuName] = React.useState('');
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  const handleOnClick = (path) => {
+    setMenuName(path);
+    browserHistory.push(path);
+  }
+
+  const menus = [
+    {name: 'MkForm', path:'MkForm'},
+    {name: 'MkTable', path:'MkTable'}
+  ]
+
+  const drawer = (
+    <div>
+      <div className={classes.toolbar} ><Typography variant="h4">Mokkon</Typography></div>
+      <Divider />
+      <List>
+        {menus.map((menu, index) => (
+          <ListItem button key={menu.name} onClick={() => handleOnClick(menu.path)}>
+            <ListItemText primary={menu.name} />
+          </ListItem>
+        ))}
+      </List>
+
+
+    </div>
+  );
+
+  const container = window !== undefined ? () => window().document.body : undefined;
+
+  return (
+    <div className={classes.root}>
+      <CssBaseline />
+      <AppBar position="fixed" className={classes.appBar}>
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="start"
+            onClick={handleDrawerToggle}
+            className={classes.menuButton}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" noWrap>
+            {menuName}
+          </Typography>
+        </Toolbar>
+      </AppBar>
+
+      <nav className={classes.drawer} aria-label="mailbox folders">
+        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
+        <Hidden smUp implementation="css">
+          <Drawer
+            container={container}
+            variant="temporary"
+            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+            open={mobileOpen}
+            onClose={handleDrawerToggle}
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            ModalProps={{
+              keepMounted: true, // Better open performance on mobile.
+            }}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <Hidden xsDown implementation="css">
+          <Drawer
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            variant="permanent"
+            open
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+      </nav>
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+        <Router history={browserHistory}>
+          <Switch>
+            <Route path="/" component={WelcomPage} exact />
+            <Route path="/MkForm" component={MkFormPage} />
+          </Switch>
+        </Router>
+      </main>
+    </div>
+  );
+}
+
+ResponsiveDrawer.propTypes = {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
+  window: PropTypes.func,
+};
+
+export default ResponsiveDrawer;

example/src/WelcomPage.js

@@ -0,0 +1,17 @@
+import { Typography } from '@material-ui/core';
+import React from 'react';
+
+class WelcomePage extends React.Component {
+
+    render() {
+        const { t, setting } = this.props;
+        return (
+            <div>
+                <Typography variant="h3">Welcome !</Typography>
+            </div>
+        );
+    };
+}
+
+
+export default (WelcomePage);

package.json

@@ -54,6 +54,7 @@
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
-    "create-react-library": "^3.1.1"
+    "create-react-library": "^3.1.1",
+    "react-router-dom": "^5.2.0"
   }
 }

src/CheckboxList/CheckboxList.js

@@ -1,4 +0,0 @@
-function CheckboxList() {
-    return (<div>checkbox list</div>);
-}
-export default CheckboxList;

src/CheckboxList/index.js

@@ -1 +0,0 @@
-export { default } from '../CheckboxList'

src/InfoPage/InfoPage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import { Grid, Box, Typography, Button } from '@material-ui/core';
-import { FieldList } from '..';
+import { MkForm } from '..';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -91,22 +91,22 @@ function InfoPage(props) {
             {isNew ?
                 <Grid container style={{ marginTop: '30px' }}>
                     <Grid item xs={12} sm={7}>
-                        <FieldList
+                        <MkForm
                             updateData={infoData}
                             fields={displayFields}
                             isNew={isNew}
                             onDataCallback={(d) => handleUpdateData(d)}
-                        ></FieldList>
+                        ></MkForm>
                     </Grid>
                 </Grid> : <Grid container style={{ marginTop: '30px' }}>
                     <Grid item xs={12} sm={7}>
                         {!editable ?
-                            <FieldList
+                            <MkForm
                                 fields={displayFields}
                                 isNew={isNew}
                                 updateData={infoData}
                                 onDataCallback={(d) => handleUpdateData(d)}
-                            ></FieldList>
+                            ></MkForm>
                             :
                             displayFields.map((d, i) => {
                                 return <Grid container>

src/MButton/MButton.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-    Box,
-    Button
-} from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        width: '100%',
-    },
-}));
-
-function MButton(props) {
-    const classes = useStyles();
-    const { action, onCallback } = props;
-
-    const handleAction = () => {
-        onCallback();
-    }
-
-    return (
-        <div className={classes.root}>
-            <Box>
-                <Button
-                    variant="contained" style={{ float: 'right', margin: "5px" }}
-                    onClick={(e) => { handleAction }}
-                >{action.icon}{action.label}</Button>
-            </Box>
-        </div>
-    );
-}
-
-MButton.propTypes = {
-    history: PropTypes.object,
-    action: PropTypes.object,
-    onCallback: PropTypes.func
-};
-
-export default (MButton);

src/MButton/index.js

@@ -1 +0,0 @@
-export { default } from '.';

src/FieldList/FieldList.js → src/MkForm/MkForm.js

@@ -11,7 +11,6 @@ import {
 } from '@material-ui/core';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
-import { MButton } from '..';
 
 const filter = createFilterOptions();
 
@@ -82,33 +81,58 @@ const useStyles = makeStyles((theme) => ({
     }
 }));
 
-function FieldList(props) {
+function MButton(props) {
+    const classes = useStyles();
+    const { action, onCallback } = props;
+
+    const handleAction = () => {
+        onCallback();
+    }
+
+    return (
+        <div className={classes.root}>
+            <Box>
+                <Button
+                    variant="contained" style={{ float: 'right', margin: "5px" }}
+                    onClick={(e) => { handleAction }}
+                >{action.icon}{action.label}</Button>
+            </Box>
+        </div>
+    );
+}
+
+MButton.propTypes = {
+    history: PropTypes.object,
+    action: PropTypes.object,
+    onCallback: PropTypes.func
+};
+
+
+
+function MkForm(props) {
     const classes = useStyles();
     const {
         fields = [],
-        updateData = {},
-        isNew = false,
-        currentTabName,
-        onCancel,
-        onCanCreateNew,
+        data = {},
+        onDropdownCreateNew,
         actions = [],
     } = props;
-    const [data, setDataField] = React.useState(updateData != undefined ? updateData : {});
+    const [_data, setDataField] = React.useState(data != undefined ? data : {});
 
     const handleTextString = (e, fieldName) => {
-        setDataField({ ...data, [fieldName]: e.target.value });
+        setDataField({ ..._data, [fieldName]: e.target.value });
     }
 
     const handleTextNumber = (e, fieldName) => {
-        setDataField({ ...data, [fieldName]: e.target.value });
+        setDataField({ ..._data, [fieldName]: e.target.value });
     }
 
     const handleTextMultiline = (e, fieldName) => {
-        setDataField({ ...data, [fieldName]: e.target.value });
+        setDataField({ ..._data, [fieldName]: e.target.value });
     }
 
     const handleDate = (e, fieldName) => {
-        setDataField({ ...data, [fieldName]: e.target.value });
+        setDataField({ ..._data, [fieldName]: e.target.value });
     }
 
     const handleDropDownChange = (e, fieldName) => {
@@ -117,7 +141,7 @@ function FieldList(props) {
 
         var fn = fieldName.split('_');
         var fieldId = fn[0] + '_' + 'id';
-        setDataField({ ...data, [fieldName]: selectedValue, [fieldId]: e.target.value });
+        setDataField({ ..._data, [fieldName]: selectedValue, [fieldId]: e.target.value });
     }
 
     const handleImgUpload = (e, fieldName) => {
@@ -129,28 +153,15 @@ function FieldList(props) {
             setImgPreviewPath(reader.result);
         }
         reader.readAsDataURL(file);
-        setDataField({ ...data, [fieldName]: e.target.files[0].name });
-    }
-
-    const handleCancel = () => {
-        onCancel();
+        setDataField({ ..._data, [fieldName]: e.target.files[0].name });
     }
 
     const handleCanCreateNew = (data) => {
-        onCanCreateNew(data);
+        onDropdownCreateNew(data);
     }
 
     const onChangeValue = (fieldName, value) => {
-        var fn = fieldName.split('_');
-        var fieldId = fn[0] + '_' + 'id';
-        var d = value['name'] != undefined ? value['name'] : value['product_desc']
-
-        if (isNew) {
-            setDataField({ ...data, [fieldName]: d, [fieldId]: value['id'] });
-
-        } else {
-            setDataField({ ...data, [fieldName]: d, [fieldId]: value['id'] });
-        }
+        setDataField({ ..._data, [fieldName]: value });
     }
 
     return (
@@ -160,14 +171,14 @@ function FieldList(props) {
                     {fields.map((f, i) => {
 
                         if (f.type == 'text_string') {
-                            return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                            return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
                                         <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
                                     </Box>
                                 </Grid>
                                 <Grid item xs={12} sm={7}>
-                                    <TextField id={f.fieldName}
+                                    <TextField id={f.field_name}
                                         variant="outlined"
                                         autoComplete="off"
                                         size={"small"}
@@ -175,14 +186,14 @@ function FieldList(props) {
                                         InputProps={{
                                             readOnly: f.readOnly ? f.readOnly : false,
                                         }}
-                                        value={data != undefined ? data[f.fieldName] : ''}
-                                        onChange={(e) => handleTextString(e, f.fieldName)}
+                                        value={_data != undefined ? _data[f.field_name] : ''}
+                                        onChange={(e) => handleTextString(e, f.field_name)}
                                     />
                                 </Grid>
                             </Grid>;
                         }
                         else if (f.type == 'text_number') {
-                            return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                            return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
                                         <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
@@ -190,20 +201,20 @@ function FieldList(props) {
                                 </Grid>
                                 <Grid item xs={12} sm={7}>
                                     <TextField
-                                        id={f.fieldName}
+                                        id={f.field_name}
                                         variant="outlined"
                                         autoComplete="off"
                                         size={"small"}
                                         style={{ width: '100%' }}
                                         type="number"
-                                        value={data != undefined ? data[f.fieldName] : ''}
-                                        onChange={(e) => handleTextNumber(e, f.fieldName)}
+                                        value={_data != undefined ? _data[f.field_name] : ''}
+                                        onChange={(e) => handleTextNumber(e, f.field_name)}
                                     />
                                 </Grid>
                             </Grid>;
                         }
                         else if (f.type == 'text_multiline') {
-                            return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                            return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
                                         <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
@@ -211,21 +222,21 @@ function FieldList(props) {
                                 </Grid>
                                 <Grid item xs={12} sm={7}>
                                     <TextField
-                                        id={f.fieldName}
+                                        id={f.field_name}
                                         multiline
                                         autoComplete="off"
                                         rows={3}
                                         size={"small"}
                                         style={{ width: '100%' }}
-                                        value={data != undefined ? data[f.fieldName] : ''}
+                                        value={_data != undefined ? _data[f.field_name] : ''}
                                         variant="outlined"
-                                        onChange={(e) => handleTextMultiline(e, f.fieldName)}
+                                        onChange={(e) => handleTextMultiline(e, f.field_name)}
                                     />
                                 </Grid>
                             </Grid>;
                         }
                         else if (f.type == 'date') {
-                            return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                            return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
                                         <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
@@ -233,23 +244,23 @@ function FieldList(props) {
                                 </Grid>
                                 <Grid item xs={12} sm={7}>
                                     <TextField
-                                        id={f.fieldName}
+                                        id={f.field_name}
                                         variant="outlined"
                                         autoComplete="off"
                                         size={"small"}
-                                        value={data != undefined ? data[f.fieldName] : ''}
+                                        value={_data != undefined ? _data[f.field_name] : ''}
                                         type="date"
                                         style={{ width: '100%' }}
-                                        onChange={(e) => handleDate(e, f.fieldName)}
+                                        onChange={(e) => handleDate(e, f.field_name)}
                                     />
                                 </Grid>
                             </Grid>;
                         }
                         else if (f.type == 'dropdown') {
-                            if (f.options != undefined) {
-                                if (f.fieldName == 'priority') {
+                            if (f.options != undefined && f.option_label_field != undefined) {
+                                if (f.field_name == 'priority') {
 
-                                    return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                                    return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                         <Grid item xs={12} sm={5}>
                                             <Box style={{ width: '150px' }}>
                                                 <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
@@ -258,9 +269,9 @@ function FieldList(props) {
                                         <Grid item xs={12} sm={7}>
                                             <NativeSelect
                                                 id="demo-customized-select-native"
-                                                value={data != undefined ? data[f.fieldName] : ''}
-                                                onChange={(e) => handleDropDownChange(e, f.fieldName)}
-                                                id={f.fieldName}
+                                                value={_data != undefined ? _data[f.field_name] : ''}
+                                                onChange={(e) => handleDropDownChange(e, f.field_name)}
+                                                id={f.field_name}
                                                 input={<BootstrapInput />}
                                                 style={{ width: '100%' }}
                                             >
@@ -272,97 +283,66 @@ function FieldList(props) {
                                         </Grid>
                                     </Grid>;
                                 } else {
-                                    var fn = f.fieldName.split('_');
-                                    var fieldId = fn[0] + '_' + 'id';
-
-                                    if (isNew) {
-                                        return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
-                                            <Grid item xs={12} sm={5}>
-                                                <Box style={{ width: '150px' }}>
-                                                    <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
-                                                </Box>
-                                            </Grid>
-                                            <Grid item xs={12} sm={7}>
-                                                <Autocomplete
-                                                    id="combo-box-demo"
-                                                    options={f.options}
-                                                    getOptionLabel={(option) => {
-                                                        if (typeof option === 'string') {
-                                                            return option;
+                                    return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                                        <Grid item xs={12} sm={5}>
+                                            <Box style={{ width: '150px' }}>
+                                                <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
+                                            </Box>
+                                        </Grid>
+                                        <Grid item xs={12} sm={7}>
+                                            <Autocomplete
+                                                id="combo-box-demo"
+                                                options={f.options}
+                                                getOptionLabel={(option) => {
+                                                    if (typeof option === 'string') {
+                                                        return option;
+                                                    }
+                                                    return option[f.option_label_field];
+                                                }}
+                                                style={{ width: '100%' }}
+                                                size='small'
+                                                value={_data != undefined ? _data[f.field_name] ? _data[f.field_name] : " " : " "}
+                                                filterOptions={(options, params) => {
+                                                    console.log("Autocomplete", f.can_create);
+                                                    if (f.can_create) {
+                                                        var newFilter = ['+ Add New']
+                                                        var filtered = filter(options, params);
+                                                        return [...newFilter, ...filtered];
+                                                    } else {
+                                                        var filtered = filter(options, params);
+                                                        return filtered;
+                                                    }
+                                                }}
+                                                onChange={(event, newValue) => {
+                                                    if (typeof newValue === 'string') {
+                                                        console.log('f.field_name', f.field_name, " f.can_create", f.can_create);
+                                                        var d = {
+                                                            "canCreate": f.can_create,
+                                                            "fields": f.fields,
+                                                            "name": f.name,
+                                                            "fieldName": f.field_name
                                                         }
-                                                        return option[f.fieldName] != undefined ? option[f.fieldName] : option.name != undefined ? option.name : option.product_desc != undefined ? option.product_desc : '';
-                                                    }}
-                                                    style={{ width: '100%' }}
-                                                    size='small'
-                                                    value={data != undefined ? data[f.fieldName] ? data[f.fieldName] : " " : " "}
-                                                    filterOptions={(options, params) => {
-                                                        console.log("Autocomplete", f.canCreate);
-                                                        if (f.canCreate) {
-                                                            var newFilter = ['+ Add New']
-                                                            var filtered = filter(options, params);
-                                                            return [...newFilter, ...filtered];
-                                                        } else {
-                                                            var filtered = filter(options, params);
-                                                            return filtered;
+                                                        handleCanCreateNew(d);
+                                                    } else {
+                                                        if (newValue != null && newValue.inputValue != '' && newValue.product_desc != "") {
+                                                            onChangeValue(f.field_name, newValue[f.option_label_field]);
                                                         }
-                                                    }}
-                                                    onChange={(event, newValue) => {
-                                                        if (typeof newValue === 'string') {
-                                                            console.log('f.fieldName', f.fieldName, " f.canCreate", f.canCreate);
-                                                            var d = {
-                                                                "canCreate": f.canCreate,
-                                                                "fields": f.fields,
-                                                                "name": f.name,
-                                                                "fieldName": f.fieldName
-                                                            }
-                                                            handleCanCreateNew(d);
-                                                        } else {
-                                                            if (newValue != null && newValue.inputValue != '' && newValue.product_desc != "") {
-                                                                onChangeValue(f.fieldName, newValue);
-                                                            }
-                                                        }
-                                                    }}
-                                                    renderInput={(params) => <TextField {...params} variant="outlined" />}
-
-                                                />
-
-                                            </Grid>
-                                        </Grid>;
-                                    }
-                                    else {
-                                        return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
-                                            <Grid item xs={12} sm={5}>
-                                                <Box style={{ width: '150px' }}>
-                                                    <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
-                                                </Box>
-                                            </Grid>
-                                            <Grid item xs={12} sm={7}>
-                                                <NativeSelect
-                                                    id="demo-customized-select-native"
-                                                    value={data != undefined ? data[fieldId] : ''}
-                                                    onChange={(e) => handleDropDownChange(e, f.fieldName)}
-                                                    id={f.fieldName}
-                                                    input={<BootstrapInput />}
-                                                    style={{ width: '100%' }}
-                                                >
-                                                    <option aria-label="None" value="" >Select</option>
-                                                    {f.options.map((d, i) => {
-                                                        var name = d[f.fieldName] != undefined ? d[f.fieldName] : d.name;
-                                                        return <option name={name} value={d.id}>{name}</option>;
-                                                    })}
-                                                </NativeSelect>
-                                            </Grid>
-                                        </Grid>;
-                                    }
+                                                    }
+                                                }}
+                                                renderInput={(params) => <TextField {...params} variant="outlined" />}
+
+                                            />
 
+                                        </Grid>
+                                    </Grid>;
                                 }
                             }
                         }
                         else if (f.type == 'photo_list') {
-                            console.log('photo_list:', data);
+                            console.log('photo_list:', _data);
                             return <div>
                                 <Grid
-                                    key={f.fieldName} container
+                                    key={f.field_name} container
                                     style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                     <Grid item xs={12} sm={5}>
                                         <Box style={{ width: '150px' }}>
@@ -374,20 +354,20 @@ function FieldList(props) {
                                             <form>
                                                 <div className="form-group">
                                                     <input type="file" name="imgCollection"
-                                                        onChange={(e) => onFileChange(e, f.fieldName)} multiple />
+                                                        onChange={(e) => onFileChange(e, f.field_name)} multiple />
                                                 </div>
                                             </form>
                                         </div>
                                     </Grid>
                                 </Grid>
-                                {data[f.fieldName] != undefined && data[f.fieldName].length != 0 ?
+                                {_data[f.field_name] != undefined && _data[f.field_name].length != 0 ?
                                     <Grid
-                                        key={f.fieldName} container
+                                        key={f.field_name} container
                                         style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                         <Grid item xs={12}>
                                             <div style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
                                                 <GridList className={classes.gridList}>
-                                                    {data[f.fieldName] == undefined ? <span /> : data[f.fieldName].map((tile) => (
+                                                    {_data[f.field_name] == undefined ? <span /> : _data[f.field_name].map((tile) => (
                                                         <GridListTile key={tile} style={{ width: '100px', height: '100px' }}>
                                                             <img src={tile} alt={tile} onClick={(e) => {
                                                                 setSelectedPhoto(tile);
@@ -410,7 +390,7 @@ function FieldList(props) {
                                                     </Grid>
                                                     <br />
                                                     <Grid container spacing={3}>
-                                                        {data[f.fieldName].length > 0 ? data[f.fieldName].map((value) => (
+                                                        {_data[f.field_name].length > 0 ? _data[f.field_name].map((value) => (
                                                             <Grid key={value} item>
                                                                 <Box className="square" > <img src={value} className="thumnail-img" alt="logo" onClick={(e) => setSelectedPhoto(value)} /></Box>
                                                             </Grid>
@@ -424,10 +404,10 @@ function FieldList(props) {
                             </div>;
                         }
                         else if (f.type == 'list') {
-                            console.log('list', data[f.fieldName]);
+                            console.log('list', _data[f.field_name]);
                             return <div>
                                 <Grid
-                                    key={f.fieldName} container
+                                    key={f.field_name} container
                                     style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                     <Grid item xs={12} sm={5}>
                                         <Box style={{ width: '150px' }}>
@@ -443,7 +423,7 @@ function FieldList(props) {
                                     </Grid>
                                 </Grid>
                                 <Grid
-                                    key={f.fieldName} container
+                                    key={f.field_name} container
                                     style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
 
                                     <div style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
@@ -457,7 +437,7 @@ function FieldList(props) {
                                                     </TableRow>
                                                 </TableHead>
                                                 <TableBody>
-                                                    {data[f.fieldName].length > 0 ? data[f.fieldName].map((row) => (
+                                                    {_data[f.field_name].length > 0 ? _data[f.field_name].map((row) => (
                                                         <TableRow key={row.name}>
                                                             {partHeaders.map((h, i) => {
                                                                 return (<TableCell key={h.id} align={h.numeric ? 'right' : 'left'}>{row[h.id]}</TableCell>);
@@ -474,7 +454,7 @@ function FieldList(props) {
                             </div>;
                         }
                         else if (f.type == 'time') {
-                            return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                            return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
                                         <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
@@ -492,7 +472,7 @@ function FieldList(props) {
                                     inputProps={{
                                         step: 300, // 5 min
                                     }}
-                                    onChange={(e) => handleTime(e, f.fieldName)}
+                                    onChange={(e) => handleTime(e, f.field_name)}
                                 />
                                 </Grid>
                             </Grid>;
@@ -503,42 +483,28 @@ function FieldList(props) {
 
                 {/* display actions buttons */}
                 {actions.length > 0 ?
-                    currentTabName === 'account' ? <Grid item xs={12}>
-                        {data != undefined ?
-                            actions.map((a) => {
-                                if (a.status === data.status) {
-                                    return <MButton action={a} onCallback={a.callback(data)}></MButton>;
-                                }
-
-                            })
-                            : <Grid />
-                        }
-                    </Grid>
-                        : <Grid item xs={12}>
-                            {actions.map((a) => {
-                                if (a.status === data.status && currentTabName !== 'account') {
-                                    return <MButton action={a} onCallback={a.callback(data)}></MButton>;
-                                }
-                            })}
+                    <Grid item xs={12}>
+                        {actions.map((a) => {
+                            if (a.status === _data.status) {
+                                return <MButton action={a} onCallback={a.callback(_data)}></MButton>;
+                            }
+                        })}
 
-                        </Grid>
-                    : <Grid />}
+                    </Grid> : <Grid />}
             </Grid>
         </div>
 
     );
 }
 
-FieldList.propTypes = {
+MkForm.propTypes = {
     history: PropTypes.object,
     fields: PropTypes.array.isRequired,
-    updateData: PropTypes.object,
+    data: PropTypes.object,
     isNew: PropTypes.bool,
-    currentTabName: PropTypes.string,
-    onCancel: PropTypes.func,
     actions: PropTypes.array,
-    onCanCreateNew: PropTypes.func
+    onDropdownCreateNew: PropTypes.func
 };
 
-export default (FieldList);
+export default (MkForm);
 

src/RadioList/RadioList.js

@@ -1,4 +0,0 @@
-function RadioList() {
-    return (<div>radio list</div>);
-}
-export default RadioList;

src/RadioList/index.js

@@ -1 +0,0 @@
-export { default } from '../RadioList';

src/index.js

@@ -1,7 +1,4 @@
 export { default as List } from './List/List';
-export { default as FieldList } from './FieldList/FieldList';
+export { default as MkForm } from './MkForm/MkForm';
 export { default as TableTemplate } from './TableTemplate/TableTemplate';
-export { default as InfoPage } from './InfoPage/InfoPage';
-export { default as CheckboxList } from './CheckboxList/CheckboxList';
-export { default as RadioList } from './RadioList/RadioList';
-export { default as MButton } from './MButton/MButton';
+export { default as InfoPage } from './InfoPage/InfoPage';