Removed LabelledInput
This commit is contained in:
parent
9d0584a07a
commit
46a2a5c8f5
2 changed files with 0 additions and 73 deletions
|
|
@ -1,5 +0,0 @@
|
||||||
.Label {
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: grid;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import classNames from 'classnames'
|
|
||||||
|
|
||||||
import styles from './index.module.scss'
|
|
||||||
|
|
||||||
interface Props
|
|
||||||
extends React.DetailedHTMLProps<
|
|
||||||
React.InputHTMLAttributes<HTMLInputElement>,
|
|
||||||
HTMLInputElement
|
|
||||||
> {
|
|
||||||
visible?: boolean
|
|
||||||
error?: string
|
|
||||||
label?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultProps = {
|
|
||||||
visible: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
const LabelledInput = React.forwardRef<HTMLInputElement, Props>(function Input(
|
|
||||||
props: Props,
|
|
||||||
forwardedRef
|
|
||||||
) {
|
|
||||||
// States
|
|
||||||
const [inputValue, setInputValue] = useState('')
|
|
||||||
|
|
||||||
// Classes
|
|
||||||
const classes = classNames({ Input: true }, props.className)
|
|
||||||
const { defaultValue, visible, ...inputProps } = props
|
|
||||||
|
|
||||||
// Change value when prop updates
|
|
||||||
useEffect(() => {
|
|
||||||
if (props.value) setInputValue(`${props.value}`)
|
|
||||||
}, [props.value])
|
|
||||||
|
|
||||||
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
|
|
||||||
setInputValue(event.target.value)
|
|
||||||
if (props.onChange) props.onChange(event)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<label
|
|
||||||
className={classNames({
|
|
||||||
Label: true,
|
|
||||||
Visible: props.visible,
|
|
||||||
})}
|
|
||||||
htmlFor={props.name}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
{...inputProps}
|
|
||||||
autoComplete="off"
|
|
||||||
className={classes}
|
|
||||||
value={inputValue}
|
|
||||||
ref={forwardedRef}
|
|
||||||
onChange={handleChange}
|
|
||||||
formNoValidate
|
|
||||||
/>
|
|
||||||
{props.label}
|
|
||||||
{props.error && props.error.length > 0 && (
|
|
||||||
<p className="InputError">{props.error}</p>
|
|
||||||
)}
|
|
||||||
</label>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
LabelledInput.defaultProps = defaultProps
|
|
||||||
|
|
||||||
export default LabelledInput
|
|
||||||
Loading…
Reference in a new issue