example/src/App.js

@@ -1,8 +1,12 @@
 import React from 'react'
 
-import { List } from '@mokkon/reactjs'
+import { List, FieldList, TableTemplate, InfoPage } from '@mokkon/reactjs'
 import '@mokkon/reactjs/dist/index.css'
-
+import { 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 App = () => {
   const pediatricians = [
@@ -18,14 +22,123 @@ const App = () => {
     'Cassady Campbell',
     'Mike Torrence',
   ]
+
+  const fields = [
+    { type: 'text_string', label: 'Name', fieldName: 'name' },
+    { type: 'text_multiline', label: 'Address', fieldName: 'address' },
+    { type: 'text_number', label: 'Latitude', fieldName: 'latitude' },
+    { type: 'text_number', label: 'Longitude', fieldName: 'longitude' },
+    { type: 'text_number', label: 'Max Variance', fieldName: 'max_variance' },
+    { type: 'text_number', label: 'Min Variance', fieldName: 'min_variance' },
+    { type: 'dropdown', label: 'Customer Name', fieldName: 'customer_name', options: [] },
+    // { type: 'checkbox', label: 'Customer Name', fieldName: 'customer_name', checkboxList: [{'label': },{}] },
+  ];
+
+  const data = {
+    delete_time: 0,
+    name: "Vendor 13",
+    update_time: 1610341578878,
+    updated_by: "Nine Nine",
+    updated_by_id: "kShMtHkcwTNjwm-lfzSBvAzdSo1J8dIpAz6_Ct85HPg",
+    status: 'requested'
+  }
+
+  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 = (data) => {
+    console.log('delete data :', data);
+  }
+
+  const handleSave = (data) => {
+    console.log('save data :', data);
+  }
+
+  const handleCancel = (data) => {
+    console.log('cancel data :', data);
+  }
+  var actions = [
+    { "label": "edit", "action_type": "edit", "icon": <EditIcon /> },
+    { "label": "delete", "action_type": "delete", "callback": handleDelete, "icon": <DeleteIcon /> },
+    { "label": "save", "action_type": "save", "callback": handleSave, "icon": <SaveIcon /> },
+    { "label": "cancel", "action_type": "cancel", "callback": handleCancel, "icon": <CancelIcon /> },
+    // { "label": "delete invitation", "action_type": "delete_invitation", "callback": handleDeleteInvitation, "icon": "" },
+    // { "label": "approve member", "action_type": "approve_member", "callback": handleApprovedMember, "icon": "" },
+    // { "label": "disable member", "action_type": "disable_member", "callback": handleDisableMember, "icon": "" },
+    // { "label": "enable member", "action_type": "enable_member", "callback": handleEnableMember, "icon": "" },
+    // { "label": "invite member", "action_type": "invite_member", "callback": handleMemberInvite, "icon": "" },
+    // { "label": "", "action_type": "back_btn", "callback": handleBack, "icon": "" },
+
+  ];
+  var tableData = [data];
+
   return <div>
     <div className="root">
-      <div className="listContainer">
+      {/* <div className="listContainer">
         <List groupName="Pediatricians" members={pediatricians} />
       </div>
       <div className="listContainer">
         <List groupName="Psychiatrists" members={psychiatrists} />
+      </div> */}
+
+      {/*field list */}
+      {/* <div className="listContainer">
+        <Grid container>
+          <Grid item xs={12} sm={6}>
+            <FieldList
+              fields={fields}
+              updateData={data}
+              buttonColor={'#f05f40'}
+              // 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')}
+            ></FieldList>
+          </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>
 }
 

src/CheckboxList/CheckboxList.js

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

src/CheckboxList/index.js

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

src/FieldEditor/index.js

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

src/FieldEditor/FieldEditor.js → src/FieldList/FieldList.js

@@ -80,51 +80,30 @@ const useStyles = makeStyles((theme) => ({
     }
 }));
 
-function FieldEditor(props) {
+function FieldList(props) {
     const classes = useStyles();
-    const { fields = [],
-        currentTabName = "account",
-        isNew = false,
-        buttonColor = 'blue',
+    const {
+        fields = [],
         updateData = {},
-        onCreate,
-        onUpdate,
-        onInvite,
-        onCancel,
-        onApproved } = props;
+        onDataCallback
+    } = props;
     const [data, setDataField] = React.useState(updateData != undefined ? updateData : {});
     const [imgPreview, setImgPreviewPath] = React.useState(null);
 
     const handleTextString = (e, fieldName) => {
-        if (isNew) {
-            setDataField({ ...data, [fieldName]: e.target.value });
-        } else {
-            setDataField({ ...data, [fieldName]: e.target.value });
-        }
+        setDataField({ ...data, [fieldName]: e.target.value });
     }
 
     const handleTextNumber = (e, fieldName) => {
-        if (isNew) {
-            setDataField({ ...data, [fieldName]: e.target.value });
-        } else {
-            setDataField({ ...data, [fieldName]: e.target.value });
-        }
+        setDataField({ ...data, [fieldName]: e.target.value });
     }
 
     const handleTextMultiline = (e, fieldName) => {
-        if (isNew) {
-            setDataField({ ...data, [fieldName]: e.target.value });
-        } else {
-            setDataField({ ...data, [fieldName]: e.target.value });
-        }
+        setDataField({ ...data, [fieldName]: e.target.value });
     }
 
     const handleDate = (e, fieldName) => {
-        if (isNew) {
-            setDataField({ ...data, [fieldName]: e.target.value });
-        } else {
-            setDataField({ ...data, [fieldName]: e.target.value });
-        }
+        setDataField({ ...data, [fieldName]: e.target.value });
     }
 
     const handleDropDownChange = (e, fieldName) => {
@@ -133,34 +112,7 @@ function FieldEditor(props) {
 
         var fn = fieldName.split('_');
         var fieldId = fn[0] + '_' + 'id';
-
-        if (isNew) {
-            setDataField({ ...data, [fieldName]: selectedValue, [fieldId]: e.target.value });
-
-        } else {
-            setDataField({ ...data, [fieldName]: selectedValue, [fieldId]: e.target.value });
-
-        }
-    }
-
-    const handleSave = () => {
-        if (isNew) {
-            onCreate(data);
-        } else {
-            onUpdate(data);
-        }
-    }
-
-    const handleApproved = () => {
-        onApproved(data);
-    }
-
-    const handleCancel = () => {
-        onCancel();
-    }
-
-    const handleInvite = () => {
-        onInvite(data);
+        setDataField({ ...data, [fieldName]: selectedValue, [fieldId]: e.target.value });
     }
 
     const handleImgUpload = (e, fieldName) => {
@@ -172,9 +124,12 @@ function FieldEditor(props) {
             setImgPreviewPath(reader.result);
         }
         reader.readAsDataURL(file);
-        // setDataField({ ...data, [fieldName]: e.target.files[0].name });
+        setDataField({ ...data, [fieldName]: e.target.files[0].name });
+    }
+
+    const handleDataConfirm = () => {
+        onDataCallback(data);
     }
-    console.log('file upload :', data);
 
     return (
         <div className={classes.root}>
@@ -333,60 +288,34 @@ function FieldEditor(props) {
                                 </Grid>;
                             }
                         }
+                        else if (f.type == 'checkbox') {
+                            return <Grid></Grid>;
+                        }
+                        else if (f.type == 'radio') {
+                            return <Grid></Grid>;
+                        }
                     })}
 
                 </Grid>
-
-                {currentTabName == 'account' ?
-                    <Grid item xs={11}>
-                        <Box>
-                            <Button style={{ color: 'white', backgroundColor: buttonColor != undefined ? buttonColor : 'blue', float: 'right' }}
-                                onClick={handleInvite}
-                            > Invite</Button>
-                        </Box>
-                    </Grid>
-                    :
-                    <Grid item xs={11}>
-                        <Box>
-                            <Button style={{ color: 'white', backgroundColor: 'grey', float: 'right', marginLeft: '10px' }}
-                                onClick={handleCancel}
-                            ><CancelIcon /> Cancel</Button>
-                        </Box>
-                        {data.status == 'requested' ? <Box>
-                            <Button style={{ color: 'white', backgroundColor: buttonColor != undefined ? buttonColor : 'blue', float: 'right', marginLeft: '10px' }}
-                                onClick={() => handleApproved()}
-                            >Approved</Button>
-                        </Box> :
-                            <Box >
-                                <Button style={{ color: 'white', backgroundColor: buttonColor != undefined ? buttonColor : 'blue', float: 'right' }}
-                                    onClick={handleSave}
-                                ><SaveIcon /> Save</Button>
-                            </Box>
-                        }
-
-                    </Grid>
-                }
-
+                <Grid item xs={11}>
+                    <Box>
+                        <Button style={{ float: 'right' }}
+                            onClick={handleDataConfirm}
+                        > Confirm</Button>
+                    </Box>
+                </Grid>
 
             </Grid>
         </div>
     );
 }
 
-FieldEditor.propTypes = {
+FieldList.propTypes = {
     history: PropTypes.object,
     fields: PropTypes.array.isRequired,
-    optionsData: PropTypes.array,
-    isNew: PropTypes.bool.isRequired,
-    onCreate: PropTypes.func.isRequired,
-    onUpdate: PropTypes.func.isRequired,
-    onCancel: PropTypes.func,
-    onApproved: PropTypes.func,
-    onInvite: PropTypes.func,
-    data: PropTypes.object,
-    currentTabName: PropTypes.string,
-    buttonColor: PropTypes.any
+    updateData: PropTypes.object,
+    onDataCallback: PropTypes.func
 };
 
-export default (FieldEditor);
+export default (FieldList);
 

src/FieldList/index.js

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

src/InfoPage/InfoPage.js

@@ -0,0 +1,227 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Box, Typography, Button } from '@material-ui/core';
+import { FieldList } from '..';
+
+const useStyles = makeStyles((theme) => ({
+    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,
+    },
+    underline: {
+        "&&&:before": {
+            borderBottom: "none"
+        },
+        "&&:after": {
+            borderBottom: "none"
+        }
+    }, button: {
+        color: 'white',
+        color: theme.palette.primary.main,
+        width: 150,
+        height: 55
+    },
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+    headText: {
+        fontSize: 14,
+        float: "left",
+        color: theme.palette.primary.main,
+        fontWeight: "bold"
+    },
+    paper: {
+        padding: theme.spacing(2),
+        textAlign: 'center',
+        color: theme.palette.text.secondary,
+    },
+}));
+
+function getDataString(data, fieldName) {
+    return data[fieldName];
+}
+
+
+function InfoPage(props) {
+    const classes = useStyles();
+    const {
+        infoData,
+        displayFields,
+        isNew = false,
+        isEditable,
+        currentTabName,
+        actions } = props;
+
+    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);
+    }
+
+
+    return (
+        <div className={classes.root}>
+            {isNew ?
+                <Grid container style={{ marginTop: '30px' }}>
+                    <Grid item xs={12} sm={7}>
+                        <FieldList
+                            updateData={infoData}
+                            fields={displayFields}
+                            isNew={isNew}
+                            onDataCallback={(d) => handleUpdateData(d)}
+                        ></FieldList>
+                    </Grid>
+                </Grid> : <Grid container style={{ marginTop: '30px' }}>
+                    <Grid item xs={12} sm={7}>
+                        {!editable ?
+                            <FieldList
+                                fields={displayFields}
+                                isNew={isNew}
+                                updateData={infoData}
+                                onDataCallback={(d) => handleUpdateData(d)}
+                            ></FieldList>
+                            :
+                            displayFields.map((d, i) => {
+                                return <Grid container>
+                                    <Grid item xs={12} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+                                        <Grid item xs={12} sm={5}>
+                                            <Box style={{ width: '250px' }}>
+                                                <Typography style={{ paddingRight: '30px', color: 'grey' }}>{d.label}</Typography>
+                                            </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>}
+                                        </Grid>
+                                    </Grid>
+                                </Grid>;
+                            })}
+                    </Grid>
+                    <Grid item xs={12} sm={7}>
+                        <Grid
+                            container
+                            direction="row"
+                            alignItems="flex-end">
+
+                            {actions.map((a, i) => {
+
+                                if (currentTabName == 'account') {
+                                    if (infoData.status == 'invited') {
+                                        return <Box>
+                                            <Button style={{ color: 'white', backgroundColor: 'grey', float: 'right', marginLeft: '10px' }}
+                                                onClick={() => a.callback(data)}
+                                            >{a.label}</Button>
+                                        </Box>;
+                                    }
+                                    if (infoData.status == 'joined') {
+                                        return <Box>
+                                            <Button style={{ color: 'white', backgroundColor: 'grey', float: 'right', marginLeft: '10px' }}
+                                                onClick={() => a.callback(data)}
+                                            >{a.label}</Button>
+                                        </Box>;
+                                    }
+                                    if (infoData.status == 'disabled') {
+                                        return <Box>
+                                            <Button style={{ color: 'white', backgroundColor: 'grey', float: 'right', marginLeft: '10px' }}
+                                                onClick={() => a.callback(data)}
+                                            >{a.label}</Button>
+                                        </Box>;
+                                    }
+                                    if (infoData.status == 'requested') {
+                                        if (editable) {
+                                            return <Box>
+                                                <Button style={{ marginLeft: '10px' }}
+                                                    onClick={handleEdit}
+                                                >{a.icon}{a.label}</Button>
+                                            </Box>;
+                                        } else {
+                                            return <Box>
+                                                <Button style={{ color: 'white', backgroundColor: 'grey', float: 'right', marginLeft: '10px' }}
+                                                    onClick={() => a.callback(data)}
+                                                >{a.label}</Button>
+                                            </Box>;
+                                        }
+
+                                    }
+                                } else {
+                                    if (editable) {
+                                        if (a.action_type == 'edit') {
+                                            console.log('type: ', a.action_type, 'editable: ', editable);
+
+                                            return <Box>
+                                                <Button style={{ marginLeft: '10px' }}
+                                                    onClick={handleEdit}
+                                                >{a.icon}{a.label}</Button>
+                                            </Box>
+                                        }
+                                        if (a.action_type == 'delete') {
+                                            return <Box>
+                                                <Button style={{ float: 'right', marginLeft: '10px' }}
+                                                    onClick={() => a.callback(data)}
+                                                >{a.icon}{a.label}</Button>
+                                            </Box>
+                                        }
+                                    } else {
+                                        if (a.action_type == 'save') {
+                                            return <Box>
+                                                <Button style={{ marginLeft: '10px' }}
+                                                    onClick={() => a.callback(data)}
+                                                >{a.icon}{a.label}</Button>
+                                            </Box>
+                                        }
+                                        if (a.action_type == 'cancel') {
+                                            return <Box>
+                                                <Button style={{ float: 'right', marginLeft: '10px' }}
+                                                    onClick={() => a.callback(data)}
+                                                >{a.icon}{a.label}</Button>
+                                            </Box>
+                                        }
+                                    }
+
+                                }
+                            })}
+                        </Grid>
+                    </Grid>
+
+                </Grid>}
+        </div >
+    );
+}
+
+InfoPage.propTypes = {
+    history: PropTypes.object,
+    infoData: PropTypes.object,
+    displayFields: PropTypes.array,
+    isNew: PropTypes.bool,
+    isEditable: PropTypes.bool,
+    actions: PropTypes.any
+};
+
+export default (InfoPage);

src/InfoPage/index.js

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

src/RadioList/RadioList.js

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

src/RadioList/index.js

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

src/index.js

@@ -1,3 +1,6 @@
 export { default as List } from './List/List';
-export { default as FieldEditor } from './FieldEditor/FieldEditor';
-export { default as TableTemplate } from './TableTemplate/TableTemplate';
+export { default as FieldList } from './FieldList/FieldList';
+export { default as TableTemplate } from './TableTemplate/TableTemplate';
+export { default as InfoPage } from './InfoPage/InfoPage';
+export { default as CheckboxList } from './CheckboxList/CheckboxList';
+export { default as RadioList } from './RadioList/RadioList';