Merge pull request #9 from bangank36/feat/colorPalette-implementation

WP-Builder: Feat/colorPalette-implementation

package.json

@@ -62,6 +62,7 @@
 		"@jsonforms/react": "^3.1.0",
 		"@mui/material": "^5.13.6",
 		"@wordpress/components": "^25.1.0",
+		"framer-motion": "^10.11.6",
 		"prop-types": "^15.7.2",
 		"query-string": "^7.0.1",
 		"react": "^18.2.0",

src/js/component/form.jsx

@@ -6,6 +6,7 @@ import {
 import { JsonForms } from "@jsonforms/react";
 import TextControl, { textControlTester } from "../renderers/TextControl";
 import MultilineTextControl, { multilineTextControlTester } from "../renderers/MultilineTextControl";
+import ColorPaletteTextControl, { colorPaletteControlTester } from "../renderers/ColorPaletteControl";
 
 const schema = {
   type: "object",
@@ -19,6 +20,11 @@ const schema = {
       type: "string",
       label: "Muliline Text Control Label",
       description: "Multiline Text Control displays a 'string' Control supports multiline"
+    },
+    colorPaletteControl: {
+      type: "string",
+      label: "Color Palette Control Label",
+      description: "Color Picker with predefine palette"
     }
   },
 };
@@ -36,6 +42,27 @@ const uischema = {
       options: {
         multi: true,
       },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/colorPaletteControl",
+      options: {
+        format: 'color',
+        colors:[
+          {
+            color: '#f00',
+            name: 'Red'
+          },
+          {
+            color: '#fff',
+            name: 'White'
+          },
+          {
+            color: '#00f',
+            name: 'Blue'
+          }
+        ]
+      },
     }
   ],
 };
@@ -48,6 +75,7 @@ const renderers = [
   //register custom renderers
   { tester: textControlTester, renderer: TextControl },
   { tester: multilineTextControlTester, renderer: MultilineTextControl },
+  { tester: colorPaletteControlTester, renderer: ColorPaletteTextControl },
 ];
 
 export default function App() {

src/js/index.js

@@ -5,6 +5,9 @@ import ReactDOM from "react-dom";
 // include your styles into the webpack bundle
 import "../styles/index.css";
 
+// include @wordpress/components styles
+import '@wordpress/components/build-style/style.css';
+
 //import your own components
 import Home from "./component/form.jsx";
 

src/js/renderers/ColorPaletteControl.js

@@ -0,0 +1,60 @@
+import React from "react";
+import isEmpty from 'lodash/isEmpty';
+import { withJsonFormsControlProps } from "@jsonforms/react";
+import { rankWith, isStringControl, and, optionIs } from "@jsonforms/core";
+import { ColorPalette, SlotFillProvider, Popover } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const TextControl = (props) => {
+  const {
+    id,
+    description,
+    errors,
+    label,
+    uischema,
+    path,
+    visible,
+    required,
+    config,
+    data,
+    input,
+    handleChange
+  } = props;
+
+  const colors = uischema.options.colors || [
+    { name: 'red', color: '#f00' },
+    { name: 'white', color: '#fff' },
+    { name: 'blue', color: '#00f' },
+  ];
+
+  return ( 
+    <SlotFillProvider>
+      <ColorPalette
+        colors={ colors }
+        value={ data }
+        onChange={ ( value ) => 
+          handleChange(path, value === '' ? undefined : value)
+        }
+      />
+      <Popover.Slot />
+    </SlotFillProvider>
+  )
+};
+
+  const optionIsNotEmpty =
+  (optionName) =>
+  (uischema) => {
+    if (isEmpty(uischema)) {
+      return false;
+    }
+
+    const options = uischema.options;
+    return !isEmpty(options) && !isEmpty(options[optionName]);
+  };
+
+export const colorPaletteControlTester = rankWith(
+  6, //increase rank as needed
+  and(isStringControl, optionIs('format', 'color'), optionIsNotEmpty('colors'))
+);
+
+export default withJsonFormsControlProps(TextControl);