ADDED: Segmented buttons component

TODO: Styles for SB component
This commit is contained in:
doryan 2024-02-02 02:52:36 +04:00
parent 2b4bdc2b75
commit 231bdbec3a
5 changed files with 261 additions and 2 deletions

View File

@ -1,4 +1,4 @@
import { Fragment } from 'react'; import React, { Fragment } from 'react';
import Fabs from './components/fabs'; import Fabs from './components/fabs';
import Badges from './components/badges'; import Badges from './components/badges';
import Radios from './components/radios'; import Radios from './components/radios';
@ -7,6 +7,10 @@ import Switches from './components/switches';
import Checkboxes from './components/checkboxes'; import Checkboxes from './components/checkboxes';
import IconButtons from './components/icon-buttons'; import IconButtons from './components/icon-buttons';
import { TextFields } from './components/text-fields'; import { TextFields } from './components/text-fields';
import {
ButtonLayout,
SegmentedButtons,
} from '../src/primitive-components/components';
export default function Page() { export default function Page() {
return ( return (
@ -40,6 +44,14 @@ export default function Page() {
<Fabs /> <Fabs />
<Badges /> <Badges />
</div> </div>
<SegmentedButtons>
<ButtonLayout>
<span>Segment 1</span>
</ButtonLayout>
<ButtonLayout>
<span>Segment 1</span>
</ButtonLayout>
</SegmentedButtons>
</div> </div>
</Fragment> </Fragment>
); );

219
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -11,3 +11,4 @@ export { Ripples, Ripple } from './ripple/ripple';
export { TextField } from './text-field/text-field'; export { TextField } from './text-field/text-field';
export { IconButton } from './icon-button/icon-button'; export { IconButton } from './icon-button/icon-button';
export { ButtonLayout } from './button-layout/button-layout'; export { ButtonLayout } from './button-layout/button-layout';
export { SegmentedButtons } from './segmented-buttons/segmented-buttons';

View File

@ -0,0 +1,21 @@
import React, { forwardRef } from 'react';
import { SegmentedButtonProps } from './segmented-buttons.types';
export const SegmentedButtons = forwardRef<
HTMLDivElement,
SegmentedButtonProps
>(({ children, ...props }, ref) => {
if (children.length <= 1) {
console.error('You must build segmented button with 2 or more buttton');
return <></>;
}
return (
<div
className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
ref={ref}
>
{children}
</div>
);
});

View File

@ -0,0 +1,8 @@
import { HTMLAttributes, ReactElement } from 'react';
export interface SegmentedButton {
children?: ReactElement<HTMLButtonElement>[];
}
export type SegmentedButtonProps = SegmentedButton &
HTMLAttributes<HTMLDivElement>;