OfficialDakari
/
ReactMaterial3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add icon buttons and dialogs

This commit is contained in:
OfficialDakari 2025-03-28 18:11:26 +05:00
parent 582d560974
commit 6e287e7a01
5 changed files with 122 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

327
package-lock.json generated
View File

@ -14,11 +14,8 @@
"@lit/react": "^1.0.7",
"@material/material-color-utilities": "^0.3.0",
"@material/web": "^2.2.0",
"@mui/material": "^6.1.6",
"@vitejs/plugin-react": "^4.3.3",
"beercss": "^3.7.12",
"classnames": "^2.5.1",
"material-dynamic-colors": "^1.1.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"uuid": "^11.1.0"
@ -341,6 +338,7 @@
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz",
"integrity": "sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@emotion/memoize": "^0.9.0",
"@emotion/sheet": "^1.4.0",
@ -412,7 +410,8 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
"integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@emotion/styled": {
"version": "11.13.5",
@ -462,7 +461,8 @@
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
"integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@esbuild-plugins/node-globals-polyfill": {
"version": "0.2.3",
@ -932,220 +932,6 @@
"tslib": "^2.4.0"
}
},
"node_modules/@mui/core-downloads-tracker": {
"version": "6.1.6",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
"integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
}
},
"node_modules/@mui/material": {
"version": "6.1.6",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
"integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@mui/core-downloads-tracker": "^6.1.6",
"@mui/system": "^6.1.6",
"@mui/types": "^7.2.19",
"@mui/utils": "^6.1.6",
"@popperjs/core": "^2.11.8",
"@types/react-transition-group": "^4.4.11",
"clsx": "^2.1.1",
"csstype": "^3.1.3",
"prop-types": "^15.8.1",
"react-is": "^18.3.1",
"react-transition-group": "^4.4.5"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material-pigment-css": "^6.1.6",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"@mui/material-pigment-css": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/private-theming": {
"version": "6.1.6",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
"integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@mui/utils": "^6.1.6",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/styled-engine": {
"version": "6.1.6",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
"integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@emotion/cache": "^11.13.1",
"@emotion/serialize": "^1.3.2",
"@emotion/sheet": "^1.4.0",
"csstype": "^3.1.3",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
}
}
},
"node_modules/@mui/system": {
"version": "6.1.6",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
"integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@mui/private-theming": "^6.1.6",
"@mui/styled-engine": "^6.1.6",
"@mui/types": "^7.2.19",
"@mui/utils": "^6.1.6",
"clsx": "^2.1.1",
"csstype": "^3.1.3",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/types": {
"version": "7.2.19",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
"integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
"license": "MIT",
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/utils": {
"version": "6.1.6",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
"integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@mui/types": "^7.2.19",
"@types/prop-types": "^15.7.13",
"clsx": "^2.1.1",
"prop-types": "^15.8.1",
"react-is": "^18.3.1"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rollup/plugin-inject": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
@ -1749,15 +1535,6 @@
"@types/react": "*"
}
},
"node_modules/@types/react-transition-group": {
"version": "4.4.11",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
"integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
"license": "MIT",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/trusted-types": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@ -1798,15 +1575,6 @@
"npm": ">=6"
}
},
"node_modules/beercss": {
"version": "3.7.12",
"resolved": "https://registry.npmjs.org/beercss/-/beercss-3.7.12.tgz",
"integrity": "sha512-R5QVbMKK/xcuNJcTY8NZINmn/9BV1euy5TXio7QfG/0yorBo+RHFPR/J+AhjwOIvyl1/8A0PyJuEAgnGPesWPQ==",
"license": "MIT",
"dependencies": {
"material-dynamic-colors": "^1.1.2"
}
},
"node_modules/browserslist": {
"version": "4.24.2",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
@ -1874,15 +1642,6 @@
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
"license": "MIT"
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/convert-source-map": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@ -1928,16 +1687,6 @@
}
}
},
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/electron-to-chromium": {
"version": "1.5.56",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.56.tgz",
@ -2236,24 +1985,6 @@
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
"node_modules/material-dynamic-colors": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/material-dynamic-colors/-/material-dynamic-colors-1.1.2.tgz",
"integrity": "sha512-8KD0jrPTFs2x06UJWbvkg6E0HyzFjrvS5oOc2DsXzIEOqZTbb3ruLMUhNuPSl8WeHA/O/RTAlTLcxqYXJzYwPA==",
"license": "MIT",
"dependencies": {
"@material/material-color-utilities": "^0.2.7"
},
"bin": {
"material-dynamic-colors": "cli.js"
}
},
"node_modules/material-dynamic-colors/node_modules/@material/material-color-utilities": {
"version": "0.2.7",
"resolved": "https://registry.npmjs.org/@material/material-color-utilities/-/material-color-utilities-0.2.7.tgz",
"integrity": "sha512-0FCeqG6WvK4/Cc06F/xXMd/pv4FeisI0c1tUpBbfhA2n9Y8eZEv4Karjbmf2ZqQCPUWMrGp8A571tCjizxoTiQ==",
"license": "Apache-2.0"
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -2284,15 +2015,6 @@
"integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
"license": "MIT"
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@ -2385,23 +2107,6 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.13.1"
}
},
"node_modules/prop-types/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"license": "MIT"
},
"node_modules/react": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@ -2427,12 +2132,6 @@
"react": "^18.3.1"
}
},
"node_modules/react-is": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
"license": "MIT"
},
"node_modules/react-refresh": {
"version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@ -2442,22 +2141,6 @@
"node": ">=0.10.0"
}
},
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"license": "BSD-3-Clause",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",

