Custom toolbar radio button (#178)

Co-authored-by: Miguel Calderón <miguelcalderon@users.noreply.github.com>

Author: 0mar-K

playground/forms/custom-toolbar-radio-button/index.ts

@@ -0,0 +1,70 @@
+import type { Instance, ToolbarItem } from "@nutrient-sdk/viewer";
+import { baseOptions } from "../../shared/base-options";
+
+let instance: Instance | null = null;
+
+const createGroupedRadioButtons = async (instance: Instance | null) => {
+  const radioWidget1 = new NutrientViewer.Annotations.WidgetAnnotation({
+    id: NutrientViewer.generateInstantId(),
+    pageIndex: 0,
+    formFieldName: "MyFormField",
+    boundingBox: new NutrientViewer.Geometry.Rect({
+      left: 100,
+      top: 100,
+      width: 20,
+      height: 20,
+    }),
+  });
+
+  const radioWidget2 = new NutrientViewer.Annotations.WidgetAnnotation({
+    id: NutrientViewer.generateInstantId(),
+    pageIndex: 0,
+    formFieldName: "MyFormField",
+    boundingBox: new NutrientViewer.Geometry.Rect({
+      left: 130,
+      top: 100,
+      width: 20,
+      height: 20,
+    }),
+  });
+
+  const formField = new NutrientViewer.FormFields.RadioButtonFormField({
+    name: "MyFormField",
+    annotationIds: NutrientViewer.Immutable.List([
+      radioWidget1.id,
+      radioWidget2.id,
+    ]),
+    options: NutrientViewer.Immutable.List([
+      new NutrientViewer.FormOption({
+        label: "Option 1",
+        value: "1",
+      }),
+      new NutrientViewer.FormOption({
+        label: "Option 2",
+        value: "2",
+      }),
+    ]),
+    defaultValue: "1",
+  });
+
+  await instance?.create([radioWidget1, radioWidget2, formField]);
+};
+
+const item: ToolbarItem = {
+  type: "custom",
+  id: "add-radio-group",
+  title: "Add Radio Group",
+  onPress: () => createGroupedRadioButtons(instance),
+};
+
+NutrientViewer.load({
+  ...baseOptions,
+  theme: NutrientViewer.Theme.DARK,
+  toolbarItems: [
+    ...NutrientViewer.defaultToolbarItems,
+    { type: "form-creator" },
+  ],
+}).then((_instance: Instance) => {
+  instance = _instance;
+  instance.setToolbarItems((items) => [...items, item]);
+});

playground/forms/custom-toolbar-radio-button/playground.mdx

@@ -0,0 +1,7 @@
+---
+category: forms
+title: Add Grouped Radio Buttons with Custom Toolbar Button
+description: Create a custom toolbar item that programmatically places grouped radio buttons with a single click, avoiding manual renaming.
+keywords: [forms, radio-button, custom-toolbar, toolbar-item, widget, form-field, radio-group, grouped radio-buttons]
+---
+

playground/forms/custom-toolbar-radio-button/playground.url

@@ -0,0 +1,2 @@
+[InternetShortcut]
+URL=https://www.nutrient.io/demo/sandbox?p=eyJqcyI6ImxldCBpbnN0YW5jZSA9IG51bGw7XG5cbmNvbnN0IGl0ZW0gPSB7XG4gIHR5cGU6IFwiY3VzdG9tXCIsXG4gIGlkOiBcImFkZC1yYWRpby1ncm91cFwiLFxuICB0aXRsZTogXCJBZGQgUmFkaW8gR3JvdXBcIixcbiAgb25QcmVzczogYXN5bmMgKCkgPT4ge1xuICAgIGNvbnN0IHJhZGlvV2lkZ2V0MSA9IG5ldyBOdXRyaWVudFZpZXdlci5Bbm5vdGF0aW9ucy5XaWRnZXRBbm5vdGF0aW9uKHtcbiAgICAgIGlkOiBOdXRyaWVudFZpZXdlci5nZW5lcmF0ZUluc3RhbnRJZCgpLFxuICAgICAgcGFnZUluZGV4OiAwLFxuICAgICAgZm9ybUZpZWxkTmFtZTogXCJNeUZvcm1GaWVsZFwiLFxuICAgICAgYm91bmRpbmdCb3g6IG5ldyBOdXRyaWVudFZpZXdlci5HZW9tZXRyeS5SZWN0KHtcbiAgICAgICAgbGVmdDogMTAwLFxuICAgICAgICB0b3A6IDEwMCxcbiAgICAgICAgd2lkdGg6IDIwLFxuICAgICAgICBoZWlnaHQ6IDIwLFxuICAgICAgfSksXG4gICAgfSk7XG4gICAgY29uc3QgcmFkaW9XaWRnZXQyID0gbmV3IE51dHJpZW50Vmlld2VyLkFubm90YXRpb25zLldpZGdldEFubm90YXRpb24oe1xuICAgICAgaWQ6IE51dHJpZW50Vmlld2VyLmdlbmVyYXRlSW5zdGFudElkKCksXG4gICAgICBwYWdlSW5kZXg6IDAsXG4gICAgICBmb3JtRmllbGROYW1lOiBcIk15Rm9ybUZpZWxkXCIsXG4gICAgICBib3VuZGluZ0JveDogbmV3IE51dHJpZW50Vmlld2VyLkdlb21ldHJ5LlJlY3Qoe1xuICAgICAgICBsZWZ0OiAxMzAsXG4gICAgICAgIHRvcDogMTAwLFxuICAgICAgICB3aWR0aDogMjAsXG4gICAgICAgIGhlaWdodDogMjAsXG4gICAgICB9KSxcbiAgICB9KTtcbiAgICBjb25zdCBmb3JtRmllbGQgPSBuZXcgTnV0cmllbnRWaWV3ZXIuRm9ybUZpZWxkcy5SYWRpb0J1dHRvbkZvcm1GaWVsZCh7XG4gICAgICBuYW1lOiBcIk15Rm9ybUZpZWxkXCIsXG4gICAgICBhbm5vdGF0aW9uSWRzOiBOdXRyaWVudFZpZXdlci5JbW11dGFibGUuTGlzdChbXG4gICAgICAgIHJhZGlvV2lkZ2V0MS5pZCxcbiAgICAgICAgcmFkaW9XaWRnZXQyLmlkLFxuICAgICAgXSksXG4gICAgICBvcHRpb25zOiBOdXRyaWVudFZpZXdlci5JbW11dGFibGUuTGlzdChbXG4gICAgICAgIG5ldyBOdXRyaWVudFZpZXdlci5Gb3JtT3B0aW9uKHsgbGFiZWw6IFwiT3B0aW9uIDFcIiwgdmFsdWU6IFwiMVwiIH0pLFxuICAgICAgICBuZXcgTnV0cmllbnRWaWV3ZXIuRm9ybU9wdGlvbih7IGxhYmVsOiBcIk9wdGlvbiAyXCIsIHZhbHVlOiBcIjJcIiB9KSxcbiAgICAgIF0pLFxuICAgICAgZGVmYXVsdFZhbHVlOiBcIjFcIixcbiAgICB9KTtcbiAgICBhd2FpdCBpbnN0YW5jZT8uY3JlYXRlKFtyYWRpb1dpZGdldDEsIHJhZGlvV2lkZ2V0MiwgZm9ybUZpZWxkXSk7XG4gIH0sXG59O1xuXG5OdXRyaWVudFZpZXdlci5sb2FkKHtcbiAgLi4uYmFzZU9wdGlvbnMsXG4gIHRoZW1lOiBOdXRyaWVudFZpZXdlci5UaGVtZS5EQVJLLFxuICB0b29sYmFySXRlbXM6IFtcbiAgICAuLi5OdXRyaWVudFZpZXdlci5kZWZhdWx0VG9vbGJhckl0ZW1zLFxuICAgIHsgdHlwZTogXCJmb3JtLWNyZWF0b3JcIiB9LFxuICBdLFxufSkudGhlbigoX2luc3RhbmNlKSA9PiB7XG4gIGluc3RhbmNlID0gX2luc3RhbmNlO1xuICBpbnN0YW5jZS5zZXRUb29sYmFySXRlbXMoKGl0ZW1zKSA9PiBbLi4uaXRlbXMsIGl0ZW1dKTtcbn0pO1xuIiwiY3NzIjoiLyogQWRkIHlvdXIgQ1NTIGhlcmUgKi9cbiIsInNldHRpbmdzIjp7ImZpbGVOYW1lIjoiYmFzaWMucGRmIiwidXNlRHluYW1pY0ZvbnRzIjp0cnVlLCJjdXN0b21Gb250RmlsZU5hbWVzIjpbXX0sInYiOjF9

playground/types/global.d.ts

@@ -1,8 +1,9 @@
-import type NutrientViewer from "@nutrient-sdk/viewer";
+import type NutrientViewerType from "@nutrient-sdk/viewer";
 
 declare global {
+  var NutrientViewer: typeof NutrientViewerType;
+
   interface Window {
-    // Nutrient Web SDK loaded via CDN
-    NutrientViewer: typeof NutrientViewer;
+    NutrientViewer: typeof NutrientViewerType;
   }
 }