ywana-core8 0.0.391 → 0.0.392

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.391",
+  "version": "0.0.392",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/html/color.css

@@ -0,0 +1,18 @@
+.color-field {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    padding: .5rem;
+    overflow: hidden;
+    display: flex;
+    max-height: 3.5rem;
+    min-height: 3.5;
+}
+
+.color-field>label { 
+    flex:1;
+    color: var(--primary-color);
+    font-size: .9rem;
+    font-weight: normal;
+    pointer-events: none;
+}

package/src/html/color.js

@@ -1,17 +1,19 @@
-import React from 'react'
-import { CirclePicker } from 'react-color'
+import React, {useState} from 'react'
+import './color.css'
 
 export const ColorField = (props) => {
 
-    const {id, onChange} = props
+    const {id, label="Color", value, onChange} = props
 
-    function change(color) {
-       if (onChange) onChange(id, color.hex)
+    function change(event) {
+        const color = event.target.value
+       if (onChange) onChange(id, color)
     }
 
     return (
         <div className="color-field">
-            <CirclePicker onChangeComplete={change} width=""/>
+            <label for={id}>{label}</label>
+            <input id={id} type="color" onChange={change} value={value}/>
         </div>
     )
 }

package/src/html/color.test.js

@@ -7,13 +7,14 @@ const ColorFieldTest = (prop) => {
     })
 
     function change(id, value) {
+        console.log(id, value)
         const next = Object.assign({}, form, { [id] : value })
         setForm(next)
     }
 
     return (
         <>
-           <ColorField onChange={change} />
+           <ColorField id="color1" onChange={change} value={form.color1} />
         </>
     )
 }

package/src/html/textfield.test.js

@@ -27,6 +27,7 @@ const TextFieldTest = (prop) => {
             <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} />
+            <TextField id="color1" type="COLOR" label="Color" value={form.date1} onChange={change} />
         </>
     )
 }

package/src/html/color1.css

@@ -1,3 +0,0 @@
-.color-field {
-    border: solid 1px red;
-}