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

README.md

@@ -25,8 +25,30 @@ Field object
 | 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",} ]
-
+Field Types
+ * dropdown
+ * text_string
+ * text_number
+ * text_multiline
+ * list
+ * photo_list
+  * date
+ *  time
+ 
+ Example of field object 
+```javascript
+    [ 
+        {
+        "type":"string",
+        "label":"string",
+        "field_name":"string",
+        "options":[],
+        "can_create":boolean,
+        "readonly":boolean,
+        "option_label_field":"string",
+        } 
+    ]
+```
 
 Action object
 
@@ -37,8 +59,80 @@ Action object
 | callback      | function      |  | Action ( edit, delete, etc..) |
 | status      | string      |  | Form data status |
 
-* [ {} ] => [ { "label": "string", "icon": icon, "callback": () => {} },]
+ Example of action object 
+```javascript
+    { 
+    "label": "string",
+    "icon": icon,
+    "callback": () => {}
+     }
+ ```
 
 Data
 
-*  {} => data {"field_name":"value","field_name":"value"}
+Example of data object 
+```javascript
+    { 
+   "field_name":"value",
+   "field_name":"value",
+     }
+ ```
+#
+
+## MkTable
+
+Props
+
+
+| Name        | Type           | Default  | Description
+| ------------- |-------------| -----| -------- |
+| headers      | Array of header object |  | Table headers
+| data      | object      |   | Form data |
+| onActions | Array of action callback      |     | Return function with data or event
+| actions | Array of action object      |     |
+| title | string      |     |Item title (item, category,etc..)
+| order | string      | asc    | Order (asc, desc)
+| orderBy | string      |   name  | Order by 
+| rowsPerPage |number      |     | Number of rows in page
+| noMoreToLoad | boolean     |     |To handle end of data
+| isLoading | boolean      |     | To Handle progressing
+| onChangePaginatePage | function      |     | To Change page number
+| onGetData | function      |     | To Get data list
+| onChangeRowPerPage | function      |     | To change number of rows in page
+| dense | boolean      |   true  | To handle table size
+
+ Example of action object 
+```javascript
+    { 
+    "label": "string",
+    "icon": icon element,
+    "callback": () => {}
+     }
+```
+Header object
+| Name        | Type           | Default  | Description
+| ------------- |-------------| -----:| --------: |
+| id      | string |  | Field name of data object
+| numeric      | boolean      |   | To handle numeric or not |
+| disablePadding | boolean      |  |Table cell padding   
+| label      | string      |   | Label of Header |
+| width | Array of action object      | | Tablecell width   
+
+ Example of header object 
+```javascript
+    [
+        {
+        'id': 'sr', 
+        'numeric': true,
+        'disablePadding': false,
+        'label': 'No.'
+        },
+        { 
+            'id': 'name',
+            'numeric': false,
+            'disablePadding': false,
+            'label': 'Name',
+            'width': '200px'
+        },
+  ]
+```

dist/index.css

@@ -1,14 +1,14 @@
-.__Q-W2 {
+._styles-module__root___Q-W2 {
   display: flex;
 }
 
-._2anau {
+._styles-module__listContainer__2anau {
   flex-grow: 1;
   box-sizing: border-box;
   width: 100%;
 }
 
-li._KjPQP {
+li._styles-module__expand__KjPQP {
   list-style-type: none;
 }
 

dist/index.js

@@ -3,19 +3,21 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var core = require('@material-ui/core');
+var AddIcon = _interopDefault(require('@material-ui/icons/Add'));
 var styles = require('@material-ui/core/styles');
 var Autocomplete = require('@material-ui/lab/Autocomplete');
 var Autocomplete__default = _interopDefault(Autocomplete);
-var Table$1 = _interopDefault(require('@material-ui/core/Table'));
-var TableBody$1 = _interopDefault(require('@material-ui/core/TableBody'));
-var TableCell$1 = _interopDefault(require('@material-ui/core/TableCell'));
-var TableContainer$1 = _interopDefault(require('@material-ui/core/TableContainer'));
-var TableHead$1 = _interopDefault(require('@material-ui/core/TableHead'));
+var Table = _interopDefault(require('@material-ui/core/Table'));
+var TableBody = _interopDefault(require('@material-ui/core/TableBody'));
+var TableCell = _interopDefault(require('@material-ui/core/TableCell'));
+var TableContainer = _interopDefault(require('@material-ui/core/TableContainer'));
+var TableHead = _interopDefault(require('@material-ui/core/TableHead'));
 var TablePagination = _interopDefault(require('@material-ui/core/TablePagination'));
-var TableRow$1 = _interopDefault(require('@material-ui/core/TableRow'));
+var TableRow = _interopDefault(require('@material-ui/core/TableRow'));
 var TableSortLabel = _interopDefault(require('@material-ui/core/TableSortLabel'));
 require('@material-ui/core/Typography');
 var EditIcon = _interopDefault(require('@material-ui/icons/Edit'));
+var ExpandMore = _interopDefault(require('@material-ui/icons/ExpandMore'));
 var CircularProgress = _interopDefault(require('@material-ui/core/CircularProgress'));
 
 function List(_ref) {
@@ -61,7 +63,7 @@ function createCommonjsModule(fn, module) {
  */
 var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
 Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment$1=e;var Lazy=t;var Memo=r;var Portal=d;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
 var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
 var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
 var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
@@ -73,7 +75,7 @@ var reactIs_production_min = {
 	ContextProvider: ContextProvider,
 	Element: Element,
 	ForwardRef: ForwardRef,
-	Fragment: Fragment$1,
+	Fragment: Fragment,
 	Lazy: Lazy,
 	Memo: Memo,
 	Portal: Portal,
@@ -1185,7 +1187,13 @@ var useStyles = styles.makeStyles(function (theme) {
 
 function MButton(props) {
   var classes = useStyles();
-  var action = props.action;
+  var action = props.action,
+      onCallback = props.onCallback;
+
+  var handleAction = function handleAction(e) {
+    e.preventDefault();
+    onCallback(e);
+  };
 
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.root
@@ -1196,14 +1204,15 @@ function MButton(props) {
       margin: "5px"
     },
     onClick: function onClick(e) {
+      return handleAction(e);
     }
   }, action.icon, action.label)));
 }
 
 MButton.propTypes = {
   history: propTypes.object,
-  action: propTypes.object,
-  onCallback: propTypes.func
+  action: propTypes.object.isRequired,
+  onCallback: propTypes.func.isRequired
 };
 
 function MkForm(props) {
@@ -1214,12 +1223,21 @@ function MkForm(props) {
       data = _props$data === void 0 ? {} : _props$data,
       onDropdownCreateNew = props.onDropdownCreateNew,
       _props$actions = props.actions,
-      actions = _props$actions === void 0 ? [] : _props$actions;
+      actions = _props$actions === void 0 ? [] : _props$actions,
+      partHeaders = props.partHeaders;
 
-  var _React$useState = React__default.useState(data != undefined ? data : {}),
+  var _React$useState = React__default.useState(data !== undefined ? data : {}),
       _data = _React$useState[0],
       setDataField = _React$useState[1];
 
+  var _React$useState2 = React__default.useState(false),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState("#"),
+      selectedPhoto = _React$useState3[0],
+      setSelectedPhoto = _React$useState3[1];
+
   var handleTextString = function handleTextString(e, fieldName) {
     var _extends2;
 
@@ -1259,11 +1277,15 @@ function MkForm(props) {
   };
 
   var onChangeValue = function onChangeValue(fieldName, value) {
-    var _extends8;
+    var _extends7;
 
-    setDataField(_extends({}, _data, (_extends8 = {}, _extends8[fieldName] = value, _extends8)));
+    setDataField(_extends({}, _data, (_extends7 = {}, _extends7[fieldName] = value, _extends7)));
   };
 
+  var onFileChange = function onFileChange(e, f) {};
+
+  var handleSelectItemDialog = function handleSelectItemDialog() {};
+
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.root
   }, /*#__PURE__*/React__default.createElement(core.Grid, {
@@ -1272,7 +1294,7 @@ function MkForm(props) {
     item: true,
     xs: 12
   }, fields.map(function (f, i) {
-    if (f.type == 'text_string') {
+    if (f.type === 'text_string') {
       return /*#__PURE__*/React__default.createElement(core.Grid, {
         key: f.field_name,
         container: true,
@@ -1309,12 +1331,12 @@ function MkForm(props) {
         InputProps: {
           readOnly: f.readOnly ? f.readOnly : false
         },
-        value: _data != undefined ? _data[f.field_name] : '',
+        value: _data !== undefined ? _data[f.field_name] : '',
         onChange: function onChange(e) {
           return handleTextString(e, f.field_name);
         }
       })));
-    } else if (f.type == 'text_number') {
+    } else if (f.type === 'text_number') {
       return /*#__PURE__*/React__default.createElement(core.Grid, {
         key: f.field_name,
         container: true,
@@ -1349,12 +1371,12 @@ function MkForm(props) {
           width: '100%'
         },
         type: "number",
-        value: _data != undefined ? _data[f.field_name] : '',
+        value: _data !== undefined ? _data[f.field_name] : '',
         onChange: function onChange(e) {
           return handleTextNumber(e, f.field_name);
         }
       })));
-    } else if (f.type == 'text_multiline') {
+    } else if (f.type === 'text_multiline') {
       return /*#__PURE__*/React__default.createElement(core.Grid, {
         key: f.field_name,
         container: true,
@@ -1389,13 +1411,13 @@ function MkForm(props) {
         style: {
           width: '100%'
         },
-        value: _data != undefined ? _data[f.field_name] : '',
+        value: _data !== undefined ? _data[f.field_name] : '',
         variant: "outlined",
         onChange: function onChange(e) {
           return handleTextMultiline(e, f.field_name);
         }
       })));
-    } else if (f.type == 'date') {
+    } else if (f.type === 'date') {
       return /*#__PURE__*/React__default.createElement(core.Grid, {
         key: f.field_name,
         container: true,
@@ -1426,7 +1448,7 @@ function MkForm(props) {
         variant: "outlined",
         autoComplete: "off",
         size: "small",
-        value: _data != undefined ? _data[f.field_name] : '',
+        value: _data !== undefined ? _data[f.field_name] : '',
         type: "date",
         style: {
           width: '100%'
@@ -1435,11 +1457,9 @@ function MkForm(props) {
           return handleDate(e, f.field_name);
         }
       })));
-    } else if (f.type == 'dropdown') {
-      if (f.options != undefined && f.option_label_field != undefined) {
-        if (f.field_name == 'priority') {
-          var _React$createElement;
-
+    } else if (f.type === 'dropdown') {
+      if (f.options !== undefined && f.option_label_field !== undefined) {
+        if (f.field_name === 'priority') {
           return /*#__PURE__*/React__default.createElement(core.Grid, {
             key: f.field_name,
             container: true,
@@ -1465,21 +1485,24 @@ function MkForm(props) {
             item: true,
             xs: 12,
             sm: 7
-          }, /*#__PURE__*/React__default.createElement(core.NativeSelect, (_React$createElement = {
-            id: "demo-customized-select-native",
-            value: _data != undefined ? _data[f.field_name] : '',
+          }, /*#__PURE__*/React__default.createElement(core.NativeSelect, {
+            value: _data !== undefined ? _data[f.field_name] : '',
             onChange: function onChange(e) {
               return handleDropDownChange(e, f.field_name);
+            },
+            id: f.field_name,
+            input: /*#__PURE__*/React__default.createElement(BootstrapInput, null),
+            style: {
+              width: '100%'
             }
-          }, _React$createElement["id"] = f.field_name, _React$createElement.input = /*#__PURE__*/React__default.createElement(BootstrapInput, null), _React$createElement.style = {
-            width: '100%'
-          }, _React$createElement), /*#__PURE__*/React__default.createElement("option", {
+          }, /*#__PURE__*/React__default.createElement("option", {
             "aria-label": "None",
             value: ""
           }, "Select"), f.options.map(function (d, i) {
             return /*#__PURE__*/React__default.createElement("option", {
               name: d.name,
-              value: d.id
+              value: d.id,
+              key: d.id
             }, d.name);
           }))));
         } else {
@@ -1522,7 +1545,7 @@ function MkForm(props) {
               width: '100%'
             },
             size: "small",
-            value: _data != undefined ? _data[f.field_name] ? _data[f.field_name] : " " : " ",
+            value: _data !== undefined ? _data[f.field_name] ? _data[f.field_name] : " " : " ",
             filterOptions: function filterOptions(options, params) {
               console.log("Autocomplete", f.can_create);
 
@@ -1531,8 +1554,9 @@ function MkForm(props) {
                 var filtered = filter(options, params);
                 return [].concat(newFilter, filtered);
               } else {
-                var filtered = filter(options, params);
-                return filtered;
+                var _filtered = filter(options, params);
+
+                return _filtered;
               }
             },
             onChange: function onChange(event, newValue) {
@@ -1546,7 +1570,7 @@ function MkForm(props) {
                 };
                 handleCanCreateNew(d);
               } else {
-                if (newValue != null && newValue.inputValue != '' && newValue.product_desc != "") {
+                if (newValue != null && newValue.inputValue !== '' && newValue.product_desc !== "") {
                   onChangeValue(f.field_name, newValue[f.option_label_field]);
                 }
               }
@@ -1559,7 +1583,7 @@ function MkForm(props) {
           })));
         }
       }
-    } else if (f.type == 'photo_list') {
+    } else if (f.type === 'photo_list') {
       console.log('photo_list:', _data);
       return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(core.Grid, {
         key: f.field_name,
@@ -1598,10 +1622,10 @@ function MkForm(props) {
         type: "file",
         name: "imgCollection",
         onChange: function onChange(e) {
-          return onFileChange(e, f.field_name);
+          return onFileChange();
         },
         multiple: true
-      })))))), _data[f.field_name] != undefined && _data[f.field_name].length != 0 ? /*#__PURE__*/React__default.createElement(core.Grid, {
+      })))))), _data[f.field_name] !== undefined && _data[f.field_name].length !== 0 ? /*#__PURE__*/React__default.createElement(core.Grid, {
         key: f.field_name,
         container: true,
         style: {
@@ -1618,10 +1642,10 @@ function MkForm(props) {
           alignItems: 'center',
           marginBottom: '10px'
         }
-      }, /*#__PURE__*/React__default.createElement(GridList, {
+      }, /*#__PURE__*/React__default.createElement(core.GridList, {
         className: classes.gridList
-      }, _data[f.field_name] == undefined ? /*#__PURE__*/React__default.createElement("span", null) : _data[f.field_name].map(function (tile) {
-        return /*#__PURE__*/React__default.createElement(GridListTile, {
+      }, _data[f.field_name] === undefined ? /*#__PURE__*/React__default.createElement("span", null) : _data[f.field_name].map(function (tile) {
+        return /*#__PURE__*/React__default.createElement(core.GridListTile, {
           key: tile,
           style: {
             width: '100px',
@@ -1631,20 +1655,19 @@ function MkForm(props) {
           src: tile,
           alt: tile,
           onClick: function onClick(e) {
-            setSelectedPhoto(tile);
             setOpen(true);
           }
         }));
-      })))), /*#__PURE__*/React__default.createElement(Dialog, {
+      })))), /*#__PURE__*/React__default.createElement(core.Dialog, {
         maxWidth: "lg",
         "aria-labelledby": "customized-dialog-title",
         open: open
-      }, /*#__PURE__*/React__default.createElement(DialogTitle, {
+      }, /*#__PURE__*/React__default.createElement(core.DialogTitle, {
         id: "customized-dialog-title",
         onClose: function onClose(e) {
           return setOpen(false);
         }
-      }, "Photos"), /*#__PURE__*/React__default.createElement(DialogContent, {
+      }, "Photos"), /*#__PURE__*/React__default.createElement(core.DialogContent, {
         dividers: true
       }, /*#__PURE__*/React__default.createElement(core.Grid, {
         item: true,
@@ -1671,7 +1694,7 @@ function MkForm(props) {
           }
         })));
       }) : /*#__PURE__*/React__default.createElement("span", null)))))) : /*#__PURE__*/React__default.createElement(core.Grid, null));
