ywana-core8 0.0.645 → 0.0.647

package/package.json

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

package/src/html/table.css

@@ -17,20 +17,18 @@
 .datatable8 thead  {
     position: sticky;
     top: 0px;
-    background-color: rgba(240,240,240);
     overflow: hidden;
-    color: var(--text-color-lighter);
+    color: var(--text-color-light);
     z-index: 10;
 }
 
-.datatable8 thead tr {
-    border-bottom: solid 1px var(--divider-color);
-}
-
 .datatable8 thead th {
+    height: 2.1rem;
     padding: 0 1rem;
     text-align: left;
     font-weight: 600 !important;
+    border-bottom: solid 1px var(--divider-color);
+    background-color: var(--paper-color);
 }
 
 .datatable8 thead th>div {
@@ -38,6 +36,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    text-transform: uppercase;
+    font-size: .8rem;
 }
 
 .datatable8 tbody {
@@ -45,8 +45,8 @@
     height: 5rem;
 }
 
-.datatable8 tbody tr {
-    border-bottom: solid 1px var(--divider-color);
+.datatable8 tbody tr.selected {
+    background-color: rgba(200,200,200,.6);
 }
 
 .datatable8 tbody tr:hover {
@@ -54,6 +54,10 @@
     cursor: pointer
 }
 
+.datatable8 tbody tr.selected:hover {
+    background-color: rgba(200,200,200,.4);
+}
+
 .datatable8 tbody td {
     height: 3rem;
     padding: 0 1rem;
@@ -64,6 +68,22 @@
     color: var(--text-color-light);
 }   
 
+.datatable8 tbody td.index {
+    width: 3rem;
+    overflow: hidden;
+    color: var(--text-color-lighter);
+}
+
+.datatable8 tbody td.checked
+ {
+    width: 3rem;
+    overflow: hidden;
+ }
+
+ .datatable8 tbody td.checked .checkmark {
+    border-color: var(--text-color-lighter) !important;
+}
+
 .datatable8 .string-viewer img {
     height: 5rem;
-}
+}

package/src/html/table.js

