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 @@
"homepage": "/v3/",
"dependencies": {
"@babel/core": "^7.16.0",
"@emotion/react": "^11.9.0",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.2",
"@mui/lab": "^5.0.0-alpha.84",
......@@ -77,14 +77,15 @@
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"tss-react": "^3.7.0",
"tus-js-client": "2.1.1",
"typescript": "^4.6.4",
"use-immer": "^0.7.0",
"web-vitals": "^2.1.4",
"webpack": "^5.64.4",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1",
"tus-js-client": "2.1.1"
"workbox-webpack-plugin": "^6.4.1"
},
"scripts": {
"start:master": "set \"REACT_APP_ENV=master\" && npm start",
......
src/components/mui/Button.tsx
View file @ ebe9370e
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 { makeStyles } from "@mui/styles";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import cx from "classnames"
type ButtonTagProps = {
text: string;
variant?: "text" | 'contained' | 'outlined';
click: any;
click?: any;
select?: any[];
fontSize?: string;
dropValue?: 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 classes = useStyles();
const { size, disabled, variant, color, img, btnStyle = {},select, selectCallBack } = props;
const { classes, cx } = useStyles({});
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget);
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);
return (
<>
<Button
variant={props.variant || 'contained'}
color={props.color || "primary"}
size={size || "medium"}
variant={variant || 'contained'}
color={color || "primary"}
disableRipple={true}
disableFocusRipple={true}
disabled={disabled || false}
classes={{
root: classes.root,
}}
sx={{ color: "#565C66" }}//暂定
root: btnStyle.root || classes.root,
// disabled: btnStyle.disabled || classes.disabled,
containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
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)}
>
{img || ''}
<Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography>
{
(props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{
......@@ -58,38 +73,46 @@ const ButtonComponent = (props: ButtonTagProps) => {
}
</Button>
<Menu
id="product-menu"
keepMounted
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
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 (
<MenuItem
key={item.path}
onClick={() => {
// navigate(item.path);
handleClose();
}}
>
{item.name}
key={key}
classes={{ root: classes.menuItemRoot }}
onClick={() => handleCloseOption(item, key)}>
{item.name || ""}
</MenuItem>
);
})}
)
})
}
</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;
\ No newline at end of file
src/components/mui/Tabs.tsx
View file @ ebe9370e
......@@ -24,8 +24,6 @@ interface ITabList {
}
interface IProps {
// value: string;
// onChange: (val: string) => void;
tabList: ITabList[];
}
......
src/index.tsx
View file @ ebe9370e
......@@ -20,7 +20,7 @@ const theme = createTheme({
},
palette: {
primary: { main: '#136EFA' },
secondary: { main: '#4EB9FB' }
secondary: { main: '#F44335' }
}
});
......
src/views/ConsoleLayout/index.tsx
View file @ ebe9370e
......@@ -88,6 +88,7 @@ const ConsoleLayout = observer(() => {
<Button
text={globalText.console}
variant={"text"}
style={{ color: "#565C66" }}
click={() => navigate("/home")}
/>
......@@ -95,6 +96,7 @@ const ConsoleLayout = observer(() => {
<Button
text={globalText.product}
variant={"text"}
style={{ color: "#565C66" }}
click={handleProductClick}
dropValue={productOpen}
drop={true}
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ ebe9370e
......@@ -24,6 +24,10 @@ import List from "@/assets/project/workbenchList.svg"
import List_select from "@/assets/project/workbenchList_select.svg"
//ui
import ButtonDemo from "@/views/mui_demo/button"
const ProjectWorkbench = observer(() => {
const { currentProjectStore } = useStores();
const isPass = usePass();
......@@ -50,6 +54,13 @@ const ProjectWorkbench = observer(() => {
icon: List,
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