feat: enhance level filter

Author: guansss

src/apis/level.ts

@@ -28,7 +28,6 @@ export const useLevels = ({ suspense }: { suspense?: boolean } = {}) => {
         }
 
         if (stageIds.has(level.stageId)) {
-          console.warn('Duplicate level removed:', level.stageId, level.name)
           return false
         }
 

src/components/LevelSelect.tsx

@@ -0,0 +1,118 @@
+import { MenuDivider, MenuItem } from '@blueprintjs/core'
+
+import clsx from 'clsx'
+import Fuse from 'fuse.js'
+import { FC, Fragment, useMemo } from 'react'
+
+import { useLevels } from '../apis/level'
+import { createCustomLevel, isHardMode } from '../models/level'
+import { Level } from '../models/operation'
+import { Suggest } from './Suggest'
+
+interface LevelSelectProps {
+  className?: string
+  value: string
+  onChange: (level: string) => void
+}
+
+export const LevelSelect: FC<LevelSelectProps> = ({
+  className,
+  value,
+  onChange,
+}) => {
+  const { data } = useLevels()
+  const levels = useMemo(
+    () =>
+      data
+        // to simplify the list, we only show levels in normal mode
+        .filter((level) => !isHardMode(level.stageId))
+        .sort((a, b) => a.levelId.localeCompare(b.levelId)),
+    [data],
+  )
+
+  const fuse = useMemo(
+    () =>
+      new Fuse(levels, {
+        keys: ['name', 'catTwo', 'catThree', 'stageId'],
+        threshold: 0.3,
+      }),
+    [levels],
+  )
+  const fuseSimilar = useMemo(
+    () =>
+      new Fuse(levels, {
+        keys: ['levelId'],
+        threshold: 0,
+      }),
+    [levels],
+  )
+
+  // value 可以由用户输入，所以可以是任何值，只有用 stageId 才能匹配到唯一的关卡
+  const selectedLevel = useMemo(
+    () => levels.find((el) => el.stageId === value) ?? null,
+    [levels, value],
+  )
+
+  return (
+    <Suggest<Level>
+      updateQueryOnSelect
+      items={levels}
+      itemListPredicate={(query) => {
+        // 如果 query 和当前关卡完全匹配（也就是唯一对应），就显示同类关卡
+        if (selectedLevel && selectedLevel.stageId === query) {
+          const levelIdPrefix = selectedLevel.levelId
+            .split('/')
+            .slice(0, -1)
+            .join('/')
+          const similarLevels = fuseSimilar
+            .search(levelIdPrefix)
+            .map((el) => el.item)
+
+          if (similarLevels.length > 0) {
+            const header = createCustomLevel('header')
+            // catTwo 一般是活动名，有时候是空的
+            header.catTwo = selectedLevel.catTwo || '相关关卡'
+            return [header, ...similarLevels]
+          }
+        }
+
+        return query ? fuse.search(query).map((el) => el.item) : levels
+      }}
+      onReset={() => onChange('')}
+      className={clsx(className, selectedLevel && '[&_input]:italic')}
+      itemRenderer={(item, { handleClick, handleFocus, modifiers }) =>
+        item.name === 'header' ? (
+          <Fragment key="header">
+            <div className="ml-2 text-zinc-500 text-xs">{item.catTwo}</div>
+            <MenuDivider />
+          </Fragment>
+        ) : (
+          <MenuItem
+            key={item.stageId}
+            text={`${item.catThree} ${item.name}`}
+            onClick={handleClick}
+            onFocus={handleFocus}
+            selected={modifiers.active}
+            disabled={modifiers.disabled}
+          />
+        )
+      }
+      selectedItem={selectedLevel}
+      onItemSelect={(level) => onChange(level.stageId)}
+      inputValueRenderer={(item) => item.stageId}
+      noResults={<MenuItem disabled text="没有可选的关卡" />}
+      inputProps={{
+        placeholder: '关卡名、关卡类型、关卡编号',
+        leftIcon: 'area-of-interest',
+        large: true,
+        size: 64,
+        onBlur: (e) => {
+          // 失焦时直接把 query 提交上去，用于处理关卡未匹配的情况
+          if (value !== e.target.value) {
+            onChange(e.target.value)
+          }
+        },
+      }}
+    />
+  )
+}