@@ -87,8 +87,8 @@ export const DataTable = (props) => {
                             return (
                                 <th key={id} rowSpan={rowspan} colSpan={colspan}>
                                     <div>
-                                        {id === "checked" ? <CheckBox onChange={checkAll} value={allChecked} /> : <Text key={`th_${id}`}>{label}</Text>}
-                                        {sortable ? <Icon icon="expand_less" size="small" clickable action={() => changeSort(id)} /> : null}
+                                        {id === "checked" && onCheckAll ? <CheckBox onChange={checkAll} value={allChecked} /> : <Text key={`th_${id}`}>{label}</Text>}
+                                        {sortable ? <SortIcon sortDir={sortDir[id]} onChange={() => changeSort(id)} /> : null}
                                     </div>
                                 </th>
                             )
@@ -135,10 +135,11 @@ export const DataTable = (props) => {
  */
 const DataTableRow = (props) => {
     const { index, row, columns = [], onSelect, editable, expanded = false } = props
-    const { className } = row
+    const { selected = false, className } = row
     const [isInfoOpen, toggleInfo] = useState(expanded)
     const infoIcon = isInfoOpen ? 'expand_more' : 'expand_less'
-    const style = isInfoOpen ? "expanded" : ""
+    let style = isInfoOpen ? "expanded" : ""
+    if (selected) style += " selected"
     return (
         <Fragment>
             <tr className={`${style} ${className}`} onClick={ev => onSelect(row, ev)}>
@@ -293,3 +294,13 @@ export const StringCellEditor = ({ id, value = '', options, onChange }) => {
         </div>
     )
 }
+
+/**
+ * Sort Icon
+ */
+const SortIcon = (props) => {
+    const { sortDir, onChange } = props
+    console.log("sortDir", sortDir)
+    const icon = sortDir ? sortDir > 0 ? "arrow_upward" : "arrow_downward" : "swap_vert"
+    return <Icon icon={icon} size="small" clickable action={onChange} />
+}

package/src/html/table.test.js

@@ -6,15 +6,15 @@ export const TableTest = (prop) => {
 
     const [rows, setRows] = useState(
         [
-            { id: 1, checked: false, name: "John Smith"    , thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png"},
-            { id: 2, checked: false, name: "Ann Martin"    , color: "#CCFFFF" },
-            { id: 3, checked: false, name: "Ann Martin"    , color: "#CCFFFF" },
-            { id: 4, checked: false, name: "Ann Martin"    , color: "#CCFFFF" },
-            { id: 5, checked: false, name: "Ann Martin"    , color: "#CCFFFF" },
-            { id: 6, checked: false, name: "John Smith"    , color: "#CCFFFF" },
-            { id: 7, checked: false, name: "Ann Martin"    , color: "#CCFFFF" },
-            { id: 8, checked: false, name: "Martin Freeman", color: "#CCFFFF" },
-            { id: 9, checked: false, name: "Ann Martin"    , color: "#CCFFFF", date: new Date().toString() },
+            { id: 1, checked: false, name: "John Smith"    , description: "lorem ipsum ", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png" },
+            { id: 2, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF" },
+            { id: 3, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF" },
+            { id: 4, checked: false, name: "Zack McCracken", description: "lorem ipsum ", color: "#CCFFFF" },
+            { id: 5, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF" },
+            { id: 6, checked: false, name: "John Smith"    , description: "lorem ipsum ", color: "#CCFFFF" },
+            { id: 7, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF" },
+            { id: 8, checked: false, name: "Martin Freeman", description: "lorem ipsum ", color: "#CCFFFF" },
+            { id: 9, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF", date: new Date().toString() },
         ]
     )
 
@@ -23,50 +23,42 @@ export const TableTest = (prop) => {
     }
 
     function select(row) {
-        //console.log('select',row)
+        const next = rows.map(r => r.id === row.id ? { ...r, selected: !r.selected } : r)
+        setRows(next)
     }
 
-    function check(id,checked, c) {
-        //console.log('check', id, checked, c)
+    function check(rowID, columnID, value) {
+        const next = rows.map(r => r.id === rowID ? { ...r, checked: value } : r)
+        setRows(next)
     }
 
     function checkAll(ids, checked) {
-        const next = rows.map( row => Object.assign({}, row, { checked }))
+        const next = rows.map(row => Object.assign({}, row, { checked }))
         setRows(next)
     }
 
     const table1 = {
         className: "xxx",
         editable: true,
-        columns : [
-            { id: "index", type: "INDEX", label: "#"},
-            { id: "checked", onChange: check },
-            { id: "name", label: "Name", type: "String", onChange: editCell },
-            { id: "thumb", label: "Thumb", type: "String", format: FORMATS.IMG },
-            { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
-            { id: "date", label: "Date", type: "String", format: FORMATS.DATE },
+        columns: [
+            { id: "index"      , label: "#"          , type: "INDEX"                         },
+            { id: "checked"                                          , onChange: check       },
+            { id: "name"       , label: "Name"       , type: "String", sortable: true, filtrable: true },
+            { id: "description", label: "Description", type: "String"                        },
+            { id: "color"      , label: "Color"      , type: "String", format: FORMATS.COLOR },
+            { id: "date"       , label: "Date"       , type: "String", format: FORMATS.DATE  },
         ],
         rows
-    } 
-
-    const table2 = {
-        className: "xxx",
-        editable: true,
-        columns : [
-            { id: "checked", onChange: check },
-            { id: "name", label: "Name", type: "String", sortable: true },
-            { id: "thumb", label: "Thumb", type: "String", format: FORMATS.IMG },
-            { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
-            { id: "date", label: "Date", type: "String", format: FORMATS.DATE },
-        ],
-        rows: []
-    } 
+    }
 
     return (
-        <div style={{ maxHeight: "20rem", overflow: "hidden", border: "solid 1px red", margin: "2rem" }}>
-           <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll}/>
-           x
-           <DataTable {...table2} onRowSelection={select} onCheckAll={checkAll}/>
-        </div>
+        <>
+            <div style={{ maxHeight: "20rem", overflow: "auto", margin: "2rem", display: "flex" }}>
+                <DataTable {...table1} onRowSelection={select} outlined />
+            </div>
+            <div style={{ maxHeight: "20rem", overflow: "auto", margin: "2rem" }}>
+                <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll} />
+            </div>
+        </>
     )
 }

package/src/html/textfield.js

@@ -52,7 +52,7 @@ export const TextField = (props) => {
     const labelTxt = <Text>{label}</Text>
 
     return (
-        <div className={`${style}`} onClick={onClick}>
+        <div className={`${style} ${id}`} 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}
             <span className="bar"></span>

package/src/html/tree.test.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import { Tree, TreeNode, TreeItem } from './tree';
+
+export const TreeTest = (prop) => {
+
+    const papers = []
+
+    function groupBy(items, by) {
+        const itemsMap = items.reduce(
+            (entryMap, e) => entryMap.set(e[by], [...entryMap.get(e[by]) || [], e]),
+            new Map()
+        );
+        const groups = (Array.from(itemsMap).map(([name, items]) => ({ name, items })))
+        return groups
+    }
+
+    const items = papers.filter(paper => {
+        return !search || search === '' ? true :
+            paper.paper.toUpperCase().indexOf(search.toUpperCase()) >= 0
+            || `${paper.width}x${paper.height}`.toUpperCase().indexOf(search.toUpperCase()) >= 0
+            || `${paper.grammage}`.toUpperCase().indexOf(search.toUpperCase()) >= 0
+    })
+
+
+    return (
+        <>
+            <Tree key={`tree`}>
+                {groupBy(items, 'type').map(types => (
+                    <TreeNode open={expanded} icon="print" label={types.name}>
+                        {groupBy(types.items, 'family').map(family => (
+                            <TreeNode open={true} icon="network_check" label={`${group.name} grs.`}>
+                                {group.items.map(paper => (
+                                    <TreeItem icon="aspect_ratio" label={`${paper.width}x${paper.height}`} onSelect={() => select(paper)} />
+                                ))}
+                            </TreeNode>
+                        ))}
+                    </TreeNode>
+
+                ))}
+            </Tree>
+        </>
+    )
+}