eric/bridget
1
0
Fork 0
mirror of https://github.com/Sped0n/bridget.git synced 2026-04-22 14:09:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

refactor: reduce amount of createEffect and improve imports (#284)

Browse Source 
* refactor: update import syntax

* feat: add GalleryImage component for simplicity

* refactor: replace createEffect in GalleryNav with createMemo

* refactor: refactor Gallery component logic and improve imports
This commit is contained in:
Spedon
2024-02-23 15:59:32 +08:00
committed by GitHub
parent 875113448b
commit e081e139fc
10 changed files with 115 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
assets/ts/mobile/galleryNav.tsx
View File

@@ -1,4 +1,4 @@
import { createEffect, on, type Accessor, type JSX, type Setter } from 'solid-js'
import { createMemo, type Accessor, type JSX, type Setter } from 'solid-js'
import { useState } from '../state'
import { expand } from '../utils'
@@ -7,63 +7,35 @@ export function capitalizeFirstLetter(str: string): string {
return str.charAt(0).toUpperCase() + str.slice(1)
}
export function GalleryNav(props: {
export default function GalleryNav(props: {
children?: JSX.Element
closeText: string
isAnimating: Accessor<boolean>
setIsOpen: Setter<boolean>
}): JSX.Element {
// variables
const indexNums: HTMLSpanElement[] = Array<HTMLSpanElement>(8)
// states
const [state] = useState()
const stateLength = state().length
// helper functions
const updateIndexText: () => void = () => {
const indexValue: string = expand(state().index + 1)
const indexLength: string = expand(stateLength)
indexNums.forEach((e: HTMLSpanElement, i: number) => {
if (i < 4) {
e.innerText = indexValue[i]
} else {
e.innerText = indexLength[i - 4]
}
})
}
const indexValue = createMemo(() => expand(state().index + 1))
const indexLength = createMemo(() => expand(state().length))
const onClick: () => void = () => {
if (props.isAnimating()) return
props.setIsOpen(false)
}
// effects
createEffect(
on(
() => {
state()
},
() => {
updateIndexText()
},
{ defer: true }
)
)
return (
<>
<div class="nav">
<div>
<span ref={indexNums[0]} class="num" />
<span ref={indexNums[1]} class="num" />
<span ref={indexNums[2]} class="num" />
<span ref={indexNums[3]} class="num" />
<span class="num">{indexValue()[0]}</span>
<span class="num">{indexValue()[1]}</span>
<span class="num">{indexValue()[2]}</span>
<span class="num">{indexValue()[3]}</span>
<span>/</span>
<span ref={indexNums[4]} class="num" />
<span ref={indexNums[5]} class="num" />
<span ref={indexNums[6]} class="num" />
<span ref={indexNums[7]} class="num" />
<span class="num">{indexLength()[0]}</span>
<span class="num">{indexLength()[1]}</span>
<span class="num">{indexLength()[2]}</span>
<span class="num">{indexLength()[3]}</span>
</div>
<div onClick={onClick} onKeyDown={onClick}>
{capitalizeFirstLetter(props.closeText)}