ywana-core8 0.0.417 → 0.0.420

package/package.json

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

package/src/domain/ContentEditor.js

@@ -250,8 +250,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
       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: 
-        const init = Array.isArray(value) ? value : []
-        return <TokenField id={id} label={label} onChange={change} readOnly={!editable} options={buildOptions()} init={init}/>
+        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,6 @@ const schema = {
 
 const value = {
     name: "John Smith",
-    field3 : ["1","2"]
 }
 
 const ContentEditorTest = (prop) => {
@@ -33,7 +32,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) {
-    const next = tokens.concat(value)
-    setTokens(next)
-    setValue('xxx')
+  function changeDropDown(fid, value) {
+    const next = Array.isArray(tokens) ? tokens.concat(value) : [value]
+    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} />
       ) : (