Skip to content

B
bkunyun
Commit ebe9370e authored by rocosen's avatar rocosen
Browse files
Options

feat:button

parent 37960029
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 46 deletions
package.json
View file @ ebe9370e
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"homepage": "/v3/", "homepage": "/v3/",
"dependencies": { "dependencies": {
"@babel/core": "^7.16.0", "@babel/core": "^7.16.0",
"@emotion/react": "^11.9.0", "@emotion/react": "^11.9.3",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.2", "@mui/icons-material": "^5.6.2",
"@mui/lab": "^5.0.0-alpha.84", "@mui/lab": "^5.0.0-alpha.84",
...@@ -77,14 +77,15 @@ ...@@ -77,14 +77,15 @@
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"tailwindcss": "^3.0.2", "tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5", "terser-webpack-plugin": "^5.2.5",
"tss-react": "^3.7.0",
"tus-js-client": "2.1.1",
"typescript": "^4.6.4", "typescript": "^4.6.4",
"use-immer": "^0.7.0", "use-immer": "^0.7.0",
"web-vitals": "^2.1.4", "web-vitals": "^2.1.4",
"webpack": "^5.64.4", "webpack": "^5.64.4",
"webpack-dev-server": "^4.6.0", "webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2", "webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1", "workbox-webpack-plugin": "^6.4.1"
"tus-js-client": "2.1.1"
}, },
"scripts": { "scripts": {
"start:master": "set \"REACT_APP_ENV=master\" && npm start", "start:master": "set \"REACT_APP_ENV=master\" && npm start",
......
src/components/mui/Button.tsx
View file @ ebe9370e
import React, { FC } from "react"; import React, { FC } from "react";
import { Props } from "ahooks/lib/useControllableValue";
import { makeStyles } from "tss-react/mui";
import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material"; import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material";
import { makeStyles } from "@mui/styles";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import cx from "classnames"
type ButtonTagProps = { type ButtonTagProps = {
text: string; text: string;
variant?: "text" | 'contained' | 'outlined'; variant?: "text" | 'contained' | 'outlined';
click: any; click?: any;
select?: any[]; select?: any[];
fontSize?: string; fontSize?: string;
dropValue?: boolean; dropValue?: boolean;
drop?: boolean; drop?: boolean;
color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined, color?: "inherit" | "primary" | "secondary" | undefined,
btnStyle?: any,
size?: "large" | "medium" | "small",
disabled?: boolean,
style?: any,
img?: JSX.Element;
selectCallBack?: (item: any, key: number) => void
} }
const useStyles = makeStyles({
root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#ffffff !important" } },
ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
})
const ButtonComponent = (props: ButtonTagProps) => { const ButtonComponent = (props: ButtonTagProps) => {
const classes = useStyles(); const { size, disabled, variant, color, img, btnStyle = {},select, selectCallBack } = props;
const { classes, cx } = useStyles({});
const [anchorEl, setAnchorEl] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget); const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget);
const defultClick = (event: { stoppropagation: () => any; }) => event && event.stoppropagation && event.stoppropagation() const defultClick = (event: { stoppropagation: () => any; }) => event && event.stoppropagation && event.stoppropagation()
const handleCloseOption = (item: any, key: number) => {
setAnchorEl(null);
selectCallBack && selectCallBack(item, key)
}
const handleClose = () => setAnchorEl(null); const handleClose = () => setAnchorEl(null);
return ( return (
<> <>
<Button <Button
variant={props.variant || 'contained'} size={size || "medium"}
color={props.color || "primary"} variant={variant || 'contained'}
color={color || "primary"}
disableRipple={true} disableRipple={true}
disableFocusRipple={true} disableFocusRipple={true}
disabled={disabled || false}
classes={{ classes={{
root: classes.root, root: btnStyle.root || classes.root,
}} // disabled: btnStyle.disabled || classes.disabled,
containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
sx={{ color: "#565C66" }}//暂定 outlined: btnStyle.outlined || classes.outlined,
outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary,
text: btnStyle.text || classes.text,
textPrimary: btnStyle.textPrimary || classes.textPrimary,
textSecondary: btnStyle.textSecondary || classes.textSecondary,
sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
}}
style={{ ...props.style }}
onClick={props.select ? handleClick : (props.click || defultClick)} onClick={props.select ? handleClick : (props.click || defultClick)}
> >
{img || ''}
<Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography> <Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography>
{ {
(props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{ (props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{
...@@ -58,38 +73,46 @@ const ButtonComponent = (props: ButtonTagProps) => { ...@@ -58,38 +73,46 @@ const ButtonComponent = (props: ButtonTagProps) => {
} }
</Button> </Button>
<Menu <Menu
id="product-menu" id="simple-menu"
keepMounted
anchorEl={anchorEl} anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)} open={Boolean(anchorEl)}
onClose={handleClose} onClose={handleClose}
MenuListProps={{
"aria-labelledby": "product-button",
}}
> >
{ {
props.select && props.select.length > 0 && props.select.map((item, key) => { select && select.length > 0 && select.map((item, key) => {
return ( return (
<MenuItem <MenuItem
key={item.path} key={key}
classes={{ root: classes.menuItemRoot }}
onClick={() => handleCloseOption(item, key)}>
onClick={() => { {item.name || ""}
// navigate(item.path);
handleClose();
}}
>
{item.name}
</MenuItem> </MenuItem>
); )
})} })
}
</Menu> </Menu>
</> </>
) )
}
const useStyles = makeStyles<{}>()(
(theme, { }) => ({
root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } },
containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } },
outlined: { backgroundColor: '#FFFFFF', border: "1px solid #136EFA", boxShadow: "none !important", color: "#136EFA", "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" } },
outlinedSecondary: { border: "1px solid #D62C1F", color: "#D62C1F", "&:hover": { border: "1px solid #D62C1F", backgroundColor: "rgba(214, 44, 31, 0.1)" } },
label: { "& p": { fontSize: "13px" } },
text: { backgroundColor: 'transparent', boxShadow: "none !important" },
textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
textSecondary: { color: "#F44335", "&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" } },
sizeSmall: { "& p": { fontSize: "12px" } },
sizeLarge: { "& p": { fontSize: "14px" } },
menuItemRoot: {},
ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
})
);
}
export default ButtonComponent; export default ButtonComponent;
\ No newline at end of file
src/components/mui/Tabs.tsx
View file @ ebe9370e
...@@ -24,8 +24,6 @@ interface ITabList { ...@@ -24,8 +24,6 @@ interface ITabList {
} }
interface IProps { interface IProps {
// value: string;
// onChange: (val: string) => void;
tabList: ITabList[]; tabList: ITabList[];
} }
......
src/index.tsx
View file @ ebe9370e
...@@ -20,7 +20,7 @@ const theme = createTheme({ ...@@ -20,7 +20,7 @@ const theme = createTheme({
}, },
palette: { palette: {
primary: { main: '#136EFA' }, primary: { main: '#136EFA' },
secondary: { main: '#4EB9FB' } secondary: { main: '#F44335' }
} }
}); });
......
src/views/ConsoleLayout/index.tsx
View file @ ebe9370e
...@@ -88,6 +88,7 @@ const ConsoleLayout = observer(() => { ...@@ -88,6 +88,7 @@ const ConsoleLayout = observer(() => {
<Button <Button
text={globalText.console} text={globalText.console}
variant={"text"} variant={"text"}
style={{ color: "#565C66" }}
click={() => navigate("/home")} click={() => navigate("/home")}
/> />
...@@ -95,6 +96,7 @@ const ConsoleLayout = observer(() => { ...@@ -95,6 +96,7 @@ const ConsoleLayout = observer(() => {
<Button <Button
text={globalText.product} text={globalText.product}
variant={"text"} variant={"text"}
style={{ color: "#565C66" }}
click={handleProductClick} click={handleProductClick}
dropValue={productOpen} dropValue={productOpen}
drop={true} drop={true}
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ ebe9370e
...@@ -24,6 +24,10 @@ import List from "@/assets/project/workbenchList.svg" ...@@ -24,6 +24,10 @@ import List from "@/assets/project/workbenchList.svg"
import List_select from "@/assets/project/workbenchList_select.svg" import List_select from "@/assets/project/workbenchList_select.svg"
//ui
import ButtonDemo from "@/views/mui_demo/button"
const ProjectWorkbench = observer(() => { const ProjectWorkbench = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const isPass = usePass(); const isPass = usePass();
...@@ -50,6 +54,13 @@ const ProjectWorkbench = observer(() => { ...@@ -50,6 +54,13 @@ const ProjectWorkbench = observer(() => {
icon: List, icon: List,
iconed: List_select iconed: List_select
}, },
{
label: "按钮组件库",
value: "MUI",
component: <ButtonDemo />,
icon: List,
iconed: List_select
},
]; ];
}, []); }, []);
......
src/views/mui_demo/button.tsx 0 → 100644
View file @ ebe9370e
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import Button from "@/components/mui/Button";
const ProjectMembers = () => {
const http = useHttp();
const { currentProjectStore } = useStores();
useEffect(() => {
}, []);
return (
<>
<Button size={"large"} text={'确定'} />
&nbsp;&nbsp;
<Button text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} text={'确定'} />
<br /><br />
<Button size={"large"} text={'确定'} disabled />
&nbsp;&nbsp;
<Button text={'确定'} disabled />
&nbsp;&nbsp;
<Button size={"small"} text={'确定'} disabled />
<br /><br />
<Button size={"large"} color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} color={"secondary"} text={'确定'} />
<br /> <br />
<Button text={'确定'} size={"large"} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} size={"small"} style={{ color: "aqua", background: "burlywood" }} />
<br /> <br />
outlined
<br />
<Button size={"large"} variant={"outlined"} text={'确定'} />
&nbsp;&nbsp;
<Button variant={"outlined"} text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} text={'确定'} />
<br /> <br />
<Button size={"large"} variant={"outlined"} disabled text={'确定'} />
&nbsp;&nbsp;
<Button variant={"outlined"} disabled text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} disabled text={'确定'} />
<br /> <br />
<Button size={"large"} variant={"outlined"} color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button variant={"outlined"} color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} color={"secondary"} text={'确定'} />
<br /> <br />
<Button text={'确定'} size={"large"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} size={"small"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
<br /> <br />
text
<br />
<Button size={"large"} variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"text"} text={'确定确定确定确定确定确定'} />
<br />
<Button size={"large"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button variant={"text"} disabled text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button size={"small"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
<br />
<Button size={"large"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button variant={"text"} color={"secondary"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button size={"small"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
<br /> <br />
img
<br />
<Button text={'确定确定确定确定确定确定'} img={<DeleteIcon />} />
<br /> <br />
select
<br />
<Button
text={'更多'}
select={
[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]
} />
<Button
text={'更多'}
color={"secondary"} variant={"text"}
select={
[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]
} />
</>
);
};
export default memo(ProjectMembers);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment