Native Dropdown support in LightcordApi

BetterDiscordApp/src/ui/components/switch.jsx

@@ -12,7 +12,7 @@ export default class Switch extends React.Component {
     onChange(value) {
         if (this.props.disabled) return;
         this.props.onChange(value);
-        this.setState({checked: !this.state.checked});
+        this.setState({checked: value});
     }
 
     render() {

BetterDiscordApp/src/ui/presenceSettings.jsx

@@ -8,7 +8,6 @@ import V2C_SettingsGroup from "./settingsGroup";
 import dataStore from "../modules/dataStore";
 import { defaultRPC, settingsRPC } from "../0globals";
 import CustomRichPresence from "../modules/CustomRichPresence"
-import Select from "./select";
 import timestampRender from "./timestampRender"
 import { remote } from "electron";
 
@@ -434,7 +433,8 @@ class InputChoice extends React.PureComponent {
                 <h5 className={colorModule.colorStandard+" "+sizeModule.size14+" "+marginModule2.h5+" "+marginModule2.defaultMarginh5}>
                     {setting.title}
                 </h5>
-                <Select value={this.state.data} onChange={this.onChange.bind(this)} options={options}/>
+                <window.Lightcord.Api.Components.inputs.Dropdown value={this.state.data} options={options} onChange={this.onChange.bind(this)} />
+                {/*<Select value={this.state.data} onChange={this.onChange.bind(this)} options={options}/>*/}
             </div>
             <Divider/>
         </div>)

BetterDiscordApp/src/ui/select.jsx

@@ -1,31 +0,0 @@
-import BDV2 from "../modules/v2"
-
-/**
- * @type {typeof import("react")}
- */
-const React = BDV2.react
-
-export default class Select extends React.Component {
-    handleChange(value) {
-        this.props.value = value;
-        if (typeof this.props.onChange == "function") this.props.onChange(value, this);
-        this.forceUpdate()
-    }
-    render() {
-        let flex = BDModules.get(e => e.default && e.default.Wrap && e.default.Direction && e.default.Child)[0].default
-        let nativeSelect = BDModules.get(e => e.default && e.default.displayName === "SelectTempWrapper")[0].default
-        return (<flex direction={flex.Direction.HORIZONTAL} align={flex.Align.CENTER}>
-                {React.createElement(nativeSelect, Object.assign({}, this.props, {
-                    onChange: this.handleChange.bind(this)
-                }))}
-            </flex>)/*
-        return BDFDB.ReactUtils.createElement(InternalComponents.LibraryComponents.Flex, {
-            className: BDFDB.disCN.selectwrapper,
-            direction: InternalComponents.LibraryComponents.Flex.Direction.HORIZONTAL,
-            align: InternalComponents.LibraryComponents.Flex.Align.CENTER,
-            children: BDFDB.ReactUtils.createElement(InternalComponents.NativeSubComponents.Select, Object.assign({}, this.props, {
-                onChange: this.handleChange.bind(this)
-            }))
-        });*/
-    }
-};

LightcordApi/src/components/Discord/Dropdown.tsx

@@ -0,0 +1,104 @@
+import NOOP from "../../modules/noop"
+import WebpackLoader from "../../modules/WebpackLoader"
+import { ReactNode, CSSProperties } from "react"
+
+type DropdownProps = {
+    className?: string,
+    error?: string,
+    options?: {
+        value: string,
+        label: string
+    }[],
+    valueRenderer?: (data) => ReactNode,
+    optionRenderer?: (data) => ReactNode,
+    multiValueRenderer?: (data) => ReactNode
+    onChange?: (value: string) => void,
+    value?: string,
+    disabled?: boolean,
+    searchable?: boolean,
+    clearable?: boolean,
+    styleOverrides?: CSSProperties,
+    lightThemeColorOverrides?: themeOverride,
+    darkThemeColorOverrides?: themeOverride,
+    isMulti?: boolean
+}
+
+type themeOverride = {
+    neutral0: string,
+    neutral5: string,
+    neutral10: string,
+    neutral20: string,
+    neutral30: string,
+    primary: string,
+    primary25: string,
+    primary50: string,
+    selectedOptionBackground: string,
+    text: string,
+    menuBackground: string,
+    menuBorder: string,
+    scrollBarThumb: string,
+    multiOptionBackground: string
+}
+
+let DropdownModules
+export default class Dropdown extends React.Component<DropdownProps, DropdownProps> {
+    constructor(props:DropdownProps){
+        props = Dropdown.normalizeProps(props)
+        super(props)
+        this.state = props
+        this.onChange = this.onChange.bind(this)
+    }
+
+    static normalizeProps(props:DropdownProps):DropdownProps{
+        if(!props || typeof props !== "object")props = {}
+        if(typeof props.className !== "string")delete props.className
+        if(typeof props.darkThemeColorOverrides !== "object" || !props.darkThemeColorOverrides)delete props.darkThemeColorOverrides
+        if(typeof props.disabled !== "boolean")props.disabled = false
+        if(typeof props.error !== "string")delete props.error
+        if(typeof props.isMulti !== "boolean")props.isMulti = false
+        if(typeof props.lightThemeColorOverrides !== "object" || !props.lightThemeColorOverrides)delete props.lightThemeColorOverrides
+        if(typeof props.multiValueRenderer !== "function")delete props.multiValueRenderer
+        if(typeof props.valueRenderer !== "function")delete props.valueRenderer
+        if(typeof props.optionRenderer !== "function")delete props.optionRenderer
+        if(typeof props.onChange !== "function")props.onChange = NOOP
+        if(!Array.isArray(props.options))props.options = [{
+            value: "none",
+            "label": "No options - No options was passed to Dropdown. If you meant to put an empty dropdown, input an empty array."
+        }]
+        if(typeof props.searchable !== "boolean")props.searchable = false
+        if(typeof props.styleOverrides !== "object")delete props.styleOverrides
+        if(typeof props.value !== "string")props.value = null
+
+        return props
+    }
+
+    onChange(value){
+        console.log(value)
+        this.state.onChange(value)
+        this.setState({
+            value: value
+        })
+    }
+
+    get modules(){
+        return DropdownModules || (DropdownModules = [
+            WebpackLoader.find(e => e.default && e.default.displayName === "SelectTempWrapper").default
+        ])
+    }
+
+    render(){
+        let [
+            DropdownComponent
+        ] = this.modules
+
+        let props = Dropdown.normalizeProps(this.state || this.props)
+        if(!this.state){
+            this.state = Object.create(props)
+        }
+        return <DropdownComponent {...this.props} onChange={this.onChange}/>
+    }
+
+    get value(){
+        return this.state.value
+    }
+}

LightcordApi/src/components/Discord/RadioGroup.tsx

@@ -2,7 +2,7 @@ import NOOP from "../../modules/noop"
 import WebpackLoader from "../../modules/WebpackLoader"
 
 
-type ChoicesProps = {
+type RadioGroupProps = {
     options?: {
         color?: string,
         name: string,
@@ -18,15 +18,15 @@ type ChoicesProps = {
 }
 
 let RadioGroupModule
-export default class RadioGroup extends React.Component<ChoicesProps, ChoicesProps> {
-    constructor(props:ChoicesProps){
+export default class RadioGroup extends React.Component<RadioGroupProps, RadioGroupProps> {
+    constructor(props:RadioGroupProps){
         props = RadioGroup.normalizeProps(props)
         super(props)
         this.state = props
         this.onChange = this.onChange.bind(this)
     }
 
-    static normalizeProps(props:ChoicesProps):ChoicesProps{
+    static normalizeProps(props:RadioGroupProps):RadioGroupProps{
         if(!props || typeof props !== "object")props = {}
         let defaultOptions = false
         if(!props.options || !Array.isArray(props.options)){

LightcordApi/src/components/components.ts

@@ -3,6 +3,7 @@ import Switch from "./Discord/Switch"
 import RadioGroup from "./Discord/RadioGroup"
 import TextArea from "./Discord/TextArea"
 import TextInput from "./Discord/TextInput"
+import Dropdown from "./Discord/Dropdown"
 
 export default {
     inputs: {
@@ -11,6 +12,7 @@ export default {
         Choices: RadioGroup,
         RadioGroup: RadioGroup,
         TextArea: TextArea,
-        TextInput: TextInput
+        TextInput: TextInput,
+        Dropdown: Dropdown
     }
 }