components#useInput TypeScript Examples
The following examples show how to use
components#useInput.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: use-input.test.tsx From geist-ui with MIT License | 5 votes |
|
describe('UseInput', () => {
it('should follow change with use-input', () => {
let log = ''
const logSpy = jest.spyOn(console, 'log').mockImplementation(msg => (log = msg))
const MockInput: React.FC<{ value?: string }> = ({ value }) => {
const { state, setState, bindings } = useInput('')
useEffect(() => {
if (value) setState(value)
}, [value])
useEffect(() => {
if (state) console.log(state)
}, [state])
return <AutoComplete {...bindings} />
}
const wrapper = mount(<MockInput />)
wrapper.setProps({ value: 'test' })
const input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.value).toEqual('test')
expect(log).toContain('test')
log = ''
wrapper
.find('input')
.at(0)
.simulate('change', { target: { value: 'test-change' } })
expect(log).toContain('test-change')
logSpy.mockRestore()
})
it('should follow change with use-input', () => {
const MockInput: React.FC<{ value?: string; resetValue?: boolean }> = ({
value,
resetValue,
}) => {
const { reset, setState, bindings } = useInput('')
useEffect(() => {
if (value) setState(value)
}, [value])
useEffect(() => {
if (resetValue) reset()
}, [resetValue])
return <AutoComplete {...bindings} />
}
const wrapper = mount(<MockInput />)
wrapper.setProps({ value: 'test' })
let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.value).toEqual('test')
wrapper.setProps({ resetValue: true })
input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.value).toEqual('')
})
})
Example #2
| Source File: use-input.test.tsx From geist-ui with MIT License | 5 votes |
|
describe('UseInput', () => {
it('should follow change with use-input', () => {
let log = ''
const logSpy = jest.spyOn(console, 'log').mockImplementation(msg => (log = msg))
const MockInput: React.FC<{ value?: string }> = ({ value }) => {
const { state, setState, bindings } = useInput('')
useEffect(() => {
if (value) setState(value)
}, [value])
useEffect(() => {
if (state) console.log(state)
}, [state])
return <Input {...bindings} />
}
const wrapper = mount(<MockInput />)
wrapper.setProps({ value: 'test' })
const input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.value).toEqual('test')
expect(log).toContain('test')
log = ''
wrapper
.find('input')
.at(0)
.simulate('change', { target: { value: 'test-change' } })
expect(log).toContain('test-change')
logSpy.mockRestore()
})
it('should follow change with use-input', () => {
const MockInput: React.FC<{ value?: string; resetValue?: boolean }> = ({
value,
resetValue,
}) => {
const { reset, setState, bindings } = useInput('')
useEffect(() => {
if (value) setState(value)
}, [value])
useEffect(() => {
if (resetValue) reset()
}, [resetValue])
return <Input {...bindings} />
}
const wrapper = mount(<MockInput />)
wrapper.setProps({ value: 'test' })
let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.value).toEqual('test')
wrapper.setProps({ resetValue: true })
input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.value).toEqual('')
})
})
Example #3
| Source File: icons-gallery.tsx From geist-ui with MIT License | 5 votes |
|
IconsGallery: React.FC<unknown> = () => {
const { isChinese } = useConfigs()
const { setVisible, bindings: modalBindings } = useModal()
const { state: query, bindings } = useInput('')
const [importStr, setImportStr] = useState({ title: '', single: '', normal: '' })
const icons = Object.entries(Icons).filter(
([name]) => !query || name.toLowerCase().includes(query.toLowerCase()),
)
const onCellClick = (name: string) => {
const { single, normal } = getImportString(name)
setImportStr({ title: name, single, normal })
setVisible(true)
}
return (
<>
<h3 className="title">{isChinese ? '图标画廊' : 'Icons Gallery'}</h3>
<Card>
<Input
width="100%"
icon={<Icons.Search />}
placeholder={isChinese ? '搜索' : 'Search'}
{...bindings}
/>
<div className="icons-grid">
{icons.map(([name, component], index) => (
<IconsCell
name={name}
component={component}
key={`${name}-${index}`}
onClick={onCellClick}
/>
))}
</div>
<Modal {...modalBindings}>
<Modal.Title>{importStr.title}</Modal.Title>
<Modal.Content>
<p>{isChinese ? '引入:' : 'Import:'}</p>
<ImportSnippet>{importStr.normal}</ImportSnippet>
<p>{isChinese ? '引入单个组件:' : 'Import single component:'}</p>
<ImportSnippet>{importStr.single}</ImportSnippet>
</Modal.Content>
</Modal>
</Card>
<style jsx>{`
.title {
line-height: 1;
margin-top: 75px;
margin-bottom: 30px;
}
:global(input) {
margin-bottom: 4px !important;
}
.icons-grid {
display: flex;
flex-wrap: wrap;
margin-top: 8pt;
justify-content: space-around;
}
`}</style>
</>
)
}
Example #4
| Source File: search.tsx From geist-ui with MIT License | 4 votes |
|
Search: React.FC<unknown> = () => {
const theme = useTheme()
const router = useRouter()
const { locale } = useLocale()
const [preventHover, setPreventHover, preventHoverRef] = useCurrentState<boolean>(false)
const ref = useRef<HTMLInputElement | null>(null)
const itemsRef = useRef<SearchItemsRef | null>(null)
const [state, setState] = useState<SearchResults>([])
const { bindings, setVisible, visible } = useModal(false)
const { bindings: inputBindings, setState: setInput, state: input } = useInput('')
const cleanAfterModalClose = () => {
setVisible(false)
const timer = window.setTimeout(() => {
setState([])
setInput('')
itemsRef.current?.scrollTo(0, 0)
setPreventHover(true)
window.clearTimeout(timer)
}, 400)
}
useKeyboard(() => {
setVisible(true)
const timer = setTimeout(() => {
ref.current?.focus()
window.clearTimeout(timer)
}, 0)
}, [KeyMod.CtrlCmd, KeyCode.KEY_K])
useEffect(() => {
if (!input) return setState([])
setPreventHover(true)
setState(search(input, locale))
itemsRef.current?.scrollTo(0, 0)
}, [input])
useEffect(() => {
if (visible) return
cleanAfterModalClose()
}, [visible])
useEffect(() => {
const eventHandler = () => {
if (!preventHoverRef.current) return
setPreventHover(false)
}
document.addEventListener('mousemove', eventHandler)
return () => {
document.removeEventListener('mousemove', eventHandler)
}
}, [])
const selectHandler = (url: string) => {
if (url.startsWith('http')) return window.open(url)
router.push(url)
setVisible(false)
}
const { bindings: KeyBindings } = useKeyboard(
event => {
const isBack = event.keyCode === KeyCode.UpArrow
focusNextElement(
itemsRef.current,
() => {
setPreventHover(true)
},
isBack,
)
},
[KeyCode.DownArrow, KeyCode.UpArrow],
{
disableGlobalEvent: true,
},
)
return (
<div className="container" {...KeyBindings}>
<Modal
{...bindings}
py={0}
px={0.75}
wrapClassName="search-menu"
positionClassName="search-position">
<Input
ref={ref}
w="100%"
font="1.125rem"
py={0.75}
placeholder="Search a component"
className="search-input"
clearable
{...inputBindings}
/>
{state.length > 0 && (
<>
<Divider mt={0} mb={1} />
<SearchItems
preventHoverHighlightSync={preventHover}
ref={itemsRef}
data={state}
onSelect={selectHandler}
/>
</>
)}
</Modal>
<style jsx>{`
.title {
width: 100%;
color: ${theme.palette.background};
background-color: ${theme.palette.violet};
display: flex;
justify-content: flex-end;
padding: 0 10px;
user-select: none;
}
.container {
visibility: hidden;
}
:global(.search-menu ul),
:global(.search-menu li) {
padding: 0;
margin: 0;
list-style: none;
}
:global(.search-menu .input-container.search-input) {
border: none;
border-radius: 0;
}
:global(.search-menu .input-container div.input-wrapper) {
border: none;
border-radius: 0;
}
:global(.search-menu .input-container .input-wrapper.hover) {
border: none;
}
:global(.search-menu .input-container .input-wrapper:active) {
border: none;
}
:global(div.search-position.position) {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
transition: all 500ms ease;
width: 500px;
height: auto;
}
:global(.search-menu.wrapper) {
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15), 0 -5px 20px 0 rgba(0, 0, 0, 0.15) !important;
}
`}</style>
</div>
)
}
