this repo has no description
notnite.com
1import { LogLevel, WebpackRequireType } from "@moonlight-mod/types";
2import { CircleXIconSVG } from "../../types";
3
4const logLevels = Object.values(LogLevel).filter(
5 (v) => typeof v === "string"
6) as string[];
7
8export default (require: WebpackRequireType) => {
9 const React = require("common_react");
10 const spacepack = require("spacepack_spacepack").spacepack;
11 const CommonComponents = require("common_components");
12 const {
13 FormDivider,
14 FormItem,
15 FormText,
16 FormSwitch,
17 TextInput,
18 Flex,
19 Button,
20 SingleSelect
21 } = CommonComponents;
22
23 const { MoonbaseSettingsStore } =
24 require("moonbase_stores") as typeof import("../../webpackModules/stores");
25
26 const FormClasses = spacepack.findByCode("dividerDefault:")[0].exports;
27 const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;
28
29 const RemoveButtonClasses = spacepack.findByCode("removeButtonContainer")[0]
30 .exports;
31 const CircleXIcon = spacepack.findByCode(CircleXIconSVG)[0].exports.default;
32 function RemoveEntryButton({ onClick }: { onClick: () => void }) {
33 const { Tooltip, Clickable } = CommonComponents;
34 return (
35 <div className={RemoveButtonClasses.removeButtonContainer}>
36 <Tooltip text="Remove entry" position="top">
37 {(props: any) => (
38 <Clickable
39 {...props}
40 className={RemoveButtonClasses.removeButton}
41 onClick={onClick}
42 >
43 <CircleXIcon width={24} height={24} />
44 </Clickable>
45 )}
46 </Tooltip>
47 </div>
48 );
49 }
50
51 function ArrayFormItem({
52 config
53 }: {
54 config: "repositories" | "devSearchPaths";
55 }) {
56 const items = MoonbaseSettingsStore.getConfigOption(config) ?? [];
57 return (
58 <Flex
59 style={{
60 gap: "20px"
61 }}
62 direction={Flex.Direction.VERTICAL}
63 >
64 {items.map((val, i) => (
65 <div
66 key={i}
67 style={{
68 display: "grid",
69 height: "32px",
70 gap: "8px",
71 gridTemplateColumns: "1fr 32px",
72 alignItems: "center"
73 }}
74 >
75 <TextInput
76 size={TextInput.Sizes.DEFAULT}
77 value={val}
78 onChange={(newVal: string) => {
79 items[i] = newVal;
80 MoonbaseSettingsStore.setConfigOption(config, items);
81 }}
82 />
83 <RemoveEntryButton
84 onClick={() => {
85 items.splice(i, 1);
86 MoonbaseSettingsStore.setConfigOption(config, items);
87 }}
88 />
89 </div>
90 ))}
91
92 <Button
93 look={Button.Looks.FILLED}
94 color={Button.Colors.GREEN}
95 size={Button.Sizes.SMALL}
96 style={{
97 marginTop: "10px"
98 }}
99 onClick={() => {
100 items.push("");
101 MoonbaseSettingsStore.setConfigOption(config, items);
102 }}
103 >
104 Add new entry
105 </Button>
106 </Flex>
107 );
108 }
109
110 return function ConfigPage() {
111 return (
112 <>
113 <FormItem title="Repositories">
114 <FormText className={Margins.marginBottom4}>
115 A list of remote repositories to display extensions from
116 </FormText>
117 <ArrayFormItem config="repositories" />
118 </FormItem>
119 <FormDivider className={FormClasses.dividerDefault} />
120 <FormItem
121 title="Extension search paths"
122 className={Margins.marginTop20}
123 >
124 <FormText className={Margins.marginBottom4}>
125 A list of local directories to search for built extensions
126 </FormText>
127 <ArrayFormItem config="devSearchPaths" />
128 </FormItem>
129 <FormDivider className={FormClasses.dividerDefault} />
130 <FormSwitch
131 className={Margins.marginTop20}
132 value={MoonbaseSettingsStore.getConfigOption("patchAll")}
133 onChange={(value: boolean) => {
134 MoonbaseSettingsStore.setConfigOption("patchAll", value);
135 }}
136 note="Wraps every webpack module in a function, separating them in DevTools"
137 >
138 Patch all
139 </FormSwitch>
140 <FormItem title="Log level">
141 <SingleSelect
142 autofocus={false}
143 clearable={false}
144 value={MoonbaseSettingsStore.getConfigOption("loggerLevel")}
145 options={logLevels.map((o) => ({
146 value: o.toLowerCase(),
147 label: o[0] + o.slice(1).toLowerCase()
148 }))}
149 onChange={(v) =>
150 MoonbaseSettingsStore.setConfigOption("loggerLevel", v)
151 }
152 />
153 </FormItem>
154 </>
155 );
156 };
157};