80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { string } from 'prop-types';
|
|
import React, { forwardRef, useState } from 'react';
|
|
import { IconWrapper } from '../../icon/icon-wrapper';
|
|
import { Typography } from '../../typography/typography';
|
|
import { SegmentedButton } from './segmented-buttons.types';
|
|
export const SegmentButton = forwardRef<
|
|
HTMLButtonElement,
|
|
ButtonLayoutProps & SegmentedButton
|
|
>(
|
|
(
|
|
{
|
|
type,
|
|
icon,
|
|
grade,
|
|
weight,
|
|
svgSize,
|
|
fillIcon,
|
|
children,
|
|
iconSize,
|
|
opticalSize,
|
|
toggled = false,
|
|
iconPlace = 'left',
|
|
centralRipple = false,
|
|
...props
|
|
},
|
|
ref,
|
|
) => {
|
|
const [selectedState, setSelectedState] = useState<boolean>(false);
|
|
const classes =
|
|
`m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();
|
|
|
|
const _icon = selectedState && icon;
|
|
|
|
return (
|
|
<ButtonLayout
|
|
{...props}
|
|
centralRipple={centralRipple}
|
|
className={classes}
|
|
onClick={() => {
|
|
if (toggled) {
|
|
setSelectedState(state => !state);
|
|
}
|
|
props.onClick?.apply(this, props.onClick.arguments);
|
|
}}
|
|
ref={ref}
|
|
>
|
|
<IconWrapper
|
|
fillIcon={fillIcon}
|
|
grade={grade}
|
|
icon={_icon}
|
|
iconPlace={iconPlace}
|
|
iconSize={iconSize}
|
|
opticalSize={opticalSize}
|
|
svgSize={svgSize}
|
|
type={type}
|
|
weight={weight}
|
|
>
|
|
<Typography
|
|
className={'label-large'}
|
|
role={'label'}
|
|
size={'large'}
|
|
>
|
|
{children}
|
|
</Typography>
|
|
</IconWrapper>
|
|
<span className={'m3 m3-button-segment-state-layer'} />
|
|
</ButtonLayout>
|
|
);
|
|
},
|
|
);
|
|
import { ButtonLayout } from '../button-layout/button-layout';
|
|
|
|
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
|
|
|
|
SegmentButton.propTypes = {
|
|
children: string,
|
|
};
|