From 992233ab7d847b3e2ffc3da42628cd497cd6c481 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Wed, 8 Jun 2022 17:20:12 +0800 Subject: [PATCH] feat: Support auto close/expend quota info when create instance 1. Update InfoButton component to support auto close/expend 2. Support auto close/expend quota info when count/size value change in the create instance form Change-Id: Ida13abe3463af7dc949c51ade267c64029770c93 --- src/components/InfoButton/index.jsx | 131 ++++++++++++++++++++++++---- src/components/QuotaChart/Ring.jsx | 1 + src/components/StepForm/index.jsx | 3 +- src/components/StepForm/index.less | 4 +- src/locales/en.json | 3 + src/locales/zh.json | 3 + 6 files changed, 127 insertions(+), 18 deletions(-) diff --git a/src/components/InfoButton/index.jsx b/src/components/InfoButton/index.jsx index b9d87cc0..a699b89e 100644 --- a/src/components/InfoButton/index.jsx +++ b/src/components/InfoButton/index.jsx @@ -12,33 +12,134 @@ // See the License for the specific language governing permissions and // limitations under the License. -import React, { useState } from 'react'; -import { Button, Card } from 'antd'; +import React, { useState, useEffect } from 'react'; +import { Button, Card, Tooltip, Switch } from 'antd'; import { ExpandOutlined, CompressOutlined } from '@ant-design/icons'; -export default function InfoButton(props) { - const { content, defaultCollapsed = false, title, size = 'small' } = props; - const [collapsed, setCollapsed] = useState(defaultCollapsed); +const seconds = 5; - const onChangeCollapsed = () => { - setCollapsed(!collapsed); +export default function InfoButton(props) { + const { + content, + defaultCollapsed = false, + size = 'small', + ableAuto = true, + tip = t( + 'When auto-expand/close is enabled, if there is no operation in the pop-up window, the pop-up window will be closed automatically after { seconds } seconds, and it will be automatically expanded when the displayed content changes.', + { seconds } + ), + checkValue = '', + } = props; + const [collapsed, setCollapsed] = useState(defaultCollapsed); + const [auto, setAuto] = useState(ableAuto); + const [timer, setTimer] = useState(null); + const [hover, setHover] = useState(false); + + const clearTimer = () => { + if (timer) { + clearTimeout(timer); + } + setTimer(null); + }; + + const open = () => { + setCollapsed(false); + }; + + const close = () => { + setCollapsed(true); + clearTimer(); + }; + + const startTimer = () => { + if (collapsed) { + return; + } + if (timer) { + clearTimer(); + } + const newTimer = setTimeout(() => { + if (!collapsed) { + close(); + } + }, seconds * 1000); + setTimer(newTimer); + }; + + useEffect(() => { + if (!auto) { + return; + } + if (!collapsed) { + if (hover) { + clearTimer(); + } else { + startTimer(); + } + } + }, [collapsed, hover]); + + useEffect(() => { + if (auto) { + open(); + startTimer(); + } + }, [checkValue]); + + const onChangeAuto = (checked) => { + setAuto(checked); + }; + + const renderSwitch = () => { + if (!ableAuto) { + return null; + } + return ( + + + + ); + }; + + const onMouseEnter = () => { + setHover(true); + }; + + const onMouseLeave = () => { + setHover(false); }; if (collapsed) { return ( - +
+ + + +
); } const closeButton = ( - + + + ); return ( -
- +
+ {content}
diff --git a/src/components/QuotaChart/Ring.jsx b/src/components/QuotaChart/Ring.jsx index 95002d43..038b99f0 100644 --- a/src/components/QuotaChart/Ring.jsx +++ b/src/components/QuotaChart/Ring.jsx @@ -128,6 +128,7 @@ export default function Ring(props) { fontSize: '14', fill: getUsedValueColor(percent), textAlign: 'center', + fontWeight: 'bold', }} /> diff --git a/src/components/StepForm/index.jsx b/src/components/StepForm/index.jsx index dbc5c429..3e141989 100644 --- a/src/components/StepForm/index.jsx +++ b/src/components/StepForm/index.jsx @@ -447,9 +447,10 @@ export default class BaseStepForm extends React.Component { if (!content) { return null; } + const checkValue = JSON.stringify(this.quotaInfo); return (
- +
); } diff --git a/src/components/StepForm/index.less b/src/components/StepForm/index.less index 339eb767..a4526767 100644 --- a/src/components/StepForm/index.less +++ b/src/components/StepForm/index.less @@ -82,9 +82,9 @@ top: 95px; right: 30px; z-index: 100; - background-color: red; + background-color: #fff; border-radius: 5px; - box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 9%); + box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 20%); :global { .ant-card-head { diff --git a/src/locales/en.json b/src/locales/en.json index f866d52d..4b5355ce 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -345,6 +345,7 @@ "Click to show detail": "Click to show detail", "Clone Volume": "Clone Volume", "Clone volume": "Clone volume", + "Close": "Close", "Close External Gateway": "Close External Gateway", "Close all notifications.": "Close all notifications.", "Close external gateway": "Close external gateway", @@ -855,6 +856,7 @@ "Evictions": "Evictions", "Execution Result": "Execution Result", "Exit Policy": "Exit Policy", + "Expand": "Expand", "Expand Advanced Options": "Expand Advanced Options", "Expired Time": "Expired Time", "Expires At": "Expires At", @@ -2472,6 +2474,7 @@ "Welcome": "Welcome", "Welcome, {name}": "Welcome, {name}", "Western Sahara": "Western Sahara", + "When auto-expand/close is enabled, if there is no operation in the pop-up window, the pop-up window will be closed automatically after { seconds } seconds, and it will be automatically expanded when the displayed content changes.": "When auto-expand/close is enabled, if there is no operation in the pop-up window, the pop-up window will be closed automatically after { seconds } seconds, and it will be automatically expanded when the displayed content changes.", "When the computing service starts the recycling instance interval, the instance will be stored in the recycling bin after deletion, and will be retained according to the corresponding time interval. You can choose to restore it within this period. After successful recovery, the status of the instance is running and related resources remain unchanged.": "When the computing service starts the recycling instance interval, the instance will be stored in the recycling bin after deletion, and will be retained according to the corresponding time interval. You can choose to restore it within this period. After successful recovery, the status of the instance is running and related resources remain unchanged.", "When the volume is \"bootable\" and the status is \"available\", it can be used as a startup source to create an instance.": "When the volume is \"bootable\" and the status is \"available\", it can be used as a startup source to create an instance.", "When you do online backup of the volume that has been bound, you need to pay attention to the following points:": "When you do online backup of the volume that has been bound, you need to pay attention to the following points:", diff --git a/src/locales/zh.json b/src/locales/zh.json index 0dd66c9c..6d71dce6 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -345,6 +345,7 @@ "Click to show detail": "点击查看详情", "Clone Volume": "克隆云硬盘", "Clone volume": "克隆云硬盘", + "Close": "关闭", "Close External Gateway": "关闭公网网关", "Close all notifications.": "关闭所有消息提示", "Close external gateway": "关闭公网网关", @@ -855,6 +856,7 @@ "Evictions": "", "Execution Result": "执行结果", "Exit Policy": "退出策略", + "Expand": "展开", "Expand Advanced Options": "展开高级选项", "Expired Time": "到期时间", "Expires At": "到期时间", @@ -2472,6 +2474,7 @@ "Welcome": "欢迎", "Welcome, {name}": "欢迎，登录{name}", "Western Sahara": "西撒哈拉", + "When auto-expand/close is enabled, if there is no operation in the pop-up window, the pop-up window will be closed automatically after { seconds } seconds, and it will be automatically expanded when the displayed content changes.": "开启自动展开/关闭时，如在该弹窗内无操作，将在 { seconds } 秒后自动关闭弹窗，当展示内容有变化时，将自动展开。", "When the computing service starts the recycling instance interval, the instance will be stored in the recycling bin after deletion, and will be retained according to the corresponding time interval. You can choose to restore it within this period. After successful recovery, the status of the instance is running and related resources remain unchanged.": "当计算服务开启回收实例间隔时，删除后云主机会存放在回收站，按对应的时间间隔保留，在此期限内可以选择恢复。恢复成功后的云主机状态为运行中，且相关资源保持不变。", "When the volume is \"bootable\" and the status is \"available\", it can be used as a startup source to create an instance.": "云硬盘为“可启用”并且状态为“可用”时，可以作为启动源来创建云主机。", "When you do online backup of the volume that has been bound, you need to pay attention to the following points:": "当您对已经绑定的硬盘做在线备份时，需要注意以下几点：",