CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: make Preferences' lint happy

Browse Source
This commit is contained in:
CrescentLeaf
2025-10-07 23:05:34 +08:00
parent 4b91bc9dbb
commit 8d7ddd46be
7 changed files with 63 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/ui/preference/SelectPreference.tsx
View File

@@ -1,31 +1,36 @@
import { $ } from 'mdui/jq'
import React from 'react'
import { Dropdown } from 'mdui'
import useEventListener from '../useEventListener.ts'
// value as { [id: string]: string }
export default function SelectPreference({ title, icon, updater, selections, defaultCheckedId, disabled } = {
disabled: false,
}) {
const [ checkedId, setCheckedId ] = React.useState(defaultCheckedId)
interface Args extends React.HTMLAttributes<HTMLElement> {
title: string
icon: string
disabled?: boolean
updater: (value: unknown) => void
selections: { [id: string]: string }
defaultCheckedId: string
}
export default function SelectPreference({ title, icon, updater, selections, defaultCheckedId, disabled }: Args) {
const [checkedId, setCheckedId] = React.useState(defaultCheckedId)
const dropDownRef = React.useRef<Dropdown>(null)
const [isDropDownOpen, setDropDownOpen] = React.useState(false)
useEventListener(dropDownRef, 'closed', (e) => {
useEventListener(dropDownRef, 'closed', () => {
setDropDownOpen(false)
})
return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => setDropDownOpen(!isDropDownOpen)}>
<mdui-dropdown ref={dropDownRef} trigger="manual" open={isDropDownOpen}>
<span slot="trigger">{ title }</span>
<span slot="trigger">{title}</span>
<mdui-menu onClick={(e) => {
e.stopPropagation()
setDropDownOpen(false)
}}>
{
Object.keys(selections).map((id) =>
<mdui-menu-item selected={checkedId == id ? true : undefined} onClick={() => {
Object.keys(selections).map((id) =>
// @ts-ignore: selected 确实存在, 但是并不对外公开使用
<mdui-menu-item key={id} selected={checkedId == id ? true : undefined} onClick={() => {
setCheckedId(id)
updater(id)
}}>{selections[id]}</mdui-menu-item>
@@ -33,6 +38,6 @@ export default function SelectPreference({ title, icon, updater, selections, def
}
</mdui-menu>
</mdui-dropdown>
<span slot="description">{ selections[checkedId] }</span>
<span slot="description">{selections[checkedId]}</span>
</mdui-list-item>
}