ywana-core8 0.0.244 → 0.0.248

package/package.json

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

package/src/domain/ContentEditor.js

@@ -254,7 +254,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
       case FORMATS.DATE: return <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} />
       default:
         return options ? (
-          <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} canFilter={predictive} />
+          <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} predictive={predictive} />
         ) : (
           <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={!editable} />
         )

package/src/html/index.js

@@ -12,7 +12,7 @@ export { RadioButton } from './radio'
 export { Section } from './section'
 export { Tabs, Tab, Stack } from './tab'
 export { DataTable } from './table'
-export { Text } from './text'
+export { Text, TEXTFORMATS } from './text'
 export { TextField, DropDown, TextArea } from './textfield'
 export { TokenField } from './tokenfield'
 export { Tree, TreeNode, TreeItem } from './tree'

package/src/html/label.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import './label.css'
+
+export const Label = (props) => {
+
+    export const FORMATS = {
+        NONE: '',
+        NUMERIC: 'numeric',
+        DATE: 'date',
+        TIME: 'time',
+        EMAIL: 'email',
+        HTML: 'HTML',
+        URL: 'URL'
+    }
+
+    const { text, format = FORMATS.NONE } = props
+
+    let value = text
+    const formatter = Intl.NumberFormat()
+    switch (format) {
+        case FORMATS.NUMERIC: value = formatter.format(text); break;
+    }
+
+    return (
+        <label className={`label ${style}`}>
+            {value}
+        </label>
+    )
+}

package/src/html/property.test.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import { FORMATS } from '../domain/ContentType'
 import { Property } from './property'
 
 const PropertyTest = (prop) => {

package/src/html/text.js

@@ -1,20 +1,39 @@
 import React, { useContext } from "react"
 import { SiteContext } from "../site/siteContext"
 
+export const TEXTFORMATS = {
+  NONE: '',
+  NUMERIC: 'numeric',
+  DATE: 'date',
+  TIME: 'time',
+  EMAIL: 'email',
+  HTML: 'HTML',
+  URL: 'URL'
+}
+
 /**
  * Text
  */
-export const Text = ({ children }) => {
+export const Text = ({ format, children }) => {
+
+  const site = useContext(SiteContext)
+
+  console.log('xxx',format, site)
 
-    const site = useContext(SiteContext)
+  let value = children
 
-    if (site) {
-      const { lang, dictionary = {}} = site
-      const term = dictionary[children]
-      const text = term ? term[lang] : children
-      return text ? <span>{text}</span> : ''
-    }
+  if (site) {
+    const { lang, dictionary = {} } = site
+    const term = dictionary[children]
+    const text = term ? term[lang] : children
+    if (text) value=text 
+  }
+  
+  const formatter = Intl.NumberFormat()
+  switch (format) {
+    case FORMATS.NUMERIC: value = formatter.format(children); break;
+  }
 
-    return children ? <span>{children}</span> : ''
+  return children ? <span>{value}</span> : ''
 
 }

package/src/html/text.test.js

@@ -0,0 +1,11 @@
+import React, { useState } from 'react'
+import { Text, FORMATS } from './text'
+
+const TextTest = (prop) => {
+
+    return (
+        <>
+           <Text format={FORMATS.NUMERIC}>345356345.345</Text>
+        </>
+    )
+}

package/src/html/textfield.js

@@ -116,7 +116,7 @@ export const TextField = (props) => {
 export const DropDown = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, options = [], value, onChange, canFilter = false, readOnly = false } = props
+    const { id, options = [], value, onChange, predictive = false, readOnly = false } = props
     const [open, setOpen] = useState(false)
     const [label, setLabel] = useState()
 
@@ -129,7 +129,7 @@ export const DropDown = (props) => {
     }, [value])
 
     function change(id, value) {
-        if (canFilter) {
+        if (predictive) {
             setLabel(value)
         } else {
             if (onChange) onChange(id, value)
@@ -158,7 +158,7 @@ export const DropDown = (props) => {
     function renderOptions() {
         const canShow = open == true && Array.isArray(options)
         if (canShow) {
-            const filterActive = canFilter === true && label && label.length > 0
+            const filterActive = predictive === true && label && label.length > 0
             const items = filterActive ? options.filter(option => option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0) : options
             const lis = items.map(option => <li key={option.value} value={option.value}>{option.label}</li>)
             return <menu><ul onClick={select}>{lis}</ul></menu>
@@ -167,6 +167,8 @@ export const DropDown = (props) => {
         }
     }
 
+    console.log('dropdown',id, 'predictive', predictive)
+    
     return (
         <div className="dropdown">
             <TextField {...props} onClick={toggle} value={label} onChange={change} />

package/src/html/textfield.test.js

@@ -7,15 +7,23 @@ const TextFieldTest = (prop) => {
     const [form, setForm] = useState({})
 
     function change(id, value) {
-        const next = Object.assign({}, form, { [id]: value })
+        const next = Object.assign({}, form, { [id]: value })
         setForm(next)
     }
 
+    const options = [
+        { label: "One", value: "1" },
+        { label: "Two", value: "2" },
+        { label: "Three", value: "3" },
+        { label: "Four", value: "4" },
+        { label: "Five", value: "5" },
+    ]
+
     return (
         <>
-            <TextArea id="text1" label="Text 1" value={form.text1} onChange={change}/>
-            <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change}/>
-            <DropDown id="gender1" label="Gender" value={form.gender1} onChange={change} options={[ {label: "Male", value: "M"}, { label: "Female", value: "F" }]} /> 
+            <DropDown id="gender1" label="Dropdown" value={form.gender1} onChange={change} options={options} predictive={true}/>
+            <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
+            <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
         </>
     )
 }

package/src/widgets/login/LoginBox.test.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { LoginBox } from './LoginBox'
+
+const LoginBoxTest = (prop) => {
+
+    return (
+     
+        <LoginBox />
+     
+    )
+}