From c8a172443de58ab7b5973bd769c26af7d3210f95 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Fri, 20 May 2022 19:04:59 -0700
Subject: [PATCH] optional readonly and fix clear buttons

---
 src-tauri/lang/en.json                 |  3 ++-
 src/ui/components/common/DirInput.tsx  |  7 +++++--
 src/ui/components/common/TextInput.tsx |  2 ++
 src/ui/components/menu/Options.tsx     | 20 ++++++++++++++++++--
 src/utils/configuration.ts             |  2 ++
 5 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src-tauri/lang/en.json b/src-tauri/lang/en.json
index 2731c93..ac4c2ee 100644
--- a/src-tauri/lang/en.json
+++ b/src-tauri/lang/en.json
@@ -14,7 +14,8 @@
     "grasscutter_jar": "Set Grasscutter Jar",
     "java_path": "Set Custom Java Path",
     "grasscutter_with_game": "Automatically launch Grasscutter with game",
-    "language": "Select Language (requires restart)"
+    "language": "Select Language (requires restart)",
+    "background": "Set Custom Background (link or image file)"
   },
   "downloads": {
     "grasscutter_stable_data": "Download Grasscutter Stable Data",
diff --git a/src/ui/components/common/DirInput.tsx b/src/ui/components/common/DirInput.tsx
index 61b8476..dc77f07 100644
--- a/src/ui/components/common/DirInput.tsx
+++ b/src/ui/components/common/DirInput.tsx
@@ -10,6 +10,7 @@ interface IProps {
   value?: string
   onChange?: (value: string) => void
   extensions?: string[]
+  readonly?: boolean
 }
 
 interface IState {
@@ -23,10 +24,12 @@ export default class DirInput extends React.Component<IProps, IState> {
 
     this.state = {
       value: props.value || '',
-      placeholder: 'Select file or folder...'
+      placeholder: 'Select file or folder...',
     }
 
     this.handleIconClick = this.handleIconClick.bind(this)
+
+    console.log(this.props)
   }
 
   static getDerivedStateFromProps(props: IProps, state: IState) {
@@ -66,7 +69,7 @@ export default class DirInput extends React.Component<IProps, IState> {
           value={this.state.value}
           placeholder={this.state.placeholder}
           clearable={true}
-          readOnly={true} onChange={(text: string) => {
+          readOnly={this.props.readonly !== undefined ? this.props.readonly : true } onChange={(text: string) => {
             this.setState({ value: text })
 
             if (this.props.onChange) this.props.onChange(text)
diff --git a/src/ui/components/common/TextInput.tsx b/src/ui/components/common/TextInput.tsx
index fae5119..28d611d 100644
--- a/src/ui/components/common/TextInput.tsx
+++ b/src/ui/components/common/TextInput.tsx
@@ -48,6 +48,8 @@ export default class TextInput extends React.Component<IProps, IState> {
               this.setState({ value: '' })
     
               if (this.props.onChange) this.props.onChange('')
+
+              this.forceUpdate()
             }}>
               <img src={Close} className="TextInputClear" />
             </div> : null
diff --git a/src/ui/components/menu/Options.tsx b/src/ui/components/menu/Options.tsx
index b63e9e3..05b9463 100644
--- a/src/ui/components/menu/Options.tsx
+++ b/src/ui/components/menu/Options.tsx
@@ -19,6 +19,7 @@ interface IState {
   grasscutter_with_game: boolean
   language_options: { [key: string]: string }[],
   current_language: string
+  bg_url_or_path: string
 }
 
 export default class Options extends React.Component<IProps, IState> {
@@ -31,7 +32,8 @@ export default class Options extends React.Component<IProps, IState> {
       java_path: '',
       grasscutter_with_game: false,
       language_options: [],
-      current_language: 'en'
+      current_language: 'en',
+      bg_url_or_path: ''
     }
   }
 
@@ -45,7 +47,8 @@ export default class Options extends React.Component<IProps, IState> {
       java_path: config.java_path || '',
       grasscutter_with_game: config.grasscutter_with_game || false,
       language_options: languages,
-      current_language: config.language || 'en'
+      current_language: config.language || 'en',
+      bg_url_or_path: config.customBackground || ''
     })
 
     this.forceUpdate()
@@ -71,6 +74,10 @@ export default class Options extends React.Component<IProps, IState> {
     setConfigOption('grasscutter_with_game', !(await getConfigOption('grasscutter_with_game')))
   }
 
+  setCustomBackground() {
+    setConfigOption('customBackground', this.state.bg_url_or_path)
+  }
+
   render() {
     return (
       <Menu closeFn={this.props.closeFn} className="Options" heading="Options">
@@ -113,6 +120,15 @@ export default class Options extends React.Component<IProps, IState> {
           </div>
         </div>
 
+        <div className='OptionSection'>
+          <div className='OptionLabel'>
+            <Tr text="options.background" />
+          </div>
+          <div className='OptionValue'>
+            <DirInput onChange={this.setCustomBackground} readonly={false} value={this.state?.bg_url_or_path} extensions={['exe']} />
+          </div>
+        </div>
+
         <div className='OptionSection'>
           <div className='OptionLabel'>
             <Tr text="options.language" />
diff --git a/src/utils/configuration.ts b/src/utils/configuration.ts
index 0d0498b..719cc99 100644
--- a/src/utils/configuration.ts
+++ b/src/utils/configuration.ts
@@ -16,6 +16,7 @@ let defaultConfig: Configuration
     last_ip: '',
     last_port: '',
     language: 'en',
+    customBackground: '',
   }
 })()
 
@@ -33,6 +34,7 @@ export interface Configuration {
   last_ip: string
   last_port: string
   language: string
+  customBackground: string
 }
 
 export async function setConfigOption(key: string, value: any): Promise<void> {