ywana-core8 0.0.393 → 0.0.394

package/package.json

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

package/src/domain/ContentEditor.js

@@ -246,7 +246,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
 
   function renderFormat(format, options) {
     switch (format) {
-      case FORMATS.COLOR: return <ColorField id={id} onChange={change} />
+      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} />
       default:

package/src/html/color.test.js

@@ -7,7 +7,6 @@ const ColorFieldTest = (prop) => {
     })
 
     function change(id, value) {
-        console.log(id, value)
         const next = Object.assign({}, form, { [id] : value })
         setForm(next)
     }

package/src/html/textfield.js

@@ -54,7 +54,7 @@ export const TextField = (props) => {
     return (
         <div className={`${style}`} onClick={onClick}>
             <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} onBlur={blur} readOnly={readOnly} />
-            {canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null }
+            {canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null}
             <span className="bar"></span>
             {label ? <label>{labelTxt}</label> : null}
         </div>
@@ -65,7 +65,7 @@ export const TextField = (props) => {
 /**
  * Text Area
  */
- export const TextArea = (props) => {
+export const TextArea = (props) => {
 
     const site = useContext(SiteContext)
     const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, canClear = true, onChange, onEnter, onClick } = props
@@ -105,7 +105,7 @@ export const TextField = (props) => {
     return (
         <div className={`${style}`} onClick={onClick}>
             <textarea id={id} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} />
-            {canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null }
+            {canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null}
             <span className="bar"></span>
             {label ? <label>{labelTxt}</label> : null}
         </div>
@@ -119,11 +119,12 @@ export const TextField = (props) => {
 export const DropDown = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, options = [], value, onChange, predictive = false, readOnly = false } = props
+    const { id, options = [], value, onChange, predictive = false, readOnly = false, verbose = true, onBlur } = props
     const [open, setOpen] = useState(false)
     const [label, setLabel] = useState()
 
     useEffect(() => {
+        console.log('DD change value', label)
         if (Array.isArray(options)) {
             const option = options.find(option => option.value === value)
             const label = option ? option.label : ""
@@ -153,14 +154,14 @@ export const DropDown = (props) => {
     function select(event) {
         const next = event.target.getAttribute("value")
         const option = options.find(option => option.value === next)
-        if (onChange) onChange(id, next)
-        setLabel(option.label)
         setOpen(false)
+        const label = verbose ? option.label : ""
+        setLabel(label)
+        if (onChange) onChange(id, next)
     }
 
     function blur() {
-        console.log("BLUR DD")
-        site.clearFocus()
+        if (onBlur) onBlur()
     }
 
     function renderOptions() {
@@ -177,8 +178,8 @@ export const DropDown = (props) => {
 
     return (
         <div className="dropdown">
-        <TextField {...props} onClick={toggle} value={label} onChange={change} onBlur={blur} readOnly={!predictive}/>
-            {!readOnly ? <Icon icon="expand_more" clickable size="small" action={toggle} /> : null }
+            <TextField {...props} onClick={toggle} value={label} onChange={change} onBlur={blur} readOnly={!predictive} />
+            {!readOnly ? <Icon icon="expand_more" clickable size="small" action={toggle} /> : null}
             {renderOptions()}
         </div>
     )

package/src/html/textfield.test.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { DropDown, TextField, TextArea } from '.'
+import { DropDown, TextField, TextArea, TokenField } from '.'
 import { Wrapper } from '../../__reactpreview__/Wrapper'
 
 const TextFieldTest = (prop) => {
@@ -22,12 +22,12 @@ const TextFieldTest = (prop) => {
 
     return (
         <>
+            <TokenField id="token1" label="Tokens" onChange={change} options={options}/>
             <TextField id="name" label="Name" value={form.name} onChange={change} />
             <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={false}/>
             <DropDown id="gender2" label="Dropdown 2" value={form.gender2} 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} />
-            <TextField id="color1" type="COLOR" label="Color" value={form.date1} onChange={change} />
         </>
     )
 }

package/src/html/tokenfield.css

@@ -1,11 +1,11 @@
 .tokenField {
+    max-height: 3.8rem;
+    min-height: 3.8;
     position: relative;
-    border: solid 1px var(--divider-color);
+    border-bottom: solid 1px var(--divider-color);
     display: flex;
     align-items: center;
-    border-radius: .3rem;
-    padding: 1rem;
-    margin: 1rem 0;
+    margin: 1rem 0 0 0;
     display: flex;
     flex-wrap: wrap;
 }
@@ -19,7 +19,8 @@
     color: var(--text-color-light)
 }
 
-.tokenField input {
+.tokenField input,
+.tokenField .dropdown {
     border: 0px;
     padding: .5rem 0;
     font-size: 1rem;

package/src/html/tokenfield.js

@@ -1,15 +1,17 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Icon } from './icon';
 import { Text } from './text';
+import { DropDown } from './textfield';
 import './tokenfield.css'
 
 /**
  * Token Field
  */
-export const TokenField = ({ id, label, init = [], readOnly, onChange }) => {
+export const TokenField = ({ id, label, init = [], readOnly, options, onChange }) => {
   const mounted = useRef(false)
   const [value, setValue] = useState()
   const [tokens, setTokens] = useState(init)
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     if (mounted.current) {
@@ -32,6 +34,12 @@ export const TokenField = ({ id, label, init = [], readOnly, onChange }) => {
     setValue(value)
   }
 
+  function changeDropDown(id, value) {
+    const next = tokens.concat(value)
+    setTokens(next)
+    setValue('xxx')
+  }
+
   function onEnter(event) {
     if (event.key === 'Enter') {
       event.preventDefault()
@@ -42,7 +50,7 @@ export const TokenField = ({ id, label, init = [], readOnly, onChange }) => {
       setValue('')
     }
 
-    if (value === '' && tokens.length> 0 && event.key === 'Backspace') {
+    if (value === '' && tokens.length > 0 && event.key === 'Backspace') {
       const next = tokens.slice(0, -1)
       setTokens(next)
     }
@@ -51,10 +59,14 @@ export const TokenField = ({ id, label, init = [], readOnly, onChange }) => {
   return (
     <div className='tokenField'>
       <label>{label}</label>
-      {tokens.map((text, index) => (
-        <Token text={text} onDelete={() => remove(index)} />
-      ))}
-      <input type='text' value={value} onChange={change} onKeyDown={onEnter} readOnly={readOnly}/>
+
+      {tokens.map((text, index) => <Token text={text} onDelete={() => remove(index)} />)}
+
+      {options ? (
+        <DropDown onChange={changeDropDown} options={options} predictive={true} verbose={false} />
+      ) : (
+        <input type='text' value={value} onChange={change} onKeyDown={onEnter} readOnly={readOnly} />)
+      }
     </div>
   )
 }
@@ -68,7 +80,7 @@ const Token = ({ text, onDelete }) => {
       <Text use='caption' tag='div'>
         {text}
       </Text>
-      <Icon icon='close' clickable action={onDelete} size="small"/>
+      <Icon icon='close' clickable action={onDelete} size="small" />
     </div>
   )
 }