ywana-core8 0.0.523 → 0.0.526

package/package.json

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

package/src/html/table.js

@@ -111,8 +111,8 @@ export const DataTable = (props) => {
                 </thead>
                 <tbody>
                     {rows.length > 0 ?
-                        multiSort(rows, sortDir).map(row => (
-                            <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={moveRow} editable={editable} expanded={expanded} />
+                        multiSort(rows, sortDir).map((row,index) => (
+                            <DataTableRow key={row.id} index={index} row={row} columns={columns} onSelect={select} onDrop={moveRow} editable={editable} expanded={expanded} />
                         )) : (
                             <tr>
                                 <td colSpan={1000}>
@@ -135,7 +135,7 @@ export const DataTable = (props) => {
  */
 const DataTableRow = (props) => {
 
-    const { row, columns = [], onSelect, editable, expanded = false } = props
+    const { index, row, columns = [], onSelect, editable, expanded = false } = props
     const { className } = row
     const [isInfoOpen, toggleInfo] = useState(expanded)
     const infoIcon = isInfoOpen ? 'expand_more' : 'expand_less'
@@ -143,7 +143,7 @@ const DataTableRow = (props) => {
     return (
         <Fragment>
             <tr className={className} onClick={ev => onSelect(row, ev)}>
-                {columns.map((column, index) => <DataTableCell key={`${column.id}_${index}`} row={row} column={column} cell={row[column.id]} editable={editable} />)}
+                {columns.map((column, cindex) => <DataTableCell key={`${column.id}_${cindex}`} index={index} row={row} column={column} cell={row[column.id]} editable={editable} />)}
                 {row.info ? <td><Icon icon={infoIcon} clickable action={() => toggleInfo(!isInfoOpen)} /></td> : <td></td>}
             </tr>
             {row.info && isInfoOpen ? (
@@ -160,7 +160,7 @@ const DataTableRow = (props) => {
 /**
  * DataTable Cell
  */
-const DataTableCell = ({ row, column, cell, editable }) => {
+const DataTableCell = ({ index, row, column, cell, editable }) => {
 
     const render = (type) => {
         const { id, disabled = false, min, max, onChange, format, options, item } = column
@@ -181,6 +181,7 @@ const DataTableCell = ({ row, column, cell, editable }) => {
             }
         } else {
             switch (type) {
+                case "INDEX": return <span>{index}</span>
                 case "ICON": return <Icon icon={cell} />
                 case "Boolean": return <BooleanCellViewer id={id} value={cell} />
                 case "String": return <StringCellViewer id={id} value={cell} format={format} options={options} />

package/src/html/table.test.js

@@ -39,6 +39,7 @@ export const TableTest = (prop) => {
         className: "xxx",
         editable: true,
         columns : [
+            { id: "index", type: "INDEX", label: "#"},
             { id: "checked", onChange: check },
             { id: "name", label: "Name", type: "String", onChange: editCell },
             { id: "name", label: "Name", type: "String", sortable: true },
@@ -65,7 +66,7 @@ export const TableTest = (prop) => {
 
     return (
         <div style={{ maxHeight: "20rem", overflow: "hidden", border: "solid 1px red", margin: "2rem" }}>
-           <DataTable {...table2} onRowSelection={select} onCheckAll={checkAll}/>
+           <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll}/>
         </div>
     )
 }

package/src/html/textfield.js

@@ -168,7 +168,7 @@ export const DropDown = (props) => {
         if (canShow) {
             const filterActive = predictive === true && label && label.length > 0
             const items = filterActive ? options.filter(option => option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0) : options
-            const lis = items.map(option => <li key={option.value} value={option.value}>{option.label}</li>)
+            const lis = items.map(option => <li key={option.value} value={option.value}><Text>{option.label}</Text></li>)
             return <menu><ul onMouseDown={select}>{lis}</ul></menu>
         } else {
             return null

package/src/widgets/planner/Planner.js

@@ -93,7 +93,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
             {navigation ? (
                 <Header title={label}>
                     &nbsp;&nbsp;
-                    <Button label="Esta Semana" outlined action={showThisWeek}/>
+                    <Button label="This Week" outlined action={showThisWeek}/>
                     <Icon icon="chevron_right" clickable action={next} />
                     <TextField id="to" type="date" label="To" value={to} onChange={(id, value) => setTo(value)} />
                     <div className="expand"></div>