sliftutils 0.15.0 → 0.17.0

package/.cursorrules

@@ -82,6 +82,10 @@ Coding Styles
     Never use inline styles, always use the CSS helper. 
 
     Don't use as any.
+    
+    DO NOT redeclare constants and copy their value. JUST IMPORT THEM!
+
+    DO NOT redeclare types. JUST IMPORT THEM!
 
 
 General Styling

package/index.d.ts

@@ -31,6 +31,13 @@ declare module "sliftutils/misc/getSecret" {
 
 }
 
+declare module "sliftutils/misc/matchFilter" {
+    export declare function matchFilter(filter: {
+        value: string;
+    }, value: string): boolean;
+
+}
+
 declare module "sliftutils/misc/types" {
     export declare function isDefined<T>(value: T | undefined | null): value is T;
 
@@ -310,6 +317,7 @@ declare module "sliftutils/render-utils/Table" {
         lineLimit?: number;
         characterLimit?: number;
         excludeEmptyColumns?: boolean;
+        rowClassName?: (row: RowT) => string;
     }> {
         state: {
             limit: number;

package/misc/getSecret.ts

@@ -69,7 +69,6 @@ export const getSecret = cache(async function getSecret(key: string): Promise<st
                 preact.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 10 } },
                     preact.createElement("div", { style: { fontWeight: "bold" } }, `Enter secret for: ${key}`),
                     preact.createElement("input", {
-                        type: "password",
                         style: { padding: 10, fontSize: 16 },
                         onInput: (e: Event) => {
                             state.value = (e.target as HTMLInputElement).value;

package/misc/matchFilter.d.ts

@@ -0,0 +1,3 @@
+export declare function matchFilter(filter: {
+    value: string;
+}, value: string): boolean;

package/misc/matchFilter.ts

@@ -0,0 +1,15 @@
+export function matchFilter(filter: { value: string }, value: string) {
+    let filterValue = filter.value.toLowerCase().trim();
+    if (!filterValue) return true;
+    value = value.toLowerCase().trim();
+    return filterValue.split("|").some(part =>
+        part.split("&").every(part => {
+            part = part.trim();
+            if (part.startsWith("!")) {
+                part = part.slice(1).trim();
+                return !value.includes(part);
+            }
+            return value.includes(part);
+        })
+    );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "0.15.0",
+    "version": "0.17.0",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/render-utils/Table.d.ts

@@ -24,6 +24,7 @@ export declare class Table<RowT extends RowType> extends preact.Component<TableT
     lineLimit?: number;
     characterLimit?: number;
     excludeEmptyColumns?: boolean;
+    rowClassName?: (row: RowT) => string;
 }> {
     state: {
         limit: number;

package/render-utils/Table.tsx

@@ -32,6 +32,8 @@ export class Table<RowT extends RowType> extends preact.Component<TableType<RowT
     characterLimit?: number;
 
     excludeEmptyColumns?: boolean;
+
+    rowClassName?: (row: RowT) => string
 }> {
     state = {
         limit: this.props.initialLimit || 100,
@@ -65,7 +67,7 @@ export class Table<RowT extends RowType> extends preact.Component<TableType<RowT
                 </tr>
                 {rows.map((row, index) => (
                     <tr
-                        className={(index % 2 === 1 && css.hsla(0, 0, 100, 0.25) || "")}
+                        className={(this.props.rowClassName?.(row) || "") + (index % 2 === 1 && css.hsla(0, 0, 100, 0.25) || "")}
                     >
                         <td className={css.center}>{index + 1}</td>
                         {Object.entries(columns).filter(x => x[1] !== null).map(([columnName, column]: [string, ColumnType]) => {

package/web/browser.tsx

@@ -14,6 +14,24 @@ class App extends preact.Component {
         count: 0,
     });
 
+    onKeyDown = (e: KeyboardEvent) => {
+        // Skip if the current target is an ipnut
+        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+            return;
+        }
+        let hotkeySelector = `[data-hotkey="${e.code}"]`;
+        let elements = document.querySelectorAll(hotkeySelector);
+        for (let element of elements) {
+            (element as HTMLElement).click();
+        }
+    };
+    componentDidMount(): void {
+        document.addEventListener("keydown", this.onKeyDown);
+    }
+    componentWillUnmount(): void {
+        document.removeEventListener("keydown", this.onKeyDown);
+    }
+
     render() {
         return (
             <div className={css.pad2(20)}>