ywana-core8 0.0.506 → 0.0.509

package/package.json

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

package/src/html/table.js

@@ -13,7 +13,7 @@ const isFunction = value => value && (Object.prototype.toString.call(value) ===
  */
 export const DataTable = (props) => {
 
-    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className} = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className } = props
     const [sortDir, setSortDir] = useState({})
     const [allChecked, setAllChecked] = useState(false)
 
@@ -83,12 +83,12 @@ export const DataTable = (props) => {
                     <tr>
                         {columns.map(({ id, label, type, item, sortable }) => {
                             const sort = sortDir[id] ? sortDir[id] : null
-                            const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v=>v.column===true).length] : [2, 1]
+                            const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v => v.column === true).length] : [2, 1]
                             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}
+                                        {sortable ? <Icon icon="expand_less" size="small" clickable action={() => changeSort(id)} /> : null}
                                     </div>
                                 </th>
                             )
@@ -127,7 +127,7 @@ export const DataTable = (props) => {
 const DataTableRow = (props) => {
 
     const { row, columns = [], onSelect, editable, expanded = false } = props
-    const { className} = row
+    const { className } = row
     const [isInfoOpen, toggleInfo] = useState(expanded)
     const infoIcon = isInfoOpen ? 'expand_more' : 'expand_less'
 
@@ -180,7 +180,7 @@ const DataTableCell = ({ row, column, cell, editable }) => {
         }
     }
 
-    return column.type === TYPES.ENTITY ? <EntityCellViewer id={column.id} item={column.item} value={cell} /> : (
+    return column.type === TYPES.ENTITY ? <EntityCellViewer id={column.id} item={column.item} value={cell} format={format} /> : (
         <td key={column.id} className={column.id}>{render(column.type)}</td>
     )
 }
@@ -190,10 +190,33 @@ const DataTableCell = ({ row, column, cell, editable }) => {
  * @param {*} param0 
  * @returns 
  */
-const EntityCellViewer = ({ id, item, value }) => {
+const EntityCellViewer = ({ id, item, value, format }) => {
     const fields = Object.values(item).filter(field => field.column === true)
-    return fields.map( field => {
-        return (<td key={field.id} className={`entity-cell ${field.id}`} >{value[field.id]}</td>)
+
+    return fields.map(field => {
+
+        let text = value[field.id]
+
+        switch (format) {
+            case FORMATS.COLOR:
+                text = <input type="color" value={text} disabled />
+            case FORMATS.URL:
+                text = <a href={text} target="download" download >{text}</a>
+                break;
+            case FORMATS.IMG:
+                text = <img src={text} />
+                break;
+            case FORMATS.DATE:
+                let fecha = new Date(text)
+                fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1)
+                text = fecha.toLocaleString(locale, { day: 'numeric', month: 'numeric', year: 'numeric' });
+                break;
+            case FORMATS.TIME:
+                text = new Date(text).toLocaleString(locale, { year: 'hour', month: 'minute', day: 'second' });
+                break;
+        }
+
+        return (<td key={field.id} className={`entity-cell ${field.id}`} >{text}</td>)
     })
 }
 
@@ -213,27 +236,27 @@ const StringCellViewer = ({ id, value, format, options }) => {
     function buildOptions() {
         const opts = typeof options === 'function' ? options() : options
         return opts
-      }
-      
+    }
+
     const option = options ? buildOptions().find(o => o.value === value) : null
     let text = option ? option.label : value
     const locale = window.navigator.userLanguage || window.navigator.language;
     switch (format) {
         case FORMATS.COLOR:
-            text = <input type="color" value={text} disabled/>
+            text = <input type="color" value={text} disabled />
         case FORMATS.URL:
             text = <a href={text} target="download" download >{text}</a>
             break;
-        case FORMATS.IMG: 
+        case FORMATS.IMG:
             text = <img src={text} />
             break;
-        case FORMATS.DATE: 
+        case FORMATS.DATE:
             let fecha = new Date(text)
             fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1)
-            text = fecha.toLocaleString( locale, { year: 'numeric', month: 'numeric', day: 'numeric'});
+            text = fecha.toLocaleString(locale, { day: 'numeric', month: 'numeric', year: 'numeric' });
             break;
-        case FORMATS.TIME: 
-            text = new Date(text).toLocaleString( locale, { year: 'hour', month: 'minute', day: 'second' }); 
+        case FORMATS.TIME:
+            text = new Date(text).toLocaleString(locale, { year: 'hour', month: 'minute', day: 'second' });
             break;
     }
     return (<div className="field-editor string-viewer">{text}</div>)

package/src/html/table.test.js

@@ -14,7 +14,7 @@ export const TableTest = (prop) => {
             { 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" },
+            { id: 9, checked: false, name: "Ann Martin"    , color: "#CCFFFF", date: new Date().toString() },
         ]
     )
 
@@ -44,6 +44,7 @@ export const TableTest = (prop) => {
             { 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
     } 

package/src/widgets/planner/Planner.js

@@ -129,7 +129,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                         })}
                     </div>
 
-                    {lanes.map((lane) => <PlannerRow lane={lane} events={events} period={period} onSelectCell={selectCell} onChange={onChange}/>)}
+                    {lanes.map((lane) => <PlannerRow key={lane.id} lane={lane} events={events} period={period} onSelectCell={selectCell} onChange={onChange}/>)}
 
                 </div>
             </main>
@@ -161,7 +161,7 @@ const PlannerRow = (props) => {
                     return eventDate.getTime() === slotDate.getTime();
                 })
                 return (
-                    <PlannerCell lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} onDrop={change}/>
+                    <PlannerCell key={`${lane.id}-${slotDate.toString()}`} lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} onDrop={change}/>
                 );
             })}
         </div>
@@ -208,10 +208,10 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
     const weekend = isWekend ? "weekend" : "";
     const dragOverStyle = dragOver ? "drag-over" : ""
      return (
-        <div key={`${lane}-${date}`} className={`cell ${weekend} ${dragOverStyle}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
+        <div className={`cell ${weekend} ${dragOverStyle}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
             {events.map(event => {
                 const { Renderer = EventCard } = event
-                return <Renderer event={event} />
+                return <Renderer key={event.id} event={event} />
             })}
         </div>
     );