KeyInput.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import type { ChangeEvent } from 'react'
  2. import {
  3. ValidatedErrorIcon,
  4. ValidatedErrorMessage,
  5. ValidatedSuccessIcon,
  6. ValidatingTip,
  7. } from './ValidateStatus'
  8. import { ValidatedStatus } from './declarations'
  9. import type { ValidatedStatusState } from './declarations'
  10. type KeyInputProps = {
  11. value?: string
  12. name: string
  13. placeholder: string
  14. className?: string
  15. onChange: (v: string) => void
  16. onFocus?: () => void
  17. validating: boolean
  18. validatedStatusState: ValidatedStatusState
  19. }
  20. const KeyInput = ({
  21. value,
  22. name,
  23. placeholder,
  24. className,
  25. onChange,
  26. onFocus,
  27. validating,
  28. validatedStatusState,
  29. }: KeyInputProps) => {
  30. const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  31. const inputValue = e.target.value
  32. onChange(inputValue)
  33. }
  34. const getValidatedIcon = () => {
  35. if (validatedStatusState.status === ValidatedStatus.Error || validatedStatusState.status === ValidatedStatus.Exceed)
  36. return <ValidatedErrorIcon />
  37. if (validatedStatusState.status === ValidatedStatus.Success)
  38. return <ValidatedSuccessIcon />
  39. }
  40. const getValidatedTip = () => {
  41. if (validating)
  42. return <ValidatingTip />
  43. if (validatedStatusState.status === ValidatedStatus.Error)
  44. return <ValidatedErrorMessage errorMessage={validatedStatusState.message ?? ''} />
  45. }
  46. return (
  47. <div className={className}>
  48. <div className="mb-2 text-[13px] font-medium text-gray-800">{name}</div>
  49. <div className='
  50. flex items-center px-3 bg-white rounded-lg
  51. shadow-xs
  52. '>
  53. <input
  54. className='
  55. w-full py-[9px] mr-2
  56. text-xs font-medium text-gray-700 leading-[18px]
  57. appearance-none outline-none bg-transparent
  58. '
  59. value={value}
  60. placeholder={placeholder}
  61. onChange={handleChange}
  62. onFocus={onFocus}
  63. />
  64. {getValidatedIcon()}
  65. </div>
  66. {getValidatedTip()}
  67. </div>
  68. )
  69. }
  70. export default KeyInput