ywana-core8 0.0.416 → 0.0.419

package/package.json

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

package/src/domain/ContentEditor.js

@@ -236,6 +236,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
   const { id, format, label, options, editable = true, predictive = false, multivalue = false, Editor } = field
 
   function change(id, value) {
+    console.log(id,value)
     if (onChange) onChange(id, value)
   }
 
@@ -249,7 +250,8 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
       case FORMATS.COLOR: return <ColorField id={id} onChange={change} value={value}/>
       case FORMATS.HTML: return <Editor id={id} value={value} onChange={change} content={content} />
       case FORMATS.DATE: return <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} />
-      case FORMATS.TOKENS: return <TokenField id={id} label={label} onChange={change} readOnly={!editable} options={buildOptions()} init={value}/>
+      case FORMATS.TOKENS: 
+        return <TokenField id={id} label={label} onChange={change} options={buildOptions()} tokens={value} />
       default:
         return options ? (
           <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} predictive={predictive} />

package/src/domain/ContentEditor.test.js

@@ -21,7 +21,7 @@ const schema = {
 
 const value = {
     name: "John Smith",
-    field3 : ["1","2"]
+    field3 : ["1","2","4"]
 }
 
 const ContentEditorTest = (prop) => {
@@ -33,7 +33,6 @@ const ContentEditorTest = (prop) => {
     }
 
     const content = new Content(schema, form)
-    console.log(form)
     return (
         <>
             <ContentEditor content={content} outlined={false} onChange={change} className="grid1"/>

package/src/html/tokenfield.js

@@ -7,26 +7,15 @@ import './tokenfield.css'
 /**
  * Token Field
  */
-export const TokenField = ({ id, label, init = [], readOnly, options, onChange }) => {
-  const mounted = useRef(false)
+export const TokenField = ({ id, label, tokens = [], readOnly, options, onChange }) => {
+  
   const [value, setValue] = useState()
-  const [tokens, setTokens] = useState(init)
   const [open, setOpen] = useState(false)
 
-  useEffect(() => {
-    if (mounted.current) {
-      if (onChange) {
-        if (tokens) onChange(id, tokens)
-      }
-    } else {
-      mounted.current = true
-    }
-  }, [tokens])
-
   function remove(index) {
     const next = tokens.slice()
     next.splice(index, 1)
-    setTokens(next)
+    if (onChange) onChange(id, next)
   }
 
   function change(event) {
@@ -34,10 +23,10 @@ export const TokenField = ({ id, label, init = [], readOnly, options, onChange }
     setValue(value)
   }
 
-  function changeDropDown(id, value) {
+  function changeDropDown(fid, value) {
     const next = tokens.concat(value)
-    setTokens(next)
-    setValue('xxx')
+    if (onChange) onChange(id, next)
+    setValue('')
   }
 
   function onEnter(event) {
@@ -46,7 +35,7 @@ export const TokenField = ({ id, label, init = [], readOnly, options, onChange }
       event.stopPropagation()
       const token = event.target.value
       const next = tokens.concat(token)
-      setTokens(next)
+      if (onChange) onChange(id, next)
       setValue('')
     }
 
@@ -56,10 +45,12 @@ export const TokenField = ({ id, label, init = [], readOnly, options, onChange }
     }
   }
 
+  const tks = Array.isArray(tokens) ? tokens : []
+
   return (
     <div className='tokenField'>
       <label>{label}</label>
-      {tokens.map((text, index) => <Token text={text} onDelete={() => remove(index)} />)}
+      {tks.map((text, index) => <Token text={text} onDelete={() => remove(index)} />)}
       {options ? (
         <DropDown onChange={changeDropDown} options={options} predictive={true} verbose={false} />
       ) : (