gab-social/app/javascript/gabsocial/components/textarea.js

82 lines
1.8 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { CX } from '../constants'
2020-03-05 15:44:17 +00:00
import Text from './text'
class Textarea extends React.PureComponent {
2020-03-05 15:44:17 +00:00
2020-04-28 06:33:58 +01:00
handleOnChange = (e) => {
this.props.onChange(e.target.value)
}
2020-03-05 15:44:17 +00:00
render() {
const {
placeholder,
prependIcon,
value,
onKeyUp,
onFocus,
onBlur,
2020-04-28 06:33:58 +01:00
title,
isRequired,
2020-03-05 15:44:17 +00:00
} = this.props
const inputClasses = CX({
d: 1,
2020-03-05 15:44:17 +00:00
text: 1,
outlineNone: 1,
lineHeight125: 1,
displayBlock: 1,
2020-03-11 23:56:18 +00:00
py10: 1,
2020-04-29 23:32:49 +01:00
bgTransparent: 1,
fs15PX: 1,
2020-03-05 15:44:17 +00:00
flexGrow1: 1,
maxH100VH: 1,
2020-03-05 15:44:17 +00:00
resizeVertical: 1,
cPrimary: 1,
2020-03-11 23:56:18 +00:00
px5: !!prependIcon,
pl15: !prependIcon,
2020-03-05 15:44:17 +00:00
})
return (
<div>
{
!!title &&
<div className={[_s.d, _s.mb10, _s.pl15].join(' ')}>
2020-03-05 15:44:17 +00:00
<Text size='small' weight='medium' color='secondary'>
{title}
</Text>
</div>
}
<div className={[_s.d, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.radiusSmall, _s.aiCenter].join(' ')}>
2020-03-05 15:44:17 +00:00
<textarea
className={inputClasses}
type='text'
placeholder={placeholder}
value={value}
2020-04-28 06:33:58 +01:00
onChange={this.handleOnChange}
2020-03-05 15:44:17 +00:00
onKeyUp={onKeyUp}
onFocus={onFocus}
onBlur={onBlur}
required={isRequired ? true : undefined}
2020-03-05 15:44:17 +00:00
/>
</div>
</div>
)
}
}
Textarea.propTypes = {
placeholder: PropTypes.string,
prependIcon: PropTypes.string,
value: PropTypes.string,
onChange: PropTypes.func,
onKeyUp: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
title: PropTypes.string,
isRequired: PropTypes.bool,
}
export default Textarea