Remove autofocus from tags. Refactoring.
This commit is contained in:
parent
be6d74d24a
commit
08b182e1c5
7
src/app/components/Tag.tsx
Normal file
7
src/app/components/Tag.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
@ -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')]
|
||||||
|
@ -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';
|
||||||
|
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user