edit form based on cell. TODO: fork Cell for edit and view versions

src/App.css

@@ -86,8 +86,8 @@
 }
 
 textarea {
-    width: 100%;
-    height: 100px;
+    width: 96%;
+    height: 200px;
 }
 
 aside {
@@ -126,3 +126,25 @@ input.Search {
     overflow: hidden
 }
 
+tr {
+    max-width: 90vw;
+}
+
+table {
+    max-width: 100%;
+    width: 100%;
+    border: 2px solid black;
+    background-color: #DDD;
+}
+
+pre {
+    overflow: auto;
+    max-width: 90vw;
+    text-align: left;
+}
+
+td {
+    overflow: hidden;
+    max-width: 90vw;
+    text-align: left;
+}

src/App.js

@@ -23,6 +23,48 @@ const dataReader = async () => {
 const Th = p =>
 <div className='Th' {...p} />
 
+
+const EditFormRow = ({field, value, options=defaultAdminOptions, record, onChange}) => {
+    return (
+        <tr>
+            <th>{field.name}</th>
+            <td><Cell options={options} record={record} field={field} selected onChange={onChange}>{value}</Cell></td>
+        </tr>
+    )
+}
+
+const EditForm = ({record, options=defaultAdminOptions, Components:{EditFormRow:EFR}={EditFormRow}}) => {
+    const fields = record.constructor.fields
+    const onlyInputs = record.constructor.inputs.filter(input => !fields.find(field => field.name === input.name))
+    const [edit, setEdit] = useState({...record})
+    console.log(edit)
+    return (
+        <>
+            <table>
+                {Object.entries(fields).map(([key,field]) => <EFR field={field} 
+                                                                   record={record} 
+                                                                   value={edit[field.name]} 
+                                                                   options={options}
+                                                                   onChange={event => setEdit({...edit, [field.name]: event.target.value})}
+                                                                    />)}
+                {Object.entries(onlyInputs).map(([key,field]) => <EFR field={field} 
+                                                                   record={record} 
+                                                                   value={edit[field.name]} 
+                                                                   options={options}
+                                                                   onChange={event => setEdit({...edit, [field.name]: event.target.value})}
+                                                                    />)}
+
+            </table>
+            <button onClick={() => {
+                Object.assign(record, edit);
+                record.save()
+            }}>
+                Save
+            </button>
+        </>
+    )
+}
+
 //<div className='Row' style={{position: 'relative',top}}>
 const Row = ({top, selected, children}) => { 
     return (
@@ -35,6 +77,7 @@ const Row = ({top, selected, children}) => {
 }
 
 const Cell = ({children, options, record, field, selected, ...props}) => {
+        
     let Formatter = React.Fragment
 
     const viewOrEdit = (!record.constructor.inputs || record.constructor.inputs.some(input => input.name === field.name)) && selected ? 'edit' : 'view'
@@ -102,7 +145,6 @@ const GridHeader = ({fields, sort, onSort}) =>
     {fields.map(field => <GridHeaderItem field={field} sort={sort} onClick={() => onSort(field.name)}/>)}
 </div>
 
-//TODO: EditRow as component for editing without this shit right now
 const VirtualScroll = ({options, gridHeight, count, rowHeight, components:Components={Row, Cell}, onScroll, records, skip}) => { 
     //const [records, setRecords] = useState([])
     const limit = gridHeight/rowHeight
@@ -138,28 +180,14 @@ const VirtualScroll = ({options, gridHeight, count, rowHeight, components:Compon
              style={{height: count*rowHeight, minHeight: count*rowHeight, maxHeight: count*rowHeight}} >
         { /*      <div style={{height: skip*rowHeight}} /> */ }
             {records && records.map((record,i) =><React.Fragment key={i}> 
-                                            <Row options={options} selected={edit.record && edit.record._id === record._id}>
+                                            {edit.record && edit.record._id === record._id ? <EditForm record={record} options={options}/>: 
+                                            <Row options={options}>
                                                 {fields.map(field => 
-                                                    <Cell onChange={({target: {value}}) => (setEdit({field, record: {...edit.record, [field.name]: value}}))} record={record} key={field.name} field={field} options={options} 
-                                                                onClick={() => setEdit({record: {...record}, field})}
-                                                            selected={edit.record && edit.record._id === record._id} >
-                                                        {(edit.record && edit.record._id === record._id ? edit.record: record)[field.name]}
+                                                    <Cell  record={record} key={field.name} field={field} options={options} 
+                                                            onClick={() => setEdit({record: {...record}, field})}>
+                                                        {record[field.name]}
                                                     </Cell>)}
-                                            </Row>
-                {edit.record && edit.record._id === record._id && 
-                    <Row selected>
-                        {onlyInputs.map(input => 
-                            <Cell record={record} key={input.name} field={input} options={options} 
-                                selected>
-                                {undefined}
-                            </Cell>
-                        )}
-                        <button style={{width:"100%"}} onClick={() => {
-                            const {_id, ...copy} = edit.record
-                            Object.assign(record,copy)
-                            record.save()
-                        }}>Save</button>
-                    </Row>}
+                                            </Row>}
                 </React.Fragment>
             )}
         {/*            <div style={{height: (count - skip - records.length)*rowHeight}} /> */ }