Expose api for declaring keyboard shortcuts (#2139)

In recent weeks we have created an api for declaring keyboard shortcuts and tested its usage in internal modules. After successfully verifying it, we are now exposing it for plugins to use. The api has also received some tweaks in the process to make it more flexible, such as allowing bound shortcuts not to appear in the documentation dialog or allowing shortcuts to explicitly allow event bubbling.

scm-ui/ui-components/src/index.ts

@@ -82,6 +82,7 @@ export { default as CardColumn } from "./CardColumn";
 export { default as CardColumnSmall } from "./CardColumnSmall";
 export { default as CommaSeparatedList } from "./CommaSeparatedList";
 export { SplitAndReplace, Replacement } from "@scm-manager/ui-text";
+export { useShortcut } from "@scm-manager/ui-shortcuts";
 export { regExpPattern as changesetShortLinkRegex } from "./markdown/remarkChangesetShortLinkParser";
 export * from "./markdown/PluginApi";
 export * from "./devices";

scm-ui/ui-components/src/table/Column.tsx

@@ -25,17 +25,20 @@ import React, { FC, ReactNode } from "react";
 import { ColumnProps } from "./types";
 
 type Props = ColumnProps & {
-  children: (row: any, columnIndex: number) => ReactNode;
+  children: (row: any, columnIndex: number, rowIndex: number) => ReactNode;
 };
 
-const Column: FC<Props> = ({ row, columnIndex, children }) => {
+const Column: FC<Props> = ({ row, columnIndex, rowIndex, children }) => {
   if (row === undefined) {
     throw new Error("missing row, use column only as child of Table");
   }
   if (columnIndex === undefined) {
     throw new Error("missing row, use column only as child of Table");
   }
-  return <>{children(row, columnIndex)}</>;
+  if (rowIndex === undefined) {
+    throw new Error("missing row, use column only as child of Table");
+  }
+  return <>{children(row, columnIndex, rowIndex)}</>;
 };
 
 export default Column;

scm-ui/ui-components/src/table/Table.tsx

@@ -63,7 +63,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
         {React.Children.map(children, (child, columnIndex) => {
           const { className: columnClassName, ...childProperties } = (child as ReactElement).props;
           return (
-            <td className={columnClassName}>{React.cloneElement((child as ReactElement), { ...childProperties, columnIndex, row })}</td>
+            <td className={columnClassName}>{React.cloneElement((child as ReactElement), { ...childProperties, columnIndex, rowIndex, row })}</td>
           );
         })}
       </tr>

scm-ui/ui-components/src/table/types.ts

@@ -30,6 +30,7 @@ export type ColumnProps = {
   header: ReactNode;
   row?: any;
   columnIndex?: number;
+  rowIndex?: number;
   createComparator?: (props: any, columnIndex: number) => Comparator;
   ascendingIcon?: string;
   descendingIcon?: string;