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

128 lines
3.0 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-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-03-26 03:11:32 +00:00
id: PropTypes.string,
hideLabel: PropTypes.bool,
2020-02-21 00:57:29 +00:00
}
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,
hideLabel
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-03-12 16:09:15 +00:00
backgroundTransparent: !readOnly,
backgroundSubtle2: readOnly,
colorSecondary: readOnly,
2020-03-26 03:11:32 +00:00
fontSize15PX: !small,
fontSize13PX: 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-03-26 03:11:32 +00:00
const titleClasses = cx({
default: 1,
mb10: 1,
pl15: 1,
displayNone: hideLabel,
})
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-03-05 15:44:17 +00:00
!!title &&
2020-03-26 03:11:32 +00:00
<div className={titleClasses}>
<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-03-05 15:44:17 +00:00
<div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
{
!!prependIcon &&
2020-03-11 23:56:18 +00:00
<Icon id={prependIcon} width='16px' height='16px' className={[_s.ml15, _s.mr5].join(' ')} />
2020-03-05 15:44:17 +00:00
}
2020-02-21 00:57:29 +00:00
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}
onChange={onChange}
onKeyUp={onKeyUp}
onFocus={onFocus}
onBlur={onBlur}
2020-03-12 16:09:15 +00:00
readOnly={readOnly}
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}
iconHeight='10px'
iconWidth='10px'
/>
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
)
}
}