src/components/Operations.tsx

@@ -17,6 +17,7 @@ import { OperationSetList } from 'components/OperationSetList'
 import { neoLayoutAtom } from 'store/pref'
 
 import { authAtom } from '../store/auth'
+import { LevelSelect } from './LevelSelect'
 import { OperatorFilter } from './OperatorFilter'
 import { withSuspensable } from './Suspensable'
 
@@ -117,21 +118,15 @@ export const Operations: ComponentType = withSuspensable(() => {
                   }
                   onBlur={() => debouncedSetQueryParams.flush()}
                 />
-                <InputGroup
-                  className="mt-2 [&>input]:!rounded-md"
-                  placeholder="关卡名、关卡类型、关卡编号"
-                  leftIcon="area-of-interest"
-                  size={64}
-                  large
-                  type="search"
-                  enterKeyHint="search"
-                  onChange={(e) =>
-                    debouncedSetQueryParams((old) => ({
+                <LevelSelect
+                  className="mt-2"
+                  value={queryParams.levelKeyword ?? ''}
+                  onChange={(level) =>
+                    setQueryParams((old) => ({
                       ...old,
-                      levelKeyword: e.target.value.trim(),
+                      levelKeyword: level,
                     }))
                   }
-                  onBlur={() => debouncedSetQueryParams.flush()}
                 />
                 <OperatorFilter
                   className="mt-2"

src/components/Suggest.tsx

@@ -1,26 +1,38 @@
 import { Suggest2, Suggest2Props } from '@blueprintjs/select'
 
-import { useEffect, useMemo, useState } from 'react'
+import { noop } from 'lodash-es'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { ControllerFieldState } from 'react-hook-form'
 
 import { FieldResetButton } from './FieldResetButton'
 
 interface SuggestProps<T> extends Suggest2Props<T> {
   debounce?: number // defaults to 100(ms), set to 0 to disable
+  updateQueryOnSelect?: boolean
   fieldState?: ControllerFieldState
   onReset?: () => void
 }
 
 export const Suggest = <T,>({
   debounce = 100,
+  updateQueryOnSelect,
   fieldState,
   onReset,
 
   items,
   itemListPredicate,
+  selectedItem,
+  inputValueRenderer,
   inputProps,
   ...suggest2Props
 }: SuggestProps<T>) => {
+  // 禁用掉 focus 自动选中输入框文字的功能
+  // https://github.com/palantir/blueprint/blob/b41f668461e63e2c20caf54a3248181fe01161c4/packages/select/src/components/suggest/suggest2.tsx#L229
+  const ref = useRef<Suggest2<T>>(null)
+  if (ref.current && ref.current['selectText'] !== noop) {
+    ref.current['selectText'] = noop
+  }
+
   const [query, setQuery] = useState('')
   const [debouncedQuery, setDebouncedQuery] = useState('')
 
@@ -46,11 +58,20 @@ export const Suggest = <T,>({
     }
   }, [fieldState?.isTouched])
 
+  useEffect(() => {
+    if (updateQueryOnSelect && selectedItem) {
+      setQuery(inputValueRenderer(selectedItem))
+    }
+  }, [updateQueryOnSelect, selectedItem, inputValueRenderer])
+
   return (
     <Suggest2<T>
+      ref={ref}
       items={filteredItems}
       query={query}
       onQueryChange={setQuery}
+      selectedItem={selectedItem}
+      inputValueRenderer={inputValueRenderer}
       inputProps={{
         onKeyDown: (event) => {
           // prevent form submission
@@ -60,7 +81,13 @@ export const Suggest = <T,>({
         },
         rightElement: (
           <FieldResetButton
-            disabled={!fieldState?.isDirty}
+            disabled={
+              fieldState
+                ? !fieldState.isDirty
+                : onReset
+                  ? !(query || selectedItem !== null)
+                  : true
+            }
             onReset={() => {
               setQuery('')
               setDebouncedQuery('')