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

76 lines
1.7 KiB
JavaScript
Raw Normal View History

2020-03-05 15:44:17 +00:00
import classNames from 'classnames/bind'
import Text from './text'
const cx = classNames.bind(_s)
export default class Textarea extends PureComponent {
static 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,
}
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,
2020-03-05 15:44:17 +00:00
} = this.props
const inputClasses = cx({
default: 1,
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,
heightMax100VH: 1,
resizeVertical: 1,
2020-05-14 07:03:22 +01:00
colorPrimary: 1,
2020-03-11 23:56:18 +00:00
px5: !!prependIcon,
pl15: !prependIcon,
2020-03-05 15:44:17 +00:00
})
return (
<div>
{
!!title &&
2020-03-11 23:56:18 +00:00
<div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
2020-03-05 15:44:17 +00:00
<Text size='small' weight='medium' color='secondary'>
{title}
</Text>
</div>
}
2020-04-29 23:32:49 +01:00
<div className={[_s.default, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.radiusSmall, _s.alignItemsCenter].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}
/>
</div>
</div>
)
}
}