ywana-core8 0.0.389 → 0.0.392

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.389",
+  "version": "0.0.392",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",
@@ -34,6 +34,7 @@
     "material-design-icons-iconfont": "^6.1.1",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
+    "react-color": "^2.19.3",
     "react-datepicker": "^4.6.0",
     "react-error-overlay": "^6.0.10",
     "react-notifications-component": "^3.4.1",

package/src/domain/ContentEditor.js

@@ -3,6 +3,7 @@ import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, Te
 import { CHECK, Content, TYPES } from './ContentType';
 import './ContentEditor.css';
 import { FORMATS } from './ContentType';
+import { ColorField } from '../html/color';
 
 /**
  * Content Editor
@@ -245,7 +246,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
 
   function renderFormat(format, options) {
     switch (format) {
-      case FORMATS.COLOR: return <div>COLOR PICKER</div>
+      case FORMATS.COLOR: return <ColorField id={id} onChange={change} />
       case FORMATS.HTML: return <Editor id={id} value={value} onChange={change} content={content} />
       case FORMATS.DATE: return <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} />
       default:

package/src/domain/ContentEditor.test.js

@@ -1,13 +1,14 @@
 import React, { useState } from 'react'
 import { ContentEditor } from './ContentEditor'
-import { Content, TYPES } from './ContentType'
+import { Content, FORMATS, TYPES } from './ContentType'
 import './ContentEditor.test.css'
 
 const schema = {
-    name: { id: "name", type: TYPES.STRING, required: true, label: "Name" },
-    field1: { id: "field1", type: TYPES.STRING, required: true, label: "field1", multivalue: true },
-    field2: { id: "field2", type: TYPES.STRING, required: true, label: "field2" },
-    field3: { id: "field3", type: TYPES.STRING, required: true, label: "field3" },
+    name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "Name" },
+    field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field1", multivalue: true },
+    field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field2" },
+    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field3" },
+    field3: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR, required: true, label: "field3" },
 }
 
 const value = {

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

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

package/src/html/color.test.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import { ColorField } from './color'
+
+const ColorFieldTest = (prop) => {
+
+    const [form, setForm] = useState({
+    })
+
+    function change(id, value) {
+        console.log(id, value)
+        const next = Object.assign({}, form, { [id] : value })
+        setForm(next)
+    }
+
+    return (
+        <>
+           <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} />
         </>
     )
 }