58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import { NumberInputStep, TextInputStep } from 'models'
|
|
import React, { FormEvent, useRef, useState } from 'react'
|
|
import { SendIcon } from '../../../../assets/icons'
|
|
|
|
type NumberInputProps = {
|
|
step: NumberInputStep
|
|
onSubmit: (value: string) => void
|
|
}
|
|
|
|
export const NumberInput = ({ step, onSubmit }: NumberInputProps) => {
|
|
const inputRef = useRef(null)
|
|
const [inputValue, setInputValue] = useState('')
|
|
|
|
const handleSubmit = (e: FormEvent) => {
|
|
e.preventDefault()
|
|
if (inputValue === '') return
|
|
onSubmit(inputValue)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col w-full lg:w-4/6">
|
|
<div className="flex items-center">
|
|
<form
|
|
className="flex items-end justify-between rounded-lg pr-2 typebot-input"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<input
|
|
ref={inputRef}
|
|
className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
|
|
type="number"
|
|
placeholder={
|
|
step.options?.labels?.placeholder ?? 'Type your answer...'
|
|
}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
style={{ appearance: 'auto' }}
|
|
min={step.options?.min}
|
|
max={step.options?.max}
|
|
step={step.options?.step}
|
|
required
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className={
|
|
'my-2 ml-2 py-2 px-4 font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button active'
|
|
}
|
|
disabled={inputValue === ''}
|
|
>
|
|
<span className="hidden xs:flex">
|
|
{step.options?.labels?.button ?? 'Send'}
|
|
</span>
|
|
<SendIcon className="send-icon flex xs:hidden" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|