Improve TS typings for the CustomBorders plugin

.changelogs/10515.json

@@ -0,0 +1,8 @@
+{
+  "issuesOrigin": "public",
+  "title": "Improved TS typings for the CustomBorders plugin",
+  "type": "fixed",
+  "issueOrPR": 10515,
+  "breaking": false,
+  "framework": "none"
+}

handsontable/src/plugins/customBorders/__tests__/customBorders.types.ts

@@ -0,0 +1,73 @@
+import Handsontable from 'handsontable';
+import { ComputedBorder } from 'handsontable/plugins/customBorders';
+
+const hot = new Handsontable(document.createElement('div'), {
+  customBorders: true,
+});
+// borders using range
+new Handsontable(document.createElement('div'), {
+  customBorders: [
+    {
+      range: {
+        from: {
+          row: 1,
+          col: 1
+        },
+        to: {
+          row: 3,
+          col: 4
+        },
+      },
+      start: {},
+      end: {},
+      top: {},
+      bottom: {},
+    },
+  ],
+});
+// borders using coords
+new Handsontable(document.createElement('div'), {
+  customBorders: [
+    {
+      row: 2,
+      col: 2,
+      start: {
+        width: 2,
+        color: 'red',
+      },
+      end: {
+        width: 1,
+        color: 'green',
+      },
+      top: '',
+      bottom: '',
+    }
+  ],
+});
+const customBorders = hot.getPlugin('customBorders');
+
+customBorders.setBorders(hot.getSelected()!, {
+  top: { width: 1 },
+});
+customBorders.setBorders(hot.getSelected()!, {
+  bottom: { color: 'red' },
+});
+customBorders.setBorders(hot.getSelectedRange()!, {
+  start: { hide: true },
+});
+customBorders.setBorders(hot.getSelectedRange()!, {
+  end: { hide: true, width: 2, color: 'blue' },
+});
+customBorders.setBorders(hot.getSelectedRange()!, {
+  top: { width: 1 },
+  bottom: { color: 'red' },
+  start: { hide: true },
+  end: { hide: true, width: 2, color: 'blue' },
+});
+customBorders.clearBorders(hot.getSelected()!);
+customBorders.clearBorders(hot.getSelectedRange()!);
+customBorders.clearBorders();
+
+const borders1: ComputedBorder[] = customBorders.getBorders(hot.getSelected()!);
+const borders2: ComputedBorder[] = customBorders.getBorders(hot.getSelectedRange()!);
+const borders3: ComputedBorder[] = customBorders.getBorders();

handsontable/types/plugins/customBorders/customBorders.d.ts

@@ -1,3 +1,4 @@
+import CellRange from '../../3rdparty/walkontable/src/cell/range';
 import Core from '../../core';
 import { BasePlugin } from '../base';
 import { SimpleCellCoords } from "../../common";
@@ -13,6 +14,14 @@ export interface BorderRange {
     to: SimpleCellCoords;
   };
 }
+export interface BorderDescriptor {
+  start?: BorderOptions;
+  end?: BorderOptions;
+  left?: BorderOptions;
+  right?: BorderOptions;
+  top?: BorderOptions;
+  bottom?: BorderOptions;
+}
 export type DetailedSettings = (SimpleCellCoords | BorderRange) & {
   start?: BorderOptions | string;
   end?: BorderOptions | string;
@@ -24,17 +33,17 @@ export type DetailedSettings = (SimpleCellCoords | BorderRange) & {
 
 export type Settings = boolean | DetailedSettings[];
 
-export interface RangeType {
-  startRow: number;
-  startCol: number;
-  endRow: number;
-  endCol: number;
+export interface ComputedBorder extends BorderDescriptor {
+  id: string;
+  row: number;
+  col: number;
+  border?: BorderOptions;
 }
 
 export class CustomBorders extends BasePlugin {
   constructor(hotInstance: Core);
   isEnabled(): boolean;
-  setBorders(selectionRanges: RangeType[][] | Array<[number, number, number, number]>, borderObject: object): void;
-  getBorders(selectionRanges: RangeType[][] | Array<[number, number, number, number]>): Array<[object]>;
-  clearBorders(selectionRanges: RangeType[][] | Array<[number, number, number, number]>): void;
+  setBorders(selectionRanges: CellRange[] | Array<[number, number, number, number]>, borderObject: BorderDescriptor): void;
+  getBorders(selectionRanges?: CellRange[] | Array<[number, number, number, number]>): ComputedBorder[];
+  clearBorders(selectionRanges?: CellRange[] | Array<[number, number, number, number]>): void;
 }