sliftutils 0.80.0 → 0.81.0

package/index.d.ts

@@ -172,6 +172,28 @@ declare module "sliftutils/render-utils/Anchor" {
 
 }
 
+declare module "sliftutils/render-utils/ButtonSelector" {
+    import preact from "preact";
+    export declare class ButtonSelector<T> extends preact.Component<{
+        title?: string;
+        value: T;
+        options: {
+            value: T;
+            title: preact.ComponentChild;
+            isDefault?: boolean;
+            hotkeys?: string[];
+        }[];
+        onChange: (value: T) => void;
+        noPadding?: boolean;
+        noDefault?: boolean;
+        noUI?: boolean;
+        classWrapper?: string;
+    }> {
+        render(): preact.JSX.Element;
+    }
+
+}
+
 declare module "sliftutils/render-utils/DropdownCustom" {
     import preact from "preact";
     import { LengthOrPercentage } from "typesafecss/cssTypes";

package/package.json

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

package/render-utils/ButtonSelector.d.ts

@@ -0,0 +1,18 @@
+import preact from "preact";
+export declare class ButtonSelector<T> extends preact.Component<{
+    title?: string;
+    value: T;
+    options: {
+        value: T;
+        title: preact.ComponentChild;
+        isDefault?: boolean;
+        hotkeys?: string[];
+    }[];
+    onChange: (value: T) => void;
+    noPadding?: boolean;
+    noDefault?: boolean;
+    noUI?: boolean;
+    classWrapper?: string;
+}> {
+    render(): preact.JSX.Element;
+}

package/render-utils/ButtonSelector.tsx

@@ -0,0 +1,61 @@
+import preact from "preact";
+import { observer } from "./observer";
+import { css } from "typesafecss";
+
+@observer
+export class ButtonSelector<T> extends preact.Component<{
+    title?: string;
+    value: T;
+    options: { value: T; title: preact.ComponentChild; isDefault?: boolean; hotkeys?: string[] }[];
+    onChange: (value: T) => void;
+    noPadding?: boolean;
+    noDefault?: boolean;
+    noUI?: boolean;
+
+    classWrapper?: string;
+}> {
+    render() {
+        const { options, onChange, title } = this.props;
+        const selectedValue = this.props.value;
+        let selectedOption = (
+            options.find(o => o.value === selectedValue)
+            || (!this.props.noDefault ? (options.find(o => o.isDefault) || options[0]) : undefined)
+        )?.value;
+        return (
+            <div className={css.hbox(2).wrap + this.props.classWrapper}>
+                {title && <div
+                    className={
+                        css.fontWeight("bold")
+                            .hsl(0, 0, 25)
+                            .border("1px solid hsl(0, 0%, 5%)").pad(4, 6)
+                            .color("white")
+                    }
+                    title={String(selectedValue)}
+                >
+                    {title}
+                </div>}
+                {options.map(({ value, title, hotkeys }) =>
+                    <button
+                        style={{
+                            background: (
+                                this.props.noUI && "transparent"
+                                || selectedOption === value && "hsl(110, 75%, 40%)"
+                                || this.props.noPadding && "hsl(0, 0%, 40%)"
+                                || ""
+                            ),
+                            border: this.props.noUI ? "none" : undefined,
+                        }}
+                        onClick={() => onChange(value)}
+                        className={
+                            css.button.flex
+                            + ((this.props.noPadding || this.props.noUI) && css.pad(0))
+                        }
+                        title={String(value)}
+                    >
+                        {title}
+                    </button>
+                )}
+            </div>
+        );
+    }
+}