Improve color widget picker and types (#5948)

plone · Apr 5, 2024 · 7eaf92a · 7eaf92a
1 parent 0630a6e
commit 7eaf92a
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 98 deletions.
diff --git a/packages/types/news/5948.bugfix b/packages/types/news/5948.bugfix
@@ -0,0 +1 @@
+Split widgets type definitions into their own interfaces so they are extendable @sneridagh
diff --git a/packages/types/src/config/Widgets.d.ts b/packages/types/src/config/Widgets.d.ts
@@ -1,95 +1,112 @@
+export interface WidgetsConfigById {
+  schema: React.ComponentType;
+  subjects: React.ComponentType;
+  query: React.ComponentType;
+  recurrence: React.ComponentType;
+  remoteUrl: React.ComponentType;
+  id: React.ComponentType;
+  site_logo: React.ComponentType;
+}
+
+export interface WidgetsConfigByWidget {
+  textarea: React.ComponentType;
+  datetime: React.ComponentType;
+  date: React.ComponentType;
+  password: React.ComponentType;
+  file: React.ComponentType;
+  align: React.ComponentType;
+  buttons: React.ComponentType;
+  url: React.ComponentType;
+  internal_url: React.ComponentType;
+  email: React.ComponentType;
+  array: React.ComponentType;
+  token: React.ComponentType;
+  query: React.ComponentType;
+  query_sort_on: React.ComponentType;
+  querystring: React.ComponentType;
+  object_browser: React.ComponentType;
+  object: React.ComponentType;
+  object_list: React.ComponentType;
+  vocabularyterms: React.ComponentType;
+  image_size: React.ComponentType;
+  select_querystring_field: React.ComponentType;
+  autocomplete: React.ComponentType;
+  color_picker: React.ComponentType;
+  select: React.ComponentType;
+}
+
+export interface WidgetsConfigByVocabulary {
+  'plone.app.vocabularies.Catalog': React.ComponentType;
+}
+
+export interface WidgetsConfigByFactory {
+  'Relation List': React.ComponentType;
+  'Relation Choice': React.ComponentType;
+}
+
+export interface WidgetsConfigByType {
+  boolean: React.ComponentType;
+  array: React.ComponentType;
+  object: React.ComponentType;
+  datetime: React.ComponentType;
+  date: React.ComponentType;
+  password: React.ComponentType;
+  number: React.ComponentType;
+  integer: React.ComponentType;
+  id: React.ComponentType;
+}
+
+export interface WidgetsConfigViewById {
+  file: React.ComponentType;
+  image: React.ComponentType;
+  relatedItems: React.ComponentType;
+  subjects: React.ComponentType;
+}
+
+export interface WidgetsConfigViewByWidget {
+  array: React.ComponentType;
+  boolean: React.ComponentType;
+  choices: React.ComponentType;
+  date: React.ComponentType;
+  datetime: React.ComponentType;
+  description: React.ComponentType;
+  email: React.ComponentType;
+  file: React.ComponentType;
+  image: React.ComponentType;
+  password: React.ComponentType;
+  relation: React.ComponentType;
+  richtext: React.ComponentType;
+  string: React.ComponentType;
+  tags: React.ComponentType;
+  textarea: React.ComponentType;
+  title: React.ComponentType;
+  url: React.ComponentType;
+  internal_url: React.ComponentType;
+  object: React.ComponentType;
+}
+
+export interface WidgetsConfigViewByType {
+  array: React.ComponentType;
+  boolean: React.ComponentType;
+}
+
+export interface WidgetsConfigViews {
+  getWidget: React.ComponentType;
+  default: React.ComponentType;
+  id: WidgetsConfigViewById;
+  widget: WidgetsConfigViewByWidget;
+  vocabulary: {};
+  choices: React.ComponentType;
+  type: WidgetsConfigViewByType;
+}
+
 export interface WidgetsConfig {
   default: React.ComponentType;
-  id: {
-    schema: React.ComponentType;
-    subjects: React.ComponentType;
-    query: React.ComponentType;
-    recurrence: React.ComponentType;
-    remoteUrl: React.ComponentType;
-    id: React.ComponentType;
-    site_logo: React.ComponentType;
-  };
-  widget: {
-    textarea: React.ComponentType;
-    datetime: React.ComponentType;
-    date: React.ComponentType;
-    password: React.ComponentType;
-    file: React.ComponentType;
-    align: React.ComponentType;
-    buttons: React.ComponentType;
-    url: React.ComponentType;
-    internal_url: React.ComponentType;
-    email: React.ComponentType;
-    array: React.ComponentType;
-    token: React.ComponentType;
-    query: React.ComponentType;
-    query_sort_on: React.ComponentType;
-    querystring: React.ComponentType;
-    object_browser: React.ComponentType;
-    object: React.ComponentType;
-    object_list: React.ComponentType;
-    vocabularyterms: React.ComponentType;
-    image_size: React.ComponentType;
-    select_querystring_field: React.ComponentType;
-    autocomplete: React.ComponentType;
-    color_picker: React.ComponentType;
-    select: React.ComponentType;
-  };
-  vocabulary: {
-    'plone.app.vocabularies.Catalog': React.ComponentType;
-  };
-  factory: {
-    'Relation List': React.ComponentType;
-    'Relation Choice': React.ComponentType;
-  };
+  id: WidgetsConfigById;
+  widget: WidgetsConfigByWidget;
+  vocabulary: WidgetsConfigByVocabulary;
+  factory: WidgetsConfigByFactory;
   choices: React.ComponentType;
-  type: {
-    boolean: React.ComponentType;
-    array: React.ComponentType;
-    object: React.ComponentType;
-    datetime: React.ComponentType;
-    date: React.ComponentType;
-    password: React.ComponentType;
-    number: React.ComponentType;
-    integer: React.ComponentType;
-    id: React.ComponentType;
-  };
-  views: {
-    getWidget: React.ComponentType;
-    default: React.ComponentType;
-    id: {
-      file: React.ComponentType;
-      image: React.ComponentType;
-      relatedItems: React.ComponentType;
-      subjects: React.ComponentType;
-    };
-    widget: {
-      array: React.ComponentType;
-      boolean: React.ComponentType;
-      choices: React.ComponentType;
-      date: React.ComponentType;
-      datetime: React.ComponentType;
-      description: React.ComponentType;
-      email: React.ComponentType;
-      file: React.ComponentType;
-      image: React.ComponentType;
-      password: React.ComponentType;
-      relation: React.ComponentType;
-      relations: React.ComponentType;
-      richtext: React.ComponentType;
-      string: React.ComponentType;
-      tags: React.ComponentType;
-      textarea: React.ComponentType;
-      title: React.ComponentType;
-      url: React.ComponentType;
-      internal_url: React.ComponentType;
-      object: React.ComponentType;
-    };
-    vocabulary: {};
-    choices: React.ComponentType;
-    type: {
-      array: React.ComponentType;
-      boolean: React.ComponentType;
-    };
-  };
+  type: WidgetsConfigByType;
+  views: WidgetsConfigViews;
 }
diff --git a/packages/volto/news/5948.bugfix b/packages/volto/news/5948.bugfix
@@ -0,0 +1 @@
+Improve `ColorPickerWidget` typings @sneridagh
diff --git a/packages/volto/src/components/manage/Widgets/ColorPickerWidget.tsx b/packages/volto/src/components/manage/Widgets/ColorPickerWidget.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form } from 'semantic-ui-react';
 import { Grid, Button } from 'semantic-ui-react';
-import { isEqual } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -26,11 +26,11 @@ type Color =
 export type ColorPickerWidgetProps = {
   id: string;
   title: string;
-  value: string;
-  default: string;
-  required: boolean;
-  missing_value: unknown;
-  className: string;
+  value?: string;
+  default?: string | object;
+  required?: boolean;
+  missing_value?: unknown;
+  className?: string;
   onChange: (id: string, value: any) => void;
   colors: Color[];
 };
@@ -41,7 +41,7 @@ const ColorPickerWidget = (props: ColorPickerWidgetProps) => {
   const intl = useIntl();
 
   React.useEffect(() => {
-    if (!props.value && props.default) {
+    if (isEmpty(props.value) && props.default) {
       props.onChange(props.id, props.default);
     }
     // Yes, this is correct.