ywana-core8 0.0.552 → 0.0.555

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.552",
+  "version": "0.0.555",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/domain/ContentViewer.js

@@ -52,7 +52,7 @@ const FieldViewer = (props) => {
 
     switch (type) {
         case TYPES.STRING:
-            return <Property label={label} value={value} />
+            return <Property label={label} value={value} options={field.options}/>
         case TYPES.ENTITY:
             return <EntityViewer field={field} value={value} />
         case TYPES.ARRAY:

package/src/html/property.js

@@ -7,7 +7,7 @@ import './property.css'
  */
 export const Property = (props) => {
 
-    const { id, className, label, name, initial, value, editable = false, onChange } = props
+    const { id, className, label, name, initial, value, editable = false, onChange, options } = props
 
     function change(event) {
         if (onChange) {
@@ -20,13 +20,19 @@ export const Property = (props) => {
         if (onChange) onChange(id, "")
     }
 
+    let value2 = value || initial
+
+    if (options) {
+        const opt = options.find(option => option.value == value2)
+        if (opt) value2 = opt.label
+    }
+
     return (
         <div className={`property property-${id} ${className}`}>
             <div className="property-name">{name || label}</div>
-            { initial ? <div className='property-value'>{initial}</div> : null}
             <div className="property-value">
-                {editable ? <input type="text" value={value} onChange={change}/> : value}
-                {editable && value.length > 0 ? <Icon icon="close" size="small" clickable action={clear} /> : null }
+                {editable ? <input type="text" value={value2} onChange={change}/> : value2}
+                {editable && value2.length > 0 ? <Icon icon="close" size="small" clickable action={clear} /> : null }
             </div>
         </div>
     )

package/src/site/view.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Icon, MenuIcon, Tabs, Tab, Stack } from '../html'
 import './view.css'
 
@@ -36,11 +36,15 @@ export const View = (props) => {
 
 export const TabbedView = (props) => {
 
-    const { title, className } = props
+    const { title, className, selected } = props
     const [tab, setTab] = useState(0)
     const children = React.Children.toArray(props.children);
     const tabs = children.map(child => <Tab key={child.props.label} label={child.props.label}></Tab>)
 
+    useEffect(() => {
+        if (selected && selected !== tab) setTab(selected)
+    }, [selected])
+
     const toolbar = (
         <Tabs selected={tab} onChange={tab => setTab(tab)}>
             {tabs}

package/src/widgets/calendar/Calendar.js

@@ -19,7 +19,7 @@ export const Calendar = (props) => {
     }, [])
 
     useEffect(() => {
-        if (onChange) {
+        if (position && onChange) {
             const firstDayOfMonth = position.clone().startOf('month');
             const firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
             const lastDayOfMonth = position.clone().endOf('month');