ywana-core8 0.0.912 → 0.0.914

package/package.json

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

package/src/domain2/DynamicForm.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CheckBox, ColorField, DateRange, DropDown, TextField, TokenField } from '../html'
+import { CheckBox, ColorField, DateRange, DropDown, TextField, TokenField, TextArea } from '../html'
 import { FORMATS } from './FORMATS'
 import { TYPES } from './TYPES'
 import './DynamicForm.css'
@@ -52,6 +52,12 @@ const DynamicFormField = (props) => {
         const label = required ? `${field.label} *` : field.label
 
         switch (format) {
+            case FORMATS.NUMBER:
+                return <TextField id={id} label={label} type="number" value={value} onChange={change} outlined />
+            case FORMATS.BOOLEAN:
+                return <CheckBox id={id} label={label} value={value} onChange={change} />
+            case FORMATS.TEXT:
+                return <TextArea id={id} label={label} value={value} onChange={change} outlined />
             case FORMATS.DATE:
                 return <TextField id={id} label={label} type="date" value={value} onChange={change} outlined />
             case FORMATS.TIME:

package/src/domain2/FORMATS.js

@@ -3,6 +3,9 @@
  */
 export const FORMATS = {
     NONE: '',
+    TEXT: 'text',
+    NUMBER: 'number',
+    BOOLEAN: 'boolean',
     DATE: 'date',
     DATERANGE: 'DATERANGE',
     TIME: 'time',   

package/src/html/table.js

@@ -148,10 +148,13 @@ export const DataTable = (props) => {
 const DataTableFiltersRow = ({ columns }) => {
     return (
         <tr className="filters-row">
-            {columns.map(({ id, filterable, onFilter }) => {
+            {columns.map(({ id, filterable, onFilter, options }) => {
+
+                const field = options ? <DropDown id={id} options={options} onChange={onFilter} outlined /> : <TextField id={id} onChange={onFilter} outlined /> 
+
                 return (
                     <td className='filter-cell'>
-                        {filterable ? <TextField id={id} onChange={onFilter} outlined /> : null}
+                        {filterable ? field : null}
                     </td>
                 )
             })}

package/src/html/table.test.js

@@ -43,8 +43,13 @@ export const TableTest = (prop) => {
         columns: [
             { id: "index"      , label: "#"          , type: "INDEX"                         },
             { id: "checked"                                          , onChange: check       },
-            { id: "name"       , label: "Name"       , type: "String", sortable: true, filtrable: true, resizable: true },
-            { id: "description", label: "Description", type: "String", sortable: true        },
+            { id: "name"       , label: "Name"       , type: "String", sortable: true, filterable: true, resizable: true },
+            { id: "category"  , label: "Category"   , type: "String", sortable: true, filterable: true, resizable: false, options: [
+                { label: "A", value: "A" },
+                { label: "B", value: "B" },
+                { label: "C", value: "C" },
+            ]},
+            { id: "description", label: "Description", type: "String", sortable: true       },
             { id: "color"      , label: "Color"      , type: "String", format: FORMATS.COLOR },
             { id: "date"       , label: "Date"       , type: "String", format: FORMATS.DATE  },
             { id: "num"        , label: "Num"        , type: "Number", maxDecimals: 2, sortable: true},
@@ -58,7 +63,7 @@ export const TableTest = (prop) => {
                 <DataTable {...table1} onRowSelection={select} outlined multisort={true}/>
             </div>
             <div style={{ maxHeight: "20rem", overflow: "auto", margin: "2rem" }}>
-                <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll} />
+                <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll} filterable={true} />
             </div>
         </>
     )