ywana-core8 0.0.341 → 0.0.344

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.341",
+  "version": "0.0.344",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/domain/ContentEditor.js

@@ -7,7 +7,7 @@ import { FORMATS } from './ContentType';
 /**
  * Content Editor
  */
-export const ContentEditor = ({ content, filter, onChange }) => {
+export const ContentEditor = ({ content, filter, outlined = true, className, onChange }) => {
 
   function change(id, value) {
     const nextValue = Object.assign({}, content.value(), { [id]: value })
@@ -17,25 +17,24 @@ export const ContentEditor = ({ content, filter, onChange }) => {
   const sections = content.sections()
 
   return (
-    <div className='content-editor'>
-      {sections
-        .map((section) => {
-          const { title, fields } = section
-
-          const filtered = fields
-            .filter(field => field.id !== 'id')
-            .filter(field => filter ? filter(field, content) : true)
-
-          return filtered.length > 0 ? (
-            <section key={title}>
-              {title && title.length > 0 ? <header>{title}</header> : null}
-              <main>
-                {filtered.map((field) => <FieldEditor key={field.id} field={field} onChange={change} outlined={true} content={content} />)}
-              </main>
-            </section>
-          ) : null
+    <div className={`content-editor ${className}`}>
+      {sections.map((section) => {
+
+        const { title, fields } = section
+        const filtered = fields
+          .filter(field => field.id !== 'id')
+          .filter(field => filter ? filter(field, content) : true)
+
+        return filtered.length > 0 ? (
+          <section key={title}>
+            {title && title.length > 0 ? <header>{title}</header> : null}
+            <main>
+              {filtered.map((field) => <FieldEditor key={field.id} field={field} onChange={change} outlined={outlined} content={content} />)}
+            </main>
+          </section>
+        ) : null
 
-        })}
+      })}
     </div>
   )
 }
@@ -120,7 +119,6 @@ export const TabbedContentEditor = ({ content, filter, grouped = false, onChange
  */
 export const TreededContentEditor = ({ content, filter, onChange }) => {
 
-
   const value = content.value()
   const nodes = Object.values(content.type).filter(field => field.type === TYPES.ARRAY)
   const [selected, setSelected] = useState()
@@ -259,7 +257,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
   }
 
   return (
-    <div className='field-editor string-editor'>
+    <div className={`field-editor string-editor ${id}`}>
       {renderFormat(format, options)}
     </div>
   )

package/src/domain/ContentEditor.test.css

@@ -0,0 +1,24 @@
+.grid1 {
+}
+
+.grid1 > section > main {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    gap: 0 1rem
+}
+
+.grid1 .name {
+    grid-column: span 2;
+}
+
+.grid1 .field1 {
+    grid-column: span 1;
+}
+
+.grid1 .field2 {
+    grid-column: span 1;
+}
+
+.grid1 .field3 {
+    grid-column: span 2;
+}

package/src/domain/ContentEditor.test.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { ContentEditor } from './ContentEditor'
+import { Content, TYPES } from './ContentType'
+import './ContentEditor.test.css'
+
+const schema = {
+    name: { id: "name", type: TYPES.STRING, required: true, label: "Name" },
+    field1: { id: "field1", type: TYPES.STRING, required: true, label: "field1" },
+    field2: { id: "field2", type: TYPES.STRING, required: true, label: "field2" },
+    field3: { id: "field3", type: TYPES.STRING, required: true, label: "field3" },
+}
+
+const value = {
+    name: "John Smith"
+}
+
+const ContentEditorTest = (prop) => {
+
+    const [form, setForm] = useState(value)
+
+    function change(form) {
+        setForm(form)
+    }
+
+    const content = new Content(schema, form)
+    return (
+        <>
+            <ContentEditor content={content} outlined={true} onChange={change} className="grid1"/>
+        </>
+    )
+}

package/src/domain/TablePage.js

@@ -140,7 +140,7 @@ export const TablePage = (props) => {
             {canQuery || canFilter ? (
                 <menu className="table-page">
                     {canQuery ? <TableQueries schema={schema} user={user} /> : null}
-                    {canFilter ? <TableFilters schema={schema} onSave={saveQuery} /> : null}
+                    {canFilter ? <TableFilters schema={schema} onSave={canQuery ? saveQuery : null} /> : null}
                 </menu>
             ) : null}
             <main key={id} className="table-page">