[Settings] Add React settings support

src/ui/settings/index.js

@@ -10,7 +10,7 @@ import addToSettingsSidebar from './settingsSidebar';
 import addBaseItems from './baseItems';
 
 import getItems from './items';
-let Items = {};
+export let Items = {};
 
 let goosemodScope = {};
 
@@ -135,9 +135,9 @@ export const _createItem = (name, content, container = true) => {
       className: name === '#terms.store.plugins#' || name === '#terms.store.themes#' ? 'gm-store-settings' : ''
     },
 
-    React.createElement(FormTitle, { tag: 'h1' }, name),
+    content[1].prototype?.render ? null : React.createElement(FormTitle, { tag: 'h1' }, name),
 
-    makeContent()
+    content[1].prototype?.render ? React.createElement(content[1]) : makeContent()
   ) : React.createElement('div', { },
     makeContent()
   );

src/ui/settings/items/index.js

@@ -3,6 +3,7 @@ export default async () => ({
   header: (await import('./header')).default(),
   toggle: (await import('./toggle')).default(),
   text: (await import('./text')).default(),
+  'text-and-child': (await import('./text-and-child')).default(),
   'text-and-button': (await import('./text-and-button')).default(),
   'text-and-color': (await import('./text-and-color')).default(),
   button: (await import('./button')).default(),
@@ -14,4 +15,4 @@ export default async () => ({
   custom: (await import('./custom')).default(),
   'text-input': (await import('./text-input')).default(),
   subtext: (await import('./subtext')).default()
-});
+});

src/ui/settings/items/text-and-child.js

@@ -0,0 +1,63 @@
+import _Divider from './divider';
+
+export default () => {
+const { React } = goosemod.webpackModules.common;
+
+const Divider = _Divider();
+
+const Button = goosemod.webpackModules.findByProps('Sizes', 'Colors', 'Looks', 'DropdownSizes');
+
+const Markdown = goosemod.webpackModules.find((x) => x.displayName === 'Markdown' && x.rules);
+
+const FormItem = goosemod.webpackModules.findByDisplayName('FormItem');
+const FormText = goosemod.webpackModules.findByDisplayName('FormText');
+
+const Flex = goosemod.webpackModules.findByDisplayName('Flex');
+const Margins = goosemod.webpackModules.findByProps('marginTop20', 'marginBottom20');
+
+const FormClasses = goosemod.webpackModules.findByProps('title', 'dividerDefault');
+const FormTextClasses = goosemod.webpackModules.findByProps('formText', 'placeholder');
+
+return class TextAndButton extends React.PureComponent {
+  render() {
+    return React.createElement(FormItem, {
+        className: [Flex.Direction.VERTICAL, Flex.Justify.START, Flex.Align.STRETCH, Flex.Wrap.NO_WRAP, Margins.marginBottom20].join(' '),
+      },
+
+      React.createElement('div', {
+          style: {
+            display: 'flex',
+            justifyContent: 'space-between'
+          }
+        },
+
+        React.createElement('div', {},
+          React.createElement('div', {
+              className: FormClasses.labelRow,
+              style: {
+                marginBottom: '4px'
+              }
+            },
+
+            React.createElement('label', {
+              class: FormClasses.title
+            }, this.props.text)
+          ),
+
+          React.createElement(FormText, {
+            className: FormTextClasses.description
+          },
+            React.createElement(Markdown, {
+              className: 'gm-settings-note-markdown'
+            }, this.props.subtext || '')
+          )
+        ),
+
+        this.props.children
+      ),
+
+      React.createElement(Divider)
+    );
+  }
+}
+};