feat: New select component

package.json

@@ -91,6 +91,7 @@
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-select": "^5.8.0",
     "react-transition-group": "^4.4.5",
     "remark": "^15.0.1",
     "sanitize-filename": "^1.6.3",

src/react/AddServerOrConnect.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import Screen from './Screen'
 import Input from './Input'
 import Button from './Button'
+import SelectGameVersion from './SelectGameVersion'
 import { useIsSmallWidth } from './simpleHooks'
 
 export interface BaseServerInfo {
@@ -24,11 +25,12 @@ interface Props {
   defaults?: Pick<BaseServerInfo, 'proxyOverride' | 'usernameOverride'>
   accounts?: string[]
   authenticatedAccounts?: number
+  versions?: string[]
 }
 
 const ELEMENTS_WIDTH = 190
 
-export default ({ onBack, onConfirm, title = 'Add a Server', initialData, parseQs, onQsConnect, defaults, accounts, authenticatedAccounts }: Props) => {
+export default ({ onBack, onConfirm, title = 'Add a Server', initialData, parseQs, onQsConnect, defaults, accounts, versions, authenticatedAccounts }: Props) => {
   const qsParams = parseQs ? new URLSearchParams(window.location.search) : undefined
   const qsParamName = qsParams?.get('name')
   const qsParamIp = qsParams?.get('ip')
@@ -93,7 +95,23 @@ export default ({ onBack, onConfirm, title = 'Add a Server', initialData, parseQ
         <InputWithLabel required label="Server IP" value={serverIp} disabled={lockConnect && qsIpParts?.[0] !== null} onChange={({ target: { value } }) => setServerIp(value)} />
         <InputWithLabel label="Server Port" value={serverPort} disabled={lockConnect && qsIpParts?.[1] !== null} onChange={({ target: { value } }) => setServerPort(value)} placeholder='25565' />
         <div style={{ gridColumn: smallWidth ? '' : 'span 2' }}>Overrides:</div>
-        <InputWithLabel label="Version Override" value={versionOverride} disabled={lockConnect && qsParamVersion !== null} onChange={({ target: { value } }) => setVersionOverride(value)} placeholder='Optional, but recommended to specify' />
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
+          <label style={{ fontSize: 12, marginBottom: 1, color: 'lightgray' }}>Version Override</label>
+          <SelectGameVersion
+            versions={versions?.map(v => { return { value: v, label: v } }) ?? []}
+            onChange={(value) => {
+              setVersionOverride(value)
+            }}
+            // inputProps={{
+            //   placeholder: 'Optional, but recommended to specify',
+            //   disabled: lockConnect && qsParamVersion !== null
+            // }}
+          />
+        </div>
+
         <InputWithLabel label="Proxy Override" value={proxyOverride} disabled={lockConnect && qsParamProxy !== null} onChange={({ target: { value } }) => setProxyOverride(value)} placeholder={defaults?.proxyOverride} />
         <InputWithLabel label="Username Override" value={usernameOverride} disabled={!noAccountSelected || lockConnect && qsParamUsername !== null} onChange={({ target: { value } }) => setUsernameOverride(value)} placeholder={defaults?.usernameOverride} />
         <label style={{

src/react/CreateWorld.tsx

@@ -4,6 +4,7 @@ import { filesize } from 'filesize'
 import Input from './Input'
 import Screen from './Screen'
 import Button from './Button'
+import SelectGameVersion from './SelectGameVersion'
 import styles from './createWorld.module.css'
 
 // const worldTypes = ['default', 'flat', 'largeBiomes', 'amplified', 'customized', 'buffet', 'debug_all_block_states']
@@ -43,18 +44,14 @@ export default ({ cancelClick, createClick, customizeClick, versions, defaultVer
         }}
         placeholder='World name'
       />
-      <select
-        value={version} style={{
-          background: 'gray',
-          color: 'white'
-        }} onChange={({ target: { value } }) => {
-          creatingWorldState.version = value
+      <SelectGameVersion
+        versions={versions.map((obj) => { return { value: obj.version, label: obj.version === defaultVersion ? obj.version + ' (available offline)' : obj.version } })}
+        selected={{ value: defaultVersion, label: defaultVersion + ' (available offline)' }}
+        onChange={(value) => {
+          creatingWorldState.version = value ?? defaultVersion
         }}
-      >
-        {versions.map(({ version, label }) => {
-          return <option key={version} value={version}>{label}</option>
-        })}
-      </select>
+        containerStyle={{ width: '100px' }}
+      />
     </form>
     <div style={{ display: 'flex' }}>
       <Button onClick={() => {

src/react/Input.tsx

@@ -1,26 +1,39 @@
-import React, { useEffect, useRef } from 'react'
+import React, { CSSProperties, useEffect, useRef, useState } from 'react'
 import { isMobile } from 'prismarine-viewer/viewer/lib/simpleUtils'
 import styles from './input.module.css'
 
 interface Props extends React.ComponentProps<'input'> {
   rootStyles?: React.CSSProperties
   autoFocus?: boolean
   inputRef?: React.RefObject<HTMLInputElement>
+  validateInput?: (value: string) => CSSProperties | undefined
 }
 
-export default ({ autoFocus, rootStyles, inputRef, ...inputProps }: Props) => {
+export default ({ autoFocus, rootStyles, inputRef, validateInput, ...inputProps }: Props) => {
   const ref = useRef<HTMLInputElement>(null!)
+  const [validationStyle, setValidationStyle] = useState<CSSProperties>({})
+  const [value, setValue] = useState(inputProps.value ?? '')
+
+  useEffect(() => {
+    setValue(inputProps.value === '' || inputProps.value ? inputProps.value : value)
+  }, [inputProps.value])
 
   useEffect(() => {
     if (inputRef) (inputRef as any).current = ref.current
     if (!autoFocus || isMobile()) return // Don't make screen keyboard popup on mobile
     ref.current.focus()
   }, [])
 
-  return <div className={styles.container} style={rootStyles}>
+
+  return <div id='input-container' className={styles.container} style={rootStyles}>
     <input
       ref={ref} className={styles.input} autoComplete='off' autoCapitalize='off' autoCorrect='off' autoSave='off' spellCheck='false'
-      {...inputProps}
+      style={{ ...validationStyle }} {...inputProps} value={value}
+      onChange={(e) => {
+        setValidationStyle(validateInput?.(e.target.value) ?? {})
+        setValue(e.target.value)
+        inputProps.onChange?.(e)
+      }}
     />
   </div>
 }

src/react/Select.css

@@ -0,0 +1,5 @@
+
+div.Mui-focused #input-container {
+  border: 1px solid white !important;
+}
+

src/react/Select.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { CSSProperties } from 'react'
+import Select from './Select'
+
+const meta: Meta<typeof Select> = {
+  component: Select,
+}
+
+export default meta
+type Story = StoryObj<typeof Select>
+
+export const Primary: Story = {
+  args: {
+    initialOptions: [{ value: '1', label: 'option 1' }, { value: '2', label: 'option 2' }, { value: '3', label: 'option 3' },],
+    updateOptions (options) {},
+    processInput (input) {
+      console.log('input:', input)
+      if (input === 'option 3') return { border: '1px solid yellow' } as CSSProperties
+    },
+    iconInput: 'user',
+    iconOption: 'user'
+  },
+}

src/react/Select.tsx

@@ -0,0 +1,109 @@
+import { useState, CSSProperties } from 'react'
+import Creatable from 'react-select/creatable'
+import Input from './Input'
+import './Select.css'
+import styles from './select.module.css'
+
+
+export interface OptionStorage {
+  value: string,
+  label: string
+}
+
+interface Props {
+  initialOptions: OptionStorage[]
+  updateOptions: (options: string) => void
+  processInput?: (input: string) => CSSProperties | undefined
+  processOption?: (option: string) => string
+  onValueChange?: (newVal: string) => void
+  defaultValue?: { value: string, label: string }
+  iconInput?: string
+  placeholder?: string
+  iconOption?: string
+  containerStyle?: CSSProperties
+  inputProps?: React.ComponentProps<typeof Input>
+}
+
+export default ({
+  initialOptions,
+  updateOptions,
+  processInput,
+  onValueChange,
+  defaultValue,
+  containerStyle,
+  placeholder
+}: Props) => {
+  const [inputValue, setInputValue] = useState<string | undefined>(defaultValue?.label ?? '')
+  const [currValue, setCurrValue] = useState<string | undefined>(defaultValue?.label ?? '')
+  const [inputStyle, setInputStyle] = useState<CSSProperties>({})
+  const [isFirstClick, setIsFirstClick] = useState(true)
+
+  return <Creatable
+    options={initialOptions}
+    aria-invalid="true"
+    defaultValue={defaultValue}
+    blurInputOnSelect={true}
+    hideSelectedOptions={false}
+    maxMenuHeight={100}
+    isClearable={true}
+    formatCreateLabel={(value) => {
+      return 'Use "' + value + '"'
+    }}
+    placeholder={placeholder ?? ''}
+    onChange={(e, action) => {
+      console.log('value:', e?.value)
+      setCurrValue(e?.label)
+      setInputValue(e?.label)
+      onValueChange?.(e?.value ?? '')
+      updateOptions?.(e?.value ?? '')
+      setInputStyle(processInput?.(e?.value ?? '') ?? {})
+    }}
+    onInputChange={(e) => {
+      setIsFirstClick(false)
+      setInputValue(e)
+    }}
+    inputValue={inputValue}
+    onFocus={(state) => {
+      setInputValue(currValue)
+    }}
+    filterOption={(option, value) => {
+      return isFirstClick || option.label.includes(value)
+    }}
+    onMenuOpen={() => {
+      setIsFirstClick(true)
+    }}
+    classNames={{
+      control (state) {
+        return styles.container
+      },
+      input (state) {
+        return styles.input
+      },
+      option (state) {
+        return styles.container
+      }
+    }}
+    styles={{
+      container (base, state) { return { ...base, position: 'relative' } },
+      control (base, state) { return { ...containerStyle, ...inputStyle } },
+      menu (base, state) { return { position: 'absolute', zIndex: 10 } },
+      option (base, state) {
+        return {
+          boxSizing: 'border-box',
+          padding: '3px',
+          backgroundColor: 'black',
+          border: state.isFocused ? '1px solid white' : '1px solid grey',
+          height: 'fit-content',
+          ...containerStyle
+        }
+      },
+      input (base, state) { return {} },
+      indicatorsContainer (base, state) { return { display: 'none' } },
+      placeholder (base, state) { return { ...base, padding: '3px', position: 'absolute' } },
+      singleValue (base, state) { return { ...base, margin: '0px', position: 'absolute', color: 'white' } },
+      valueContainer (base, state) { return { ...base, padding: '3px' } },
+      noOptionsMessage (base, state) { return { display: 'none' } }
+    }}
+  />
+}
+

src/react/SelectGameVersion.tsx

@@ -0,0 +1,51 @@
+import React, { CSSProperties } from 'react'
+import Select from './Select'
+import Input from './Input'
+
+type Version = { value: string, label: string }
+
+export default (
+  { versions, selected, onChange, updateOptions, containerStyle }:
+  {
+    versions: Version[],
+    selected?: Version,
+    inputProps?: React.ComponentProps<typeof Input>,
+    onChange?: (newValue: string) => void,
+    updateOptions?: (newSel: string) => void,
+    containerStyle?: CSSProperties
+  }
+) => {
+  return <Select
+    initialOptions={versions}
+    defaultValue={selected}
+    updateOptions={(newSel) => {
+      updateOptions?.(newSel)
+    }}
+    onValueChange={onChange}
+    containerStyle={containerStyle ?? { width: '190px' }}
+    processInput={(value) => {
+      if (!versions || !value) return {}
+      const parsedsupportedVersions = versions.map(x => x.value.split('.').map(Number))
+      const parsedValue = value.split('.').map(Number)
+
+      const compareVersions = (v1, v2) => {
+        for (let i = 0; i < Math.max(v1.length, v2.length); i++) {
+          const num1 = v1[i] || 0
+          const num2 = v2[i] || 0
+          if (num1 > num2) return 1
+          if (num1 < num2) return -1
+        }
+        return 0
+      }
+
+      parsedsupportedVersions.sort(compareVersions)
+      const minVersion = parsedsupportedVersions[0]
+      const maxVersion = parsedsupportedVersions.at(-1)
+
+      const isWithinRange = compareVersions(parsedValue, minVersion) >= 0 && compareVersions(parsedValue, maxVersion) <= 0
+      if (!isWithinRange) return { border: '1px solid red' }
+      if (!versions.some(x => x.value === value)) return { border: '1px solid yellow' }
+    }}
+  />
+
+}