granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix forwardRef and refactor rendering

Browse source
This commit is contained in:
Justin Edmund 2022-11-30 06:09:55 -08:00
parent 055c70624a
commit 1202985f80
1 changed files with 48 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
components/JobSkillItem/index.tsx
View file

@ -3,80 +3,79 @@ import { useRouter } from "next/router"
import { useTranslation } from "next-i18next" import { useTranslation } from "next-i18next"
import classNames from "classnames" import classNames from "classnames"
import PlusIcon from "~public/icons/Add.svg" import PlusIcon from "~public/icons/Add.svg"
import "./index.scss" import "./index.scss"
// Props // Props
interface Props { interface Props extends React.ComponentPropsWithoutRef<"div"> {
skill?: JobSkill skill?: JobSkill
editable: boolean editable: boolean
hasJob: boolean hasJob: boolean
} }
const JobSkillItem = React.forwardRef<HTMLDivElement, Props>((props, ref) => { const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
const router = useRouter() ({ ...props }, forwardedRef) => {
const { t } = useTranslation("common") const router = useRouter()
const locale = const { t } = useTranslation("common")
router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en" const locale =
router.locale && ["en", "ja"].includes(router.locale)
? router.locale
: "en"
const classes = classNames({ const classes = classNames({
JobSkill: true, JobSkill: true,
editable: props.editable, editable: props.editable,
}) })
const imageClasses = classNames({ const imageClasses = classNames({
placeholder: !props.skill, placeholder: !props.skill,
editable: props.editable && props.hasJob, editable: props.editable && props.hasJob,
}) })
const skillImage = () => { const skillImage = () => {
let jsx: React.ReactNode let jsx: React.ReactNode
if (props.skill) { if (props.skill) {
jsx = ( jsx = (
<img <img
alt={props.skill.name[locale]} alt={props.skill.name[locale]}
className={imageClasses} className={imageClasses}
src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}job-skills/${props.skill.slug}.png`} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}job-skills/${props.skill.slug}.png`}
/> />
) )
} else { } else {
jsx = ( jsx = (
<div className={imageClasses}> <div className={imageClasses}>
{props.editable && props.hasJob ? <PlusIcon /> : ""} {props.editable && props.hasJob ? <PlusIcon /> : ""}
</div> </div>
) )
}
return jsx
} }
return jsx const label = () => {
} let jsx: React.ReactNode
const label = () => { if (props.skill) {
let jsx: React.ReactNode jsx = <p>{props.skill.name[locale]}</p>
} else if (props.editable && props.hasJob) {
jsx = <p className="placeholder">{t("job_skills.state.selectable")}</p>
} else {
jsx = <p className="placeholder">{t("job_skills.state.no_skill")}</p>
}
if (props.skill) { return jsx
jsx = <p>{props.skill.name[locale]}</p>
} else if (props.editable && props.hasJob) {
jsx = <p className="placeholder">Select a skill</p>
} else {
jsx = <p className="placeholder">No skill</p>
} }
return jsx
}
const skillItem = () => {
return ( return (
<div className={classes} ref={ref}> <div className={classes} onClick={props.onClick} ref={forwardedRef}>
{skillImage()} {skillImage()}
{label()} {label()}
</div> </div>
) )
} }
)
return skillItem()
})
export default JobSkillItem export default JobSkillItem