feat: custom table columns order for mobile (#885)

This commit is contained in:
YetAnotherZephyruso 2024-08-01 00:36:23 +08:00 committed by GitHub
parent 3cbcc897bc
commit 3fd6abb879
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 55 additions and 15 deletions

View File

@ -6,7 +6,7 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"build": "vite build", "build": "vite build",
"dev": "vite", "dev": "vite --host",
"format": "prettier -w .", "format": "prettier -w .",
"lint": "eslint --fix .", "lint": "eslint --fix .",
"prepare": "husky", "prepare": "husky",

View File

@ -1,6 +1,12 @@
import { createForm } from '@felte/solid' import { createForm } from '@felte/solid'
import { validator } from '@felte/validator-zod' import { validator } from '@felte/validator-zod'
import { IconMenuOrder, IconNetwork, IconX } from '@tabler/icons-solidjs' import {
IconArrowDown,
IconArrowUp,
IconMenuOrder,
IconNetwork,
IconX,
} from '@tabler/icons-solidjs'
import type { import type {
DragEventHandler, DragEventHandler,
Draggable, Draggable,
@ -147,6 +153,29 @@ export const ConnectionsSettingsModal = (props: {
} }
} }
const moveElementInOrder = (
key: CONNECTIONS_TABLE_ACCESSOR_KEY,
direction: 'forward' | 'backward',
) => {
const arr = [...props.order]
const length = arr.length
const index = arr.indexOf(key)
if (index < 0 || index >= length) {
return
}
const newIndex = direction === 'forward' ? index + 1 : index - 1
if (newIndex < 0 || newIndex >= length) {
return
}
;[arr[index], arr[newIndex]] = [arr[newIndex], arr[index]]
props.onOrderChange(arr)
}
const FormRow: Component<{ const FormRow: Component<{
key: CONNECTIONS_TABLE_ACCESSOR_KEY key: CONNECTIONS_TABLE_ACCESSOR_KEY
}> = ({ key }) => { }> = ({ key }) => {
@ -165,25 +194,36 @@ export const ConnectionsSettingsModal = (props: {
<div class="flex justify-between py-2"> <div class="flex justify-between py-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Button <Button
class="btn-ghost btn-sm cursor-grab" class="btn-ghost btn-sm hidden cursor-grab sm:inline-block"
icon={<IconMenuOrder size={24} />} icon={<IconMenuOrder size={24} />}
{...sortable.dragActivators} {...sortable.dragActivators}
/> />
<span>{t(key)}</span> <span>{t(key)}</span>
</div> </div>
<div>
<input <Button
type="checkbox" class="btn-circle btn-sm mx-2 inline-block sm:hidden"
class="toggle" icon={<IconArrowUp width={30} size={24} />}
checked={props.visible[key]} onClick={() => moveElementInOrder(key, 'backward')}
onChange={(e) => { />
props.onVisibleChange({ <Button
...props.visible, class="btn-circle btn-sm mx-2 inline-block sm:hidden"
[key]: e.target.checked, icon={<IconArrowDown width={30} size={24} />}
}) onClick={() => moveElementInOrder(key, 'forward')}
}} />
/> <input
type="checkbox"
class="toggle"
checked={props.visible[key]}
onChange={(e) => {
props.onVisibleChange({
...props.visible,
[key]: e.target.checked,
})
}}
/>
</div>
</div> </div>
</div> </div>
) )