sliftutils 0.1.1

package/web/Input.tsx

@@ -0,0 +1,350 @@
+import preact from "preact";
+import { css } from "typesafecss";
+import { observer } from "./observer";
+import { throttleFunction } from "socket-function/src/misc";
+
+// TODO: Autogrow mode while typing
+
+// NOTE: "value" is optional. If you don't pass "value", we will preserve the value.
+//  This is useful for inputs which you want to run an action on, such as "add new item",
+//      as it allows you to remove a local state value to cache the value, by just
+//      doing the add on "onChangeValue".
+export type InputProps = (
+    preact.JSX.HTMLAttributes<HTMLInputElement>
+    & {
+        /** ONLY throttles onChangeValue */
+        throttle?: number;
+
+        flavor?: "large" | "small" | "none";
+        focusOnMount?: boolean;
+        textarea?: boolean;
+        /** Update on key stroke, not on blur (just does onInput = onChange, as onInput already does this) */
+        hot?: boolean;
+        /** Updates arrow keys with modifier behavior to use larger numbers, instead of decimals. */
+        integer?: boolean;
+
+        /** Only works with number/integer */
+        reverseArrowKeyDirection?: boolean;
+
+        inputRef?: (x: HTMLInputElement | null) => void;
+        /** Don't blur on enter key */
+        noEnterKeyBlur?: boolean;
+        noFocusSelect?: boolean;
+        inputKey?: string;
+        fillWidth?: boolean;
+
+
+        autocompleteValues?: string[];
+
+        /** Forces the input to update when focused. Usually we hold updates, to prevent the user's
+         *      typing to be interrupted by background updates.
+         *      NOTE: "hot" is usually required when using this.
+         */
+        forceInputValueUpdatesWhenFocused?: boolean;
+
+        // NOTE: We trigger onChange (and onChangeValue) whenever
+        //      e.ctrlKey && (e.code.startsWith("Key") || e.code === "Enter") || e.code === "Enter" && e.shiftKey
+        //  This is because ctrl usually means a hotkey, and hotkeys usually want committed values.
+        onChangeValue?: (value: string) => void;
+    }
+);
+
+
+@observer
+export class Input extends preact.Component<InputProps> {
+    onFocusText = "";
+    firstFocus = true;
+
+    elem: HTMLInputElement | null = null;
+    lastValue: unknown = null;
+    lastChecked: unknown = null;
+
+    onChangeThrottle: undefined | {
+        throttle: number;
+        run: (newValue: string) => void;
+    } = undefined;
+
+    render() {
+        let flavorOverrides: preact.JSX.CSSProperties = {};
+        const { flavor, textarea, hot, inputKey, fillWidth, ...nativeProps } = this.props;
+        let props = { ...nativeProps } as preact.RenderableProps<InputProps>;
+
+        if (props.onChangeValue) {
+            let throttle = this.props.throttle;
+            if (throttle) {
+                let existingThrottle = this.onChangeThrottle;
+                if (existingThrottle?.throttle !== throttle) {
+                    existingThrottle = this.onChangeThrottle = {
+                        throttle,
+                        run: throttleFunction(throttle, (newValue) => {
+                            this.props.onChangeValue?.(newValue);
+                        })
+                    };
+                }
+                props.onChangeValue = existingThrottle.run;
+            }
+        }
+        if (flavor === "large") {
+            flavorOverrides = {
+                fontSize: 18,
+                padding: "10px 15px",
+            };
+            if (props.type === "checkbox") {
+                flavorOverrides.width = 16;
+                flavorOverrides.height = 16;
+            }
+        }
+        if (flavor === "small") {
+            flavorOverrides = {
+                fontSize: 12,
+                padding: "5px 10px",
+            };
+        }
+
+        // IMPORTANT! When focused, preserve the input value, otherwise typing is annoying.
+        //  This doesn't usually happen, but can if background tasks are updating the UI
+        //  while the user is typing.
+
+
+        let attributes: preact.JSX.HTMLAttributes<HTMLInputElement> = {
+            ...nativeProps,
+            key: inputKey || "input",
+            ref: x => {
+                if (x) {
+                    this.elem = x;
+                }
+                if (x && props.focusOnMount && this.firstFocus) {
+                    this.firstFocus = false;
+                    setTimeout(() => {
+                        x.focus();
+                    }, 0);
+                }
+                let ref = props.inputRef;
+                if (typeof ref === "function") {
+                    ref(x);
+                }
+            },
+            class: undefined,
+            className: (
+                (props.className || props.class || " ")
+                + css.display("flex", "soft")
+                    .outline("3px solid hsl(204, 100%, 50%)", "focus", "soft")
+                + (fillWidth && css.fillWidth)
+            ),
+            style: {
+                ...flavorOverrides,
+                ...props.style as any,
+            },
+            onFocus: e => {
+                if (props.type === "checkbox") return;
+                this.onFocusText = e.currentTarget.value;
+                if (!props.noFocusSelect) {
+                    e.currentTarget.select();
+                }
+                props.onFocus?.(e);
+            },
+            onBlur: e => {
+                if (props.type === "checkbox") return;
+                props.onBlur?.(e);
+                if (e.currentTarget.value === this.lastValue && e.currentTarget.checked === this.lastChecked && hot) return;
+                this.lastValue = e.currentTarget.value;
+                this.lastChecked = e.currentTarget.checked;
+                let result = props.onInput?.(e as any);
+                result = props.onChange?.(e) || result;
+                result = props.onChangeValue?.(e.currentTarget.value) || result;
+                return result;
+            },
+            onChange: e => {
+                if (props.type !== "checkbox" && e.currentTarget.value === this.lastValue && e.currentTarget.checked === this.lastChecked) return;
+                this.lastValue = e.currentTarget.value;
+                this.lastChecked = e.currentTarget.checked;
+                let result: unknown = undefined;
+                if (!props.onChangeValue || hot) {
+                    result = props.onChange?.(e) || result;
+                }
+                if (hot) {
+                    result = props.onChangeValue?.(e.currentTarget.value) || result;
+                }
+                return result;
+            },
+            onKeyDown: e => {
+                if (e.defaultPrevented) return;
+                // if (textarea && e.code === "Tab") {
+                //     e.preventDefault();
+                //     // Inject 4 spaces into the current position
+                //     let elem = e.currentTarget;
+                //     let value = elem.value;
+                //     let start = elem.selectionStart ?? elem.value.length;
+                //     let end = elem.selectionEnd ?? elem.value.length;
+                //     elem.value = value.slice(0, start) + "    " + value.slice(end);
+                //     elem.selectionStart = elem.selectionEnd = start + 4;
+                //     return;
+                // }
+                props.onKeyDown?.(e);
+                if (e.code === "Enter" && e.ctrlKey) {
+                    e.currentTarget.blur();
+                }
+                let callback = props.onInput;
+                if (!callback && hot) {
+                    callback = props.onChange;
+                }
+
+                // Convert tab to 4 spaces
+                if (e.code === "Tab" && textarea) {
+                    e.preventDefault();
+                    let elem = e.currentTarget;
+                    let value = elem.value;
+                    let start = elem.selectionStart ?? elem.value.length;
+                    let end = elem.selectionEnd ?? elem.value.length;
+                    elem.value = value.slice(0, start) + "    " + value.slice(end);
+                    elem.selectionStart = elem.selectionEnd = start + 4;
+                    callback?.(e as unknown as preact.JSX.TargetedInputEvent<HTMLInputElement>);
+                    return;
+                }
+                if (this.elem && props.type === "number") {
+                    let delta = 0;
+                    let magnitude = 1;
+                    if (e.shiftKey) {
+                        if (props.integer) {
+                            magnitude = 10;
+                        } else {
+                            magnitude = 0.1;
+                        }
+                    }
+                    if (e.code === "ArrowUp") {
+                        delta = magnitude;
+                    } else if (e.code === "ArrowDown") {
+                        delta = -magnitude;
+                    }
+                    if (props.reverseArrowKeyDirection) {
+                        delta *= -1;
+                    }
+                    if (delta !== 0) {
+                        e.preventDefault();
+                        let newValue = Math.round(((+this.elem.value || 0) + delta) * 100) / 100;
+                        e.currentTarget.value = newValue.toString();
+                        callback?.(e as unknown as preact.JSX.TargetedInputEvent<HTMLInputElement>);
+                    }
+                }
+                let { noEnterKeyBlur, onInput, onChange } = props;
+                // Detach from the synced function, to prevent double calls. This is important, as apparently .blur()
+                //  synchronously triggers onChange, BUT, only if the input is changing the first time. Which means
+                //  if this function reruns, it won't trigger the change again. Detaching it causes any triggered
+                //  functions to become root synced functions, which will allow them to correctly run the sync loop.
+                void Promise.resolve().finally(() => {
+                    if (e.defaultPrevented) return;
+                    if (e.code === "Escape") {
+                        let changed = e.currentTarget.value !== this.onFocusText;
+                        e.currentTarget.value = this.onFocusText;
+                        if (onInput) {
+                            onInput?.(e as unknown as preact.JSX.TargetedInputEvent<HTMLInputElement>);
+                        } else if (changed) {
+                            if (onChange) {
+                                onChange?.(e);
+                            }
+                        }
+                        e.currentTarget.blur();
+                    }
+                    if (!noEnterKeyBlur && e.code === "Enter" && (!textarea || e.shiftKey || e.ctrlKey) || props.autocompleteValues && e.code === "Tab") {
+                        e.currentTarget.blur();
+                    } else if (e.ctrlKey && (e.code.startsWith("Key") || e.code === "Enter") || e.shiftKey && e.code === "Enter") {
+                        onChange?.(e);
+                    }
+                });
+            },
+            onInput: e => {
+                if (props.autocompleteValues) {
+                    if (e.inputType === "insertText") {
+                        let curValue = e.currentTarget.value.toLowerCase();
+                        let match = props.autocompleteValues.find(x => x.toLowerCase().startsWith(curValue));
+                        if (match) {
+                            e.currentTarget.value = match || "";
+                            // Select the part after the previous match, so when they type, they clobber the match part
+                            let start = curValue.length;
+                            let end = e.currentTarget.value.length;
+                            e.currentTarget.selectionStart = start;
+                            e.currentTarget.selectionEnd = end;
+                        }
+                    }
+                }
+                props.onInput?.(e);
+            },
+        };
+
+
+        if ("value" in props && props.type !== "checkbox") {
+            let elem = this.elem;
+            let newValue = props.value;
+            if (!this.props.forceInputValueUpdatesWhenFocused && elem && elem === document.activeElement) {
+                newValue = elem.value;
+            }
+            attributes.value = newValue;
+            this.lastValue = String(props.value);
+        }
+        if ("checked" in props) {
+            this.lastChecked = !!props.checked;
+        }
+
+
+        if (attributes.type === "number") {
+            // Fix stuff like 55.00000000000001
+            let value = attributes.value;
+            if (typeof value === "number") {
+                value = niceNumberStringify(value);
+            }
+        }
+
+        // We do number handling ourselves
+        if (attributes["type"] === "number") {
+            delete attributes["type"];
+        }
+
+        if (props.type === "checkbox") {
+
+        } else if (hot) {
+            attributes.onInput = attributes.onChange;
+        } else {
+            // We use onChange from onBlur, so don't use the onChange handler, as preact will hook this up
+            //  with onInput, which will cause it to trigger as if the component is hot!
+            delete attributes.onChange;
+        }
+        if (textarea) {
+            return <textarea {...attributes as any} />;
+        } else {
+            return <input {...attributes} />;
+        }
+    }
+}
+
+
+function niceNumberStringify(valueIn: number) {
+    if (Math.abs(valueIn) < 0.0000000001) {
+        return "0";
+    }
+    let value = valueIn.toString();
+    // TODO: Do this MUCH better...
+    if (value.slice(0, -1).endsWith("00000000000")) {
+        value = value.slice(0, -1);
+        while (value.endsWith("0")) {
+            value = value.slice(0, -1);
+        }
+        if (value.endsWith(".")) {
+            value = value.slice(0, -1);
+        }
+        return value;
+    }
+    if (value.slice(0, -1).endsWith("9999999999")) {
+        value = value.slice(0, -1);
+        while (value.endsWith("9")) {
+            value = value.slice(0, -1);
+        }
+        if (value.endsWith(".")) {
+            value = value.slice(0, -1);
+        }
+        // NOTE: Interestingly enough... because we remove all trailing 9s, it means if the last number is not 9,
+        //  so... we can do this hack to round up
+        value = value.slice(0, -1) + (parseInt(value.slice(-1)) + 1);
+        return value;
+    }
+    return value;
+}

