Sha256: f66d88cfdd2e7ce86ca249b259b02a97fe0ec2929154c65a9a57d5f9407360b2
Contents?: true
Size: 1.78 KB
Versions: 44
Compression:
Stored size: 1.78 KB
Contents
/* @flow */
import React from 'react'
import classnames from 'classnames'
import { Body, Caption } from '../'
import { spacing } from '../utilities/spacing.js'
import {
buildAriaProps,
buildDataProps,
} from '../utilities/props'
type TextInputProps = {
aria?: object,
className: String,
dark: boolean,
data?: object,
error?: String,
id?: String,
name: String,
label: String,
onChange: (String) => void,
placeholder: String,
type: String,
value: String | number,
children: Node,
}
const TextInput = ({
aria = {},
className,
dark = false,
data = {},
error,
id,
name,
label,
onChange = () => {},
placeholder,
type = 'text',
value,
children = null,
...props
}: TextInputProps) => {
const ariaProps = buildAriaProps(aria)
const dataProps = buildDataProps(data)
const css = classnames([
`pb_text_input_kit${dark === true ? '_dark' : ''}`,
className,
error ? 'error' : null,
])
return (
<div
{...ariaProps}
{...dataProps}
className={css}
>
<Caption
className="pb_text_input_kit_label"
dark={dark}
text={label}
/>
<div className={classnames('text_input_wrapper', spacing(props))}>
<If condition={children}>
{children}
<Else />
<input
{...props}
className="text_input"
id={id}
name={name}
onChange={onChange}
placeholder={placeholder}
type={type}
value={value}
/>
<If condition={error}>
<Body
dark={dark}
status="negative"
text={error}
/>
</If>
</If>
</div>
</div>
)
}
export default TextInput
Version data entries
44 entries across 44 versions & 1 rubygems