Antoine Clausse
0e4682ef89
* Create DS version for Bootstrap Input form elements * Move DS Button Storybook to DS component folder * Use phosphor icons * Add ds-focus-outline mixin * Use math.div GitOrigin-RevId: e50934212ec5949f0f7abc7880eb73933fce2a9b
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { Form, FormTextProps as BS5FormTextProps } from 'react-bootstrap'
|
|
import classnames from 'classnames'
|
|
import { MergeAndOverride } from '@ol-types/utils'
|
|
import { CheckCircle, WarningCircle } from '@phosphor-icons/react'
|
|
|
|
type TextType = 'success' | 'error'
|
|
|
|
export type FormTextProps = MergeAndOverride<
|
|
BS5FormTextProps,
|
|
{ type?: TextType }
|
|
>
|
|
|
|
const typeClasses = {
|
|
error: 'text-danger',
|
|
success: 'text-success',
|
|
} as const
|
|
|
|
export const getFormTextClass = (type?: TextType) =>
|
|
type && type in typeClasses
|
|
? typeClasses[type as keyof typeof typeClasses]
|
|
: undefined
|
|
|
|
function FormTextIcon({ type }: { type?: TextType }) {
|
|
switch (type) {
|
|
case 'success':
|
|
return <CheckCircle className="ciam-form-text-icon" />
|
|
case 'error':
|
|
return <WarningCircle className="ciam-form-text-icon" />
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
function DSFormText({ type, children, className, ...rest }: FormTextProps) {
|
|
return (
|
|
<Form.Text
|
|
className={classnames('form-text-ds', className, getFormTextClass(type))}
|
|
{...rest}
|
|
>
|
|
<span className="form-text-inner-ds">
|
|
<FormTextIcon type={type} />
|
|
{children}
|
|
</span>
|
|
</Form.Text>
|
|
)
|
|
}
|
|
|
|
export default DSFormText
|