ywana-core8 0.0.621 → 0.0.624

package/package.json

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

package/src/domain/CollectionPage.css

@@ -25,12 +25,12 @@ menu.collection-page>main.collection-filters {
 }
 
 menu.collection-page>.list {
-    overflow:auto;
+    overflow: auto;
 }
 
 menu.collection-page>main {
     flex: 1;
-    overflow:auto;
+    overflow: auto;
 }
 
 menu.collection-page>footer>.search-box {
@@ -47,4 +47,21 @@ main.collection-page>.content-editor {
     flex: 1;
 }
 
+main.collection-page.dock-to-right {
+    display: grid;
+    grid-template-areas: "header header" "main dock" "footer dock";
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr auto;
+}
+
+main.collection-page.dock-to-right>header {
+    grid-area: header;
+}
+
+main.collection-page.dock-to-right>main {
+    grid-area: main;
+}
 
+main.collection-page.dock-to-right>article {
+    grid-area: dock;
+}

package/src/domain/CollectionPage.js

@@ -24,6 +24,7 @@ export const CollectionPage = (props) => {
         autosave = false, delay = 1000,
         groupBy, levels, sorter,
         editor,
+        footer,
         children
     } = props
 
@@ -87,6 +88,9 @@ export const CollectionPage = (props) => {
             <main key={id} className={`collection-page ${className}`}>
                 <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} canEdit={canEdit} onReload={reloadSelection} />
                 {children ? <article>{children}</article> : null}
+                <footer>
+                    {footer}
+                </footer>
             </main>
         </Fragment>
     )
@@ -171,7 +175,7 @@ const CollectionList = (props) => {
     function search() {
         const items = filter ? all.filter(item => {
             const result = searchBy.some(fieldName => {
-                const value = item[fieldName]
+                const value = item[fieldName] ? item[fieldName].toUpperCase() : ""
                 return value ? value.indexOf(filter.toUpperCase()) >= 0 : false
             })
             return result

package/src/html/icon.js

@@ -4,7 +4,7 @@ import './icon.css'
 /**
  * Icon 
  */
-export const Icon = ({ icon, size = "normal", clickable = false, disabled = false, action, eventPropagation = false }) => {
+export const Icon = ({ icon, size = "normal", clickable = false, disabled = false, action, eventPropagation = false, className }) => {
 
     function click (event) {
         if (!eventPropagation) {
@@ -16,7 +16,7 @@ export const Icon = ({ icon, size = "normal", clickable = false, disabled = fals
 
     const style = disabled ? "disabled" : clickable ? "clickable" : ""
     return (
-        <i className={`icon ${size} ${style} material-icons`} onClick={click}>
+        <i className={`icon ${size} ${style} ${className} material-icons`} onClick={click}>
             {icon}
         </i>
     )

package/src/html/textfield.css

@@ -60,6 +60,14 @@
   -webkit-transition: 0.2s ease all;
 }
 
+.textfield > label .row .icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  font-size: 1rem;
+  margin-left: .3rem;
+  color: var(--text-color-lighter);
+}
+
 input:read-only {
   background-color: rgba(200,200,200,.1);
   border: 0px !important;
@@ -122,6 +130,13 @@ input:read-only ~ label,
   right: .2rem;
 }
 
+.dropdown>.decorator {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.7rem !important;
+  color: rgba(150,150,150,1);
+}
+
 .dropdown>.textfield>.icon,
 .dropdown>.textfield-outlined>.icon {
   position: absolute;

package/src/html/textfield.js

@@ -119,26 +119,34 @@ export const TextArea = (props) => {
 export const DropDown = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, options = [], value, onChange, predictive = false, readOnly = false, verbose = true, onBlur } = props
+    const { id, options = [], value, onChange, predictive = false, readOnly = false, verbose = true, editable = false, onBlur } = props
     const [open, setOpen] = useState(false)
     const [label, setLabel] = useState()
 
     useEffect(() => {
+
         if (Array.isArray(options)) {
             const option = options.find(option => option.value === value)
             const label = option ? option.label : ""
-            setLabel(label)
+            if (editable && label === "") setLabel(value)
+            if (!editable) setLabel(label)
         }
-    }, [value])
 
+    }, [value])
+    
     function change(id, value) {
         if (predictive) {
             setLabel(value)
         } else {
+            console.log('change',id, value)
             if (onChange) onChange(id, value)
         }
     }
 
+    function onFocus() {
+        if (!editable) toggle()
+    }
+
     function toggle() {
         if (site && site.changeFocus) {
             site.changeFocus({
@@ -175,9 +183,10 @@ export const DropDown = (props) => {
         }
     }
 
+    const title = editable ? <div className='row'>{props.label}<Icon className="decorator" icon="edit" size="small" /></div> : props.label}
     return (
         <div className="dropdown">
-            <TextField {...props} onClick={toggle} value={label} onChange={change} onBlur={blur} readOnly={!predictive} />
+            <TextField {...props} label={title} onClick={onFocus} value={label} onChange={change} onBlur={blur} readOnly={!predictive && !editable} />
             {!readOnly ? <Icon icon="expand_more" clickable size="small" action={toggle} /> : null}
             {renderOptions()}
         </div>

package/src/html/textfield.test.js

@@ -8,6 +8,7 @@ const TextFieldTest = (prop) => {
     const [form, setForm] = useState({})
 
     function change(id, value) {
+        console.log('2', id, value)
         const next = Object.assign({}, form, { [id]: value })
         setForm(next)
     }
@@ -29,11 +30,12 @@ const TextFieldTest = (prop) => {
     return (
         <>
             <DropDown id="b1" label="Boolean1" onChange={change} options={options2} value={form.b1} />
+            <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}/>
+            <DropDown id="gender3" label="Dropdown 3" value={form.gender3} onChange={change} options={options} predictive={false} editable={true}/>
             <TokenField id="token1" label="Tokens" onChange={change} />
             <TokenField id="token2" label="Tokens DropDown" onChange={change} options={options} tokens={form.token2}/>
             <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} />
             <DateRange id="range1" value={form.range1} onChange={change}/>