3
package.json
View File

@ -14,11 +14,8 @@
"@lit/react": "^1.0.7",
"@material/material-color-utilities": "^0.3.0",
"@material/web": "^2.2.0",
"@mui/material": "^6.1.6",
"@vitejs/plugin-react": "^4.3.3",
"beercss": "^3.7.12",
"classnames": "^2.5.1",
"material-dynamic-colors": "^1.1.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"uuid": "^11.1.0"

31
src/components/Dialog.tsx
View File

@ -31,11 +31,38 @@ type DialogProps = {
onOpened?: () => void;
onClosed?: () => void;
onCancel?: () => void;
fullScreen?: boolean;
};
export const Dialog = (props: DialogProps) => {
const { children, quick, returnValue, noFocusTrap, open, style, className, id, onClose, onShow, onOpen, onOpened, onClosed, onCancel } = props;
return <MdDialog quick={quick} returnValue={returnValue} noFocusTrap={noFocusTrap} open={open} style={style} className={className} id={id} onClose={onClose} onShow={onShow} onOpen={onOpen} onOpened={onOpened} onClosed={onClosed} onCancel={onCancel}>{children}</MdDialog>;
const { children, quick, returnValue, noFocusTrap, open, fullScreen, style, className, id, onClose, onShow, onOpen, onOpened, onClosed, onCancel } = props;
return (
<MdDialog
quick={quick}
returnValue={returnValue}
noFocusTrap={noFocusTrap}
open={open}
style={{
...style,
...(fullScreen ? {
width: '100vw',
height: '100vh',
maxWidth: '100vw',
maxHeight: '100vh',
} : {}),
}}
className={className}
id={id}
onClose={onClose}
onShow={onShow}
onOpen={onOpen}
onOpened={onOpened}
onClosed={onClosed}
onCancel={onCancel}
>
{children}
</MdDialog>
);
};
type DialogTitleProps = {

87
src/components/IconButton.tsx Normal file
View File

@ -0,0 +1,87 @@
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} />;
}
};

2
src/index.tsx
View File

@ -43,7 +43,7 @@ const mountApp = async () => {
<DialogTitle>Hello</DialogTitle>
<DialogContent>Hello</DialogContent>
<DialogActions>
<Button variant='filled'>Hello</Button>
<Button variant='text'>Close</Button>
</DialogActions>
</Dialog>
</ThemeProvider>