36 lines
878 B
JavaScript
36 lines
878 B
JavaScript
import React, { memo, useState } from 'react'
|
|
|
|
import { TextInput } from '../base'
|
|
|
|
const SecretInput = memo(({ value, onFocus, onBlur, ...props }) => {
|
|
const [focused, setFocused] = useState(false)
|
|
|
|
const placeholder = '⚬ ⚬ ⚬ This field is set ⚬ ⚬ ⚬'
|
|
const previouslyFilled = !!value
|
|
const tempValue = previouslyFilled ? '' : value
|
|
|
|
const iOnFocus = event => {
|
|
setFocused(true)
|
|
onFocus && onFocus(event)
|
|
}
|
|
|
|
const iOnBlur = event => {
|
|
setFocused(false)
|
|
onBlur && onBlur(event)
|
|
}
|
|
|
|
return (
|
|
<TextInput
|
|
{...props}
|
|
type="password"
|
|
onFocus={iOnFocus}
|
|
onBlur={iOnBlur}
|
|
value={value}
|
|
InputProps={{ value: !focused ? tempValue : value }}
|
|
InputLabelProps={{ shrink: previouslyFilled || focused }}
|
|
placeholder={previouslyFilled ? placeholder : ''}
|
|
/>
|
|
)
|
|
})
|
|
|
|
export default SecretInput
|