-    } else if (f.type == 'list') {
+    } else if (f.type === 'list') {
       console.log('list', _data[f.field_name]);
       return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(core.Grid, {
         key: f.field_name,
@@ -1720,26 +1743,26 @@ function MkForm(props) {
           alignItems: 'center',
           marginBottom: '10px'
         }
-      }, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(Table, {
+      }, /*#__PURE__*/React__default.createElement(core.TableContainer, null, /*#__PURE__*/React__default.createElement(core.Table, {
         className: classes.table,
         size: "small",
         "aria-label": "a dense table"
-      }, /*#__PURE__*/React__default.createElement(TableHead, null, /*#__PURE__*/React__default.createElement(TableRow, null, partHeaders.map(function (h, i) {
-        return /*#__PURE__*/React__default.createElement(TableCell, {
+      }, /*#__PURE__*/React__default.createElement(core.TableHead, null, /*#__PURE__*/React__default.createElement(core.TableRow, null, partHeaders.map(function (h, i) {
+        return /*#__PURE__*/React__default.createElement(core.TableCell, {
           key: h.id,
           align: "left"
         }, h.label);
-      }))), /*#__PURE__*/React__default.createElement(TableBody, null, _data[f.field_name].length > 0 ? _data[f.field_name].map(function (row) {
-        return /*#__PURE__*/React__default.createElement(TableRow, {
+      }))), /*#__PURE__*/React__default.createElement(core.TableBody, null, _data[f.field_name].length > 0 ? _data[f.field_name].map(function (row) {
+        return /*#__PURE__*/React__default.createElement(core.TableRow, {
           key: row.name
         }, partHeaders.map(function (h, i) {
-          return /*#__PURE__*/React__default.createElement(TableCell, {
+          return /*#__PURE__*/React__default.createElement(core.TableCell, {
             key: h.id,
             align: h.numeric ? 'right' : 'left'
           }, row[h.id]);
         }));
       }) : /*#__PURE__*/React__default.createElement("span", null)))))));
-    } else if (f.type == 'time') {
+    } else if (f.type === 'time') {
       return /*#__PURE__*/React__default.createElement(core.Grid, {
         key: f.field_name,
         container: true,
@@ -1776,9 +1799,6 @@ function MkForm(props) {
         },
         inputProps: {
           step: 300
-        },
-        onChange: function onChange(e) {
-          return handleTime(e, f.field_name);
         }
       })));
     }
@@ -1789,7 +1809,9 @@ function MkForm(props) {
     if (a.status === _data.status) {
       return /*#__PURE__*/React__default.createElement(MButton, {
         action: a,
-        onCallback: a.callback(_data)
+        onCallback: function onCallback(event) {
+          return a.callback(event, _data);
+        }
       });
     }
   })) : /*#__PURE__*/React__default.createElement(core.Grid, null)));
@@ -1849,7 +1871,7 @@ var StyledTableCell = styles.withStyles(function (theme) {
       fontSize: 14
     }
   };
-})(TableCell$1);
+})(TableCell);
 
 function EnhancedTableHead(props) {
   var classes = props.classes,
@@ -1864,7 +1886,7 @@ function EnhancedTableHead(props) {
     };
   };
 
