ywana-core8 0.0.135 → 0.0.139

package/package.json

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

package/src/domain/ContentEditor.js

@@ -244,7 +244,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
     <div className='field-editor string-editor'>
       {
         format === FORMATS.DATE ? <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} /> :
-          options ? <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} /> :
+          options ? <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} canFilter={true}/> :
             <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={!editable} />
       }
     </div>

package/src/domain/TablePage.js

@@ -153,16 +153,16 @@ const TableSelector = (props) => {
     const { all, checked} = pageContext
 
     const count = `${checked.size}/${all.length}`
-
     const rows = all.filter(item => checked.has(item.id))
-    console.log(count, rows)
-
     const table = {
         columns: [
             { id:"idMatricula", label: "ID Matricula" }
         ],
         rows: rows || []
     }
+    const buttons = actions.map(({label, action }) => {
+        return <Button label={label} raised action={() => action(rows)} />
+    })
 
     return (
         <div className="table-selector">
@@ -173,7 +173,7 @@ const TableSelector = (props) => {
                 <DataTable {...table} />
             </main>
             <footer>
-                { actions }
+                { buttons }
             </footer>
         </div>
     )

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, setFilter] = useState()
 
     useEffect(() => {
         if (Array.isArray(options)) {
@@ -65,13 +68,23 @@ export const DropDown = (props) => {
         }
     }, [value])
 
+    function change(id, value) {
+        console.log('dropdown change > canFilter:', canFilter, 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 +96,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}