api: expose widget options in rje-widgets

sagold · Apr 4, 2024 · a5e5988 · a5e5988
1 parent 85796a1
commit a5e5988
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 48 deletions.
diff --git a/packages/react-json-editor/src/lib/useEditorPlugin.ts b/packages/react-json-editor/src/lib/useEditorPlugin.ts
@@ -1,4 +1,4 @@
-import { Plugin, deepEqual } from "headless-json-editor";
+import { HeadlessEditor, Plugin, deepEqual } from "headless-json-editor";
 import { useMemo, useRef } from "react";
 import { Editor } from "./Editor";
 
@@ -7,8 +7,8 @@ import { Editor } from "./Editor";
  * register a plugin-instance to json-editor
  * Note: plugins having a state will be reset
  */
-export function useEditorPlugin<T extends Plugin>
-    (editor?: Editor, plugin?: T, options?: Parameters<T>[1]) {
+export function useEditorPlugin<T extends Plugin, E extends HeadlessEditor>
+    (editor?: E, plugin?: T, options?: Parameters<T>[1]) {
     const ref = useRef<Parameters<T>[0]>();
     const optionsChanged = options !== ref.current && !deepEqual(options, ref.current);
     return useMemo(() => {

diff --git a/packages/rje-widgets/src/index.ts b/packages/rje-widgets/src/index.ts
@@ -3,26 +3,27 @@ import { JsonForm } from './lib/components/JsonForm';
 // main export
 import { widgets } from './lib/widgets/index';
 // widgets
-import { ArrayWidget, ArrayWidgetPlugin } from './lib/widgets/arraywidget/ArrayWidget';
-import { BooleanWidget, BooleanWidgetPlugin, booleanDefaultOptions } from './lib/widgets/booleanwidget/BooleanWidget';
-import { ColorWidget, ColorWidgetPlugin } from './lib/widgets/colorwidget/ColorWidget';
-import { DateWidget, DateWidgetPlugin } from './lib/widgets/datewidget/DateWidget';
-import { FileWidget, FileWidgetPlugin } from './lib/widgets/filewidget/FileWidget';
-import { NavigationWidget } from './lib/widgets/navigationwidget/NavigationWidget';
-import { NullWidget, NullWidgetPlugin } from './lib/widgets/nullwidget/NullWidget';
-import { NumberWidget, NumberWidgetPlugin } from './lib/widgets/numberwidget/NumberWidget';
-import { ObjectWidget, ObjectWidgetPlugin } from './lib/widgets/objectwidget/ObjectWidget';
+import { ArrayWidget, ArrayWidgetPlugin, ArrayOptions } from './lib/widgets/arraywidget/ArrayWidget';
+import { BooleanWidget, BooleanWidgetPlugin, BooleanOptions, booleanDefaultOptions } from './lib/widgets/booleanwidget/BooleanWidget';
+import { ColorWidget, ColorWidgetPlugin, ColorOptions } from './lib/widgets/colorwidget/ColorWidget';
+import { DateWidget, DateWidgetPlugin, DateOptions } from './lib/widgets/datewidget/DateWidget';
+import { FileWidget, FileWidgetPlugin, FileOptions } from './lib/widgets/filewidget/FileWidget';
+import { NavigationWidget, NavigationOptions } from './lib/widgets/navigationwidget/NavigationWidget';
+import { NullWidget, NullWidgetPlugin, NullOptions } from './lib/widgets/nullwidget/NullWidget';
+import { NumberWidget, NumberWidgetPlugin, NumberOptions } from './lib/widgets/numberwidget/NumberWidget';
+import { ObjectWidget, ObjectWidgetPlugin, ObjectOptions } from './lib/widgets/objectwidget/ObjectWidget';
 import { SelectOneOfWidget, SelectOneOfWidgetPlugin } from './lib/widgets/selectoneofwidget/SelectOneOfWidget';
 import {
     SelectMultipleWidget,
-    SelectMultipleWidgetPlugin
+    SelectMultipleWidgetPlugin,
+    SelectMultipleOptions
 } from './lib/widgets/selectmultiplewidget/SelectMultipleWidget';
-import { StringWidget, StringWidgetPlugin } from './lib/widgets/stringwidget/StringWidget';
-import { SelectWidget, SelectWidgetPlugin } from './lib/widgets/selectwidget/SelectWidget';
-import { SimpleJsonWidget, SimpleJsonWidgetPlugin } from './lib/widgets/simplejsonwidget/SimpleJsonWidget';
+import { StringWidget, StringWidgetPlugin, StringOptions } from './lib/widgets/stringwidget/StringWidget';
+import { SelectWidget, SelectWidgetPlugin, SelectOptions } from './lib/widgets/selectwidget/SelectWidget';
+import { SimpleJsonWidget, SimpleJsonWidgetPlugin, SimpleJsonOptions } from './lib/widgets/simplejsonwidget/SimpleJsonWidget';
 import { UnknownWidget, UnknownWidgetPlugin } from './lib/widgets/unknownwidget/UnknownWidget';
-import { TextWidget, TextWidgetPlugin } from './lib/widgets/textwidget/TextWidget';
-import { TagListWidget, TagListWidgetPlugin } from './lib/widgets/taglistwidget/TagListWidget';
+import { TextWidget, TextWidgetPlugin, TextOptions } from './lib/widgets/textwidget/TextWidget';
+import { TagListWidget, TagListWidgetPlugin, TagListOptions } from './lib/widgets/taglistwidget/TagListWidget';
 // components
 import { Button, ButtonProps, ButtonControlled, ButtonControlledProps } from './lib/components/button/Button';
 import { Checkbox, CheckboxProps } from './lib/components/checkbox/Checkbox';
@@ -65,36 +66,51 @@ export {
     // all widgets
     widgets,
     // widgets
+    ArrayOptions,
     ArrayWidget,
     ArrayWidgetPlugin,
+    BooleanOptions,
     booleanDefaultOptions,
     BooleanWidget,
     BooleanWidgetPlugin,
+    ColorOptions,
     ColorWidget,
     ColorWidgetPlugin,
+    DateOptions,
     DateWidget,
     DateWidgetPlugin,
+    FileOptions,
     FileWidget,
     FileWidgetPlugin,
+    NavigationOptions,
     NavigationWidget,
+    NullOptions,
     NullWidget,
     NullWidgetPlugin,
+    NumberOptions,
     NumberWidget,
     NumberWidgetPlugin,
+    ObjectOptions,
     ObjectWidget,
     ObjectWidgetPlugin,
+    SelectMultipleOptions,
     SelectMultipleWidget,
     SelectMultipleWidgetPlugin,
     SelectOneOfWidget,
     SelectOneOfWidgetPlugin,
+    SelectOptions,
     SelectWidget,
     SelectWidgetPlugin,
+    SimpleJsonOptions,
     SimpleJsonWidget,
     SimpleJsonWidgetPlugin,
+    StringOptions,
     StringWidget,
     StringWidgetPlugin,
+    TagListOptions,
     TagListWidget,
     TagListWidgetPlugin,
+    TextOptions,
     TextWidget,
     TextWidgetPlugin,
     UnknownWidget,

diff --git a/packages/rje-widgets/src/lib/widgets/booleanwidget/BooleanWidget.tsx b/packages/rje-widgets/src/lib/widgets/booleanwidget/BooleanWidget.tsx
@@ -10,9 +10,9 @@ import { Switch } from '../../components/switch/Switch';
 import { WidgetField } from '../../components/widgetfield/WidgetField';
 import { Checkbox } from '../../components/checkbox/Checkbox';
 
-export type BooleanOptions = {
+export type BooleanOptions = DefaultNodeOptions<{
     type?: 'checkbox' | 'toggle';
-} & DefaultNodeOptions;
+}>;
 
 export const booleanDefaultOptions = {
     type: 'toggle'

diff --git a/packages/rje-widgets/src/lib/widgets/colorwidget/ColorWidget.tsx b/packages/rje-widgets/src/lib/widgets/colorwidget/ColorWidget.tsx
@@ -1,8 +1,8 @@
 import { widget, WidgetPlugin, StringNode, DefaultNodeOptions } from '@sagold/react-json-editor';
-import { ColorInput, ColorInputProps } from '../../components/colorinput/ColorInput';
+import { ColorInput } from '../../components/colorinput/ColorInput';
 import { WidgetField } from '../../components/widgetfield/WidgetField';
 
-export type ColorOptions = {} & DefaultNodeOptions;
+export type ColorOptions = DefaultNodeOptions;
 
 export const ColorWidget = widget<StringNode<ColorOptions>, string>(({ node, options, setValue }) => {
     const hasError = node.errors.length > 0;

diff --git a/packages/rje-widgets/src/lib/widgets/datewidget/DateWidget.tsx b/packages/rje-widgets/src/lib/widgets/datewidget/DateWidget.tsx
@@ -3,14 +3,7 @@ import { DatePicker, DatePickerProps } from '../../components/datepicker/DatePic
 import { TimeInput } from '../../components/timeinput/TimeInput';
 import { WidgetField } from '../../components/widgetfield/WidgetField';
 
-export type DateOptions = {
-    // icon?: string;
-    // tag?: string;
-    // swapIconPosition?: boolean;
-    // format?: DatePickerProps['format'];
-    // /* add increment/decrement buttons */
-    // withButtons?: boolean;
-} & DefaultNodeOptions;
+export type DateOptions = DefaultNodeOptions;
 
 export const DateWidget = widget<StringNode<DateOptions>, string>(({ node, options, setValue }) => {
     const hasError = node.errors.length > 0;

diff --git a/packages/rje-widgets/src/lib/widgets/filewidget/FileWidget.tsx b/packages/rje-widgets/src/lib/widgets/filewidget/FileWidget.tsx
@@ -7,7 +7,7 @@ import { FileField } from '../../components/filefield/FileField';
 
 const isFile = (v): v is File => Object.prototype.toString.call(v) === '[object File]';
 
-export type FileWidgetOptions = {
+export type FileOptions = DefaultNodeOptions<{
     /**
      * mime types to accept for this file selection
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
@@ -24,7 +24,7 @@ export type FileWidgetOptions = {
      */
     imageUrlTemplate?: string;
     showPreview?: boolean;
-} & DefaultNodeOptions;
+}>;
 
 const MIME_TO_ICON: Record<string, string> = {
     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'insert_drive_file', // .xlsx
@@ -78,7 +78,7 @@ async function getDataUrl(file: File): Promise<string | undefined> {
  * and then an object is created. this has to be support thouroughly. Until then,
  * single files using strings do work.
  */
-export const FileWidget = widget<StringNode<FileWidgetOptions> | FileNode<FileWidgetOptions>, string | File>(({ node, options, setValue }) => {
+export const FileWidget = widget<StringNode<FileOptions> | FileNode<FileOptions>, string | File>(({ node, options, setValue }) => {
     const { value } = node;
     const { disabled, imageUrlTemplate, downloadUrlTemplate } = options;
     const [imageData, setImageData] = useState<string | undefined>();

diff --git a/packages/rje-widgets/src/lib/widgets/navigationwidget/NavigationWidget.tsx b/packages/rje-widgets/src/lib/widgets/navigationwidget/NavigationWidget.tsx
@@ -176,7 +176,7 @@ function ChildNavigation({
 }: {
     node: Node;
     editor: Editor;
-    options: NavigationWidgetOptions;
+    options: NavigationOptions;
     portalContainer: RefObject<Element>;
 }) {
     if (node.type === 'array') {
@@ -188,9 +188,9 @@ function ChildNavigation({
     return <NavigationLink node={node} />;
 }
 
-export type NavigationWidgetOptions = {
+export type NavigationOptions = DefaultNodeOptions<{
     showProperties?: boolean;
-} & DefaultNodeOptions;
+}>;
 
 /**
  * Navigation Editor
@@ -208,7 +208,7 @@ export type NavigationWidgetOptions = {
  *  />
  * ```
  */
-export const NavigationWidget = widget<ParentNode<NavigationWidgetOptions>>(({ node, editor, options }) => {
+export const NavigationWidget = widget<ParentNode<NavigationOptions>>(({ node, editor, options }) => {
     const portalContainer = useRef<HTMLUListElement>(null);
     return (
         <ul className="rje-navigation" ref={portalContainer}>

diff --git a/packages/rje-widgets/src/lib/widgets/numberwidget/NumberWidget.tsx b/packages/rje-widgets/src/lib/widgets/numberwidget/NumberWidget.tsx
@@ -2,7 +2,7 @@ import { widget, WidgetPlugin, NumberNode, DefaultNodeOptions } from '@sagold/re
 import { NumberInput } from '../../components/input/NumberInput';
 import { WidgetField } from '../../components/widgetfield/WidgetField';
 
-type NumberOptions = {
+export type NumberOptions = {
     icon?: string;
     tag?: string;
     swapIconPosition?: boolean;

diff --git a/packages/rje-widgets/src/lib/widgets/selectmultiplewidget/SelectMultipleWidget.tsx b/packages/rje-widgets/src/lib/widgets/selectmultiplewidget/SelectMultipleWidget.tsx
@@ -8,9 +8,9 @@ import {
 import { WidgetField } from '../../components/widgetfield/WidgetField';
 import { TagList } from '../../components/taglist/TagList';
 
-export type SelectMultipleWidgetOptions = {} & DefaultNodeOptions;
+export type SelectMultipleOptions = DefaultNodeOptions;
 
-export const SelectMultipleWidget = widget<ArrayNode<SelectMultipleWidgetOptions>, (string | number)[]>(
+export const SelectMultipleWidget = widget<ArrayNode<SelectMultipleOptions>, (string | number)[]>(
     ({ node, options, setValue }) => {
         const hasError = node.errors.length > 0;
         const selectedKeys = getData(node) as (string | number)[];

diff --git a/packages/rje-widgets/src/lib/widgets/stringwidget/StringWidget.tsx b/packages/rje-widgets/src/lib/widgets/stringwidget/StringWidget.tsx
@@ -2,13 +2,13 @@ import { widget, WidgetPlugin, StringNode, DefaultNodeOptions } from '@sagold/re
 import { StringInput } from '../../components/input/StringInput';
 import { WidgetField } from '../../components/widgetfield/WidgetField';
 
-export type StringOptions = {
+export type StringOptions = DefaultNodeOptions<{
     /** if value should update on each keystroke instead of on blur. Defaults to false */
     liveUpdate?: boolean;
     icon?: string;
     tag?: string;
     swapIconPosition?: boolean;
-} & DefaultNodeOptions;
+}>;
 
 export const StringWidget = widget<StringNode<StringOptions>, string>(({ node, options, setValue }) => {
     const hasError = node.errors.length > 0;

diff --git a/packages/rje-widgets/src/lib/widgets/taglistwidget/TagListWidget.tsx b/packages/rje-widgets/src/lib/widgets/taglistwidget/TagListWidget.tsx
@@ -14,11 +14,11 @@ type TagListWidgetItem = {
     label?: string;
 };
 
-export type TagListWidgetOptions = {
+export type TagListOptions = DefaultNodeOptions<{
     values?: TagListWidgetItem[];
-} & DefaultNodeOptions;
+}>;
 
-export const TagListWidget = widget<ArrayNode<TagListWidgetOptions>, string[]>(({ node, options, setValue }) => {
+export const TagListWidget = widget<ArrayNode<TagListOptions>, string[]>(({ node, options, setValue }) => {
     const allowDuplicates = node.schema.uniqueItems === true;
 
     // actual list data

diff --git a/packages/rje-widgets/src/lib/widgets/textwidget/TextWidget.tsx b/packages/rje-widgets/src/lib/widgets/textwidget/TextWidget.tsx
@@ -2,12 +2,12 @@ import { widget, WidgetPlugin, StringNode, DefaultNodeOptions } from '@sagold/re
 import { WidgetField } from '../../components/widgetfield/WidgetField';
 import { TextArea } from '../../components/textarea/TextArea';
 
-export type TextWidgetOptions = {
+export type TextOptions = DefaultNodeOptions<{
     /** if value should update on each keystroke instead of on blur. Defaults to false */
     liveUpdate?: boolean;
-} & DefaultNodeOptions;
+}>;
 
-export const TextWidget = widget<StringNode<TextWidgetOptions>, string>(({ node, options, setValue }) => {
+export const TextWidget = widget<StringNode<TextOptions>, string>(({ node, options, setValue }) => {
     const hasError = node.errors.length > 0;
     const isValidConst = node.schema.const != null && !hasError;
     return (