ywana-core8 0.0.70 → 0.0.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.70",
+  "version": "0.0.74",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",
@@ -28,6 +28,7 @@
   "dependencies": {
     "deep-equal": "^2.0.5",
     "material-design-icons-iconfont": "^6.1.1",
+    "react-datepicker": "^4.6.0",
     "resumablejs": "^1.1.0"
   }
 }

package/src/css/html.css

@@ -30,4 +30,8 @@ body {
 .row {
   display: flex;
   align-items: center;
+}
+
+td.actions {
+  display: flex;
 }

package/src/domain/ContentEditor.js

@@ -2,6 +2,7 @@ import React, { Fragment, useState } from 'react';
 import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, TextField, Tree, TreeNode, TreeItem, TokenField, Property } from '../html';
 import { Content, TYPES } from './ContentType';
 import './ContentEditor.css';
+import { FORMATS } from '.';
 
 /**
  * Content Editor
@@ -25,7 +26,7 @@ export const ContentEditor = ({ content, filter, onChange }) => {
               {fields
                 .filter(field => field.id !== 'id')
                 .filter(field => filter ? filter(field, content) : true)
-                .map((field) => <FieldEditor key={field.id} field={field} onChange={change} />)}
+                .map((field) => <FieldEditor key={field.id} field={field} onChange={change} outlined={true} />)}
             </main>
           </section>
         )
@@ -143,7 +144,7 @@ export const TreededContentEditor = ({ content, filter, onChange }) => {
         </header>
         <Tree>
           {nodes.map((node, index) => (
-            <TreeNode icon="folder" label={node.label} actions={[<Icon small icon="add" clickable action={add} />]}>
+            <TreeNode icon="folder" label={node.label} actions={[<Icon size="small" icon="add" clickable action={add} />]}>
               {
                 value[node.id] ? value[node.id].map((field, index) => <TreeItem icon={field.icon || "description"} label={field.name || field.label} onSelect={() => select(index, field, node)} />) : null
               }
@@ -177,8 +178,6 @@ export const FieldEditor = ({ field, onChange, content, outlined = false }) => {
         return <StringEditor outlined={outlined} field={field} value={value1} onChange={change} content={content} />
       case TYPES.BOOLEAN:
         return <CheckBox outlined id={id} label={label} value={value1} onChange={change} />
-      case TYPES.DATE:
-        return <TextField outlined={outlined} id={id} type='date' label={label} value={value1} onChange={change} disabled={editable} />
       case TYPES.NUMBER:
         return <NumberEditor outlined={outlined} field={field} value={value1} onChange={change} />
       case TYPES.ARRAY:
@@ -225,7 +224,7 @@ const EntityEditor = ({ field, value = {}, onChange }) => {
  * String Editor
  */
 export const StringEditor = ({ field, value = '', onChange, content, outlined }) => {
-  const { id, label, options, editable = true, filter } = field
+  const { id, format, label, options, editable = true, filter } = field
 
   function change(id, value) {
     if (onChange) onChange(id, value)
@@ -239,14 +238,9 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
   return (
     <div className='field-editor string-editor'>
       {
-        editable ?
-          options ? (
-            <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} />
-          ) : (
-            <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} />
-          ) : (
-            <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={true} />
-          )
+        format === FORMATS.DATE ? <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} /> :
+          options ? <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} /> :
+            <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={!editable} />
       }
     </div>
   )
@@ -362,7 +356,7 @@ export const CollectionEditor = ({ field, value = [], onChange }) => {
     ...item,
     id: index,
     actions: [
-      <Icon icon='delete' clickable action={() => remove(index)} small />
+      <Icon icon='delete' clickable action={() => remove(index)} size="small" />
     ]
   }))
 

package/src/domain/ContentType.js

@@ -4,12 +4,19 @@
 export const TYPES = {
     STRING: 'String',
     NUMBER: 'Number',
-    DATE: 'Date',
     BOOLEAN: 'Boolean',
     ARRAY: 'Array',
     ENTITY: 'Object',
     FUNCTION: 'Function',
-    EMAIL: 'String'
+}
+
+/**
+ * FORMATS
+ */
+export const FORMATS = {
+    NONE: '',
+    DATE: 'date',
+    EMAIL: 'email',
 }
 
 /**

package/src/domain/index.js

@@ -1,4 +1,4 @@
-export { TYPES, Content } from './ContentType'
+export { TYPES, FORMATS, Content } from './ContentType'
 export { ContentForm } from './ContentForm'
 export { ContentEditor, TabbedContentEditor, CollectionEditor, TreededContentEditor, FieldEditor, ListEditor } from './ContentEditor'
 export { CreateContentDialog } from './CreateContentDialog'

package/src/html/tree.css

@@ -10,7 +10,6 @@
 
 .tree-item{
     margin: 0;
-    padding: .5rem 0;
     display: flex;
     align-items: center;
     font: 1rem;