-  return /*#__PURE__*/React__default.createElement(TableHead$1, null, /*#__PURE__*/React__default.createElement(TableRow$1, null, headCells.map(function (headCell) {
+  return /*#__PURE__*/React__default.createElement(TableHead, null, /*#__PURE__*/React__default.createElement(TableRow, null, headCells.map(function (headCell) {
     return /*#__PURE__*/React__default.createElement(StyledTableCell, {
       key: headCell.id,
       align: headCell.numeric ? 'right' : 'left',
@@ -1883,12 +1905,12 @@ function EnhancedTableHead(props) {
     }, headCell.label, _orderBy === headCell.id ? /*#__PURE__*/React__default.createElement("span", {
       className: classes.visuallyHidden
     }, _order === 'desc' ? 'sorted descending' : 'sorted ascending') : null) : /*#__PURE__*/React__default.createElement(TableSortLabel, {
-      hideSortIcon: true,
+      hideSortIcon: "true",
       align: "right"
     }, headCell.label));
   }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     style: {
-      width: '150px'
+      width: '100px'
     }
   })));
 }
@@ -1947,10 +1969,10 @@ var StyledTableRow = styles.withStyles(function (theme) {
       }
     }
   };
-})(TableRow$1);
+})(TableRow);
 
 function getUpdatedDate(p) {
-  var statusDate = p['updated_date'];
+  var statusDate = p.updated_date;
   var day = '';
 
   if (statusDate !== undefined) {
@@ -1995,20 +2017,24 @@ function RowMenu(props) {
     e.stopPropagation();
   };
 
-  return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Menu, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(core.Menu, {
     id: "actions-" + row.id,
     anchorEl: anchorEl,
     keepMounted: true,
     open: Boolean(anchorEl),
     onClose: handleClose
   }, actions.map(function (action) {
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
+    return /*#__PURE__*/React__default.createElement(core.MenuItem, {
       key: action.display_name,
       onClick: function onClick(e) {
         return handleSelectMenu(e, row, action);
       }
     }, action.display_name);
   })), /*#__PURE__*/React__default.createElement(core.Grid, {
+    container: true,
+    direction: "row",
+    justify: "flex-end",
+    alignItems: "center",
     style: {
       display: 'flex'
     }
@@ -2017,12 +2043,18 @@ function RowMenu(props) {
     "aria-label": "more",
     "aria-controls": "long-menu",
     "aria-haspopup": "true",
-    onClick: handleEdit
-  }, /*#__PURE__*/React__default.createElement(EditIcon, null)), /*#__PURE__*/React__default.createElement(core.IconButton, {
+    onClick: handleEdit,
+    size: "small"
+  }, /*#__PURE__*/React__default.createElement(EditIcon, null)), /*#__PURE__*/React__default.createElement(core.Box, {
+    style: {
+      width: '10px'
+    }
+  }), /*#__PURE__*/React__default.createElement(core.IconButton, {
     id: "dropdown-" + row.id,
     "aria-label": "more",
     "aria-controls": "long-menu",
     "aria-haspopup": "true",
+    size: "small",
     onClick: handleMenuClick
   }, /*#__PURE__*/React__default.createElement(ExpandMore, null))));
 }
@@ -2031,7 +2063,6 @@ RowMenu.propTypes = {
   row: propTypes.object.isRequired,
   actions: propTypes.array.isRequired,
   onSelectedAction: propTypes.func.isRequired,
-  showEdit: propTypes.bool,
   onRowEdit: propTypes.func
 };
 
