Justin Edmund
3fbd4aac69
* Forward refs to SegmentedControl * Allow passing of className via props * Specific styles for RaidCombobox and something else * Use small-tablet breakpoint
62 lines
1.2 KiB
TypeScript
62 lines
1.2 KiB
TypeScript
import React, { PropsWithChildren } from 'react'
|
|
import classNames from 'classnames'
|
|
import styles from './index.module.scss'
|
|
|
|
interface Props {
|
|
className?: string
|
|
wrapperClassName?: string
|
|
elementClass?: string
|
|
blended?: boolean
|
|
grow?: boolean
|
|
gap?: boolean
|
|
tabIndex?: number
|
|
}
|
|
|
|
const SegmentedControl = React.forwardRef<
|
|
HTMLDivElement,
|
|
PropsWithChildren<Props>
|
|
>(function SegmentedControl(
|
|
{
|
|
className,
|
|
wrapperClassName,
|
|
elementClass,
|
|
blended,
|
|
grow,
|
|
gap,
|
|
tabIndex,
|
|
children,
|
|
},
|
|
forwardedRef
|
|
) {
|
|
const wrapperClasses = classNames(
|
|
{
|
|
[styles.wrapper]: true,
|
|
},
|
|
wrapperClassName?.split(' ').map((className) => styles[className])
|
|
)
|
|
|
|
const classes = classNames(
|
|
{
|
|
[styles.segmentedControl]: true,
|
|
[styles.blended]: blended,
|
|
[styles.grow]: grow,
|
|
[styles.gap]: gap,
|
|
blended: blended,
|
|
},
|
|
className?.split(' ').map((className) => styles[className]),
|
|
elementClass
|
|
)
|
|
return (
|
|
<div className={wrapperClasses} tabIndex={tabIndex} ref={forwardedRef}>
|
|
<div className={classes}>{children}</div>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
SegmentedControl.defaultProps = {
|
|
blended: false,
|
|
grow: false,
|
|
gap: false,
|
|
}
|
|
|
|
export default SegmentedControl
|