Refactor TypeScript interfaces and types across multiple files for consistency and clarity
Gitea Auto Deploy / Deploy-Container (push) Failing after 46s
Gitea Auto Deploy / Deploy-Container (push) Failing after 46s
- Updated metadata interfaces in `metaData.ts` for improved readability. - Refactored `mics.ts` types to enhance structure and maintainability. - Added `Invasion` type to `mocDetail.ts` and `peakDetail.ts` for new functionality. - Simplified modal configuration in `modelConfig.ts`. - Cleaned up monster detail interfaces in `monsterDetail.ts`. - Enhanced battle configuration types in `pfDetail.ts` to include `Invasion`. - Updated JSON schemas in `srtools.zod.ts` to use `nullish` for optional fields. - Introduced new skills-lock.json for skill management. - Added global type declarations for CSS and SCSS modules in `global.d.ts`.
This commit is contained in:
@@ -1,112 +1,136 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import dynamic from "next/dynamic"
|
||||
import type { SingleValue } from "react-select"
|
||||
import Image from "next/image"
|
||||
import useLocaleStore from "@/stores/localeStore"
|
||||
import ParseText from "../parseText"
|
||||
import { themeColors } from "@/constant/constant"
|
||||
import type { Props as SelectProps } from "react-select"
|
||||
import { JSX } from "react"
|
||||
|
||||
const Select = dynamic(
|
||||
() => import("react-select").then(m => m.default),
|
||||
{ ssr: false }
|
||||
) as <Option, IsMulti extends boolean = false>(
|
||||
props: SelectProps<Option, IsMulti>
|
||||
) => JSX.Element
|
||||
|
||||
export type SelectOption = {
|
||||
value: string
|
||||
label: string
|
||||
imageUrl: string
|
||||
}
|
||||
|
||||
type SelectCustomProp = {
|
||||
customSet: SelectOption[]
|
||||
excludeSet: SelectOption[]
|
||||
selectedCustomSet: string
|
||||
placeholder: string
|
||||
setSelectedCustomSet: (value: string) => void
|
||||
}
|
||||
|
||||
export default function SelectCustomImage({ customSet, excludeSet, selectedCustomSet, placeholder, setSelectedCustomSet }: SelectCustomProp) {
|
||||
const options: SelectOption[] = customSet
|
||||
const { locale, theme } = useLocaleStore()
|
||||
|
||||
const c = themeColors[theme] || themeColors.winter
|
||||
|
||||
const customStyles = {
|
||||
option: (p: any, s: any) => ({
|
||||
...p,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '8px 12px',
|
||||
backgroundColor: s.isFocused ? c.bgHover : c.bg,
|
||||
color: c.text,
|
||||
cursor: 'pointer'
|
||||
}),
|
||||
|
||||
singleValue: (p: any) => ({
|
||||
...p,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
color: c.text
|
||||
}),
|
||||
|
||||
control: (p: any) => ({
|
||||
...p,
|
||||
backgroundColor: c.bg,
|
||||
borderColor: c.border,
|
||||
boxShadow: 'none'
|
||||
}),
|
||||
|
||||
menu: (p: any) => ({
|
||||
...p,
|
||||
backgroundColor: c.bg,
|
||||
color: c.text,
|
||||
zIndex: 9999
|
||||
}),
|
||||
|
||||
menuPortal: (p: any) => ({
|
||||
...p,
|
||||
zIndex: 9999
|
||||
})
|
||||
}
|
||||
|
||||
const formatOptionLabel = (option: SelectOption) => (
|
||||
<div className="flex items-center gap-1 w-full h-full">
|
||||
<Image
|
||||
unoptimized
|
||||
crossOrigin="anonymous"
|
||||
src={option.imageUrl}
|
||||
alt=""
|
||||
width={125}
|
||||
height={125}
|
||||
className="w-8 h-8 object-contain bg-warning-content rounded-full"
|
||||
/>
|
||||
<ParseText className='font-bold' text={option.label} locale={locale} />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Select
|
||||
options={options.filter(opt => !excludeSet.some(ex => ex.value === opt.value))}
|
||||
value={options.find(opt => {
|
||||
return opt.value === selectedCustomSet
|
||||
}) || null}
|
||||
onChange={(selected: SingleValue<SelectOption>) => {
|
||||
setSelectedCustomSet(selected?.value || '')
|
||||
}}
|
||||
formatOptionLabel={formatOptionLabel}
|
||||
styles={customStyles}
|
||||
placeholder={placeholder}
|
||||
className="my-react-select-container"
|
||||
classNamePrefix="my-react-select"
|
||||
isSearchable
|
||||
isClearable
|
||||
/>
|
||||
)
|
||||
}
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import dynamic from "next/dynamic"
|
||||
import type { SingleValue } from "react-select"
|
||||
import Image from "next/image"
|
||||
import useLocaleStore from "@/stores/localeStore"
|
||||
import { useShallow } from "zustand/react/shallow"
|
||||
import ParseText from "../parseText"
|
||||
import { themeColors } from "@/constant/constant"
|
||||
import type { Props as SelectProps } from "react-select"
|
||||
import { JSX } from "react"
|
||||
|
||||
const Select = dynamic(
|
||||
() => import("react-select").then(m => m.default),
|
||||
{ ssr: false }
|
||||
) as <Option, IsMulti extends boolean = false>(
|
||||
props: SelectProps<Option, IsMulti>
|
||||
) => JSX.Element
|
||||
|
||||
export type SelectOption = {
|
||||
value: string
|
||||
label: string
|
||||
imageUrl: string
|
||||
}
|
||||
|
||||
type SelectCustomProp = {
|
||||
customSet: SelectOption[]
|
||||
excludeSet: SelectOption[]
|
||||
selectedCustomSet: string
|
||||
placeholder: string
|
||||
setSelectedCustomSet: (value: string) => void
|
||||
}
|
||||
|
||||
export default function SelectCustomImage({ customSet, excludeSet, selectedCustomSet, placeholder, setSelectedCustomSet }: SelectCustomProp) {
|
||||
const options: SelectOption[] = customSet
|
||||
const { locale, theme } = useLocaleStore(
|
||||
useShallow((state) => ({
|
||||
locale: state.locale,
|
||||
theme: state.theme,
|
||||
}))
|
||||
)
|
||||
|
||||
const c = themeColors[theme] || themeColors.winter
|
||||
|
||||
const customStyles = {
|
||||
option: (p: any, s: any) => ({
|
||||
...p,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '10px 14px',
|
||||
backgroundColor: s.isFocused ? c.bgHover : c.bg,
|
||||
color: c.text,
|
||||
cursor: 'pointer',
|
||||
opacity: 1,
|
||||
}),
|
||||
|
||||
singleValue: (p: any) => ({
|
||||
...p,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
color: c.text,
|
||||
opacity: 1,
|
||||
}),
|
||||
|
||||
control: (p: any) => ({
|
||||
...p,
|
||||
backgroundColor: c.bg,
|
||||
borderColor: c.border,
|
||||
boxShadow: 'none',
|
||||
opacity: 1,
|
||||
minHeight: '38px',
|
||||
borderRadius: '12px',
|
||||
}),
|
||||
|
||||
menu: (p: any) => ({
|
||||
...p,
|
||||
backgroundColor: c.bg,
|
||||
color: c.text,
|
||||
zIndex: 99999,
|
||||
opacity: 1,
|
||||
border: `1px solid ${c.border}`,
|
||||
boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
}),
|
||||
|
||||
menuList: (p: any) => ({
|
||||
...p,
|
||||
backgroundColor: c.bg,
|
||||
padding: 0,
|
||||
opacity: 1,
|
||||
}),
|
||||
|
||||
menuPortal: (p: any) => ({
|
||||
...p,
|
||||
zIndex: 99999,
|
||||
opacity: 1,
|
||||
})
|
||||
}
|
||||
|
||||
const formatOptionLabel = (option: SelectOption) => (
|
||||
<div className="flex items-center gap-1 w-full h-full">
|
||||
<Image
|
||||
unoptimized
|
||||
crossOrigin="anonymous"
|
||||
src={option.imageUrl}
|
||||
alt=""
|
||||
width={125}
|
||||
height={125}
|
||||
className="w-8 h-8 object-contain bg-warning-content rounded-full"
|
||||
/>
|
||||
<ParseText className='font-bold' text={option.label} locale={locale} />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Select
|
||||
options={options.filter(opt => !excludeSet.some(ex => ex.value === opt.value))}
|
||||
value={options.find(opt => {
|
||||
return opt.value === selectedCustomSet
|
||||
}) || null}
|
||||
onChange={(selected: SingleValue<SelectOption>) => {
|
||||
setSelectedCustomSet(selected?.value || '')
|
||||
}}
|
||||
formatOptionLabel={formatOptionLabel}
|
||||
styles={customStyles}
|
||||
placeholder={placeholder}
|
||||
className="my-react-select-container"
|
||||
classNamePrefix="my-react-select"
|
||||
isSearchable
|
||||
isClearable
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user