@@ -2055,17 +2086,17 @@ function ConfirmDialog(props) {
     onContinue(true);
   };
 
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Dialog, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(core.Dialog, {
     open: open,
     onClose: handleClose,
     "aria-labelledby": "alert-dialog-title",
     "aria-describedby": "alert-dialog-description"
-  }, /*#__PURE__*/React__default.createElement(DialogTitle, {
+  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, {
     id: "alert-dialog-title"
-  }, "Delete this " + type + ' "' + itemName + '"?'), /*#__PURE__*/React__default.createElement(DialogActions, null, /*#__PURE__*/React__default.createElement(Button, {
+  }, "Delete this " + type + ' "' + itemName + '"?'), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     onClick: handleClose,
     color: "primary"
-  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(core.Button, {
     onClick: handleContinue,
     color: "primary",
     autoFocus: true
@@ -2102,7 +2133,9 @@ function MkTable(props) {
       onChangePaginatePage = props.onChangePaginatePage,
       onGetData = props.onGetData,
       onUpdateDataRow = props.onUpdateDataRow,
-      onChangeRowPerPage = props.onChangeRowPerPage;
+      onChangeRowPerPage = props.onChangeRowPerPage,
+      _props$dense = props.dense,
+      dense = _props$dense === void 0 ? true : _props$dense;
 
   var _React$useState3 = React__default.useState(rowsPerPage),
       _rowsPerPage = _React$useState3[0],
@@ -2113,6 +2146,7 @@ function MkTable(props) {
       setPage = _React$useState4[1];
 
   var _React$useState5 = React__default.useState(noMoreToLoad),
+      _noMoreToLoad = _React$useState5[0],
       setNoMoreToLoad = _React$useState5[1];
 
   var _React$useState6 = React__default.useState(order),
@@ -2124,12 +2158,29 @@ function MkTable(props) {
       setOrderBy = _React$useState7[1];
 
   var _React$useState8 = React__default.useState(isLoading),
+      _isLoading = _React$useState8[0],
       setIsLoading = _React$useState8[1];
 
   var _React$useState9 = React__default.useState(false),
       _isConfirm = _React$useState9[0],
       setIsConfirm = _React$useState9[1];
 
+  var _React$useState10 = React__default.useState(''),
+      itemName = _React$useState10[0],
+      setItemName = _React$useState10[1];
+
+  var _React$useState11 = React__default.useState({}),
+      row = _React$useState11[0],
+      setRow = _React$useState11[1];
+
+  var _React$useState12 = React__default.useState(''),
+      action = _React$useState12[0],
+      setAction = _React$useState12[1];
+
+  var _React$useState13 = React__default.useState(dense),
+      _dense = _React$useState13[0],
+      setDense = _React$useState13[1];
+
   var handleSelectMenu = function handleSelectMenu(row, action) {
     if (action === 'delete') {
       setItemName(row.name === undefined ? row.product_desc : row.name);
@@ -2162,6 +2213,7 @@ function MkTable(props) {
     setOrderBy(orderBy);
     setIsLoading(isLoading);
     setRowsPerPage(rowsPerPage);
+    setDense(dense);
   }, []);
 
   var handleRequestSort = function handleRequestSort(event, property) {
@@ -2171,7 +2223,7 @@ function MkTable(props) {
   };
 
   var handleChangePage = function handleChangePage(event, newPage) {
-    if (!noMoreToLoad && (newPage + 1) * _rowsPerPage >= data.length) {
+    if (!_noMoreToLoad && (newPage + 1) * _rowsPerPage >= data.length) {
       onGetData();
     }
 
@@ -2190,10 +2242,10 @@ function MkTable(props) {
     container: true
   }, /*#__PURE__*/React__default.createElement(core.Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(TableContainer$1, null, /*#__PURE__*/React__default.createElement(Table$1, {
+  }, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(Table, {
     className: classes.table,
     "aria-labelledby": "tableTitle",
-    size: "small",
+    size: _dense ? 'small' : 'medium',
     "aria-label": "enhanced table"
   }, /*#__PURE__*/React__default.createElement(EnhancedTableHead, {
     classes: classes,
@@ -2203,7 +2255,7 @@ function MkTable(props) {
     onRequestSort: handleRequestSort,
     rowCount: data.length !== undefined ? data.length : 0,
     dispatch: dispatch
-  }), /*#__PURE__*/React__default.createElement(TableBody$1, null, isLoading ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(TableCell$1, {
+  }), /*#__PURE__*/React__default.createElement(TableBody, null, _isLoading ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(TableCell, {
     colSpan: headers.length,
     align: "center"
   }, " ", /*#__PURE__*/React__default.createElement(CircularProgress, null))) : data.length !== 0 ? stableSort(data, getComparator(_order, _orderBy)).slice(_page * _rowsPerPage, _page * _rowsPerPage + _rowsPerPage).map(function (row, index) {
@@ -2215,7 +2267,7 @@ function MkTable(props) {
       id: row.id
     }, headers.map(function (h, i) {
       if (h.id === 'sr') {
-        return /*#__PURE__*/React__default.createElement(TableCell$1, {
+        return /*#__PURE__*/React__default.createElement(TableCell, {
           key: h.id,
           align: "right",
           style: {
@@ -2225,51 +2277,53 @@ function MkTable(props) {
       }
 
       if (h.id === 'status') {
-        return /*#__PURE__*/React__default.createElement(TableCell$1, {
+        return /*#__PURE__*/React__default.createElement(TableCell, {
           key: h.id,
           align: h.numeric ? 'right' : 'left'
         }, row[h.id]);
       }
 
       if (h.id === 'updated_date') {
-        return /*#__PURE__*/React__default.createElement(TableCell$1, {
+        return /*#__PURE__*/React__default.createElement(TableCell, {
           key: h.id,
           align: h.numeric ? 'right' : 'left',
           style: {
-            width: h.width
+            width: h.width ? h.width : null
           }
         }, getUpdatedDate(row));
       } else {
-        return /*#__PURE__*/React__default.createElement(TableCell$1, {
+        return /*#__PURE__*/React__default.createElement(TableCell, {
           key: h.id,
           align: h.numeric ? 'right' : 'left',
           style: {
-            width: h.width
+            width: h.width ? h.width : null
           }
         }, row[h.id]);
       }
-    }), actions ? /*#__PURE__*/React__default.createElement(TableCell$1, {
+    }), actions ? /*#__PURE__*/React__default.createElement(TableCell, {
       style: {
         width: '150px'
-      }
+      },
+      align: "right"
     }, /*#__PURE__*/React__default.createElement(RowMenu, {
       actions: actions,
       row: row,
-      showEdit: true,
       onRowEdit: function onRowEdit(data) {
         return handleRowEdit(data);
       },
       onSelectedAction: function onSelectedAction(data, actionName) {
         return handleSelectMenu(data, actionName);
       }
-    })) : /*#__PURE__*/React__default.createElement(TableCell$1, {
+    })) : /*#__PURE__*/React__default.createElement(TableCell, {
       style: {
         width: '150px'
-      }
+      },
+      align: "right"
     }, /*#__PURE__*/React__default.createElement(core.IconButton, {
       onClick: function onClick(event) {
         return handleRowEdit(row);
-      }
+      },
+      size: dense ? "small" : "medium"
     }, /*#__PURE__*/React__default.createElement(EditIcon, null))));
   }) : /*#__PURE__*/React__default.createElement(StyledTableRow, {
     style: {
@@ -2278,6 +2332,10 @@ function MkTable(props) {
   })))), /*#__PURE__*/React__default.createElement(TablePagination, {
     rowsPerPageOptions: [10, 30, 50],
     labelDisplayedRows: function labelDisplayedRows(_ref) {
+      var from = _ref.from,
+          to = _ref.to,
+          count = _ref.count;
+      console.log(from, to, count);
     },
     component: "div",
     count: data.length,
@@ -2314,13 +2372,12 @@ MkTable.propTypes = {
   isLoading: propTypes.any,
   onChangePaginatePage: propTypes.any,
   onGetData: propTypes.any,
-  onChangeRowPerPage: propTypes.any
+  onChangeRowPerPage: propTypes.any,
+  dense: propTypes.any
 };
 
 var useStyles$2 = styles.makeStyles(function (theme) {
-  var _button, _ref;
-
-  return _ref = {
+  return {
     root: {
       width: '100%'
     },
@@ -2350,9 +2407,11 @@ var useStyles$2 = styles.makeStyles(function (theme) {
         borderBottom: "none"
       }
     },
-    button: (_button = {
-      color: 'white'
-    }, _button["color"] = theme.palette.primary.main, _button.width = 150, _button.height = 55, _button),
+    button: {
+      color: 'white',
+      width: 150,
+      height: 55
+    },
     closeButton: {
       position: 'absolute',
       right: theme.spacing(1),
@@ -2365,11 +2424,7 @@ var useStyles$2 = styles.makeStyles(function (theme) {
       color: theme.palette.primary.main,
       fontWeight: "bold"
     }
-  }, _ref["paper"] = {
-    padding: theme.spacing(2),
-    textAlign: 'center',
-    color: theme.palette.text.secondary
-  }, _ref;
+  };
 });
 
 function getDataString(data, fieldName) {
@@ -2386,23 +2441,14 @@ function MkInfo(props) {
       currentTabName = props.currentTabName,
       actions = props.actions;
 
-  var _React$useState = React__default.useState(isEditable != undefined ? isEditable : true),
+  var _React$useState = React__default.useState(isEditable !== undefined ? isEditable : true),
       editable = _React$useState[0],
       setEditable = _React$useState[1];
 
-  var _React$useState2 = React__default.useState({}),
-      data = _React$useState2[0],
-      setData = _React$useState2[1];
-
   var handleEdit = function handleEdit() {
     setEditable(false);
   };
 
-  var handleUpdateData = function handleUpdateData(data) {
-    console.log('handle update date:', data);
-    setData(data);
-  };
-
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.root
   }, isNew ? /*#__PURE__*/React__default.createElement(core.Grid, {
@@ -2414,14 +2460,7 @@ function MkInfo(props) {
     item: true,
     xs: 12,
     sm: 7
-  }, /*#__PURE__*/React__default.createElement(MkForm, {
-    updateData: infoData,
-    fields: displayFields,
-    isNew: isNew,
-    onDataCallback: function onDataCallback(d) {
-      return handleUpdateData(d);
-    }
-  }))) : /*#__PURE__*/React__default.createElement(core.Grid, {
+  })) : /*#__PURE__*/React__default.createElement(core.Grid, {
     container: true,
     style: {
       marginTop: '30px'
@@ -2430,16 +2469,12 @@ function MkInfo(props) {
     item: true,
     xs: 12,
     sm: 7
-  }, !editable ? /*#__PURE__*/React__default.createElement(MkForm, {
-    fields: displayFields,
-    isNew: isNew,
-    updateData: infoData,
-    onDataCallback: function onDataCallback(d) {
-      return handleUpdateData(d);
-    }
-  }) : displayFields.map(function (d, i) {
+  }, !editable ?
+  /*#__PURE__*/
+  React__default.createElement("div", null) : displayFields.map(function (d, i) {
     return /*#__PURE__*/React__default.createElement(core.Grid, {
-      container: true
+      container: true,
+      key: i
     }, /*#__PURE__*/React__default.createElement(core.Grid, {
       item: true,
       xs: 12,
@@ -2465,18 +2500,13 @@ function MkInfo(props) {
       item: true,
       xs: 12,
       sm: 7
-    }, d.type == 'photo' ? /*#__PURE__*/React__default.createElement("img", {
-      src: infoData['photo_url'],
-      style: {
-        width: '120px',
-        height: '120px',
-        border: '1px solid grey'
-      }
-    }) : /*#__PURE__*/React__default.createElement(core.Typography, {
+    }, d.type === 'photo' ? /*#__PURE__*/React__default.createElement("img", null) :
+    /*#__PURE__*/
+    React__default.createElement(core.Typography, {
       style: {
         paddingRight: '30px'
       }
-    }, infoData != undefined ? getDataString(infoData, d.fieldName) : ''))));
+    }, infoData !== undefined ? getDataString(infoData, d.fieldName) : ''))));
   })), /*#__PURE__*/React__default.createElement(core.Grid, {
     item: true,
     xs: 12,
@@ -2486,50 +2516,41 @@ function MkInfo(props) {
     direction: "row",
     alignItems: "flex-end"
   }, actions.map(function (a, i) {
-    if (currentTabName == 'account') {
-      if (infoData.status == 'invited') {
+    if (currentTabName === 'account') {
+      if (infoData.status === 'invited') {
         return /*#__PURE__*/React__default.createElement(core.Box, null, /*#__PURE__*/React__default.createElement(core.Button, {
           style: {
             color: 'white',
             backgroundColor: 'grey',
             "float": 'right',
             marginLeft: '10px'
-          },
-          onClick: function onClick() {
-            return a.callback(data);
           }
         }, a.label));
       }
 
-      if (infoData.status == 'joined') {
+      if (infoData.status === 'joined') {
         return /*#__PURE__*/React__default.createElement(core.Box, null, /*#__PURE__*/React__default.createElement(core.Button, {
           style: {
             color: 'white',
             backgroundColor: 'grey',
             "float": 'right',
             marginLeft: '10px'
-          },
-          onClick: function onClick() {
-            return a.callback(data);
           }
         }, a.label));
       }
 
-      if (infoData.status == 'disabled') {
+      if (infoData.status === 'disabled') {
         return /*#__PURE__*/React__default.createElement(core.Box, null, /*#__PURE__*/React__default.createElement(core.Button, {
           style: {
             color: 'white',
             backgroundColor: 'grey',
             "float": 'right',
             marginLeft: '10px'
-          },
-          onClick: function onClick() {
-            return a.callback(data);
           }
         }, a.label));
       }
 
-      if (infoData.status == 'requested') {
+      if (infoData.status === 'requested') {
         if (editable) {
           return /*#__PURE__*/React__default.createElement(core.Box, null, /*#__PURE__*/React__default.createElement(core.Button, {
             style: {
@@ -2544,16 +2565,13 @@ function MkInfo(props) {
               backgroundColor: 'grey',
               "float": 'right',
               marginLeft: '10px'
-            },
-            onClick: function onClick() {
-              return a.callback(data);
             }
           }, a.label));
         }
       }
     } else {
       if (editable) {
-        if (a.action_type == 'edit') {
+        if (a.action_type === 'edit') {
           console.log('type: ', a.action_type, 'editable: ', editable);
           return /*#__PURE__*/React__default.createElement(core.Box, null, /*#__PURE__*/React__default.createElement(core.Button, {
             style: {
@@ -2563,37 +2581,28 @@ function MkInfo(props) {
           }, a.icon, a.label));
         }
 
-        if (a.action_type == 'delete') {
+        if (a.action_type === 'delete') {
           return /*#__PURE__*/React__default.createElement(core.Box, null, /*#__PURE__*/React__default.createElement(core.Button, {
             style: {
               "float": 'right',
               marginLeft: '10px'
-            },
-            onClick: function onClick() {
-              return a.callback(data);
             }
           }, a.icon, a.label));
         }
       } else {
-        if (a.action_type == 'save') {
+        if (a.action_type === 'save') {
           return /*#__PURE__*/React__default.createElement(core.Box, null, /*#__PURE__*/React__default.createElement(core.Button, {
             style: {
               marginLeft: '10px'
-            },
-            onClick: function onClick() {
-              return a.callback(data);
             }
           }, a.icon, a.label));
         }
 
-        if (a.action_type == 'cancel') {
+        if (a.action_type === 'cancel') {
           return /*#__PURE__*/React__default.createElement(core.Box, null, /*#__PURE__*/React__default.createElement(core.Button, {
             style: {
               "float": 'right',
               marginLeft: '10px'
-            },
-            onClick: function onClick() {
-              return a.callback(data);
             }
           }, a.icon, a.label));
         }

example/src/App.js

@@ -1,154 +1,14 @@
-import React from 'react'
-
-import { List, MkForm, TableTemplate, InfoPage } from '@mokkon/reactjs'
+import React from 'react';
 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 './components/ResponsiveDrawer';
 
 const App = () => {
-  const pediatricians = [
-    'Michael Lopez',
-    'Sally Tran',
-    'Brian Lu',
-    'Troy Sakulbulwanthana',
-    'Lisa Wellington',
-  ]
-
-  const psychiatrists = [
-    'Miguel Rodriduez',
-    'Cassady Campbell',
-    'Mike Torrence',
-  ]
-
-  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", options: [
-        { name: 'Name1' }, { name: 'Name2' }, { name: 'Name3' }, { name: 'Name4' }
-      ]
-    },
-    // { type: 'checkbox', label: 'Customer Name', field_name: 'customer_name', checkboxList: [{'label': },{}] },
-  ];
-
-  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 headCells = [
-    { id: 'id', numeric: true, disablePadding: false, label: 'No.' },
-    { id: 'name', numeric: true, disablePadding: false, label: 'Name' },
-  ];
-
-  const handleUpdate = (data) => {
-    console.log('update data :', data);
-  }
-
-  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);
-  }
-
-  const handleOnActions = (data) => {
-    console.log('handleOnActions :', 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": "approve member", "action_type": "approve_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" },
-
-  ];
-  var tableData = [data];
 
   return <div>
     <div className="root">
-      {/* <div className="listContainer">
-        <List groupName="Pediatricians" members={pediatricians} />
-      </div>
-      <div className="listContainer">
-        <List groupName="Psychiatrists" members={psychiatrists} />
-      </div> */}
-
-      {/*field list */}
       <ResponsiveDrawer></ResponsiveDrawer>
-      {/* <div className="listContainer">
-        <Typography variant='h3'>Fields</Typography>
-        <Grid container>
-          <Grid item xs={12}>
-            <MkForm
-              fields={fields}
-              updateData={data}
-              buttonColor={'#f05f40'}
-              currentTabName={'account'}
-              isNew={true}
-              actions={actions}
-            ></MkForm>
-          </Grid>
-        </Grid>
-      </div> */}
-
-      {/*info page */}
-      {/* <div className="listContainer">
-        <Grid container>
-          <Grid item xs={12} sm={6}>
-            <InfoPage
-              displayFields={fields}
-              updateData={data}
-              buttonColor={'#f05f40'}
-              actions={actions}
-            // onUpdate={() => console.log('on update')}
-            // onCancel={() => console.log('on cancel')}
-            // onApproved={() => console.log('on approved')}
-            // onCreate={() => console.log('on create')}
-            // onInvite={() => console.log('on invite')}
-            ></InfoPage>
-          </Grid>
-        </Grid>
-      </div> */}
-
-      {/*table template */}
-      {/* <div className="listContainer">
-        <TableTemplate
-          headers={headCells}
-          data={tableData}
-          page={0}
-          rowsPerPage={10}
-          order={'asc'}
-          orderBy={'name'}
-          onUpdateData={(value, data) => console.log('table update data')}
-          onReloadData={() => console.log('table reload data')}
-          onChangeRowsPerPage={(v) => console.log('table change row per page')}
-          onChangePage={(page) => console.log('table change page')}
-        ></TableTemplate>
-      </div> */}
-    </div>  </div>
+    </div>
+  </div>
 }
 
 export default App

example/src/components/MkFormPage.js

@@ -2,13 +2,22 @@ import React from 'react'
 
 import { MkForm } from '@mokkon/reactjs'
 import '@mokkon/reactjs/dist/index.css'
-import { Grid, Typography } from '@material-ui/core'
+import { Button, Dialog, DialogContent, DialogTitle, Grid } 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 [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
 
   const fields = [
     { type: 'text_string', label: 'Name', field_name: 'name' },
@@ -36,14 +45,17 @@ const MkFormPage = () => {
 
   const handleDelete = (e, data) => {
     console.log('delete data :', data);
+    setOpen(false);
   }
 
   const handleSave = (e, data) => {
     console.log('save data :', data);
+    setOpen(false);
   }
 
   const handleCancel = (e, data) => {
     console.log('cancel data :', data);
+    setOpen(false);
   }
 
   var actions = [
@@ -61,19 +73,49 @@ const MkFormPage = () => {
 
   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 container>
+        <Grid item xs={12}>
+          <MkForm
+            fields={fields}
+            data={data}
+            buttonColor={'#f05f40'}
+            actions={actions}
+            onDropdownCreateNew={(data) => { console.log(data) }}
+          ></MkForm>
         </Grid>
-      </div>
+      </Grid>
+      <Grid container
+        direction="row"
+        justify="center"
+        alignItems="center" >
+        <Grid item xs={12}>
+          <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+            Open alert dialog with MkForm
+          </Button>
+          <Dialog
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+          >
+            <DialogTitle id="alert-dialog-title">{"Mokkon MkForm"}</DialogTitle>
+            <DialogContent>
+              <Grid container>
+                <Grid item xs={12}>
+                  <MkForm
+                    fields={fields}
+                    data={data}
+                    buttonColor={'#f05f40'}
+                    actions={actions}
+                    onDropdownCreateNew={(data) => { console.log(data) }}
+                  ></MkForm>
+                </Grid>
+              </Grid>
+            </DialogContent>
+          </Dialog>
+        </Grid>
+      </Grid>
+
     </div>
   );
 }

example/src/components/MkTablePage.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { MkTable } from '@mokkon/reactjs'
 import '@mokkon/reactjs/dist/index.css';
+import { Grid } from '@material-ui/core';
+import theme from '../theme';
 
 function createData(name, calories, fat, carbs, protein) {
   return { name, calories, fat, carbs, protein };
@@ -26,52 +28,12 @@ const MkTablePage = (props) => {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
-  const data = {
-    delete_time: 0,
-    name: "Vendor 13",
-    address: "address",
-    id: 'qwerty',
-    update_time: 1610341578878,
-    updated_by: "Nine Nine",
-    updated_by_id: "kShMtHkcwTNjwm-lfzSBvAzdSo1J8dIpAz6_Ct85HPg",
-    // status: 'joined'
-  }
-
-  const _data = {
-    delete_time: 0,
-    id: 'asdfg',
-    name: "Vendor",
-    address: "address",
-    update_time: 1610341578878,
-    updated_by: "Nine Nine",
-    updated_by_id: "kShMtHkcwTNjwm-lfzSBvAzdSo1J8dIpAz6_Ct85HPg",
-    // status: 'joined'
-  }
-
   const headCells = [
-    { id: 'sr', numeric: true, disablePadding: false, label: 'No.', width: '15px' },
-    { id: 'name', numeric: false, disablePadding: false, label: 'Name', width: '15px' },
+    { id: 'sr', numeric: true, disablePadding: false, label: 'No.' },
+    { id: 'name', numeric: false, disablePadding: false, label: 'Name', width: '200px' },
   ];
 
-  const handleUpdate = (data) => {
-    console.log('update data :', data);
-  }
-
-  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);
-  }
-
-  const handleOnActions = (data) => {
-    console.log('handleOnActions :', data);
-  }
+  var actions = [{ "action_name": "delete", "display_name": "Delete", }];
 
   const handleChangePaginatePage = (v) => {
     setPage(v);
@@ -83,25 +45,30 @@ const MkTablePage = (props) => {
     console.log('handleRowPerPage :', v);
   }
 
-  return <div>
+  return (
     <div className="root">
       {/*table template */}
-      <div className="listContainer">
-        <MkTable
-          headers={headCells}
-          data={rows}
-          page={page}
-          rowsPerPage={rowsPerPage}
-          order={'asc'}
-          orderBy={'name'}
-          noMoreToLoad= {true}
-          onUpdateDataRow={(d) => { console.log('onUpdateDataRow: ', d) }}
-          onChangePaginatePage={(newPage) => { handleChangePaginatePage(newPage) }}
-          onGetData={() => { }}
-          onChangeRowPerPage={(rowPerPage) => { handleRowPerPage(rowPerPage) }}
-        ></MkTable>
-      </div>
-    </div>  </div>
+      <Grid container>
+        <Grid item xs={8}>
+          <MkTable
+            theme={theme}
+            headers={headCells}
+            data={rows}
+            page={page}
+            rowsPerPage={rowsPerPage}
+            order={'asc'}
+            orderBy={'name'}
+            actions={actions}
+            noMoreToLoad={true}
+            onUpdateDataRow={(d) => { console.log('onUpdateDataRow: ', d) }}
+            onChangePaginatePage={(newPage) => { handleChangePaginatePage(newPage) }}
+            onGetData={() => { }}
+            onChangeRowPerPage={(rowPerPage) => { handleRowPerPage(rowPerPage) }}
+          ></MkTable>
+        </Grid>
+
+      </Grid>
+    </div>);
 }
 
 export default (MkTablePage);

example/src/components/ResponsiveDrawer.js

@@ -6,12 +6,9 @@ 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';

example/src/components/WelcomPage.js

@@ -4,7 +4,6 @@ import React from 'react';
 class WelcomePage extends React.Component {
 
     render() {
-        const { t, setting } = this.props;
         return (
             <div>
                 <Typography variant="h3">Welcome !</Typography>

src/MDropdown/MDropdown.js

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
     Box,
-    Button
+    Grid,
+    Typography,
+    NativeSelect
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -26,17 +28,16 @@ function MDropdown(props) {
                 </Grid>
                 <Grid item xs={12} sm={7}>
                     <NativeSelect
-                        id="demo-customized-select-native"
-                        value={data != undefined ? data[fieldId] : ''}
+                        // value={data !== undefined ? data[fieldId] : ''}
                         // onChange={(e) => handleDropDownChange(e, field.fieldName)}
                         id={field.fieldName}
-                        input={<BootstrapInput />}
+                        // input={<BootstrapInput />}
                         style={{ width: '100%' }}
                     >
                         <option aria-label="None" value="" >Select</option>
                         {field.options.map((d, i) => {
-                            var name = d[field.fieldName] != undefined ? d[field.fieldName] : d.name;
-                            return <option name={name} value={d.id}>{name}</option>;
+                            var name = d[field.fieldName] !== undefined ? d[field.fieldName] : d.name;
+                            return (<option name={name} value={d.id} key={d.id}>{name}</option>);
                         })}
                     </NativeSelect>
                 </Grid>

src/MkForm/MkForm.js

@@ -7,8 +7,20 @@ import {
     Button,
     NativeSelect,
     Box,
-    Typography
+    Typography,
+    GridList,
+    GridListTile,
+    TableContainer,
+    Table,
+    TableHead,
+    TableRow,
+    TableBody,
+    TableCell,
+    Dialog,
+    DialogTitle,
+    DialogContent,
 } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
 
@@ -85,8 +97,9 @@ function MButton(props) {
     const classes = useStyles();
     const { action, onCallback } = props;
 
-    const handleAction = () => {
-        onCallback();
+    const handleAction = (e) => {
+        e.preventDefault();
+        onCallback(e);
     }
 
     return (
@@ -94,7 +107,7 @@ function MButton(props) {
             <Box>
                 <Button
                     variant="contained" style={{ float: 'right', margin: "5px" }}
-                    onClick={(e) => { handleAction }}
+                    onClick={(e) => handleAction(e)}
                 >{action.icon}{action.label}</Button>
             </Box>
         </div>
@@ -103,8 +116,8 @@ function MButton(props) {
 
 MButton.propTypes = {
     history: PropTypes.object,
-    action: PropTypes.object,
-    onCallback: PropTypes.func
+    action: PropTypes.object.isRequired,
+    onCallback: PropTypes.func.isRequired
 };
 
 
@@ -116,8 +129,12 @@ function MkForm(props) {
         data = {},
         onDropdownCreateNew,
         actions = [],
+        partHeaders
     } = props;
-    const [_data, setDataField] = React.useState(data != undefined ? data : {});
+    const [_data, setDataField] = React.useState(data !== undefined ? data : {});
+    const [open, setOpen] = React.useState(false);
+    // const [imgCollection, setImageCollection] = React.useState([]);
+    const [selectedPhoto, setSelectedPhoto] = React.useState("#");
 
     const handleTextString = (e, fieldName) => {
         setDataField({ ..._data, [fieldName]: e.target.value });
@@ -144,17 +161,17 @@ function MkForm(props) {
         setDataField({ ..._data, [fieldName]: selectedValue, [fieldId]: e.target.value });
     }
 
-    const handleImgUpload = (e, fieldName) => {
-        e.preventDefault();
-        let reader = new FileReader();
-        let file = e.target.files[0];
+    // const handleImgUpload = (e, fieldName) => {
+    //     e.preventDefault();
+    //     let reader = new FileReader();
+    //     let file = e.target.files[0];
 
-        reader.onloadend = () => {
-            setImgPreviewPath(reader.result);
-        }
-        reader.readAsDataURL(file);
-        setDataField({ ..._data, [fieldName]: e.target.files[0].name });
-    }
+    //     reader.onloadend = () => {
+    //         setImgPreviewPath(reader.result);
+    //     }
+    //     reader.readAsDataURL(file);
+    //     setDataField({ ..._data, [fieldName]: e.target.files[0].name });
+    // }
 
     const handleCanCreateNew = (data) => {
         onDropdownCreateNew(data);
@@ -164,13 +181,21 @@ function MkForm(props) {
         setDataField({ ..._data, [fieldName]: value });
     }
 
+    const onFileChange = (e, f) => {
+
+    }
+
+    const handleSelectItemDialog = () => {
+
+    }
+
     return (
         <div className={classes.root}>
             <Grid container>
                 <Grid item xs={12}>
                     {fields.map((f, i) => {
 
-                        if (f.type == 'text_string') {
+                        if (f.type === 'text_string') {
                             return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
@@ -181,18 +206,18 @@ function MkForm(props) {
                                     <TextField id={f.field_name}
                                         variant="outlined"
                                         autoComplete="off"
-                                        size={"small"}
+                                        size="small"
                                         style={{ width: '100%' }}
                                         InputProps={{
                                             readOnly: f.readOnly ? f.readOnly : false,
                                         }}
-                                        value={_data != undefined ? _data[f.field_name] : ''}
+                                        value={_data !== undefined ? _data[f.field_name] : ''}
                                         onChange={(e) => handleTextString(e, f.field_name)}
                                     />
                                 </Grid>
                             </Grid>;
                         }
-                        else if (f.type == 'text_number') {
+                        else if (f.type === 'text_number') {
                             return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
@@ -204,16 +229,16 @@ function MkForm(props) {
                                         id={f.field_name}
                                         variant="outlined"
                                         autoComplete="off"
-                                        size={"small"}
+                                        size="small"
                                         style={{ width: '100%' }}
                                         type="number"
-                                        value={_data != undefined ? _data[f.field_name] : ''}
+                                        value={_data !== undefined ? _data[f.field_name] : ''}
                                         onChange={(e) => handleTextNumber(e, f.field_name)}
                                     />
                                 </Grid>
                             </Grid>;
                         }
-                        else if (f.type == 'text_multiline') {
+                        else if (f.type === 'text_multiline') {
                             return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
@@ -226,16 +251,16 @@ function MkForm(props) {
                                         multiline
                                         autoComplete="off"
                                         rows={3}
-                                        size={"small"}
+                                        size="small"
                                         style={{ width: '100%' }}
-                                        value={_data != undefined ? _data[f.field_name] : ''}
+                                        value={_data !== undefined ? _data[f.field_name] : ''}
                                         variant="outlined"
                                         onChange={(e) => handleTextMultiline(e, f.field_name)}
                                     />
                                 </Grid>
                             </Grid>;
                         }
-                        else if (f.type == 'date') {
+                        else if (f.type === 'date') {
                             return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
@@ -247,8 +272,8 @@ function MkForm(props) {
                                         id={f.field_name}
                                         variant="outlined"
                                         autoComplete="off"
-                                        size={"small"}
-                                        value={_data != undefined ? _data[f.field_name] : ''}
+                                        size="small"
+                                        value={_data !== undefined ? _data[f.field_name] : ''}
                                         type="date"
                                         style={{ width: '100%' }}
                                         onChange={(e) => handleDate(e, f.field_name)}
@@ -256,9 +281,9 @@ function MkForm(props) {
                                 </Grid>
                             </Grid>;
                         }
-                        else if (f.type == 'dropdown') {
-                            if (f.options != undefined && f.option_label_field != undefined) {
-                                if (f.field_name == 'priority') {
+                        else if (f.type === 'dropdown') {
+                            if (f.options !== undefined && f.option_label_field !== undefined) {
+                                if (f.field_name === 'priority') {
 
                                     return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                         <Grid item xs={12} sm={5}>
@@ -268,8 +293,7 @@ function MkForm(props) {
                                         </Grid>
                                         <Grid item xs={12} sm={7}>
                                             <NativeSelect
-                                                id="demo-customized-select-native"
-                                                value={_data != undefined ? _data[f.field_name] : ''}
+                                                value={_data !== undefined ? _data[f.field_name] : ''}
                                                 onChange={(e) => handleDropDownChange(e, f.field_name)}
                                                 id={f.field_name}
                                                 input={<BootstrapInput />}
@@ -277,7 +301,7 @@ function MkForm(props) {
                                             >
                                                 <option aria-label="None" value="" >Select</option>
                                                 {f.options.map((d, i) => {
-                                                    return <option name={d.name} value={d.id}>{d.name}</option>;
+                                                    return (<option name={d.name} value={d.id} key={d.id}>{d.name}</option>);
                                                 })}
                                             </NativeSelect>
                                         </Grid>
@@ -301,7 +325,7 @@ function MkForm(props) {
                                                 }}
                                                 style={{ width: '100%' }}
                                                 size='small'
-                                                value={_data != undefined ? _data[f.field_name] ? _data[f.field_name] : " " : " "}
+                                                value={_data !== undefined ? _data[f.field_name] ? _data[f.field_name] : " " : " "}
                                                 filterOptions={(options, params) => {
                                                     console.log("Autocomplete", f.can_create);
                                                     if (f.can_create) {
@@ -309,8 +333,8 @@ function MkForm(props) {
                                                         var filtered = filter(options, params);
                                                         return [...newFilter, ...filtered];
                                                     } else {
-                                                        var filtered = filter(options, params);
-                                                        return filtered;
+                                                        var _filtered = filter(options, params);
+                                                        return _filtered;
                                                     }
                                                 }}
                                                 onChange={(event, newValue) => {
@@ -324,7 +348,7 @@ function MkForm(props) {
                                                         }
                                                         handleCanCreateNew(d);
                                                     } else {
-                                                        if (newValue != null && newValue.inputValue != '' && newValue.product_desc != "") {
+                                                        if (newValue != null && newValue.inputValue !== '' && newValue.product_desc !== "") {
                                                             onChangeValue(f.field_name, newValue[f.option_label_field]);
                                                         }
                                                     }
@@ -338,7 +362,7 @@ function MkForm(props) {
                                 }
                             }
                         }
-                        else if (f.type == 'photo_list') {
+                        else if (f.type === 'photo_list') {
                             console.log('photo_list:', _data);
                             return <div>
                                 <Grid
@@ -354,23 +378,24 @@ function MkForm(props) {
                                             <form>
                                                 <div className="form-group">
                                                     <input type="file" name="imgCollection"
-                                                        onChange={(e) => onFileChange(e, f.field_name)} multiple />
+                                                        onChange={(e) => onFileChange(e, f.field_name)}
+                                                        multiple />
                                                 </div>
                                             </form>
                                         </div>
                                     </Grid>
                                 </Grid>
-                                {_data[f.field_name] != undefined && _data[f.field_name].length != 0 ?
+                                {_data[f.field_name] !== undefined && _data[f.field_name].length !== 0 ?
                                     <Grid
                                         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.field_name] == undefined ? <span /> : _data[f.field_name].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);
+                                                                // setSelectedPhoto(tile);
                                                                 setOpen(true);
                                                             }
                                                             } />
@@ -400,10 +425,10 @@ function MkForm(props) {
                                             </DialogContent>
                                         </Dialog>
                                     </Grid>
-                                    : <Grid></Grid>}
+                                    : <Grid />}
                             </div>;
                         }
-                        else if (f.type == 'list') {
+                        else if (f.type === 'list') {
                             console.log('list', _data[f.field_name]);
                             return <div>
                                 <Grid
@@ -453,7 +478,7 @@ function MkForm(props) {
                                 </Grid>
                             </div>;
                         }
-                        else if (f.type == 'time') {
+                        else if (f.type === 'time') {
                             return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                 <Grid item xs={12} sm={5}>
                                     <Box style={{ width: '150px' }}>
@@ -472,7 +497,7 @@ function MkForm(props) {
                                     inputProps={{
                                         step: 300, // 5 min
                                     }}
-                                    onChange={(e) => handleTime(e, f.field_name)}
+                                // onChange={(e) => handleTime(e, f.field_name)}
                                 />
                                 </Grid>
                             </Grid>;
@@ -486,7 +511,7 @@ function MkForm(props) {
                     <Grid item xs={12}>
                         {actions.map((a) => {
                             if (a.status === _data.status) {
-                                return <MButton action={a} onCallback={a.callback(_data)}></MButton>;
+                                return <MButton action={a} onCallback={(event) => a.callback(event, _data)} />;
                             }
                         })}
 

src/MkInfo/MkInfo.js

@@ -2,7 +2,6 @@ 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 { MkForm } from '..';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -35,7 +34,6 @@ const useStyles = makeStyles((theme) => ({
         }
     }, button: {
         color: 'white',
-        color: theme.palette.primary.main,
         width: 150,
         height: 55
     },
@@ -51,11 +49,6 @@ const useStyles = makeStyles((theme) => ({
         color: theme.palette.primary.main,
         fontWeight: "bold"
     },
-    paper: {
-        padding: theme.spacing(2),
-        textAlign: 'center',
-        color: theme.palette.text.secondary,
-    },
 }));
 
 function getDataString(data, fieldName) {
@@ -73,17 +66,17 @@ function MkInfo(props) {
         currentTabName,
         actions } = props;
 
-    const [editable, setEditable] = React.useState(isEditable != undefined ? isEditable : true);
-    const [data, setData] = React.useState({});
+    const [editable, setEditable] = React.useState(isEditable !== undefined ? isEditable : true);
+    // const [data, setData] = React.useState({});
 
     const handleEdit = () => {
         setEditable(false)
     }
 
-    const handleUpdateData = (data) => {
-        console.log('handle update date:', data);
-        setData(data);
-    }
+    // const handleUpdateData = (data) => {
+    //     console.log('handle update date:', data);
+    //     setData(data);
+    // }
 
 
     return (
@@ -91,25 +84,26 @@ function MkInfo(props) {
             {isNew ?
                 <Grid container style={{ marginTop: '30px' }}>
                     <Grid item xs={12} sm={7}>
-                        <MkForm
+                        {/* <MkForm
                             updateData={infoData}
                             fields={displayFields}
                             isNew={isNew}
                             onDataCallback={(d) => handleUpdateData(d)}
-                        ></MkForm>
+                        ></MkForm> */}
                     </Grid>
                 </Grid> : <Grid container style={{ marginTop: '30px' }}>
                     <Grid item xs={12} sm={7}>
                         {!editable ?
-                            <MkForm
-                                fields={displayFields}
-                                isNew={isNew}
-                                updateData={infoData}
-                                onDataCallback={(d) => handleUpdateData(d)}
-                            ></MkForm>
+                            // <MkForm
+                            //     fields={displayFields}
+                            //     isNew={isNew}
+                            //     updateData={infoData}
+                            //     onDataCallback={(d) => handleUpdateData(d)}
+                            // ></MkForm>
+                            <div/>
                             :
                             displayFields.map((d, i) => {
-                                return <Grid container>
+                                return (<Grid container key={i}>
                                     <Grid item xs={12} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                         <Grid item xs={12} sm={5}>
                                             <Box style={{ width: '250px' }}>
@@ -117,11 +111,14 @@ function MkInfo(props) {
                                             </Box>
                                         </Grid>
                                         <Grid item xs={12} sm={7}>
-                                            {d.type == 'photo' ? <img src={infoData['photo_url']} style={{ width: '120px', height: '120px', border: '1px solid grey' }}></img> :
-                                                <Typography style={{ paddingRight: '30px' }}>{infoData != undefined ? getDataString(infoData, d.fieldName) : ''}</Typography>}
+                                            {d.type === 'photo' ? 
+                                            <img/>
+                                            // <img src={infoData['photo_url']} style={{ width: '120px', height: '120px', border: '1px solid grey' }}></img>
+                                             :
+                                                <Typography style={{ paddingRight: '30px' }}>{infoData !== undefined ? getDataString(infoData, d.fieldName) : ''}</Typography>}
                                         </Grid>
                                     </Grid>
-                                </Grid>;
+                                </Grid>);
                             })}
                     </Grid>
                     <Grid item xs={12} sm={7}>
@@ -132,29 +129,29 @@ function MkInfo(props) {
 
                             {actions.map((a, i) => {
 
-                                if (currentTabName == 'account') {
-                                    if (infoData.status == 'invited') {
+                                if (currentTabName === 'account') {
+                                    if (infoData.status === 'invited') {
                                         return <Box>
                                             <Button style={{ color: 'white', backgroundColor: 'grey', float: 'right', marginLeft: '10px' }}
-                                                onClick={() => a.callback(data)}
+                                                // onClick={() => a.callback(data)}
                                             >{a.label}</Button>
                                         </Box>;
                                     }
-                                    if (infoData.status == 'joined') {
+                                    if (infoData.status === 'joined') {
                                         return <Box>
                                             <Button style={{ color: 'white', backgroundColor: 'grey', float: 'right', marginLeft: '10px' }}
-                                                onClick={() => a.callback(data)}
+                                                // onClick={() => a.callback(data)}
                                             >{a.label}</Button>
                                         </Box>;
                                     }
-                                    if (infoData.status == 'disabled') {
+                                    if (infoData.status === 'disabled') {
                                         return <Box>
                                             <Button style={{ color: 'white', backgroundColor: 'grey', float: 'right', marginLeft: '10px' }}
-                                                onClick={() => a.callback(data)}
+                                                // onClick={() => a.callback(data)}
                                             >{a.label}</Button>
                                         </Box>;
                                     }
-                                    if (infoData.status == 'requested') {
+                                    if (infoData.status === 'requested') {
                                         if (editable) {
                                             return <Box>
                                                 <Button style={{ marginLeft: '10px' }}
@@ -164,7 +161,7 @@ function MkInfo(props) {
                                         } else {
                                             return <Box>
                                                 <Button style={{ color: 'white', backgroundColor: 'grey', float: 'right', marginLeft: '10px' }}
-                                                    onClick={() => a.callback(data)}
+                                                    // onClick={() => a.callback(data)}
                                                 >{a.label}</Button>
                                             </Box>;
                                         }
@@ -172,7 +169,7 @@ function MkInfo(props) {
                                     }
                                 } else {
                                     if (editable) {
-                                        if (a.action_type == 'edit') {
+                                        if (a.action_type === 'edit') {
                                             console.log('type: ', a.action_type, 'editable: ', editable);
 
                                             return <Box>
@@ -181,25 +178,25 @@ function MkInfo(props) {
                                                 >{a.icon}{a.label}</Button>
                                             </Box>
                                         }
-                                        if (a.action_type == 'delete') {
+                                        if (a.action_type === 'delete') {
                                             return <Box>
                                                 <Button style={{ float: 'right', marginLeft: '10px' }}
-                                                    onClick={() => a.callback(data)}
+                                                    // onClick={() => a.callback(data)}
                                                 >{a.icon}{a.label}</Button>
                                             </Box>
                                         }
                                     } else {
-                                        if (a.action_type == 'save') {
+                                        if (a.action_type === 'save') {
                                             return <Box>
                                                 <Button style={{ marginLeft: '10px' }}
-                                                    onClick={() => a.callback(data)}
+                                                    // onClick={() => a.callback(data)}
                                                 >{a.icon}{a.label}</Button>
                                             </Box>
                                         }
-                                        if (a.action_type == 'cancel') {
+                                        if (a.action_type === 'cancel') {
                                             return <Box>
                                                 <Button style={{ float: 'right', marginLeft: '10px' }}
-                                                    onClick={() => a.callback(data)}
+                                                    // onClick={() => a.callback(data)}
                                                 >{a.icon}{a.label}</Button>
                                             </Box>
                                         }

src/MkTable/MkTable.js

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -11,9 +10,10 @@ import TableRow from '@material-ui/core/TableRow';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import Typography from '@material-ui/core/Typography';
 import EditIcon from '@material-ui/icons/Edit';
-import { Grid, IconButton } from '@material-ui/core';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import { Box, Button, Dialog, DialogActions, DialogTitle, Grid, IconButton, Menu, MenuItem } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
 
 function descendingComparator(a, b, _orderBy) {
     if (b[_orderBy] < a[_orderBy]) {
@@ -85,7 +85,7 @@ function EnhancedTableHead(props) {
                                 ) : null}
                             </TableSortLabel>
                             : <TableSortLabel
-                                hideSortIcon={true}
+                                hideSortIcon="true"
                                 align="right"
                             >
                                 {headCell.label}
@@ -95,7 +95,7 @@ function EnhancedTableHead(props) {
 
                     </StyledTableCell>
                 ))}
-                <StyledTableCell style={{ width: '150px' }} />
+                <StyledTableCell style={{ width: '100px' }} />
 
             </TableRow>
         </TableHead>
@@ -158,12 +158,12 @@ const StyledTableRow = withStyles((theme) => ({
 }))(TableRow);
 
 function getUpdatedDate(p) {
-    var statusDate = p['updated_date'];
+    var statusDate = p.updated_date;
     var day = '';
     if (statusDate !== undefined) {
         var convertDate = new Date(statusDate.toDate());
         var dd = String(convertDate.getDate()).padStart(2, '0');
-        var mm = String(convertDate.getMonth() + 1).padStart(2, '0'); //January is 0!
+        var mm = String(convertDate.getMonth() + 1).padStart(2, '0');
         var yyyy = convertDate.getFullYear();
 
         day = mm + '/' + dd + '/' + yyyy;
@@ -191,7 +191,7 @@ export const formatDateToLocal = (date, withTime = true) => {
 }
 
 function RowMenu(props) {
-    const { row, actions, onSelectedAction, showEdit = false, onRowEdit } = props;
+    const { row, actions, onSelectedAction, onRowEdit } = props;
     const [anchorEl, setAnchorEl] = React.useState(null);
 
     const handleMenuClick = (event) => {
@@ -216,7 +216,7 @@ function RowMenu(props) {
     }
 
     return (
-        <>
+        <div>
             <Menu
                 id={`actions-${row.id}`}
                 anchorEl={anchorEl}
@@ -233,29 +233,36 @@ function RowMenu(props) {
                 }
                 )}
             </Menu>
-            <Grid style={{ display: 'flex' }}>
+            <Grid
+                container
+                direction="row"
+                justify="flex-end"
+                alignItems="center"
+                style={{ display: 'flex' }}>
                 <IconButton
                     id={`edit-${row.id}`}
                     aria-label="more"
                     aria-controls="long-menu"
                     aria-haspopup="true"
                     onClick={handleEdit}
+                    size="small"
                 >
                     <EditIcon />
                 </IconButton>
-
+                <Box style={{ width: '10px' }} />
                 <IconButton
                     id={`dropdown-${row.id}`}
                     aria-label="more"
                     aria-controls="long-menu"
                     aria-haspopup="true"
+                    size="small"
                     onClick={handleMenuClick}
                 >
                     <ExpandMore />
                 </IconButton>
             </Grid>
 
-        </>
+        </div>
     );
 }
 
@@ -263,7 +270,6 @@ RowMenu.propTypes = {
     row: PropTypes.object.isRequired,
     actions: PropTypes.array.isRequired,
     onSelectedAction: PropTypes.func.isRequired,
-    showEdit: PropTypes.bool,
     onRowEdit: PropTypes.func
 }
 
@@ -293,10 +299,10 @@ function ConfirmDialog(props) {
                 <DialogActions>
                     <Button onClick={handleClose} color="primary">
                         Cancel
-            </Button>
+                    </Button>
                     <Button onClick={handleContinue} color="primary" autoFocus>
                         Delete
-            </Button>
+                    </Button>
                 </DialogActions>
             </Dialog>
         </div>
@@ -318,7 +324,6 @@ function MkTable(props) {
         data = [],
         headers = [],
         actions,
-        query,
         onActions, title,
         page,
         rowsPerPage,
@@ -330,7 +335,7 @@ function MkTable(props) {
         onGetData,
         onUpdateDataRow,
         onChangeRowPerPage,
-
+        dense = true
     } = props;
 
     const [_rowsPerPage, setRowsPerPage] = React.useState(rowsPerPage);
@@ -340,6 +345,10 @@ function MkTable(props) {
     const [_orderBy, setOrderBy] = React.useState(orderBy);
     const [_isLoading, setIsLoading] = React.useState(isLoading);
     const [_isConfirm, setIsConfirm] = React.useState(false);
+    const [itemName, setItemName] = React.useState('');
+    const [row, setRow] = React.useState({});
+    const [action, setAction] = React.useState('');
+    const [_dense, setDense] = React.useState(dense);
 
     const handleSelectMenu = (row, action) => {
         if (action === 'delete') {
@@ -374,6 +383,7 @@ function MkTable(props) {
         setOrderBy(orderBy);
         setIsLoading(isLoading);
         setRowsPerPage(rowsPerPage);
+        setDense(dense);
     }, []);
 
     const handleRequestSort = (event, property) => {
@@ -383,7 +393,7 @@ function MkTable(props) {
     };
 
     const handleChangePage = (event, newPage) => {
-        if (!noMoreToLoad && (newPage + 1) * _rowsPerPage >= data.length) {
+        if (!_noMoreToLoad && (newPage + 1) * _rowsPerPage >= data.length) {
             onGetData();
         }
         setPage(newPage);
@@ -397,18 +407,19 @@ function MkTable(props) {
 
     const getStatus = (data, header) => {
         var v = data[header.id];
-        var color = 'red';
-        if (v == 'Pending') {
-            color = 'red';
-        } else if (v == 'Started') {
-            color = 'orange';
+        var _color = 'red';
+        if (v === 'Pending') {
+            _color = 'red';
+        } else if (v === 'Started') {
+            _color = 'orange';
         } else {
-            color = 'green';
+            _color = 'green';
         }
-        return (<TableCell key={header.id} align={header.numeric ? 'right' : 'left'} ><Typography style={{ color: 'red', fontWeight: '500' }}>{data[header.id]}</Typography></TableCell>);
+        return (<TableCell key={header.id} align={header.numeric ? 'right' : 'left'} ><Typography style={{ color: _color, fontWeight: '500' }}>{data[header.id]}</Typography></TableCell>);
     };
 
     return (
+
         <div className={classes.root}>
             <Grid container>
                 <Grid item>
@@ -416,7 +427,7 @@ function MkTable(props) {
                         <Table
                             className={classes.table}
                             aria-labelledby="tableTitle"
-                            size='small'
+                            size={_dense ? 'small' : 'medium'}
                             aria-label="enhanced table"
                         >
                             <EnhancedTableHead
@@ -430,7 +441,7 @@ function MkTable(props) {
                             />
 
                             <TableBody>
-                                {isLoading ? <StyledTableRow >
+                                {_isLoading ? <StyledTableRow >
                                     <TableCell colSpan={headers.length} align="center"> <CircularProgress /></TableCell>
                                 </StyledTableRow> :
                                     (data.length !== 0 ? stableSort(data, getComparator(_order, _orderBy))
@@ -454,36 +465,35 @@ function MkTable(props) {
                                                             return (<TableCell key={h.id} align={h.numeric ? 'right' : 'left'}>{row[h.id]}</TableCell>);
                                                         }
                                                         if (h.id === 'updated_date') {
-                                                            return (<TableCell key={h.id} align={h.numeric ? 'right' : 'left'} style={{ width: h.width }}>{getUpdatedDate(row)}</TableCell>);
+                                                            return (<TableCell key={h.id} align={h.numeric ? 'right' : 'left'} style={{ width: h.width ? h.width : null }}>{getUpdatedDate(row)}</TableCell>);
                                                         } else {
-                                                            return (<TableCell key={h.id} align={h.numeric ? 'right' : 'left'} style={{ width: h.width }}
+                                                            return (<TableCell key={h.id} align={h.numeric ? 'right' : 'left'} style={{ width: h.width ? h.width : null }}
                                                             >{row[h.id]}</TableCell>);
                                                         }
                                                     })}
                                                     {actions ?
-                                                        <TableCell style={{ width: '150px' }}>
+                                                        <TableCell style={{ width: '150px' }} align='right'>
                                                             <RowMenu
                                                                 actions={actions}
                                                                 row={row}
-                                                                showEdit={true}
                                                                 onRowEdit={(data) => handleRowEdit(data)}
                                                                 onSelectedAction={(data, actionName) => handleSelectMenu(data, actionName)}
                                                             />
                                                         </TableCell>
-                                                        : <TableCell style={{ width: '150px' }}>
-                                                            <IconButton onClick={(event) => handleRowEdit(row)}><EditIcon /></IconButton>
+                                                        : <TableCell style={{ width: '150px' }} align='right'>
+                                                            <IconButton onClick={(event) => handleRowEdit(row)} size={dense ? "small" : "medium"}><EditIcon /></IconButton>
                                                         </TableCell>}
                                                 </StyledTableRow>
 
                                             );
-                                        }) : <StyledTableRow style={{ width: '100%' }}></StyledTableRow>)}
+                                        }) : <StyledTableRow style={{ width: '100%' }} />)}
                             </TableBody>
                         </Table>
                     </TableContainer>
 
                     <TablePagination
                         rowsPerPageOptions={[10, 30, 50]}
-                        labelDisplayedRows={function ({ from, to, count }) { }}
+                        labelDisplayedRows={({ from, to, count }) => { console.log(from, to, count) }}
                         component="div"
                         count={data.length}
                         rowsPerPage={_rowsPerPage}
@@ -497,7 +507,7 @@ function MkTable(props) {
                 itemName={itemName}
                 openDialog={_isConfirm}
                 onCancel={(v) => handleCancel(v)}
-                onContinue={(v) => handleDelete(v)}></ConfirmDialog> : <div />}
+                onContinue={(v) => handleDelete(v)} /> : <div />}
         </div>
     );
 }
@@ -518,7 +528,8 @@ MkTable.propTypes = {
     isLoading: PropTypes.any,
     onChangePaginatePage: PropTypes.any,
     onGetData: PropTypes.any,
-    onChangeRowPerPage: PropTypes.any
+    onChangeRowPerPage: PropTypes.any,
+    dense: PropTypes.any
 };
 
 export default (MkTable);