feat(wired-ui): expand advanced wired editors

src/components/wired/views/extras/WiredExtraBaseView.tsx

@@ -0,0 +1,32 @@
+import { WiredActionDefinition } from '@nitrots/nitro-renderer';
+import { CSSProperties, FC, PropsWithChildren, ReactNode, useEffect } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { useWired } from '../../../../hooks';
+import { WiredBaseView } from '../WiredBaseView';
+
+export interface WiredExtraBaseViewProps
+{
+    hasSpecialInput: boolean;
+    requiresFurni: number;
+    save: () => void;
+    validate?: () => boolean;
+    cardStyle?: CSSProperties;
+    footer?: ReactNode;
+}
+
+export const WiredExtraBaseView: FC<PropsWithChildren<WiredExtraBaseViewProps>> = props =>
+{
+    const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, hasSpecialInput = false, children = null, cardStyle = undefined, footer = null } = props;
+    const { trigger = null, setActionDelay = null } = useWired();
+
+    useEffect(() =>
+    {
+        setActionDelay((trigger as WiredActionDefinition)?.delayInPulses ?? 0);
+    }, [ trigger, setActionDelay ]);
+
+    return (
+        <WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ save } validate={ validate } wiredType="extra" cardStyle={ cardStyle } footer={ footer }>
+            { children }
+        </WiredBaseView>
+    );
+};

src/components/wired/views/extras/WiredExtraFilterFurniView.tsx

@@ -0,0 +1,48 @@
+import { ChangeEvent, FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredExtraBaseView } from './WiredExtraBaseView';
+
+const MIN_FILTER = 0;
+const MAX_FILTER = 10000;
+
+const clampValue = (value: number) =>
+{
+    if(isNaN(value)) return MIN_FILTER;
+
+    return Math.max(MIN_FILTER, Math.min(MAX_FILTER, Math.floor(value)));
+};
+
+export const WiredExtraFilterFurniView: FC<{}> = () =>
+{
+    const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
+    const [ amount, setAmount ] = useState(0);
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        setAmount(clampValue((trigger.intData.length > 0) ? trigger.intData[0] : 0));
+    }, [ trigger ]);
+
+    const onChange = (event: ChangeEvent<HTMLInputElement>) =>
+    {
+        setAmount(clampValue(Number(event.target.value)));
+    };
+
+    const save = () =>
+    {
+        setIntParams([ clampValue(amount) ]);
+        setStringParam('');
+    };
+
+    return (
+        <WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 360 } }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.setfilter') }</Text>
+                <input className="form-control form-control-sm" max={ MAX_FILTER } min={ MIN_FILTER } type="number" value={ amount } onChange={ onChange } />
+            </div>
+        </WiredExtraBaseView>
+    );
+};

src/components/wired/views/extras/WiredExtraFilterUserView.tsx

@@ -0,0 +1,48 @@
+import { ChangeEvent, FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredExtraBaseView } from './WiredExtraBaseView';
+
+const MIN_FILTER = 0;
+const MAX_FILTER = 10000;
+
+const clampValue = (value: number) =>
+{
+    if(isNaN(value)) return MIN_FILTER;
+
+    return Math.max(MIN_FILTER, Math.min(MAX_FILTER, Math.floor(value)));
+};
+
+export const WiredExtraFilterUserView: FC<{}> = () =>
+{
+    const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
+    const [ amount, setAmount ] = useState(0);
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        setAmount(clampValue((trigger.intData.length > 0) ? trigger.intData[0] : 0));
+    }, [ trigger ]);
+
+    const onChange = (event: ChangeEvent<HTMLInputElement>) =>
+    {
+        setAmount(clampValue(Number(event.target.value)));
+    };
+
+    const save = () =>
+    {
+        setIntParams([ clampValue(amount) ]);
+        setStringParam('');
+    };
+
+    return (
+        <WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 360 } }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.setfilter') }</Text>
+                <input className="form-control form-control-sm" max={ MAX_FILTER } min={ MIN_FILTER } type="number" value={ amount } onChange={ onChange } />
+            </div>
+        </WiredExtraBaseView>
+    );
+};