Leisuretimedock/blessing-skin-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make suggestions customizable

Browse Source
This commit is contained in:
Pig Fang 2020-06-22 16:31:43 +08:00
parent d4aa16773d
commit ffc5ae4619
2 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
resources/assets/src/components/EmailSuggestion.tsx
View File

@ -1,7 +1,8 @@
/** @jsx jsx */
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import Autosuggest from 'react-autosuggest'
import { jsx, css } from '@emotion/core'
import { emit } from '@/scripts/event'
import { pointerCursor } from '@/styles/utils'
const styles = css`
@ -10,7 +11,7 @@ const styles = css`
}
`
const domainNames = ['qq.com', '163.com', 'gmail.com', 'hotmail.com']
const domainNames = new Set(['qq.com', '163.com', 'gmail.com', 'hotmail.com'])
type Props = Omit<Autosuggest.InputProps<string>, 'onChange'> & {
onChange(value: string): void
@ -19,11 +20,15 @@ type Props = Omit<Autosuggest.InputProps<string>, 'onChange'> & {
const EmailSuggestion: React.FC<Props> = (props) => {
const [suggestions, setSuggestions] = useState<string[]>([])
useEffect(() => {
emit('emailDomainsSuggestion', domainNames)
}, [])
const handleSuggestionsFetchRequested: Autosuggest.SuggestionsFetchRequested = ({
value,
}) => {
const segments = value.split('@')
setSuggestions(domainNames.map((name) => `${segments[0]}@${name}`))
setSuggestions([...domainNames].map((name) => `${segments[0]}@${name}`))
}
const handleSuggestionsClearRequested = () => {
@ -31,7 +36,9 @@ const EmailSuggestion: React.FC<Props> = (props) => {
}
const shouldRenderSuggestions = (value: string) => {
const isSelecting = domainNames.some((name) => value.endsWith(`@${name}`))
const isSelecting = [...domainNames].some((name) =>
value.endsWith(`@${name}`),
)
return isSelecting || (value.length > 0 && !value.includes('@'))
}

16
resources/assets/tests/components/EmailSuggestion.test.tsx
View File

@ -1,5 +1,6 @@
import React, { useState } from 'react'
import { render, fireEvent } from '@testing-library/react'
import { on } from '@/scripts/event'
import EmailSuggestion from '@/components/EmailSuggestion'
const Wrapper: React.FC = () => {
@ -56,3 +57,18 @@ test('display suggestions when typing with configured domain names', () => {
expect(queryByText('abc@gmail.com')).toBeInTheDocument()
expect(queryByText('abc@hotmail.com')).toBeInTheDocument()
})
test('events', () => {
const off = on('emailDomainsSuggestion', (names: Set<string>) => {
names.add('outlook.com')
})
const { getByDisplayValue, queryByText } = render(<Wrapper />)
const input = getByDisplayValue('')
fireEvent.input(input, { target: { value: 'abc' } })
fireEvent.focus(input)
expect(queryByText('abc@outlook.com')).toBeInTheDocument()
off()
})