update components

dist/index.js

@@ -1151,44 +1151,47 @@ var BootstrapInput = styles.withStyles(function (theme) {
     }
   };
 })(core.InputBase);
-var useStyles = styles.makeStyles(function (theme) {
-  return {
-    root: {
-      width: '100%'
-    },
-    paper: {
-      width: '100%',
-      marginBottom: theme.spacing(2)
-    },
-    table: {
-      minWidth: 750
-    },
-    visuallyHidden: {
-      border: 0,
-      clip: 'rect(0 0 0 0)',
-      height: 1,
-      margin: -1,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      top: 20,
-      width: 1
+var useStyles = styles.makeStyles({
+  root: {
+    width: '100%'
+  },
+  paper: {
+    width: '100%'
+  },
+  table: {
+    minWidth: 750
+  },
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1
+  },
+  underline: {
+    "&&&:before": {
+      borderBottom: "none"
     },
-    underline: {
-      "&&&:before": {
-        borderBottom: "none"
-      },
-      "&&:after": {
-        borderBottom: "none"
-      }
+    "&&:after": {
+      borderBottom: "none"
     }
-  };
+  },
+  actionButton: function actionButton(props) {
+    return {
+      backgroundColor: props.primaryColor === undefined ? 'grey' : props.primaryColor,
+      color: props.actionTextColor === undefined ? 'white' : props.actionTextColor
+    };
+  }
 });
 
 function MButton(props) {
-  var classes = useStyles();
   var action = props.action,
-      onCallback = props.onCallback;
+      onCallback = props.onCallback,
+      buttonStyle = props.buttonStyle;
 
   var handleAction = function handleAction(e) {
     e.preventDefault();
@@ -1196,8 +1199,9 @@ function MButton(props) {
   };
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classes.root
+    className: buttonStyle.root
   }, /*#__PURE__*/React__default.createElement(core.Box, null, /*#__PURE__*/React__default.createElement(core.Button, {
+    className: buttonStyle.actionButton,
     variant: "contained",
     style: {
       "float": 'right',
@@ -1211,12 +1215,13 @@ function MButton(props) {
 
 MButton.propTypes = {
   history: propTypes.object,
+  buttonStyle: propTypes.any,
   action: propTypes.object.isRequired,
   onCallback: propTypes.func.isRequired
 };
 
 function MkForm(props) {
-  var classes = useStyles();
+  var styles = useStyles(props.styles);
   var _props$fields = props.fields,
       fields = _props$fields === void 0 ? [] : _props$fields,
       _props$data = props.data,
@@ -1287,7 +1292,7 @@ function MkForm(props) {
   var handleSelectItemDialog = function handleSelectItemDialog() {};
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classes.root
+    className: styles.root
   }, /*#__PURE__*/React__default.createElement(core.Grid, {
     container: true
   }, /*#__PURE__*/React__default.createElement(core.Grid, {
@@ -1643,7 +1648,7 @@ function MkForm(props) {
           marginBottom: '10px'
         }
       }, /*#__PURE__*/React__default.createElement(core.GridList, {
-        className: classes.gridList
+        className: styles.gridList
       }, _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,
@@ -1744,7 +1749,7 @@ function MkForm(props) {
           marginBottom: '10px'
         }
       }, /*#__PURE__*/React__default.createElement(core.TableContainer, null, /*#__PURE__*/React__default.createElement(core.Table, {
-        className: classes.table,
+        className: styles.table,
         size: "small",
         "aria-label": "a dense table"
       }, /*#__PURE__*/React__default.createElement(core.TableHead, null, /*#__PURE__*/React__default.createElement(core.TableRow, null, partHeaders.map(function (h, i) {
@@ -1793,7 +1798,7 @@ function MkForm(props) {
         variant: "outlined",
         size: "small",
         type: "time",
-        className: classes.textField,
+        className: styles.textField,
         InputLabelProps: {
           shrink: true
         },
@@ -1811,7 +1816,8 @@ function MkForm(props) {
         action: a,
         onCallback: function onCallback(event) {
           return a.callback(event, _data);
-        }
+        },
+        buttonStyle: styles
       });
     }
   })) : /*#__PURE__*/React__default.createElement(core.Grid, null)));
@@ -1823,7 +1829,8 @@ MkForm.propTypes = {
   data: propTypes.object,
   isNew: propTypes.bool,
   actions: propTypes.array,
-  onDropdownCreateNew: propTypes.func
+  onDropdownCreateNew: propTypes.func,
+  styles: propTypes.any
 };
 
 function descendingComparator(a, b, _orderBy) {
@@ -2239,6 +2246,7 @@ function MkTable(props) {
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
     setRowsPerPage(parseInt(event.target.value));
     onChangeRowPerPage(parseInt(event.target.value));
+    setPage(0);
   };
 
   return /*#__PURE__*/React__default.createElement("div", {

dist/index.modern.js

@@ -1147,44 +1147,47 @@ var BootstrapInput = withStyles(function (theme) {
     }
   };
 })(InputBase);
-var useStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      width: '100%'
-    },
-    paper: {
-      width: '100%',
-      marginBottom: theme.spacing(2)
-    },
-    table: {
-      minWidth: 750
-    },
-    visuallyHidden: {
-      border: 0,
-      clip: 'rect(0 0 0 0)',
-      height: 1,
-      margin: -1,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      top: 20,
-      width: 1
+var useStyles = makeStyles({
+  root: {
+    width: '100%'
+  },
+  paper: {
+    width: '100%'
+  },
+  table: {
+    minWidth: 750
+  },
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1
+  },
+  underline: {
+    "&&&:before": {
+      borderBottom: "none"
     },
-    underline: {
-      "&&&:before": {
-        borderBottom: "none"
-      },
-      "&&:after": {
-        borderBottom: "none"
-      }
+    "&&:after": {
+      borderBottom: "none"
     }
-  };
+  },
+  actionButton: function actionButton(props) {
+    return {
+      backgroundColor: props.primaryColor === undefined ? 'grey' : props.primaryColor,
+      color: props.actionTextColor === undefined ? 'white' : props.actionTextColor
+    };
+  }
 });
 
 function MButton(props) {
-  var classes = useStyles();
   var action = props.action,
-      onCallback = props.onCallback;
+      onCallback = props.onCallback,
+      buttonStyle = props.buttonStyle;
 
   var handleAction = function handleAction(e) {
     e.preventDefault();
@@ -1192,8 +1195,9 @@ function MButton(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
+    className: buttonStyle.root
   }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
+    className: buttonStyle.actionButton,
     variant: "contained",
     style: {
       "float": 'right',
@@ -1207,12 +1211,13 @@ function MButton(props) {
 
 MButton.propTypes = {
   history: propTypes.object,
+  buttonStyle: propTypes.any,
   action: propTypes.object.isRequired,
   onCallback: propTypes.func.isRequired
 };
 
 function MkForm(props) {
-  var classes = useStyles();
+  var styles = useStyles(props.styles);
   var _props$fields = props.fields,
       fields = _props$fields === void 0 ? [] : _props$fields,
       _props$data = props.data,
@@ -1283,7 +1288,7 @@ function MkForm(props) {
   var handleSelectItemDialog = function handleSelectItemDialog() {};
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
+    className: styles.root
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -1639,7 +1644,7 @@ function MkForm(props) {
           marginBottom: '10px'
         }
       }, /*#__PURE__*/React.createElement(GridList, {
-        className: classes.gridList
+        className: styles.gridList
       }, _data[f.field_name] === undefined ? /*#__PURE__*/React.createElement("span", null) : _data[f.field_name].map(function (tile) {
         return /*#__PURE__*/React.createElement(GridListTile, {
           key: tile,
@@ -1740,7 +1745,7 @@ function MkForm(props) {
           marginBottom: '10px'
         }
       }, /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
-        className: classes.table,
+        className: styles.table,
         size: "small",
         "aria-label": "a dense table"
       }, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, partHeaders.map(function (h, i) {
@@ -1789,7 +1794,7 @@ function MkForm(props) {
         variant: "outlined",
         size: "small",
         type: "time",
-        className: classes.textField,
+        className: styles.textField,
         InputLabelProps: {
           shrink: true
         },
@@ -1807,7 +1812,8 @@ function MkForm(props) {
         action: a,
         onCallback: function onCallback(event) {
           return a.callback(event, _data);
-        }
+        },
+        buttonStyle: styles
       });
     }
   })) : /*#__PURE__*/React.createElement(Grid, null)));
@@ -1819,7 +1825,8 @@ MkForm.propTypes = {
   data: propTypes.object,
   isNew: propTypes.bool,
   actions: propTypes.array,
-  onDropdownCreateNew: propTypes.func
+  onDropdownCreateNew: propTypes.func,
+  styles: propTypes.any
 };
 
 function descendingComparator(a, b, _orderBy) {
@@ -2235,6 +2242,7 @@ function MkTable(props) {
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
     setRowsPerPage(parseInt(event.target.value));
     onChangeRowPerPage(parseInt(event.target.value));
+    setPage(0);
   };
 
   return /*#__PURE__*/React.createElement("div", {

example/src/components/MkFormPage.js

@@ -71,11 +71,14 @@ const MkFormPage = () => {
 
   ];
 
+  const styles = { actionTextcolor: 'white' , primaryColor:'lightBlue' };
+
   return (
     <div className="root">
       <Grid container>
         <Grid item xs={12}>
           <MkForm
+           styles={styles}
             fields={fields}
             data={data}
             buttonColor={'#f05f40'}

src/MkForm/MkForm.js

@@ -61,13 +61,13 @@ const BootstrapInput = withStyles((theme) => ({
     },
 }))(InputBase);
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles({
     root: {
         width: '100%',
     },
     paper: {
         width: '100%',
-        marginBottom: theme.spacing(2),
+        // marginBottom: theme.spacing(2),
     },
     table: {
         minWidth: 750,
@@ -90,12 +90,15 @@ const useStyles = makeStyles((theme) => ({
         "&&:after": {
             borderBottom: "none"
         }
-    }
-}));
+    },
+    actionButton: props => ({
+        backgroundColor: props.primaryColor === undefined ? 'grey' : props.primaryColor,
+        color: props.actionTextColor === undefined ? 'white' : props.actionTextColor
+    })
+});
 
 function MButton(props) {
-    const classes = useStyles();
-    const { action, onCallback } = props;
+    const { action, onCallback, buttonStyle } = props;
 
     const handleAction = (e) => {
         e.preventDefault();
@@ -103,9 +106,9 @@ function MButton(props) {
     }
 
     return (
-        <div className={classes.root}>
+        <div className={buttonStyle.root}>
             <Box>
-                <Button
+                <Button className={buttonStyle.actionButton}
                     variant="contained" style={{ float: 'right', margin: "5px" }}
                     onClick={(e) => handleAction(e)}
                 >{action.icon}{action.label}</Button>
@@ -116,6 +119,7 @@ function MButton(props) {
 
 MButton.propTypes = {
     history: PropTypes.object,
+    buttonStyle: PropTypes.any,
     action: PropTypes.object.isRequired,
     onCallback: PropTypes.func.isRequired
 };
@@ -123,7 +127,7 @@ MButton.propTypes = {
 
 
 function MkForm(props) {
-    const classes = useStyles();
+    const styles = useStyles(props.styles);
     const {
         fields = [],
         data = {},
@@ -190,7 +194,7 @@ function MkForm(props) {
     }
 
     return (
-        <div className={classes.root}>
+        <div className={styles.root}>
             <Grid container>
                 <Grid item xs={12}>
                     {fields.map((f, i) => {
@@ -391,7 +395,7 @@ function MkForm(props) {
                                         style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                         <Grid item xs={12}>
                                             <div style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
-                                                <GridList className={classes.gridList}>
+                                                <GridList className={styles.gridList}>
                                                     {_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) => {
@@ -453,7 +457,7 @@ function MkForm(props) {
 
                                     <div style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
                                         <TableContainer>
-                                            <Table className={classes.table} size="small" aria-label="a dense table">
+                                            <Table className={styles.table} size="small" aria-label="a dense table">
                                                 <TableHead>
                                                     <TableRow>
                                                         {partHeaders.map((h, i) => {
@@ -490,7 +494,7 @@ function MkForm(props) {
                                     variant="outlined"
                                     size="small"
                                     type="time"
-                                    className={classes.textField}
+                                    className={styles.textField}
                                     InputLabelProps={{
                                         shrink: true,
                                     }}
@@ -511,7 +515,7 @@ function MkForm(props) {
                     <Grid item xs={12}>
                         {actions.map((a) => {
                             if (a.status === _data.status) {
-                                return <MButton action={a} onCallback={(event) => a.callback(event, _data)} />;
+                                return <MButton action={a} onCallback={(event) => a.callback(event, _data)} buttonStyle={styles} />;
                             }
                         })}
 
@@ -528,7 +532,8 @@ MkForm.propTypes = {
     data: PropTypes.object,
     isNew: PropTypes.bool,
     actions: PropTypes.array,
-    onDropdownCreateNew: PropTypes.func
+    onDropdownCreateNew: PropTypes.func,
+    styles: PropTypes.any
 };
 
 export default (MkForm);

src/MkTable/MkTable.js

@@ -13,7 +13,7 @@ import EditIcon from '@material-ui/icons/Edit';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import { Box, Button, createMuiTheme, Dialog, DialogActions, DialogTitle, Grid, IconButton, Menu, MenuItem, ThemeProvider } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 function descendingComparator(a, b, _orderBy) {
     if (b[_orderBy] < a[_orderBy]) {
@@ -425,6 +425,7 @@ function MkTable(props) {
     const handleChangeRowsPerPage = (event) => {
         setRowsPerPage(parseInt(event.target.value));
         onChangeRowPerPage(parseInt(event.target.value));
+        setPage(0);
     };
 
     const getStatus = (data, header) => {