[PCCompat > Components > Settings] Rewrite to use separate files for each component

moduleWrappers/powercord/components/settings/divider.js

@@ -0,0 +1,12 @@
+const { React } = goosemodScope.webpackModules.common;
+
+const FormDivider = goosemodScope.webpackModules.findByDisplayName('FormDivider');
+const SettingsFormClasses = goosemodScope.webpackModules.findByProps('dividerDefault', 'titleDefault');
+
+export default class Divider extends React.PureComponent {
+  render() {
+    return React.createElement(FormDivider, {
+      className: SettingsFormClasses.dividerDefault
+    });
+  }
+}

moduleWrappers/powercord/components/settings/formItem.js

@@ -0,0 +1,27 @@
+const { React } = goosemodScope.webpackModules.common;
+
+const OriginalFormItem = goosemodScope.webpackModules.findByDisplayName('FormItem');
+const OriginalFormText = goosemodScope.webpackModules.findByDisplayName('FormText');
+
+const Flex = goosemodScope.webpackModules.findByDisplayName('Flex');
+const Margins = goosemodScope.webpackModules.findByProps('marginTop20', 'marginBottom20');
+const FormClasses = goosemodScope.webpackModules.findByProps('formText', 'description');
+
+export default class FormItem extends React.PureComponent {
+  render() {
+    return React.createElement(OriginalFormItem, {
+        title: this.props.title,
+        required: this.props.required,
+        className: [Flex.Direction.VERTICAL, Flex.Justify.START, Flex.Align.STRETCH, Flex.Wrap.NO_WRAP, Margins.marginBottom20].join(' ')
+      },
+
+      this.props.children,
+
+      this.props.note && React.createElement(OriginalFormText, {
+        className: FormClasses.description + (this.props.noteHasMargin ? (' ' + Margins.marginTop8) : '')
+      }, this.props.note),
+
+      React.createElement(Divider)
+    );
+  }
+}

moduleWrappers/powercord/components/settings/index.js

@@ -0,0 +1,3 @@
+export { default as FormItem } from './formItem';
+export { default as TextInput } from './textInput';
+export { default as Divider } from './divider';

moduleWrappers/powercord/components/settings/textInput.js

@@ -0,0 +1,25 @@
+const { React } = goosemodScope.webpackModules.common;
+
+import FormItem from './formItem';
+
+const OriginalTextInput = goosemodScope.webpackModules.findByDisplayName('TextInput');
+
+export default class TextInput extends React.PureComponent {
+  render() {
+    const title = this.props.children;
+    delete this.props.children;
+
+    return React.createElement(FormItem, {
+        title,
+        note: this.props.note,
+        required: this.props.required,
+
+        noteHasMargin: true
+      },
+
+      React.createElement(OriginalTextInput, {
+        ...this.props
+      })
+    );
+  }
+}