Remove autofocus from tags. Refactoring.

This commit is contained in:
Dejvino 2023-05-28 21:43:23 +02:00
parent be6d74d24a
commit 08b182e1c5
4 changed files with 15 additions and 23 deletions

View File

@ -0,0 +1,7 @@
import React from "react"
export default function Tag(props: {text: string}) {
return (
<span className='badge text-bg-light'>{props.text}</span>
)
}

View File

@ -1,6 +1,7 @@
import React, { useEffect, useRef, useState } from 'react'; import React from 'react';
import Container from 'react-bootstrap/Container'; import Container from 'react-bootstrap/Container';
import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement'; import { useAutoFocus } from '../hooks/FocusedElement';
import Tag from './Tag';
export type Props = { export type Props = {
title: string, title: string,
@ -9,14 +10,6 @@ export type Props = {
style?: 'primary' | 'light' style?: 'primary' | 'light'
} }
function Tag(props: {text: string}) {
const tagKey = 'tag ' + props.text;
const elementRef = useAutoFocus(tagKey)
return (
<span ref={elementRef} className='badge text-bg-light'>{props.text}</span>
)
}
export default function TagCloud(props: Props) { export default function TagCloud(props: Props) {
const focusRef = useAutoFocus<HTMLDivElement>('tags ' + props.title) const focusRef = useAutoFocus<HTMLDivElement>('tags ' + props.title)
const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')] const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')]

View File

@ -2,7 +2,7 @@ import React from 'react';
import Card from 'react-bootstrap/Card'; import Card from 'react-bootstrap/Card';
import { useAutoFocus } from '../../hooks/FocusedElement'; import { useAutoFocus } from '../../hooks/FocusedElement';
import { Placeholder } from 'react-bootstrap'; import { Placeholder } from 'react-bootstrap';
import JobTags from './JobTags'; import JobTags, { focusKeyPlaceholder } from './JobTags';
import { Job } from '@/PersonalDataTypes'; import { Job } from '@/PersonalDataTypes';
import md from '../Markdown'; import md from '../Markdown';

View File

@ -1,23 +1,15 @@
import { useAutoFocus } from "@/app/hooks/FocusedElement";
import React from "react"; import React from "react";
import { Container } from "react-bootstrap"; import { Container } from "react-bootstrap";
import Tag from "../Tag";
export type Props = { export type Props = {
tags: string[] tags: string[],
}
export function JobTag(props: {text: string}) {
const tagKey = 'tag ' + props.text;
const elementRef = useAutoFocus(tagKey)
return (
<span ref={elementRef} className='badge text-bg-light'>{props.text}</span>
)
} }
export default function JobTags(props: Props) { export default function JobTags(props: Props) {
return ( return (
<Container className='job-tags' fluid> <Container className='job-tags' fluid>
{props.tags.map((tag, index) => <JobTag key={index} text={tag} />)} {props.tags.map((tag, index) => <Tag key={index} text={tag} />)}
</Container> </Container>
) )
} }