Sha256: 8ec6bc87cab4d573dc7fb5d0682d36620c303692a80385f39c1c4172bda9d302
Contents?: true
Size: 1.98 KB
Versions: 10
Compression:
Stored size: 1.98 KB
Contents
/* @flow */
import React from 'react'
import classnames from 'classnames'
import Title from '../pb_title/_title'
import Icon from '../pb_icon/_icon'
import Avatar from '../pb_avatar/_avatar'
import { globalProps, GlobalProps } from '../utilities/globalProps'
import { buildHtmlProps } from '../utilities/props'
type FormPillProps = {
className?: string,
htmlOptions?: {[key: string]: string | number | boolean | Function},
id?: string,
text: string,
name?: string,
onClick?: React.MouseEventHandler<HTMLSpanElement>,
avatar?: boolean,
avatarUrl?: string,
size?: string,
textTransform?: 'none' | 'lowercase',
closeProps?: {
onClick?: React.MouseEventHandler<HTMLSpanElement>,
onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
},
} & GlobalProps
const FormPill = (props: FormPillProps) => {
const {
className,
htmlOptions = {},
id,
text,
name,
onClick = () => {},
avatarUrl,
closeProps = {},
size = '',
textTransform = 'none',
} = props
const css = classnames(
`pb_form_pill_kit_${'primary'}`,
globalProps(props),
className,
size === 'small' ? 'small' : null,
textTransform,
)
const htmlProps = buildHtmlProps(htmlOptions)
return (
<div className={css} id={id} {...htmlProps}>
{name &&
<>
<Avatar
imageUrl={avatarUrl}
name={name}
size="xs"
status={null}
/>
<Title
className="pb_form_pill_text"
size={4}
text={name}
/>
</>
}
{text &&
<Title
className="pb_form_pill_tag"
size={4}
text={text}
/>
}
<div
className="pb_form_pill_close"
onClick={onClick}
{...closeProps}
>
<Icon
fixedWidth
icon="times"
/>
</div>
</div>
)
}
export default FormPill
Version data entries
10 entries across 10 versions & 1 rubygems