DS Boyce
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import {Children, cloneElement, Fragment, isValidElement} from 'react'
|
|
import {View} from 'react-native'
|
|
|
|
import {atoms, useTheme} from '#/alf'
|
|
|
|
/**
|
|
* NOT FINISHED, just here as a reference
|
|
*/
|
|
export function InputGroup(props: React.PropsWithChildren<{}>) {
|
|
const t = useTheme()
|
|
const children = Children.toArray(props.children)
|
|
const total = children.length
|
|
return (
|
|
<View style={[atoms.w_full]}>
|
|
{children.map((child, i) => {
|
|
return isValidElement(child) ? (
|
|
<Fragment key={i}>
|
|
{i > 0 ? (
|
|
<View
|
|
style={[atoms.border_b, {borderColor: t.palette.contrast_500}]}
|
|
/>
|
|
) : null}
|
|
{cloneElement(child, {
|
|
// @ts-ignore
|
|
style: [
|
|
// @ts-ignore
|
|
...(Array.isArray(child.props?.style)
|
|
? // @ts-ignore
|
|
child.props.style
|
|
: // @ts-ignore
|
|
[child.props.style || {}]),
|
|
{
|
|
borderTopLeftRadius: i > 0 ? 0 : undefined,
|
|
borderTopRightRadius: i > 0 ? 0 : undefined,
|
|
borderBottomLeftRadius: i < total - 1 ? 0 : undefined,
|
|
borderBottomRightRadius: i < total - 1 ? 0 : undefined,
|
|
borderBottomWidth: i < total - 1 ? 0 : undefined,
|
|
},
|
|
],
|
|
})}
|
|
</Fragment>
|
|
) : null
|
|
})}
|
|
</View>
|
|
)
|
|
}
|