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

134 lines
3.2 KiB
JavaScript
Raw Normal View History

2020-03-07 04:53:28 +00:00
import { Fragment } from 'react'
2020-02-21 00:57:29 +00:00
import classNames from 'classnames/bind'
2020-04-02 04:17:21 +01:00
import Button from './button'
2020-02-21 00:57:29 +00:00
import Icon from './icon'
2020-03-05 15:44:17 +00:00
import Text from './text'
2020-02-21 00:57:29 +00:00
const cx = classNames.bind(_s)
2020-02-19 23:57:07 +00:00
export default class Input extends PureComponent {
2020-04-28 06:33:58 +01:00
2020-02-21 00:57:29 +00:00
static propTypes = {
placeholder: PropTypes.string,
prependIcon: PropTypes.string,
value: PropTypes.string,
hasClear: PropTypes.bool,
onChange: PropTypes.func,
onKeyUp: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onClear: PropTypes.func,
2020-03-05 15:44:17 +00:00
title: PropTypes.string,
2020-03-07 04:53:28 +00:00
small: PropTypes.bool,
2020-03-12 16:09:15 +00:00
readOnly: PropTypes.string,
2020-03-14 17:31:29 +00:00
inputRef: PropTypes.func,
2020-04-29 03:24:35 +01:00
id: PropTypes.string.isRequired,
2020-03-26 03:11:32 +00:00
hideLabel: PropTypes.bool,
2020-05-02 07:25:55 +01:00
maxLength: PropTypes.number,
2020-02-21 00:57:29 +00:00
}
2020-04-28 06:33:58 +01:00
handleOnChange = (e) => {
this.props.onChange(e.target.value)
}
2020-02-19 23:57:07 +00:00
render() {
2020-03-05 15:44:17 +00:00
const {
placeholder,
prependIcon,
value,
hasClear,
onChange,
onKeyUp,
onFocus,
onBlur,
onClear,
2020-03-07 04:53:28 +00:00
title,
2020-03-12 16:09:15 +00:00
small,
2020-03-14 17:31:29 +00:00
readOnly,
2020-03-26 03:11:32 +00:00
inputRef,
id,
2020-05-02 07:25:55 +01:00
hideLabel,
maxLength,
2020-03-05 15:44:17 +00:00
} = this.props
2020-02-21 00:57:29 +00:00
const inputClasses = cx({
default: 1,
text: 1,
outlineNone: 1,
2020-03-26 03:11:32 +00:00
lineHeight125: !small,
lineHeight1: small,
2020-02-21 00:57:29 +00:00
displayBlock: 1,
2020-03-26 03:11:32 +00:00
py10: !small,
py5: small,
2020-04-29 23:32:49 +01:00
bgTransparent: !readOnly,
bgSecondary: readOnly,
2020-04-28 06:33:58 +01:00
colorPrimary: !readOnly,
2020-03-12 16:09:15 +00:00
colorSecondary: readOnly,
2020-04-29 23:32:49 +01:00
fs15PX: !small,
fs13PX: small,
2020-02-21 00:57:29 +00:00
flexGrow1: 1,
2020-03-12 16:09:15 +00:00
circle: 1,
2020-03-11 23:56:18 +00:00
px5: !!prependIcon,
pl15: !prependIcon,
pr15: !hasClear,
2020-02-21 00:57:29 +00:00
})
2020-02-19 23:57:07 +00:00
2020-04-02 04:17:21 +01:00
const btnClasses = cx({
2020-04-03 02:05:49 +01:00
displayNone: !value || value.length === 0,
2020-04-02 04:17:21 +01:00
px10: 1,
mr5: 1,
})
2020-02-19 23:57:07 +00:00
return (
2020-03-07 04:53:28 +00:00
<Fragment>
2020-02-21 00:57:29 +00:00
{
2020-04-29 03:24:35 +01:00
!!title && !hideLabel &&
<div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
2020-03-26 03:11:32 +00:00
<Text htmlFor={id} size='small' weight='medium' color='secondary' tagName='label'>
2020-03-05 15:44:17 +00:00
{title}
</Text>
</div>
2020-02-21 00:57:29 +00:00
}
2020-05-02 07:25:55 +01:00
<div className={[_s.default, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
2020-03-05 15:44:17 +00:00
{
!!prependIcon &&
2020-04-29 23:32:49 +01:00
<Icon id={prependIcon} size='16px' className={[_s.fillPrimary, _s.ml15, _s.mr5].join(' ')} />
2020-03-05 15:44:17 +00:00
}
2020-02-21 00:57:29 +00:00
2020-04-29 03:24:35 +01:00
{
!!title && hideLabel &&
<label className={_s.visiblyHidden} htmlFor={id}>{title}</label>
}
2020-03-05 15:44:17 +00:00
<input
2020-03-26 03:11:32 +00:00
id={id}
2020-03-05 15:44:17 +00:00
className={inputClasses}
type='text'
placeholder={placeholder}
2020-03-14 17:31:29 +00:00
ref={inputRef}
2020-03-05 15:44:17 +00:00
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}
2020-03-12 16:09:15 +00:00
readOnly={readOnly}
2020-05-02 07:25:55 +01:00
maxLength={maxLength}
2020-03-05 15:44:17 +00:00
/>
2020-02-21 00:57:29 +00:00
2020-03-05 15:44:17 +00:00
{
hasClear &&
2020-04-02 04:17:21 +01:00
<Button
className={btnClasses}
tabIndex='0'
title='Clear'
onClick={onClear}
icon='close'
iconClassName={_s.inheritFill}
2020-04-23 07:13:29 +01:00
iconSize='10px'
2020-04-02 04:17:21 +01:00
/>
2020-03-05 15:44:17 +00:00
}
</div>
2020-03-07 04:53:28 +00:00
</Fragment>
2020-02-19 23:57:07 +00:00
)
}
}