Skip to content

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

fix: MyTooltip组件开发

parent 82b8572e
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 28 deletions
src/components/mui/MyTooltip.tsx 0 → 100644
View file @ aaf17676
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-11 11:56:58
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-22 10:51:10
* @FilePath: /bkunyun/src/components/mui/MyTooltip.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { Tooltip, TooltipProps } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";
interface IMyTooltipProps extends TooltipProps {
title: string;
}
const theme = createTheme({
components: {
MuiTooltip: {
styleOverrides: {
tooltip: {
backgroundColor: "rgba(7, 19, 38, .8)",
color: "#fff",
},
arrow: {
"&:before": {
backgroundColor: "#071326",
opacity: "0.8",
},
},
},
},
},
});
const MyTooltip = (props: IMyTooltipProps) => {
const { title, children, placement = "top", ...other } = props;
return (
<ThemeProvider theme={theme}>
<Tooltip
// interactive={true}
arrow
title={title}
placement={placement}
{...other}
>
{children}
</Tooltip>
</ThemeProvider>
);
};
export default MyTooltip;
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ aaf17676
import { ITemplateConfig, IRenderTasks } from "../interface";
import styles from "./index.module.css";
import MyInput from "@/components/mui/MyInput";
import Tooltip from "@mui/material/Tooltip";
import moment from "moment";
import classnames from "classnames";
import { useState, useMemo, useImperativeHandle } from "react";
import { ITemplateConfig, IRenderTasks } from "../interface";
import MyInput from "@/components/mui/MyInput";
import FileSelect, {
FileSelectType,
} from "@/components/BusinessComponents/FileSelect";
import moment from "moment";
import MySelect, { optionsTransform } from "../components/MySelect";
import MyCheckBox from "@/components/mui/MyCheckBox";
import MyRadio from "@/components/mui/MyRadio";
......@@ -17,6 +16,9 @@ import questionMark from "@/assets/project/questionMark.svg";
import tipsIcon from "@/assets/project/tipsIcon.svg";
import jobSueIcon from "@/assets/project/jobSue.svg";
import { IParameter } from "../interface";
import MyTooltip from "@/components/mui/MyTooltip";
import styles from "./index.module.css";
type ConfigFormProps = {
templateConfigInfo?: ITemplateConfig;
......@@ -360,13 +362,13 @@ const ConfigForm = (props: ConfigFormProps) => {
></MyCheckBox>
)}
{parameter.description && (
<Tooltip title={parameter.description} placement="top">
<MyTooltip title={parameter.description} placement="top">
<img
className={styles.parameterDesc}
src={questionMark}
alt=""
/>
</Tooltip>
</MyTooltip>
)}
</div>
</div>
......@@ -466,9 +468,9 @@ const ConfigForm = (props: ConfigFormProps) => {
{task.title}
</span>
{task.description && (
<Tooltip title={task.description} placement="top">
<MyTooltip title={task.description} placement="top">
<img className={styles.taskDescIcon} src={tipsIcon} alt="" />
</Tooltip>
</MyTooltip>
)}
</div>
<div className={styles.taskConfigBox}>
......@@ -479,13 +481,13 @@ const ConfigForm = (props: ConfigFormProps) => {
<div className={styles.flowTitle}>
{flow.title}
{flow.description && (
<Tooltip title={flow.description} placement="top">
<MyTooltip title={flow.description} placement="top">
<img
className={styles.flowDescIcon}
src={tipsIcon}
alt=""
/>
</Tooltip>
</MyTooltip>
)}
</div>
{randerParameters(
......
src/views/Project/components/Flow/components/BatchNode/index.tsx
View file @ aaf17676
......@@ -2,12 +2,11 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:20:29
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-15 10:48:22
* @LastEditTime: 2022-07-22 10:43:28
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { Tooltip } from "@mui/material";
import classNames from "classnames";
import { useMemo } from "react";
import { Handle, Position } from "react-flow-renderer";
......@@ -16,6 +15,7 @@ import { uuid } from "@/utils/util";
import { IBatchNode } from "../../interface";
import styles from "./index.module.css";
import MyTooltip from "@/components/mui/MyTooltip";
/** 自定义batch节点 */
const BatchNode = (props: IBatchNode) => {
......@@ -63,7 +63,7 @@ const BatchNode = (props: IBatchNode) => {
{inParamsArr?.length
? inParamsArr.map((item, index) => {
return (
<Tooltip title={item.name} key={uuid()}>
<MyTooltip title={item.name} key={uuid()}>
<Handle
id={item.name}
style={{
......@@ -76,7 +76,7 @@ const BatchNode = (props: IBatchNode) => {
type="target"
position={Position.Top}
/>
</Tooltip>
</MyTooltip>
);
})
: null}
......@@ -93,7 +93,7 @@ const BatchNode = (props: IBatchNode) => {
{outParamsArr?.length
? outParamsArr.map((item, index) => {
return (
<Tooltip title={item.name} key={uuid()}>
<MyTooltip title={item.name} key={uuid()}>
<Handle
id={item.name}
style={{
......@@ -104,7 +104,7 @@ const BatchNode = (props: IBatchNode) => {
type="source"
position={Position.Bottom}
/>
</Tooltip>
</MyTooltip>
);
})
: null}
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ aaf17676
import styles from "./index.module.css";
import _ from "lodash";
import { useCallback, useEffect, useMemo, useState } from "react";
import classNames from "classnames";
import {
ITask,
IParameter,
} from "../../../Project/ProjectSubmitWork/interface";
import noTemplate from "@/assets/project/noTemplate.svg";
import { useCallback, useEffect, useMemo, useState } from "react";
import MyInput from "@/components/mui/MyInput";
import Tooltip from "@mui/material/Tooltip";
import MyCheckBox from "@/components/mui/MyCheckBox";
import MySelect, {
optionsTransform,
} from "../../../Project/ProjectSubmitWork/components/MySelect";
import _ from "lodash";
import FileSelect, {
FileSelectType,
} from "@/components/BusinessComponents/FileSelect";
......@@ -20,8 +20,10 @@ import questionMark from "@/assets/project/questionMark.svg";
import fileSelectIcon from "@/assets/project/fileSelect.svg";
import MySwitch from "@/components/mui/MySwitch";
import Tabs from "@/components/mui/Tabs";
import classNames from "classnames";
import { getCustomTemplateParameterCheckResult } from "../../util";
import MyTooltip from "@/components/mui/MyTooltip";
import styles from "./index.module.css";
type IParameterSettingProps = {
templateConfigInfo: ITask[];
......@@ -395,7 +397,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
const renderInput = useCallback(
(parameter: IParameter) => {
return (
<Tooltip title={parameter.description} placement="top">
<MyTooltip title={parameter.description} placement="top">
<div>
{parameter.domType.toLowerCase() === "file" && (
<MyInput
......@@ -539,7 +541,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
></MyCheckBox>
)}
</div>
</Tooltip>
</MyTooltip>
);
},
[handleParameterChange]
......@@ -720,7 +722,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<div className={styles.inOutBox}>
<div className={styles.paramsTitle}>
输入
<Tooltip
<MyTooltip
title="当某个输入项为启用状态时，代表该输入将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该输入不需要使用者来填写赋值，而是将其它流程的结果传入。"
placement="right"
>
......@@ -729,7 +731,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
src={questionMark}
alt=""
/>
</Tooltip>
</MyTooltip>
</div>
<div className={styles.paramsList}>
{inParameters.map((parameter, index) => {
......@@ -810,7 +812,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<div className={styles.paramsGroup}>
<div className={styles.paramsTitle}>
参数组
<Tooltip
<MyTooltip
title="当某个参数项为启用状态时，代表该参数将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该参数不需要使用者来填写赋值。"
placement="right"
>
......@@ -819,7 +821,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
src={questionMark}
alt=""
/>
</Tooltip>
</MyTooltip>
</div>
<Tabs
tabList={paramsTabList}
......
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