ywana-core8 0.0.68 → 0.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.68",
+  "version": "0.0.72",
   "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/domain/ContentEditor.js

@@ -25,7 +25,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 +143,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
               }
@@ -362,7 +362,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/list.css

@@ -13,7 +13,6 @@
 }
 
 .list > ul {
-  flex: 1;
   overflow: auto;
   list-style: none;
   margin: 0;
@@ -24,7 +23,7 @@
 }
 
 .list > ul li {
-  flex: 1;
+  flex: 0;
   overflow: hidden;
   min-height: 3rem;
   padding: .3rem 0.5rem;

package/src/html/tab.js

@@ -22,7 +22,7 @@ export const Tabs = (props) => {
   })
 
   return (
-    <div class="tabs">
+    <div className="tabs">
       {tabs}
       <div className="tab-filler" />
     </div>

package/src/html/tree.css

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

package/src/widgets/avatar/Avatar.css

@@ -1,6 +1,7 @@
 .avatar {
-    border-radius: 100%;
     background-color: rgba(200,200,200,.1);
+    border: solid 3px transparent;
+    border-radius: 100%;
     overflow: hidden;
 }
 

package/src/widgets/avatar/Avatar.js

@@ -6,7 +6,7 @@ import './Avatar.css'
  */
 export const Avatar = (props) => {
 
-    const { id, name, src, size="small", clickable=false, action} = props
+    const { id, name, className, src, size="small", clickable=false, action} = props
 
     function click() {
         if (clickable) {
@@ -14,10 +14,10 @@ export const Avatar = (props) => {
         }
     }
 
-    const style = clickable ? 'clickable' : ''
-    const className= `avatar ${size} ${style}`
+    const clickableStyle = clickable ? 'clickable' : ''
+    const style = `avatar ${size} ${clickableStyle} ${className}`
     return (
-        <div className={className} onClick={click}>
+        <div className={style} onClick={click}>
             { src ? <img src={src} /> : <span>{name}</span>}
         </div>
     )