Commit 3c78df97 authored by wuyongsheng's avatar wuyongsheng

fix: 展开收起实现优化

parent d993a5b6
import _ from "lodash"; import _ from "lodash";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useMemo, useRef, useState } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { import {
...@@ -20,6 +20,7 @@ import MySwitch from "@/components/mui/MySwitch"; ...@@ -20,6 +20,7 @@ import MySwitch from "@/components/mui/MySwitch";
import Tabs from "@/components/mui/Tabs"; import Tabs from "@/components/mui/Tabs";
import { getCustomTemplateParameterCheckResult } from "../../util"; import { getCustomTemplateParameterCheckResult } from "../../util";
import MyTooltip from "@/components/mui/MyTooltip"; import MyTooltip from "@/components/mui/MyTooltip";
import { useSize } from "ahooks";
import styles from "./index.module.css"; import styles from "./index.module.css";
...@@ -30,18 +31,13 @@ type IParameterSettingProps = { ...@@ -30,18 +31,13 @@ type IParameterSettingProps = {
}; };
const ParameterSetting = (props: IParameterSettingProps) => { const ParameterSetting = (props: IParameterSettingProps) => {
const { templateConfigInfo, setTemplateConfigInfo, taskId } = props; // 算子大数组 const { templateConfigInfo, setTemplateConfigInfo, taskId } = props; // 算子大数组
const [descHeight, setDescHeight] = useState(0); // 算子描述的高度 用来完成描述展开收起功能
const [isShowAllDese, setIsShowAllDese] = useState(false); // 是否展示全部描述 const [isShowAllDese, setIsShowAllDese] = useState(false); // 是否展示全部描述
const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制 const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
const [fileSelectType, setFileSelectType] = useState<FileSelectType>("path"); const [fileSelectType, setFileSelectType] = useState<FileSelectType>("path");
const [parameterName, setParameterName] = useState(""); // 当前算子中的parameters中正在编辑饿parameter(参数) const [parameterName, setParameterName] = useState(""); // 当前算子中的parameters中正在编辑饿parameter(参数)
const resizeRef = useRef<HTMLDivElement>(null);
const div = document.getElementById("descHeight"); // 算子描述的元素(不限高)用来完成描述展开收起功能
useEffect(() => { const size = useSize(resizeRef) ;
if (div) {
setDescHeight(div.offsetHeight);
}
}, [div]);
// 文件夹路线选择器弹窗 // 文件夹路线选择器弹窗
const handleFileSelectOnClose = () => { const handleFileSelectOnClose = () => {
...@@ -525,13 +521,14 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -525,13 +521,14 @@ const ParameterSetting = (props: IParameterSettingProps) => {
{taskInfo.description || "-"} {taskInfo.description || "-"}
</div> </div>
<div <div
ref={resizeRef}
className={classNames({ className={classNames({
[styles.taskDescriptionAll]: isShowAllDese, [styles.taskDescriptionAll]: isShowAllDese,
[styles.taskDescription]: !isShowAllDese, [styles.taskDescription]: !isShowAllDese,
})} })}
> >
{taskInfo.description || "-"} {taskInfo.description || "-"}
{descHeight > 60 && ( {size && size?.height >= 60 && (
<span <span
className={styles.descButton} className={styles.descButton}
onClick={() => setIsShowAllDese(!isShowAllDese)} onClick={() => setIsShowAllDese(!isShowAllDese)}
......
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