88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import { createComponent } from "@lit/react";
|
|
import { MdIconButton as MdIconButtonWebComponent } from "@material/web/iconbutton/icon-button";
|
|
import { MdFilledIconButton as MdFilledIconButtonWebComponent } from "@material/web/iconbutton/filled-icon-button";
|
|
import { MdOutlinedIconButton as MdOutlinedIconButtonWebComponent } from "@material/web/iconbutton/outlined-icon-button";
|
|
import { MdFilledTonalIconButton as MdFilledTonalIconButtonWebComponent } from "@material/web/iconbutton/filled-tonal-icon-button";
|
|
|
|
const MdIconButton = createComponent({
|
|
react: React,
|
|
tagName: 'md-icon-button',
|
|
elementClass: MdIconButtonWebComponent,
|
|
events: {
|
|
onChange: 'change',
|
|
onInput: 'input',
|
|
onClick: 'click',
|
|
},
|
|
});
|
|
|
|
const MdFilledIconButton = createComponent({
|
|
react: React,
|
|
tagName: 'md-filled-icon-button',
|
|
elementClass: MdFilledIconButtonWebComponent,
|
|
events: {
|
|
onChange: 'change',
|
|
onInput: 'input',
|
|
onClick: 'click',
|
|
},
|
|
});
|
|
|
|
const MdOutlinedIconButton = createComponent({
|
|
react: React,
|
|
tagName: 'md-outlined-icon-button',
|
|
elementClass: MdOutlinedIconButtonWebComponent,
|
|
events: {
|
|
onChange: 'change',
|
|
onInput: 'input',
|
|
onClick: 'click',
|
|
},
|
|
});
|
|
|
|
const MdFilledTonalIconButton = createComponent({
|
|
react: React,
|
|
tagName: 'md-filled-tonal-icon-button',
|
|
elementClass: MdFilledTonalIconButtonWebComponent,
|
|
events: {
|
|
onChange: 'change',
|
|
onInput: 'input',
|
|
onClick: 'click',
|
|
},
|
|
});
|
|
|
|
type IconButtonProps = {
|
|
variant?: 'filled' | 'outlined' | 'filled-tonal' | 'standard';
|
|
disabled?: boolean;
|
|
flipIconInRtl?: boolean;
|
|
href?: string;
|
|
target?: '_blank' | '_self' | '_parent' | '_top';
|
|
ariaLabelSelected?: string;
|
|
toggle?: boolean;
|
|
selected?: boolean;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
value?: string;
|
|
name?: string;
|
|
form?: HTMLFormElement;
|
|
labels?: NodeListOf<HTMLLabelElement>;
|
|
children: React.ReactNode;
|
|
style?: React.CSSProperties;
|
|
className?: string;
|
|
id?: string;
|
|
onChange?: (event: Event) => void;
|
|
onInput?: (event: Event) => void;
|
|
onClick?: (event: Event) => void;
|
|
};
|
|
|
|
export const IconButton = (props: IconButtonProps) => {
|
|
const variant = props.variant || 'standard';
|
|
switch (variant) {
|
|
case 'filled':
|
|
return <MdFilledIconButton {...props} />;
|
|
case 'outlined':
|
|
return <MdOutlinedIconButton {...props} />;
|
|
case 'filled-tonal':
|
|
return <MdFilledTonalIconButton {...props} />;
|
|
default:
|
|
return <MdIconButton {...props} />;
|
|
}
|
|
};
|