ywana-core8 0.0.137 → 0.0.138

package/package.json

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

package/src/html/textfield-outlined.css

@@ -39,6 +39,12 @@
   -webkit-transition: 0.2s ease all;
 }
 
+.textfield-outlined input[type="date"] ~ label {
+    top: .3rem;
+    font-size: .8rem;
+    color: var(--primary-color);
+}
+
 /* active state */
 .textfield-outlined > input:focus ~ label,
 .textfield-outlined > input:valid ~ label {

package/src/html/textfield.css

@@ -47,6 +47,12 @@ input:read-only {
   border: 0px !important;
 }
 
+.textfield input[type="date"] ~ label {
+    top: .3rem;
+    font-size: .8rem;
+    color: var(--primary-color);
+}
+
 /* active state */
 input:read-only ~ label,
 .textfield > input:focus ~ label,

package/src/html/textfield.js

@@ -11,7 +11,7 @@ import './textfield.css'
 export const TextField = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, type = 'text', label, placeholder, value, outlined, readOnly=false, onChange, onEnter, onClick } = props
+    const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, onChange, onEnter, onClick } = props
 
     function onKeyPress(event) {
         var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
@@ -29,9 +29,11 @@ export const TextField = (props) => {
 
     function focus() {
         if (site) {
-            site.changeFocus({ lose: () => {
-                // DO NOTHING
-            }})
+            site.changeFocus({
+                lose: () => {
+                    // DO NOTHING
+                }
+            })
         }
     }
 
@@ -41,9 +43,9 @@ export const TextField = (props) => {
     const labelTxt = <Text>{label}</Text>
     return (
         <div className={`${style}`} onClick={onClick}>
-            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} onfocus="(this.type='date')" onfocusout="(this.type='text')"/>
+            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} onfocus="(this.type='date')" onfocusout="(this.type='text')" />
             <span className="bar"></span>
-            { label ? <label>{labelTxt}</label> : null }
+            {label ? <label>{labelTxt}</label> : null}
         </div>
     )
 }
@@ -54,9 +56,10 @@ export const TextField = (props) => {
 export const DropDown = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, options = [], value, onChange } = props
+    const { id, options = [], value, onChange, canFilter = false } = props
     const [open, setOpen] = useState(false)
     const [label, setLabel] = useState()
+    const [filter, srtFilter] = useState()
 
     useEffect(() => {
         if (Array.isArray(options)) {
@@ -65,13 +68,22 @@ export const DropDown = (props) => {
         }
     }, [value])
 
+    function change(id, value) {
+        if (canFilter) {
+            setFilter(value)
+        } else {
+            if (onChange) onChange(id, value)
+        }
+    }
 
     function toggle() {
         if (site) {
-            site.changeFocus({ lose: () => {
-                setOpen(false) 
-            }})
-        } 
+            site.changeFocus({
+                lose: () => {
+                    setOpen(false)
+                }
+            })
+        }
         setOpen(!open)
     }
 
@@ -83,14 +95,20 @@ export const DropDown = (props) => {
         setOpen(false)
     }
 
+    const items = (open == true && Array.isArray(options)) ?
+        options
+            .filter(option => canFilter === false || filter.toUpperCase().indexOf(option.label.toUpperCase()) >= 0 )
+            .map(option => <li key={option.value} value={option.value}>{option.label}</li>)
+            : null
+
     return (
         <div className="dropdown">
-            <TextField {...props} onClick={toggle} value={label} />
+            <TextField {...props} onClick={toggle} value={label} onChange={change} />
             <Icon icon="expand_more" clickable size="small" action={toggle} />
             {open == true ? (
                 <menu>
                     <ul onClick={select}>
-                        {Array.isArray(options) ? options.map(option => <li key={option.value} value={option.value}>{option.label}</li>) : null}
+                        {items}
                     </ul>
                 </menu>
             ) : null}