Implement MentionTypeahead
This component implements react-bootstrap-typeahead to give us a typeahead for items. Originally this was all implemented in MentionTableField but we split it into its own component.
This commit is contained in:
parent
eb772923da
commit
6b562941c7
2 changed files with 535 additions and 0 deletions
358
components/common/MentionTypeahead/index.module.scss
Normal file
358
components/common/MentionTypeahead/index.module.scss
Normal file
|
|
@ -0,0 +1,358 @@
|
|||
.menu {
|
||||
background: #fff;
|
||||
border-radius: $item-corner;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
overflow: scroll;
|
||||
padding: $unit-half;
|
||||
pointer-events: all;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
z-index: 999;
|
||||
|
||||
:global(.dropdown-item.disabled) {
|
||||
align-items: center;
|
||||
color: var(--text-tertiary);
|
||||
display: flex;
|
||||
font-size: $font-small;
|
||||
min-height: $unit-5x;
|
||||
padding-left: $unit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
[aria-selected='true'] .item {
|
||||
background: var(--menu-bg-item-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.item {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $item-corner-small;
|
||||
color: var(--text-tertiary);
|
||||
font-size: $font-small;
|
||||
font-weight: $medium;
|
||||
display: flex;
|
||||
gap: $unit;
|
||||
margin: 0;
|
||||
padding: $unit-half $unit;
|
||||
text-align: left;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background: var(--menu-bg-item-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.job {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $unit-4x;
|
||||
height: $unit-4x;
|
||||
|
||||
img {
|
||||
width: $unit-3x;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: $item-corner-small;
|
||||
width: $unit-4x;
|
||||
height: $unit-4x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.typeahead {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
font-size: $font-regular;
|
||||
white-space: pre-wrap;
|
||||
max-width: 240px;
|
||||
width: 100%;
|
||||
|
||||
:global(.rbt-input) {
|
||||
background-color: var(--input-bound-bg);
|
||||
border-radius: $input-corner;
|
||||
color: var(--text-primary);
|
||||
padding: ($unit * 1.5) $unit-2x;
|
||||
min-height: 26px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--input-bound-bg-hover);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:global(.focus) {
|
||||
outline: 2px solid #275dc5;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.rbt-input-wrapper) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
min-height: 30px;
|
||||
margin-bottom: -4px;
|
||||
margin-top: -1px;
|
||||
overflow: hidden;
|
||||
|
||||
:global(.rbt-input-hint) {
|
||||
color: var(--text-tertiary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.token {
|
||||
border-radius: $item-corner-small;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--null-shadow);
|
||||
background: var(--null-bg);
|
||||
color: var(--text-primary);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: $medium;
|
||||
font-size: 15px;
|
||||
padding: 1px $unit-half 1px $unit;
|
||||
margin: $unit-fourth;
|
||||
transition: all 0.1s ease-out;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
:global(.rbt-token-label) {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: $bold;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:global(.visually-hidden) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
$outline: 2px solid rgba(255, 255, 255, 0.35);
|
||||
|
||||
&:hover {
|
||||
background: var(--null-bg-hover);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--null-shadow-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&[data-element='fire'] {
|
||||
background: var(--fire-bg);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--fire-shadow);
|
||||
color: var(--fire-text);
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--fire-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--fire-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--fire-bg-hover);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--fire-shadow-hover);
|
||||
color: var(--fire-text-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--fire-text);
|
||||
box-shadow: none;
|
||||
color: var(--fire-bg);
|
||||
outline: $outline;
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--fire-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-element='water'] {
|
||||
background: var(--water-bg);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--water-shadow);
|
||||
color: var(--water-text);
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--water-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--water-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--water-bg-hover);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--water-shadow-hover);
|
||||
color: var(--water-text-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--water-text);
|
||||
box-shadow: none;
|
||||
color: var(--water-bg);
|
||||
outline: $outline;
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--water-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-element='earth'] {
|
||||
background: var(--earth-bg);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--earth-shadow);
|
||||
color: var(--earth-text);
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--earth-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--earth-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--earth-bg-hover);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--earth-shadow-hover);
|
||||
color: var(--earth-text-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--earth-text);
|
||||
box-shadow: none;
|
||||
color: var(--earth-bg);
|
||||
outline: $outline;
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--earth-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-element='wind'] {
|
||||
background: var(--wind-bg);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--wind-shadow);
|
||||
color: var(--wind-text);
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--wind-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--wind-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--wind-shadow-hover);
|
||||
color: var(--wind-text-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--wind-text);
|
||||
box-shadow: none;
|
||||
color: var(--wind-bg);
|
||||
outline: $outline;
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--wind-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-element='dark'] {
|
||||
background: var(--dark-bg);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--dark-shadow);
|
||||
color: var(--dark-text);
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--dark-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--dark-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--dark-bg-hover);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--dark-shadow-hover);
|
||||
color: var(--dark-text-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--dark-text);
|
||||
box-shadow: none;
|
||||
color: var(--dark-bg);
|
||||
outline: 2px solid rgba(255, 255, 255, 0.65);
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--dark-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-element='light'] {
|
||||
background: var(--light-bg);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--light-shadow);
|
||||
color: var(--light-text);
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--light-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--light-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--light-bg-hover);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
||||
0 1px 0px var(--light-shadow-hover);
|
||||
color: var(--light-text-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--light-text);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||
0 1px 0px var(--light-shadow-hover);
|
||||
color: var(--light-bg);
|
||||
outline: $outline;
|
||||
|
||||
:global(.rbt-token-remove-button) {
|
||||
color: var(--light-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
177
components/common/MentionTypeahead/index.tsx
Normal file
177
components/common/MentionTypeahead/index.tsx
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
import { useState } from 'react'
|
||||
import { getCookie } from 'cookies-next'
|
||||
import type {
|
||||
Option,
|
||||
RenderTokenProps,
|
||||
} from 'react-bootstrap-typeahead/types/types'
|
||||
|
||||
import {
|
||||
AsyncTypeahead,
|
||||
Menu,
|
||||
MenuItem,
|
||||
RenderMenuProps,
|
||||
Token,
|
||||
} from 'react-bootstrap-typeahead'
|
||||
|
||||
import api from '~utils/api'
|
||||
import { numberToElement } from '~utils/elements'
|
||||
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface Props
|
||||
extends React.DetailedHTMLProps<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
HTMLInputElement
|
||||
> {
|
||||
label: string
|
||||
description?: string
|
||||
placeholder?: string
|
||||
inclusions: MentionItem[]
|
||||
exclusions: MentionItem[]
|
||||
onUpdate: (content: MentionItem[]) => void
|
||||
}
|
||||
|
||||
interface RawSearchResponse {
|
||||
searchable_type: string
|
||||
granblue_id: string
|
||||
name_en: string
|
||||
name_jp: string
|
||||
element: number
|
||||
}
|
||||
|
||||
const MentionTypeahead = ({
|
||||
label,
|
||||
description,
|
||||
placeholder,
|
||||
inclusions,
|
||||
exclusions,
|
||||
...props
|
||||
}: Props) => {
|
||||
const locale = getCookie('NEXT_LOCALE')
|
||||
? (getCookie('NEXT_LOCALE') as string)
|
||||
: 'en'
|
||||
|
||||
console.log(inclusions)
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [options, setOptions] = useState<Option[]>([])
|
||||
|
||||
async function handleSearch(query: string) {
|
||||
setIsLoading(true)
|
||||
|
||||
const exclude = [...inclusions, ...exclusions]
|
||||
|
||||
const response = await api.searchAll(query, exclude, locale)
|
||||
const results = response.data.results
|
||||
|
||||
setIsLoading(false)
|
||||
setOptions(mapResults(results))
|
||||
}
|
||||
|
||||
function transform(object: RawSearchResponse) {
|
||||
const result: MentionItem = {
|
||||
name: {
|
||||
en: object.name_en,
|
||||
ja: object.name_jp,
|
||||
},
|
||||
type: object.searchable_type.toLowerCase(),
|
||||
granblue_id: object.granblue_id,
|
||||
element: numberToElement(object.element),
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function mapResults(results: RawSearchResponse[]) {
|
||||
return results
|
||||
.map((rawObject: RawSearchResponse) => {
|
||||
const object = transform(rawObject)
|
||||
return {
|
||||
granblue_id: object.granblue_id,
|
||||
element: object.element,
|
||||
type: object.type,
|
||||
name: {
|
||||
en: object.name.en,
|
||||
ja: object.name.ja,
|
||||
},
|
||||
}
|
||||
})
|
||||
.slice(0, 5)
|
||||
}
|
||||
|
||||
function renderMenu(results: Option[], menuProps: RenderMenuProps) {
|
||||
return (
|
||||
<Menu {...menuProps} className={styles.menu} emptyLabel="No items found">
|
||||
{results.map((option, index) => (
|
||||
<MenuItem key={index} option={option} position={index}>
|
||||
{renderMenuItemChild(option)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
function renderMenuItemChild(option: Option) {
|
||||
const item = option as MentionItem
|
||||
return (
|
||||
<div className={styles.item}>
|
||||
<div className={styles[item.type]}>
|
||||
<img
|
||||
alt={item.name[locale]}
|
||||
src={
|
||||
item.type === 'character'
|
||||
? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}_01.jpg`
|
||||
: item.type === 'job'
|
||||
? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-icons/${item.granblue_id}.png`
|
||||
: `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}.jpg`
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<span>{item.name[locale]}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderToken(option: Option, props: RenderTokenProps) {
|
||||
const item = option as MentionItem
|
||||
const { labelKey, ...tokenProps } = props
|
||||
return (
|
||||
<Token
|
||||
{...tokenProps}
|
||||
className={styles.token}
|
||||
data-element={item.element.slug}
|
||||
data-type={item.type}
|
||||
option={option}
|
||||
>
|
||||
{item.name[locale]}
|
||||
</Token>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AsyncTypeahead
|
||||
multiple
|
||||
className={styles.typeahead}
|
||||
id={label}
|
||||
align="left"
|
||||
isLoading={isLoading}
|
||||
labelKey={(option) => (option as MentionItem).name[locale]}
|
||||
defaultSelected={inclusions}
|
||||
filterBy={() => true}
|
||||
minLength={3}
|
||||
onSearch={handleSearch}
|
||||
options={options}
|
||||
useCache={false}
|
||||
placeholder={placeholder}
|
||||
positionFixed={true}
|
||||
promptText={'Start typing...'}
|
||||
searchText={'Searching...'}
|
||||
renderMenu={renderMenu}
|
||||
renderMenuItemChildren={renderMenuItemChild}
|
||||
renderToken={renderToken}
|
||||
highlightOnlyResult={false}
|
||||
onChange={(selected) => props.onUpdate(selected as MentionItem[])}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default MentionTypeahead
|
||||
Loading…
Reference in a new issue