notnite.com
+27
-14
packages/core-extensions/src/moonbase/webpackModules/ui/extensions/settings.tsx
+27
-14
packages/core-extensions/src/moonbase/webpackModules/ui/extensions/settings.tsx
···
26
26
Button,
27
27
useVariableSelect,
28
28
multiSelect,
29
-
Select as DiscordSelect
29
+
Select as DiscordSelect,
30
+
NumberInputStepper
30
31
} from "@moonlight-mod/wp/discord/components/common/index";
31
32
import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
32
33
import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
···
101
102
const { value, displayName, description } = useConfigEntry<number>(ext.uniqueId, name);
102
103
103
104
const castedSetting = setting as NumberSettingType;
104
-
const min = castedSetting.min ?? 0;
105
-
const max = castedSetting.max ?? 100;
105
+
const min = castedSetting.min;
106
+
const max = castedSetting.max;
107
+
108
+
const onChange = (value: number) => {
109
+
const rounded = min == null || max == null ? Math.round(value) : Math.max(min, Math.min(max, Math.round(value)));
110
+
MoonbaseSettingsStore.setExtensionConfig(ext.id, name, rounded);
111
+
};
106
112
107
113
return (
108
114
<FormItem className={Margins.marginTop20} title={displayName}>
109
-
{description && <FormText>{markdownify(description)}</FormText>}
110
-
<Slider
111
-
initialValue={value ?? 0}
112
-
disabled={disabled}
113
-
minValue={castedSetting.min ?? 0}
114
-
maxValue={castedSetting.max ?? 100}
115
-
onValueChange={(value: number) => {
116
-
const rounded = Math.max(min, Math.min(max, Math.round(value)));
117
-
MoonbaseSettingsStore.setExtensionConfig(ext.id, name, rounded);
118
-
}}
119
-
/>
115
+
{min == null || max == null ? (
116
+
<Flex justify={Flex.Justify.BETWEEN} direction={Flex.Direction.HORIZONTAL}>
117
+
{description && <FormText>{markdownify(description)}</FormText>}
118
+
<NumberInputStepper value={value ?? 0} onChange={onChange} />
119
+
</Flex>
120
+
) : (
121
+
<>
122
+
{description && <FormText>{markdownify(description)}</FormText>}
123
+
<Slider
124
+
initialValue={value ?? 0}
125
+
disabled={disabled}
126
+
minValue={min}
127
+
maxValue={max}
128
+
onValueChange={onChange}
129
+
onValueRender={(value: number) => `${Math.round(value)}`}
130
+
/>
131
+
</>
132
+
)}
120
133
</FormItem>
121
134
);
122
135
}