package/web/InputLabel.tsx

@@ -0,0 +1,288 @@
+import preact from "preact";
+import { Input, InputProps } from "./Input";
+import { css } from "typesafecss";
+import { URLParamStr } from "./URLParam";
+import { lazy } from "socket-function/src/caching";
+import { observer } from "./observer";
+import { observable } from "mobx";
+
+
+export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
+    label?: preact.ComponentChild;
+    number?: boolean;
+    /** A number, AND, an integer. Changes behavior arrow arrow keys as well */
+    integer?: boolean;
+    checkbox?: boolean;
+    // Show text and a pencil, only showing the input on click
+    edit?: boolean;
+    alwaysShowPencil?: boolean;
+    outerClass?: string;
+    maxDecimals?: number;
+    percent?: boolean;
+    editClass?: string;
+
+    fontSize?: number;
+
+    tooltip?: string;
+
+    fillWidth?: boolean;
+
+    useDateUI?: boolean;
+};
+
+function roundToDecimals(value: number, decimals: number) {
+    return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}
+
+export const startGuessDateRange = +new Date(2010, 0, 1).getTime();
+export const endGuessDateRange = +new Date(2050, 0, 1).getTime();
+
+@observer
+export class InputLabel extends preact.Component<InputLabelProps> {
+    synced = observable({
+        editting: false,
+        editInputValue: "",
+        editUpdateSeqNum: 0,
+    });
+
+    render() {
+        let props = { ...this.props };
+
+        function addValueMapping(mapper: (value: string) => string) {
+            const baseOnChange = props.onChange;
+            if (baseOnChange) {
+                props.onChange = e => {
+                    baseOnChange({ currentTarget: { value: mapper(e.currentTarget.value) } } as any);
+                };
+            }
+            const baseOnChangeValue = props.onChangeValue;
+            if (baseOnChangeValue) {
+                props.onChangeValue = e => {
+                    baseOnChangeValue(mapper(e));
+                };
+            }
+            const baseOnBlur = props.onBlur;
+            if (baseOnBlur) {
+                props.onBlur = e => {
+                    baseOnBlur({ currentTarget: { value: mapper(e.currentTarget.value) } } as any);
+                };
+            }
+            const baseOnInput = props.onInput;
+            if (baseOnInput) {
+                props.onInput = e => {
+                    baseOnInput({ currentTarget: { value: mapper(e.currentTarget.value) } } as any);
+                };
+            }
+        }
+
+        let label = props.label || props.children;
+        (props as any).title = props.tooltip;
+        if ("value" in props) {
+            props.value = props.value ?? "";
+        }
+
+        if ((!props.type || props.type === "number") && props.useDateUI) {
+            let value = String(props.value);
+            if (
+                value === "date-1be2200d-9742-4e90-a6c2-e8a790277414"
+                || isJSNumber(value) && startGuessDateRange < +value && +value < endGuessDateRange
+                // NOTE: Showing the date selector is a problem, as there is not an easy way to undo this. So if the
+                //      user typed in "2020", it would return the input into a selector and not let them keeping type.
+                // || startGuessDateRange < +new Date(String(value)) && +new Date(String(value)) < endGuessDateRange
+            ) {
+                props.type = "datetime-local";
+                props.edit = false;
+                props.textarea = false;
+                props.number = false;
+                props.forceInputValueUpdatesWhenFocused = true;
+                // NOTE: When using forceInputValueUpdatesWhenFocused we need hot, otherwise the user's updates
+                //  won't be visible.
+                props.hot = true;
+                if (isJSNumber(value)) {
+                    value = formatDateTimeForInput(+value);
+                } else {
+                    value = "";
+                }
+                props.value = value;
+                addValueMapping(value => (+new Date(value).getTime() || "") + "");
+            }
+        }
+        if (props.fontSize !== undefined) {
+            props.style = { ...props.style as any, fontSize: props.fontSize };
+        }
+        if (props.integer) {
+            props.number = true;
+        }
+        if (props.number) {
+            props.type = "number";
+        }
+        if (props.checkbox) {
+            props.type = "checkbox";
+        }
+        if (props.percent) {
+            props.value = (Number(props.value) || 0) * 100;
+            addValueMapping(value => String(+value / 100));
+            props.maxDecimals = props.maxDecimals ?? 2;
+            props.number = props.number ?? true;
+            props.type = "number";
+        }
+        let maxDecimals = props.maxDecimals;
+        if (typeof maxDecimals === "number") {
+            props.value = roundToDecimals(Number(props.value), maxDecimals);
+        }
+
+        function formatDateTimeForInput(value: number) {
+            value -= new Date(value).getTimezoneOffset() * 60 * 1000;
+            return new Date(value).toISOString().slice(0, -1);
+        }
+
+        let style = { ...props.style as any };
+        if (props.type === "number") {
+            let fontSize = props.fontSize ?? 12;
+            style.width = 40 + String(props.value).length * (fontSize * 0.75);
+        }
+        let onClick: ((e: preact.JSX.TargetedMouseEvent<HTMLElement>) => void) | undefined;
+        if (props.edit) {
+            let baseBlur = props.onBlur;
+            props.onBlur = e => {
+                this.synced.editting = false;
+                baseBlur?.(e);
+            };
+            onClick = (e) => {
+                e.stopPropagation();
+                this.synced.editting = true;
+            };
+        }
+
+        let stateEditting = this.synced.editting;
+        let sizeBasedOnContents = props.edit;
+        if (props.edit && !stateEditting) {
+            sizeBasedOnContents = false;
+        }
+        if (sizeBasedOnContents) {
+            let baseChange = props.onChange;
+            props.onChange = e => {
+                this.synced.editUpdateSeqNum++;
+                baseChange?.(e);
+            };
+            this.synced.editUpdateSeqNum;
+        }
+
+        let input = <Input
+            {...props}
+            label={String(label)}
+            style={style}
+            className={
+                (
+                    props.flavor === "large" && "large "
+                    || props.flavor === "none" && " "
+                    || "tiny "
+                )
+                + (props.class || props.className)
+                + (sizeBasedOnContents && css.absolute.pos(0, 0).fillBoth.resize("none") || "")
+            }
+            onInput={e => {
+                if (props.edit) {
+                    this.synced.editInputValue = e.currentTarget.value;
+                }
+                props.onInput?.(e);
+            }}
+        />;
+
+        if (props.edit && !stateEditting) {
+            input = <span className={
+                css.hbox(2) + " inputPlaceholder trigger-hover "
+                + props.editClass
+            }>
+                <span
+                    className={
+                        css.whiteSpace("pre-wrap")
+                        + (props.class || props.className)
+                    }
+                >
+                    {props.value}
+                </span>
+                <span className={css.opacity(0.1).opacity(1, "hover")}>
+                    {pencilSVG()}
+                </span>
+            </span>;
+        }
+        return (
+            <label onClick={onClick} className={
+                css.hbox(0).relative
+                + " trigger-hover "
+                + props.outerClass
+                + (props.flavor === "large" && css.fontSize(18, "soft"))
+                + (props.fillWidth && css.fillWidth)
+                + css.position("relative", "soft")
+            }>
+                {/* Extra UI so the textarea sizes properly. */}
+                {sizeBasedOnContents &&
+                    <span
+                        className={
+                            css.whiteSpace("pre-wrap")
+                            //.opacity(0)
+                            //.pointerEvents("none")
+                            + (props.editClass)
+                            + " " + (props.class || props.className)
+                        }
+                    >
+                        {/* We add another character, so "a\n" results in two lines, instead of 1. */}
+                        {this.synced.editInputValue || props.value || props.placeholder} |
+                    </span>
+                }
+                {/* <div
+                    className={
+                        "show-on-hover "
+                        + css.hsla(0, 0, 0, 0.2)
+                            .absolute.pos(-8, -2).size("calc(100% + 16px)" as "100%", "calc(100% + 4px)" as "100%")
+                            .zIndex(-1)
+                            .pointerEvents("none")
+                    }
+                /> */}
+                {label && <span className={css.fontWeight("bold").flexShrink0}>{label}</span>}
+                {input}
+            </label>
+        );
+    }
+}
+
+const pencilSVG = lazy(() => {
+    const src = "data:image/svg+xml;base64," + Buffer.from(`
+    <svg width="24" height="24" viewBox="-1 1 23 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5.98012 19.3734L8.60809 18.7164C8.62428 18.7124 8.64043 18.7084 8.65654 18.7044C8.87531 18.65 9.08562 18.5978 9.27707 18.4894C9.46852 18.381 9.62153 18.2275 9.7807 18.0679C9.79242 18.0561 9.80418 18.0444 9.81598 18.0325L17.0101 10.8385L17.0101 10.8385L17.0369 10.8117C17.3472 10.5014 17.6215 10.2272 17.8128 9.97638C18.0202 9.70457 18.1858 9.39104 18.1858 9C18.1858 8.60896 18.0202 8.29543 17.8128 8.02361C17.6215 7.77285 17.3472 7.49863 17.0369 7.18835L17.01 7.16152L16.8385 6.98995L16.8117 6.96314C16.5014 6.6528 16.2272 6.37853 15.9764 6.1872C15.7046 5.97981 15.391 5.81421 15 5.81421C14.609 5.81421 14.2954 5.97981 14.0236 6.1872C13.7729 6.37853 13.4986 6.65278 13.1884 6.96311L13.1615 6.98995L5.96745 14.184C5.95565 14.1958 5.94386 14.2076 5.93211 14.2193C5.77249 14.3785 5.61904 14.5315 5.51064 14.7229C5.40225 14.9144 5.34999 15.1247 5.29562 15.3435C5.29162 15.3596 5.28761 15.3757 5.28356 15.3919L4.62003 18.046C4.61762 18.0557 4.61518 18.0654 4.61272 18.0752C4.57411 18.2293 4.53044 18.4035 4.51593 18.5518C4.49978 18.7169 4.50127 19.0162 4.74255 19.2574C4.98383 19.4987 5.28307 19.5002 5.44819 19.4841C5.59646 19.4696 5.77072 19.4259 5.92479 19.3873C5.9346 19.3848 5.94433 19.3824 5.95396 19.38L5.95397 19.38L5.9801 19.3734L5.98012 19.3734Z" stroke="#33363F" stroke-width="1.2" fill="hsl(330, 50%, 60%)" />
+        <path d="M12.5 7.5L5.92819 14.0718C5.71566 14.2843 5.60939 14.3906 5.53953 14.5212C5.46966 14.6517 5.44019 14.7991 5.38124 15.0938L4.64709 18.7646C4.58057 19.0972 4.5473 19.2635 4.64191 19.3581C4.73652 19.4527 4.90283 19.4194 5.23544 19.3529L8.90621 18.6188C9.20093 18.5598 9.3483 18.5303 9.47885 18.4605C9.60939 18.3906 9.71566 18.2843 9.92819 18.0718L16.5 11.5L12.5 7.5Z" fill="hsl(45, 100%, 50%)" />
+        <path d="M12.5 7.5L16.5 11.5" stroke="#33363F" stroke-width="1.2" />
+    </svg>
+    `).toString("base64");
+    return <img draggable={false} src={src} />;
+});
+
+@observer
+export class InputLabelURL extends preact.Component<InputLabelProps & {
+    persisted: URLParamStr;
+}> {
+    render() {
+        this.props.persisted.value;
+        let props = { ...this.props };
+        if (props.type === "number" || props.number) {
+            return <InputLabel {...props} value={Number(props.persisted.value) || 0} onChange={e => { props.persisted.value = e.currentTarget.value; props.onChange?.(e); }} />;
+        } else if (props.type === "checkbox" || this.props.checkbox) {
+            return <InputLabel
+                {...props}
+                checked={Boolean(props.persisted.value) || false}
+                onFocus={e => e.currentTarget.blur()}
+                onChange={e => {
+                    props.persisted.value = e.currentTarget.checked ? "1" : "";
+                    props.onChange?.(e);
+                }}
+            />;
+        } else {
+            return <InputLabel {...props} value={String(props.persisted.value) || ""} onChange={e => { props.persisted.value = e.currentTarget.value; props.onChange?.(e); }} />;
+        }
+    }
+}
+
+function isJSNumber(value: string) {
+    return !isNaN(+value);
+}