ywana-core8 0.0.389 → 0.0.390

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.389",
+  "version": "0.0.390",
   "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.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { CirclePicker } from 'react-color'
+
+export const ColorField = (props) => {
+
+    const {id, onChange} = props
+
+    function change(color) {
+       if (onChange) onChange(id, color.hex)
+    }
+
+    return (
+        <div className="color-field">
+            <CirclePicker onChangeComplete={change}/>
+        </div>
+    )
+}

package/src/html/color.test.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import { ColorField } from './color'
+
+const ColorFieldTest = (prop) => {
+
+    const [form, setForm] = useState({
+    })
+
+    function change(id, value) {
+        const next = Object.assign({}, form, { [id] : value })
+        setForm(next)
+    }
+
+    return (
+        <>
+           <ColorField onChange={change}/>
+        </>
+    )
+}

package/src/html/color1.css

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