Skip to content

B
bkunyun
Commit abc1b6f5 authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

fix: button组件封装

parent 17342c76
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 208 deletions
src/api/api_prefix.ts
View file @ abc1b6f5
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:17:48
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-16 20:22:37
* @LastEditTime: 2022-07-18 15:44:35
* @FilePath: /bkunyun/src/api/api_prefix.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -36,7 +36,7 @@ switch (process.env.REACT_APP_ENV) {
BACKEND_API_URI_PREFIX = "https://www.cloudam.cn";
}
else {
BACKEND_API_URI_PREFIX = "http://47.75.104.171";
BACKEND_API_URI_PREFIX = "http://47.57.4.97";
}
break;
}
......
src/components/mui/Button.tsx deleted 100644 → 0
View file @ 17342c76
import React from "react";
import { makeStyles } from "tss-react/mui";
import { Typography, Menu, MenuItem, Button } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
type ButtonTagProps = {
text: string; //文本内容
variant?: "text" | "contained" | "outlined"; //按钮样式
click?: any; //点击事件
select?: any[]; //选择按钮的下拉列表
fontSize?: string; //按钮文字大小
dropValue?: boolean; //选择的值
drop?: boolean; //是否开启选择
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 ButtonComponent = (props: ButtonTagProps) => {
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
size={size || "medium"}
variant={variant || "contained"}
color={color || "primary"}
disableRipple={true}
disableFocusRipple={true}
disabled={disabled || false}
classes={{
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={{
root: cx({
[classes.ArrowDropDownIconRoot]: true,
[classes.ArrowDropDownIconRootOpen]: Boolean(
props.dropValue || anchorEl
),
}),
}}
/>
)}
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
{select &&
select.length > 0 &&
select.map((item, key) => {
return (
<MenuItem
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;
src/components/mui/MyPopconfirm.tsx
View file @ abc1b6f5
......@@ -2,7 +2,7 @@
import * as React from "react";
import { ReactNode, useMemo } from "react";
import Box from "@mui/material/Box";
import ButtonComponent from "./Button";
import ButtonComponent from "./MyButton";
import tipsIcon from "@/assets/project/information-outline.svg";
import Popper from "@mui/material/Popper";
......@@ -87,14 +87,14 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
text={cancelText}
size="small"
color="inherit"
click={handleCancel}
onClick={handleCancel}
style={{ marginRight: "12px" }}
></ButtonComponent>
)}
<ButtonComponent
text={okText}
size="small"
click={handleOk}
onClick={handleOk}
></ButtonComponent>
</Box>
</Popper>
......
src/views/ConsoleLayout/index.tsx
View file @ abc1b6f5
......@@ -10,7 +10,7 @@ import uploadIcon from "@/assets/img/uploadIcon.svg";
import globalText from "@/utils/globalText_CN";
import useIndex from "./useIndex";
import { useStores } from "@/store/index";
import Button from "@/components/mui/Button";
import Button from "@/components/mui/MyButton";
import logo from "@/assets/img/logo.svg";
import MyPopover from "@/components/mui/MyPopover";
import TranSferList from "./components/TransferList";
......@@ -86,7 +86,7 @@ const ConsoleLayout = observer(() => {
text={globalText.console}
variant={"text"}
style={{ color: "#565C66" }}
click={() => navigate("/home")}
onClick={() => navigate("/home")}
/>
<Box sx={{ display: "flex", alignItems: "center" }}>
......@@ -94,7 +94,7 @@ const ConsoleLayout = observer(() => {
text={globalText.product}
variant={"text"}
style={{ color: "#565C66" }}
click={handleProductClick}
onClick={handleProductClick}
dropValue={productOpen}
drop={true}
/>
......
src/views/Project/ProjectJobDetail/index.tsx
View file @ abc1b6f5
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-08 15:02:08
* @LastEditTime: 2022-07-20 14:59:52
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -14,7 +14,7 @@ import { useLocation, useNavigate } from "react-router-dom";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton";
import ButtonComponent from "@/components/mui/Button";
import ButtonComponent from "@/components/mui/MyButton";
import useMyRequest from "@/hooks/useMyRequest";
import { fetchWorkFlowJob, getworkFlowTaskInfo } from "@/api/project_api";
import { IResponse } from "@/api/http";
......@@ -356,7 +356,7 @@ const ProjectSubmitWork = observer(() => {
text={state === "RUNNING" ? "终止" : "删除"}
variant="outlined"
color="secondary"
click={(e: any) =>
onClick={(e: any) =>
handleShowPopper(
e,
state === "RUNNING"
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ abc1b6f5
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-13 16:24:06
* @LastEditTime: 2022-07-20 15:00:18
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -16,7 +16,7 @@ import moment from "moment";
import ConfigForm from "./ConfigForm";
import WorkFlow from "./WorkFlow";
import ButtonComponent from "@/components/mui/Button";
import ButtonComponent from "@/components/mui/MyButton";
import { ITemplateConfig } from "./interface";
import useMyRequest from "@/hooks/useMyRequest";
import { fetchTemplateConfigInfo, submitWorkFlow } from "@/api/project_api";
......@@ -274,8 +274,7 @@ const ProjectSubmitWork = observer(() => {
> */}
<ButtonComponent
text="提交任务"
// click={handleSubmitForm}
click={(e: any) =>
onClick={(e: any) =>
handleShowPopper(e, "提交前请先确认参数填写无误，确认提交吗？")
}
></ButtonComponent>
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ abc1b6f5
......@@ -2,7 +2,7 @@
* @Author: rocosen
* @Date: 2022-06-12 10:05:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-04 20:23:26
* @LastEditTime: 2022-07-20 15:04:19
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -20,6 +20,8 @@ import Template from "@/assets/project/workbenchTemplate.svg";
import Template_select from "@/assets/project/workbenchTemplate_select.svg";
import List from "@/assets/project/workbenchList.svg";
import List_select from "@/assets/project/workbenchList_select.svg";
import ButtonDemo from "@/views/mui_demo/button";
import InputDemo from "@/views/mui_demo/input";
const ProjectWorkbench = observer(() => {
const isPass = usePass();
......@@ -43,20 +45,20 @@ const ProjectWorkbench = observer(() => {
icon: List,
iconed: List_select,
},
// {
// label: "按钮组件",
// value: "MUI_BUTTON",
// component: <ButtonDemo />,
// icon: List,
// iconed: List_select,
// },
// {
// label: "输入框组件",
// value: "MUI_INPUT",
// component: <InputDemo />,
// icon: List,
// iconed: List_select,
// },
{
label: "按钮组件",
value: "MUI_BUTTON",
component: <ButtonDemo />,
icon: List,
iconed: List_select,
},
{
label: "输入框组件",
value: "MUI_INPUT",
component: <InputDemo />,
icon: List,
iconed: List_select,
},
];
}, [isPass]);
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ abc1b6f5
......@@ -5,7 +5,7 @@ import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
import { Box, Typography } from "@mui/material";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import SearchIcon from "@mui/icons-material/Search";
import Button from "@/components/mui/Button";
import Button from "@/components/mui/MyButton";
import OutlinedInput from "@mui/material/OutlinedInput";
import Checkbox from "@mui/material/Checkbox";
import useMyRequest from "@/hooks/useMyRequest";
......@@ -214,8 +214,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
<Button
// click={addTemplateCallback}
click={handleAddTemplate}
onClick={handleAddTemplate}
size={"small"}
style={{
marginLeft: "12px",
......@@ -297,7 +296,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
{templateType !== "public" && (
<div className={style.templateLiEditBox}>
<Button
click={() => handleEditTemplate(item)}
onClick={() => handleEditTemplate(item)}
size={"small"}
style={{
height: "32px",
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx
View file @ abc1b6f5
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material";
import Button from "@/components/mui/Button";
import Button from "@/components/mui/MyButton";
import Dialog from "@/components/mui/MyDialog";
import OutlinedInput from "@mui/material/OutlinedInput";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
......@@ -90,7 +90,7 @@ const AddTemplate = (props: any) => {
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
<Button
click={addTemplateCallback}
onClick={addTemplateCallback}
size={"small"}
style={{
marginLeft: "12px",
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
View file @ abc1b6f5
......@@ -2,14 +2,14 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-17 14:48:57
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-24 16:41:40
* @LastEditTime: 2022-07-20 15:01:04
* @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo, useCallback } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material";
import Button from "@/components/mui/Button";
import Button from "@/components/mui/MyButton";
import usePass from "@/hooks/usePass";
import { useNavigate } from "react-router-dom";
......@@ -94,7 +94,7 @@ const TemplateBox = (props: any) => {
<Button
size={"small"}
text={"删除模版"}
click={() => {
onClick={() => {
props.startDialog(info.id);
}}
style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
......@@ -104,7 +104,7 @@ const TemplateBox = (props: any) => {
<Button
size={"small"}
text={"使用模版"}
click={() => addTemplateBlock(info.id)}
onClick={() => addTemplateBlock(info.id)}
style={{ marginLeft: "12px" }}
/>
)}
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ abc1b6f5
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-07 14:59:11
* @LastEditTime: 2022-07-20 15:01:29
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -14,7 +14,7 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import Add from "@mui/icons-material/Add";
import Button from "@/components/mui/Button";
import Button from "@/components/mui/MyButton";
import useMyRequest from "@/hooks/useMyRequest";
import TemplateBox from "./components/templateBox";
import SimpleDialog from "./components/simpleDialog";
......@@ -125,7 +125,7 @@ const ProjectMembers = observer(() => {
<Button
text={"添加工作流模版"}
img={<Add />}
click={addTemplateBlock}
onClick={addTemplateBlock}
size={"small"}
/>
)}
......
src/views/WorkFlowEdit/index.tsx
View file @ abc1b6f5
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-15 18:44:41
* @LastEditTime: 2022-07-20 15:01:18
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -14,7 +14,7 @@ import { observer } from "mobx-react-lite";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import ButtonComponent from "@/components/mui/Button";
import ButtonComponent from "@/components/mui/MyButton";
import OperatorList from "./components/OperatorList";
import Flow from "../Project/components/Flow";
import ParameterSetting from "./components/ParameterSetting";
......@@ -183,7 +183,7 @@ const WorkFlowEdit = observer((props: IProps) => {
<div className={styles.swHeaderRight}>
<ButtonComponent
text="保存"
click={() => handlePreserve()}
onClick={() => handlePreserve()}
></ButtonComponent>
</div>
</div>
......
src/views/mui_demo/button.tsx
View file @ abc1b6f5
import { memo } from "react";
import DeleteIcon from "@mui/icons-material/Delete";
import Button from "@/components/mui/Button";
import Button from "@/components/mui/MyButton";
const ProjectMembers = () => {
return (
......
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