Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 1x 5x 5x 5x 5x 5x 1x | import {forwardRef, useState} from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'
import useControlledState from '@s-ui/react-hooks/lib/useControlledState'
import {INPUT_SHAPES} from '../config.js'
import Input from '../Input/index.js'
import {BASE_CLASS_PASSWORD, BASE_CLASS_PASSWORD_TOGGLE_BUTTON, PASSWORD, TEXT} from './config.js'
const Password = forwardRef(
({onChange, shape, pwShowLabel, pwHideLabel, value, defaultValue = '', ...props}, forwardedRef) => {
const [type, setType] = useState(PASSWORD)
const [innerValue, setInnerValue] = useControlledState(value, defaultValue)
const toggle = () => {
const inputType = type === PASSWORD ? TEXT : PASSWORD
setType(inputType)
}
const handleChange = (ev, {value}) => {
setInnerValue(value)
typeof onChange === 'function' && onChange(ev, {value})
}
return (
<div className={cx(BASE_CLASS_PASSWORD, shape && `${BASE_CLASS_PASSWORD}-shape-${shape}`)}>
<Input
ref={forwardedRef}
shape={shape}
{...props}
onChange={handleChange}
value={innerValue}
type={type}
noBorder
/>
<button
onClick={toggle}
type="button"
className={cx(
BASE_CLASS_PASSWORD_TOGGLE_BUTTON,
shape && `${BASE_CLASS_PASSWORD_TOGGLE_BUTTON}-shape-${shape}`
)}
>
{type === PASSWORD ? pwShowLabel : pwHideLabel}
</button>
</div>
)
}
)
Password.propTypes = {
/* Text to be shown to show the password on click */
pwShowLabel: PropTypes.node,
/* Text to be shown to hide the password on click */
pwHideLabel: PropTypes.node,
/* Event launched on every input change */
onChange: PropTypes.func,
/* The name of the control */
name: PropTypes.string,
/* The id of the control */
id: PropTypes.string,
/* The value of the control */
value: PropTypes.string,
/* The default value of the control */
defaultValue: PropTypes.string,
/** Sets the shape of the input field. It can be 'rounded', 'square' or 'circle' */
shape: PropTypes.oneOf(Object.values(INPUT_SHAPES))
}
export default Password
|