[ABANDONED] React/Redux front end for the Flexor social network.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

57 lines
1.8 KiB

import React, { FC, FocusEventHandler } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import classNames from 'classnames'
import noop from 'lodash/noop'
import { setFieldValue } from 'src/actions/forms'
import { getFieldValue, getFieldNotification } from 'src/selectors/forms'
import { notificationTypeToClassName } from 'src/utils'
import { AppState, FormNotification, ClassDictionary } from 'src/types'
export interface Props {
name: string
label: string
placeholder?: string
onBlur?: FocusEventHandler
}
const TextField: FC<Props> = ({
name,
label,
placeholder,
onBlur = noop,
}) => {
const value = useSelector<AppState, string>(state => getFieldValue<string>(state, name, ''))
const notification = useSelector<AppState, FormNotification | undefined>(state => getFieldNotification(state, name))
const dispatch = useDispatch()
const helpClassDictionary: ClassDictionary = { help: true }
const inputClassDictionary: ClassDictionary = { textarea: true }
if (notification) {
const ncn = notificationTypeToClassName(notification.type)
helpClassDictionary[ncn] = true
inputClassDictionary[ncn] = true
}
return (
<div className="field">
<label className="label">{label}</label>
<div className="control">
<textarea
className={classNames(inputClassDictionary)}
placeholder={placeholder}
value={value}
onChange={e => dispatch(setFieldValue(name, e.target.value))}
onBlur={onBlur} />
</div>
{notification &&
<p className={classNames(helpClassDictionary)}>{notification.message}</p>
}
</div>
)
}
export default TextField