mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-11 03:58:14 +00:00
[improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. (#482)
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.
This commit is contained in:
tristanliu
@@ -1,4 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
|
||||
import type { Ref, ReactNode } from 'react';
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||
import { objToList } from '@/utils/utils';
|
||||
@@ -44,8 +45,7 @@ const { Option } = Select;
|
||||
|
||||
type Props = {
|
||||
initialValues?: any;
|
||||
submitFormDataState?: boolean;
|
||||
dateRangeTypeProps?: DateRangeType;
|
||||
dateRangeTypeProps: DateRangeType;
|
||||
onDateRangeChange: (value: string[], config: any) => void;
|
||||
onAdvanceSettingCollapsedChange?: (collapse: boolean) => void;
|
||||
onShortCutClick?: (shortCutId: string) => void;
|
||||
@@ -59,489 +59,506 @@ type Props = {
|
||||
disabledAdvanceSetting?: boolean;
|
||||
};
|
||||
|
||||
const DynamicDate: React.FC<Props> = ({
|
||||
initialValues,
|
||||
dateRangeTypeProps,
|
||||
submitFormDataState,
|
||||
onDateRangeChange,
|
||||
onAdvanceSettingCollapsedChange,
|
||||
onShortCutClick,
|
||||
onDateRangeStringAndDescChange,
|
||||
disabledAdvanceSetting = false,
|
||||
}: any) => {
|
||||
const initAdvacedConfigPanelCollapsed = () => {
|
||||
return !initialValues?.dateSettingType || initialValues?.shortCutId ? [] : ['1'];
|
||||
};
|
||||
const [advancedPanelFormResetState, setAdvancedPanelFormResetState] =
|
||||
useState(dateRangeTypeProps);
|
||||
|
||||
useEffect(() => {
|
||||
// 当时间粒度发生变化时重置高级设置面板
|
||||
resetAdvancedPanelForm(dateRangeTypeProps);
|
||||
}, [dateRangeTypeProps]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialValues?.dateSettingType !== DateSettingType.DYNAMIC) {
|
||||
return;
|
||||
}
|
||||
initShortCutByDateRangeChange(dateRangeTypeProps);
|
||||
}, [advancedPanelFormResetState]);
|
||||
|
||||
const resetAdvancedPanelForm = (dateRangeType: DateRangeType) => {
|
||||
const lastConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.LAST];
|
||||
const historyConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.HISTORY];
|
||||
switch (dateRangeType) {
|
||||
case DateRangeType.DAY:
|
||||
setAdvancedPanelFormData({
|
||||
...advancedPanelFormData,
|
||||
[DynamicAdvancedConfigType.LAST]: {
|
||||
...lastConfigTypeFormData,
|
||||
periodType: DatePeriodType.DAY,
|
||||
},
|
||||
[DynamicAdvancedConfigType.HISTORY]: {
|
||||
...historyConfigTypeFormData,
|
||||
periodType: DatePeriodType.DAY,
|
||||
},
|
||||
});
|
||||
break;
|
||||
case DateRangeType.WEEK:
|
||||
setAdvancedPanelFormData({
|
||||
...advancedPanelFormData,
|
||||
[DynamicAdvancedConfigType.LAST]: {
|
||||
...lastConfigTypeFormData,
|
||||
periodType: DatePeriodType.WEEK,
|
||||
},
|
||||
[DynamicAdvancedConfigType.HISTORY]: {
|
||||
...historyConfigTypeFormData,
|
||||
periodType: DatePeriodType.WEEK,
|
||||
},
|
||||
});
|
||||
break;
|
||||
case DateRangeType.MONTH:
|
||||
setAdvancedPanelFormData({
|
||||
...advancedPanelFormData,
|
||||
[DynamicAdvancedConfigType.LAST]: {
|
||||
...lastConfigTypeFormData,
|
||||
periodType: DatePeriodType.MONTH,
|
||||
},
|
||||
[DynamicAdvancedConfigType.HISTORY]: {
|
||||
...historyConfigTypeFormData,
|
||||
periodType: DatePeriodType.MONTH,
|
||||
},
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
setAdvancedPanelFormResetState(dateRangeType);
|
||||
setAdvacedConfigPanelCollapsed([]);
|
||||
};
|
||||
|
||||
const initAdvancedConfigType = () => {
|
||||
return initialValues?.dynamicAdvancedConfigType;
|
||||
};
|
||||
const initAdvancedPanelFormData = () => {
|
||||
let defaultConfig = {
|
||||
[DynamicAdvancedConfigType.LAST]: {
|
||||
number: 1,
|
||||
periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
|
||||
includesCurrentPeriod: false,
|
||||
},
|
||||
[DynamicAdvancedConfigType.HISTORY]: {
|
||||
number: 1,
|
||||
periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
|
||||
},
|
||||
[DynamicAdvancedConfigType.FROM_DATE_PERIOD]: {
|
||||
perPeriodType: PerDatePeriodType.PERDAY,
|
||||
},
|
||||
[DynamicAdvancedConfigType.FROM_DATE]: { date: dayjs() },
|
||||
};
|
||||
if (advancedPanelFormData) {
|
||||
defaultConfig = { ...advancedPanelFormData };
|
||||
}
|
||||
if (initialValues?.dynamicAdvancedConfigType) {
|
||||
const { dynamicAdvancedConfigType } = initialValues;
|
||||
const targetConfig = defaultConfig[dynamicAdvancedConfigType];
|
||||
if (!targetConfig) {
|
||||
return defaultConfig;
|
||||
}
|
||||
const mergeConfig = Object.keys(targetConfig).reduce((result, key) => {
|
||||
return {
|
||||
...result,
|
||||
[key]: initialValues[key],
|
||||
};
|
||||
}, {});
|
||||
defaultConfig[dynamicAdvancedConfigType] = mergeConfig;
|
||||
}
|
||||
return defaultConfig;
|
||||
};
|
||||
const initShortCutSettingChecked = () => {
|
||||
return initialValues?.shortCutId || '';
|
||||
};
|
||||
const [advacedConfigPanelCollapsed, setAdvacedConfigPanelCollapsed] = useState<string | string[]>(
|
||||
initAdvacedConfigPanelCollapsed(),
|
||||
);
|
||||
const [advancedConfigType, setAdvancedConfigType] = useState<
|
||||
DynamicAdvancedConfigType | undefined
|
||||
>(initAdvancedConfigType());
|
||||
const [advancedPanelFormData, setAdvancedPanelFormData] = useState<any>(
|
||||
initAdvancedPanelFormData(),
|
||||
);
|
||||
const [shortCutSettingChecked, setShortCutSettingChecked] = useState<string>(
|
||||
initShortCutSettingChecked(),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// 外部状态触发表单数据提交
|
||||
if (submitFormDataState && advancedConfigType) {
|
||||
updateAdvancedPanelFormData(
|
||||
advancedPanelFormData[advancedConfigType],
|
||||
advancedConfigType,
|
||||
true,
|
||||
);
|
||||
}
|
||||
}, [submitFormDataState]);
|
||||
|
||||
const init = () => {
|
||||
setAdvacedConfigPanelCollapsed(initAdvacedConfigPanelCollapsed());
|
||||
setAdvancedConfigType(initAdvancedConfigType());
|
||||
setAdvancedPanelFormData(initAdvancedPanelFormData());
|
||||
setShortCutSettingChecked(initShortCutSettingChecked());
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (initialValues?.dateSettingType === DateSettingType.DYNAMIC) {
|
||||
init();
|
||||
}
|
||||
}, [initialValues]);
|
||||
|
||||
const handleDateRangeChange = (dateRange: string[], config: any) => {
|
||||
onDateRangeChange(dateRange, {
|
||||
...config,
|
||||
dateSettingType: DateSettingType.DYNAMIC,
|
||||
});
|
||||
};
|
||||
|
||||
const updateAdvancedPanelFormData = (
|
||||
formData: any,
|
||||
configType: DynamicAdvancedConfigType,
|
||||
emitImmediately = false,
|
||||
const DynamicDate: React.FC<Props> = forwardRef(
|
||||
(
|
||||
{
|
||||
initialValues,
|
||||
dateRangeTypeProps,
|
||||
onDateRangeChange,
|
||||
onAdvanceSettingCollapsedChange,
|
||||
onShortCutClick,
|
||||
onDateRangeStringAndDescChange,
|
||||
disabledAdvanceSetting = false,
|
||||
}: Props,
|
||||
ref: Ref<any>,
|
||||
) => {
|
||||
const mergeConfigTypeData = {
|
||||
...advancedPanelFormData[configType],
|
||||
...formData,
|
||||
// shortCutId: shortCutSettingChecked,
|
||||
dateRangeType: dateRangeTypeProps,
|
||||
dynamicAdvancedConfigType: configType,
|
||||
useImperativeHandle(ref, () => ({
|
||||
dynamicDateUpdateAdvancedPanelFormData: () => {
|
||||
// return [...dataSource];
|
||||
if (advancedConfigType) {
|
||||
updateAdvancedPanelFormData(
|
||||
advancedPanelFormData[advancedConfigType],
|
||||
advancedConfigType,
|
||||
true,
|
||||
);
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
const initAdvacedConfigPanelCollapsed = () => {
|
||||
return !initialValues?.dateSettingType || initialValues?.shortCutId ? [] : ['1'];
|
||||
};
|
||||
const { dateRangeString, dateRangeStringDesc } = getDynamicDateRangeStringByParams(
|
||||
mergeConfigTypeData,
|
||||
configType,
|
||||
{ maxPartition: dayjs().format('YYYY-MM-DD') },
|
||||
const [advancedPanelFormResetState, setAdvancedPanelFormResetState] =
|
||||
useState(dateRangeTypeProps);
|
||||
|
||||
useEffect(() => {
|
||||
// 当时间粒度发生变化时重置高级设置面板
|
||||
resetAdvancedPanelForm(dateRangeTypeProps);
|
||||
}, [dateRangeTypeProps]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialValues?.dateSettingType !== DateSettingType.DYNAMIC) {
|
||||
return;
|
||||
}
|
||||
initShortCutByDateRangeChange(dateRangeTypeProps);
|
||||
}, [advancedPanelFormResetState]);
|
||||
|
||||
const resetAdvancedPanelForm = (dateRangeType: DateRangeType) => {
|
||||
const lastConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.LAST];
|
||||
const historyConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.HISTORY];
|
||||
switch (dateRangeType) {
|
||||
case DateRangeType.DAY:
|
||||
setAdvancedPanelFormData({
|
||||
...advancedPanelFormData,
|
||||
[DynamicAdvancedConfigType.LAST]: {
|
||||
...lastConfigTypeFormData,
|
||||
periodType: DatePeriodType.DAY,
|
||||
},
|
||||
[DynamicAdvancedConfigType.HISTORY]: {
|
||||
...historyConfigTypeFormData,
|
||||
periodType: DatePeriodType.DAY,
|
||||
},
|
||||
});
|
||||
break;
|
||||
case DateRangeType.WEEK:
|
||||
setAdvancedPanelFormData({
|
||||
...advancedPanelFormData,
|
||||
[DynamicAdvancedConfigType.LAST]: {
|
||||
...lastConfigTypeFormData,
|
||||
periodType: DatePeriodType.WEEK,
|
||||
},
|
||||
[DynamicAdvancedConfigType.HISTORY]: {
|
||||
...historyConfigTypeFormData,
|
||||
periodType: DatePeriodType.WEEK,
|
||||
},
|
||||
});
|
||||
break;
|
||||
case DateRangeType.MONTH:
|
||||
setAdvancedPanelFormData({
|
||||
...advancedPanelFormData,
|
||||
[DynamicAdvancedConfigType.LAST]: {
|
||||
...lastConfigTypeFormData,
|
||||
periodType: DatePeriodType.MONTH,
|
||||
},
|
||||
[DynamicAdvancedConfigType.HISTORY]: {
|
||||
...historyConfigTypeFormData,
|
||||
periodType: DatePeriodType.MONTH,
|
||||
},
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
setAdvancedPanelFormResetState(dateRangeType);
|
||||
setAdvacedConfigPanelCollapsed([]);
|
||||
};
|
||||
|
||||
const initAdvancedConfigType = () => {
|
||||
return initialValues?.dynamicAdvancedConfigType;
|
||||
};
|
||||
const initAdvancedPanelFormData = () => {
|
||||
let defaultConfig = {
|
||||
[DynamicAdvancedConfigType.LAST]: {
|
||||
number: 1,
|
||||
periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
|
||||
includesCurrentPeriod: false,
|
||||
},
|
||||
[DynamicAdvancedConfigType.HISTORY]: {
|
||||
number: 1,
|
||||
periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
|
||||
},
|
||||
[DynamicAdvancedConfigType.FROM_DATE_PERIOD]: {
|
||||
perPeriodType: PerDatePeriodType.PERDAY,
|
||||
},
|
||||
[DynamicAdvancedConfigType.FROM_DATE]: { date: dayjs() },
|
||||
};
|
||||
if (advancedPanelFormData) {
|
||||
defaultConfig = { ...advancedPanelFormData };
|
||||
}
|
||||
if (initialValues?.dynamicAdvancedConfigType) {
|
||||
const { dynamicAdvancedConfigType } = initialValues;
|
||||
const targetConfig = defaultConfig[dynamicAdvancedConfigType];
|
||||
if (!targetConfig) {
|
||||
return defaultConfig;
|
||||
}
|
||||
const mergeConfig = Object.keys(targetConfig).reduce((result, key) => {
|
||||
return {
|
||||
...result,
|
||||
[key]: initialValues[key],
|
||||
};
|
||||
}, {});
|
||||
defaultConfig[dynamicAdvancedConfigType] = mergeConfig;
|
||||
}
|
||||
return defaultConfig;
|
||||
};
|
||||
const initShortCutSettingChecked = () => {
|
||||
return initialValues?.shortCutId || '';
|
||||
};
|
||||
const [advacedConfigPanelCollapsed, setAdvacedConfigPanelCollapsed] = useState<
|
||||
string | string[]
|
||||
>(initAdvacedConfigPanelCollapsed());
|
||||
const [advancedConfigType, setAdvancedConfigType] = useState<
|
||||
DynamicAdvancedConfigType | undefined
|
||||
>(initAdvancedConfigType());
|
||||
const [advancedPanelFormData, setAdvancedPanelFormData] = useState<any>(
|
||||
initAdvancedPanelFormData(),
|
||||
);
|
||||
const [shortCutSettingChecked, setShortCutSettingChecked] = useState<string>(
|
||||
initShortCutSettingChecked(),
|
||||
);
|
||||
mergeConfigTypeData.dateRangeStringDesc = dateRangeStringDesc;
|
||||
onDateRangeStringAndDescChange?.({ dateRangeString, dateRangeStringDesc });
|
||||
if (emitImmediately) {
|
||||
handleDateRangeChange(dateRangeString, mergeConfigTypeData);
|
||||
}
|
||||
setAdvancedPanelFormData({
|
||||
...advancedPanelFormData,
|
||||
[configType]: mergeConfigTypeData,
|
||||
});
|
||||
};
|
||||
|
||||
// 根据当前时间粒度判断高级设置中时间区间选项哪些可用
|
||||
const isDisabledDatePeriodTypeOption = (
|
||||
datePeriodType: DatePeriodType,
|
||||
dateRangeType: DateRangeType,
|
||||
) => {
|
||||
switch (datePeriodType) {
|
||||
case DatePeriodType.DAY:
|
||||
return ![DateRangeType.DAY].includes(dateRangeType);
|
||||
case DatePeriodType.WEEK:
|
||||
return ![DateRangeType.DAY, DateRangeType.WEEK].includes(dateRangeType);
|
||||
case DatePeriodType.MONTH:
|
||||
return false;
|
||||
case DatePeriodType.YEAR:
|
||||
return false;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const init = () => {
|
||||
setAdvacedConfigPanelCollapsed(initAdvacedConfigPanelCollapsed());
|
||||
setAdvancedConfigType(initAdvancedConfigType());
|
||||
setAdvancedPanelFormData(initAdvancedPanelFormData());
|
||||
setShortCutSettingChecked(initShortCutSettingChecked());
|
||||
};
|
||||
|
||||
const getDatePeriodTypeOptions = (dateRangeType: DateRangeType) => {
|
||||
const list = objToList(datePeriodTypeMap);
|
||||
const optionList = list.reduce((result: any[], { value, label }: any) => {
|
||||
const isDisabled = isDisabledDatePeriodTypeOption(value, dateRangeType);
|
||||
if (isDisabled) {
|
||||
return result;
|
||||
useEffect(() => {
|
||||
if (initialValues?.dateSettingType === DateSettingType.DYNAMIC) {
|
||||
init();
|
||||
}
|
||||
result.push(
|
||||
<Option value={value} key={value}>
|
||||
{label}
|
||||
</Option>,
|
||||
}, [initialValues]);
|
||||
|
||||
const handleDateRangeChange = (dateRange: string[], config: any) => {
|
||||
onDateRangeChange(dateRange, {
|
||||
...config,
|
||||
dateSettingType: DateSettingType.DYNAMIC,
|
||||
});
|
||||
};
|
||||
|
||||
const updateAdvancedPanelFormData = (
|
||||
formData: any,
|
||||
configType: DynamicAdvancedConfigType,
|
||||
emitImmediately = false,
|
||||
) => {
|
||||
const mergeConfigTypeData = {
|
||||
...advancedPanelFormData[configType],
|
||||
...formData,
|
||||
// shortCutId: shortCutSettingChecked,
|
||||
dateRangeType: dateRangeTypeProps,
|
||||
dynamicAdvancedConfigType: configType,
|
||||
};
|
||||
const { dateRangeString, dateRangeStringDesc } = getDynamicDateRangeStringByParams(
|
||||
mergeConfigTypeData,
|
||||
configType,
|
||||
{ maxPartition: dayjs().format('YYYY-MM-DD') },
|
||||
);
|
||||
return result;
|
||||
}, []);
|
||||
return optionList;
|
||||
};
|
||||
mergeConfigTypeData.dateRangeStringDesc = dateRangeStringDesc;
|
||||
onDateRangeStringAndDescChange?.({ dateRangeString, dateRangeStringDesc });
|
||||
if (emitImmediately) {
|
||||
handleDateRangeChange(dateRangeString, mergeConfigTypeData);
|
||||
}
|
||||
setAdvancedPanelFormData({
|
||||
...advancedPanelFormData,
|
||||
[configType]: mergeConfigTypeData,
|
||||
});
|
||||
};
|
||||
|
||||
const isAdvancedConfigTypeRadioDisabled = (type: DynamicAdvancedConfigType) => {
|
||||
return type !== advancedConfigType;
|
||||
};
|
||||
// 根据当前时间粒度判断高级设置中时间区间选项哪些可用
|
||||
const isDisabledDatePeriodTypeOption = (
|
||||
datePeriodType: DatePeriodType,
|
||||
dateRangeType: DateRangeType,
|
||||
) => {
|
||||
switch (datePeriodType) {
|
||||
case DatePeriodType.DAY:
|
||||
return ![DateRangeType.DAY].includes(dateRangeType);
|
||||
case DatePeriodType.WEEK:
|
||||
return ![DateRangeType.DAY, DateRangeType.WEEK].includes(dateRangeType);
|
||||
case DatePeriodType.MONTH:
|
||||
return false;
|
||||
case DatePeriodType.YEAR:
|
||||
return false;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const initShortCutByDateRangeChange = (dateRangeType: DateRangeType, emitImmediately = false) => {
|
||||
const shortCutList = SHORT_CUT_ITEM_LIST.filter((item) => {
|
||||
return item.dateRangeType === dateRangeType;
|
||||
});
|
||||
const firstItem = shortCutList[0];
|
||||
if (firstItem) {
|
||||
handleShortCutChange(firstItem, emitImmediately);
|
||||
}
|
||||
};
|
||||
const getDatePeriodTypeOptions = (dateRangeType: DateRangeType) => {
|
||||
const list = objToList(datePeriodTypeMap);
|
||||
const optionList = list.reduce((result: any[], { value, label }: any) => {
|
||||
const isDisabled = isDisabledDatePeriodTypeOption(value, dateRangeType);
|
||||
if (isDisabled) {
|
||||
return result;
|
||||
}
|
||||
result.push(
|
||||
<Option value={value} key={value}>
|
||||
{label}
|
||||
</Option>,
|
||||
);
|
||||
return result;
|
||||
}, []);
|
||||
return optionList;
|
||||
};
|
||||
|
||||
const handleShortCutChange = (item: any, emitImmediately = true) => {
|
||||
const { id, advancedConfigType, initData } = item;
|
||||
// 设置选中状态
|
||||
setShortCutSettingChecked(id);
|
||||
// 设置快捷选项AdvancedConfigType类型
|
||||
setAdvancedConfigType(advancedConfigType);
|
||||
// 更新数据至表单数据并立即向上层组件传递
|
||||
updateAdvancedPanelFormData(initData, advancedConfigType, emitImmediately);
|
||||
if (emitImmediately) {
|
||||
// 触发快捷选项点击时间，上层组件关闭配置浮窗
|
||||
onShortCutClick?.(id);
|
||||
}
|
||||
};
|
||||
const isAdvancedConfigTypeRadioDisabled = (type: DynamicAdvancedConfigType) => {
|
||||
return type !== advancedConfigType;
|
||||
};
|
||||
|
||||
const handleAdvancedPanelFormChange = () => {
|
||||
// 当高级面板表单发生变化时，重置快捷选项为空
|
||||
setShortCutSettingChecked('');
|
||||
};
|
||||
const initShortCutByDateRangeChange = (
|
||||
dateRangeType: DateRangeType,
|
||||
emitImmediately = false,
|
||||
) => {
|
||||
const shortCutList = SHORT_CUT_ITEM_LIST.filter((item) => {
|
||||
return item.dateRangeType === dateRangeType;
|
||||
});
|
||||
const firstItem = shortCutList[0];
|
||||
if (firstItem) {
|
||||
handleShortCutChange(firstItem, emitImmediately);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.dateShortCutSettingContent}>
|
||||
<Row>
|
||||
{SHORT_CUT_ITEM_LIST.map((item) => {
|
||||
const { id, text, dateRangeType } = item;
|
||||
if (dateRangeType === dateRangeTypeProps) {
|
||||
return (
|
||||
<Col key={`row-col-${id}`}>
|
||||
<CheckableTag
|
||||
className={styles['ant-tag-checkable']}
|
||||
checked={shortCutSettingChecked === id}
|
||||
key={`row-col-tag-${id}`}
|
||||
onChange={() => {
|
||||
handleShortCutChange(item);
|
||||
}}
|
||||
>
|
||||
<div className={styles['tag-value-box']}>{text}</div>
|
||||
</CheckableTag>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
return undefined;
|
||||
})}
|
||||
</Row>
|
||||
</div>
|
||||
{!disabledAdvanceSetting && (
|
||||
<div className={styles.dateAdvancedSettingContent}>
|
||||
<Collapse
|
||||
// defaultActiveKey={['1']}
|
||||
activeKey={advacedConfigPanelCollapsed}
|
||||
onChange={(key: string | string[]) => {
|
||||
setAdvacedConfigPanelCollapsed(key);
|
||||
if (key.length === 0) {
|
||||
onAdvanceSettingCollapsedChange?.(false);
|
||||
return;
|
||||
const handleShortCutChange = (item: any, emitImmediately = true) => {
|
||||
const { id, advancedConfigType, initData } = item;
|
||||
// 设置选中状态
|
||||
setShortCutSettingChecked(id);
|
||||
// 设置快捷选项AdvancedConfigType类型
|
||||
setAdvancedConfigType(advancedConfigType);
|
||||
// 更新数据至表单数据并立即向上层组件传递
|
||||
updateAdvancedPanelFormData(initData, advancedConfigType, emitImmediately);
|
||||
if (emitImmediately) {
|
||||
// 触发快捷选项点击时间，上层组件关闭配置浮窗
|
||||
onShortCutClick?.(id);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdvancedPanelFormChange = () => {
|
||||
// 当高级面板表单发生变化时，重置快捷选项为空
|
||||
setShortCutSettingChecked('');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.dateShortCutSettingContent}>
|
||||
<Row>
|
||||
{SHORT_CUT_ITEM_LIST.map((item) => {
|
||||
const { id, text, dateRangeType } = item;
|
||||
if (dateRangeType === dateRangeTypeProps) {
|
||||
return (
|
||||
<Col key={`row-col-${id}`}>
|
||||
<CheckableTag
|
||||
className={styles['ant-tag-checkable']}
|
||||
checked={shortCutSettingChecked === id}
|
||||
key={`row-col-tag-${id}`}
|
||||
onChange={() => {
|
||||
handleShortCutChange(item);
|
||||
}}
|
||||
>
|
||||
<div className={styles['tag-value-box']}>{text}</div>
|
||||
</CheckableTag>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
onAdvanceSettingCollapsedChange?.(true);
|
||||
}}
|
||||
bordered={false}
|
||||
ghost={true}
|
||||
expandIconPosition="right"
|
||||
>
|
||||
<Panel
|
||||
header=""
|
||||
// collapsible={'disabled'}
|
||||
key="1"
|
||||
extra={
|
||||
<Space>
|
||||
<Link>高级设置</Link>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<Space>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.85)' }}>动态时间</div>
|
||||
<Tooltip
|
||||
title={`日期随着时间推移而更新。 若在1月1日设置查询日期为“今天”， 则第二天的查询日期为1月2日。`}
|
||||
>
|
||||
<QuestionCircleOutlined />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</div>
|
||||
<Radio.Group
|
||||
onChange={(e: RadioChangeEvent) => {
|
||||
const configType = e.target.value;
|
||||
setAdvancedConfigType(configType);
|
||||
updateAdvancedPanelFormData(advancedPanelFormData[configType], configType);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
value={advancedConfigType}
|
||||
>
|
||||
<Space direction="vertical">
|
||||
<Radio value={DynamicAdvancedConfigType.LAST}>
|
||||
<Space size={10}>
|
||||
<span className={styles.advancedSettingItemText}>最近</span>
|
||||
<InputNumber
|
||||
style={{ width: 120 }}
|
||||
placeholder="请输入数字"
|
||||
min={1}
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
|
||||
value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].number}
|
||||
onChange={(value: number | null) => {
|
||||
updateAdvancedPanelFormData(
|
||||
{ number: value },
|
||||
DynamicAdvancedConfigType.LAST,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
// defaultValue={DatePeriodType.DAY}
|
||||
style={{ width: 120 }}
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
|
||||
value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType}
|
||||
onClick={(e) => {
|
||||
// 禁止冒泡触发Radio点击后续逻辑
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onChange={(value: string) => {
|
||||
updateAdvancedPanelFormData(
|
||||
{ periodType: value },
|
||||
DynamicAdvancedConfigType.LAST,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
>
|
||||
{getDatePeriodTypeOptions(dateRangeTypeProps)}
|
||||
</Select>
|
||||
<Checkbox
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
|
||||
checked={
|
||||
advancedPanelFormData[DynamicAdvancedConfigType.LAST]
|
||||
.includesCurrentPeriod
|
||||
}
|
||||
onChange={(e) => {
|
||||
const isChecked = e.target.checked;
|
||||
updateAdvancedPanelFormData(
|
||||
{ includesCurrentPeriod: isChecked },
|
||||
DynamicAdvancedConfigType.LAST,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
>
|
||||
包含
|
||||
{
|
||||
datePeriodTypeWordingMap[
|
||||
advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType
|
||||
]
|
||||
}
|
||||
</Checkbox>
|
||||
</Space>
|
||||
</Radio>
|
||||
<Radio value={DynamicAdvancedConfigType.HISTORY}>
|
||||
<Space size={10}>
|
||||
<span className={styles.advancedSettingItemText}>过去第</span>
|
||||
|
||||
<InputNumber
|
||||
style={{ width: 120 }}
|
||||
placeholder="请输入数字"
|
||||
min={1}
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||
DynamicAdvancedConfigType.HISTORY,
|
||||
)}
|
||||
value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].number}
|
||||
// defaultValue={3}
|
||||
onChange={(value: number | null) => {
|
||||
updateAdvancedPanelFormData(
|
||||
{ number: value },
|
||||
DynamicAdvancedConfigType.HISTORY,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
// defaultValue={DatePeriodType.DAY}
|
||||
style={{ width: 120 }}
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||
DynamicAdvancedConfigType.HISTORY,
|
||||
)}
|
||||
value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].periodType}
|
||||
onClick={(e) => {
|
||||
// 禁止冒泡触发Radio点击后续逻辑
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onChange={(value: string) => {
|
||||
updateAdvancedPanelFormData(
|
||||
{ periodType: value },
|
||||
DynamicAdvancedConfigType.HISTORY,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
>
|
||||
{getDatePeriodTypeOptions(dateRangeTypeProps)}
|
||||
</Select>
|
||||
</Space>
|
||||
</Radio>
|
||||
<Radio value={DynamicAdvancedConfigType.FROM_DATE}>
|
||||
<Space size={10}>
|
||||
<span className={styles.advancedSettingItemText}>自从</span>
|
||||
<DatePicker
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||
DynamicAdvancedConfigType.FROM_DATE,
|
||||
)}
|
||||
value={dayjs(
|
||||
advancedPanelFormData[DynamicAdvancedConfigType.FROM_DATE].date,
|
||||
)}
|
||||
disabledDate={(current) => {
|
||||
return current && current > dayjs().endOf('day');
|
||||
}}
|
||||
picker={DateRangeTypeToPickerMap[dateRangeTypeProps]}
|
||||
onChange={(date, dateString) => {
|
||||
if (!date) {
|
||||
return;
|
||||
}
|
||||
const picker = DateRangeTypeToPickerMap[dateRangeTypeProps];
|
||||
|
||||
if (picker === DateRangePicker.WEEK) {
|
||||
date.startOf('week').format('YYYY-MM-DD');
|
||||
}
|
||||
if (picker === DateRangePicker.MONTH) {
|
||||
date.startOf('month').format('YYYY-MM-DD');
|
||||
}
|
||||
updateAdvancedPanelFormData(
|
||||
{ date },
|
||||
DynamicAdvancedConfigType.FROM_DATE,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
/>
|
||||
至此刻
|
||||
</Space>
|
||||
</Radio>
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
return undefined;
|
||||
})}
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
{!disabledAdvanceSetting && (
|
||||
<div className={styles.dateAdvancedSettingContent}>
|
||||
<Collapse
|
||||
// defaultActiveKey={['1']}
|
||||
activeKey={advacedConfigPanelCollapsed}
|
||||
onChange={(key: string | string[]) => {
|
||||
setAdvacedConfigPanelCollapsed(key);
|
||||
if (key.length === 0) {
|
||||
onAdvanceSettingCollapsedChange?.(false);
|
||||
return;
|
||||
}
|
||||
onAdvanceSettingCollapsedChange?.(true);
|
||||
}}
|
||||
bordered={false}
|
||||
ghost={true}
|
||||
expandIconPosition="right"
|
||||
>
|
||||
<Panel
|
||||
header=""
|
||||
// collapsible={'disabled'}
|
||||
key="1"
|
||||
extra={
|
||||
<Space>
|
||||
<Link>高级设置</Link>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<Space>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.85)' }}>动态时间</div>
|
||||
<Tooltip
|
||||
title={`日期随着时间推移而更新。 若在1月1日设置查询日期为“今天”， 则第二天的查询日期为1月2日。`}
|
||||
>
|
||||
<QuestionCircleOutlined />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</div>
|
||||
<Radio.Group
|
||||
onChange={(e: RadioChangeEvent) => {
|
||||
const configType = e.target.value;
|
||||
setAdvancedConfigType(configType);
|
||||
updateAdvancedPanelFormData(advancedPanelFormData[configType], configType);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
value={advancedConfigType}
|
||||
>
|
||||
<Space direction="vertical">
|
||||
<Radio value={DynamicAdvancedConfigType.LAST}>
|
||||
<Space size={10}>
|
||||
<span className={styles.advancedSettingItemText}>最近</span>
|
||||
<InputNumber
|
||||
style={{ width: 120 }}
|
||||
placeholder="请输入数字"
|
||||
min={1}
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||
DynamicAdvancedConfigType.LAST,
|
||||
)}
|
||||
value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].number}
|
||||
onChange={(value: number | null) => {
|
||||
updateAdvancedPanelFormData(
|
||||
{ number: value },
|
||||
DynamicAdvancedConfigType.LAST,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
// defaultValue={DatePeriodType.DAY}
|
||||
style={{ width: 120 }}
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||
DynamicAdvancedConfigType.LAST,
|
||||
)}
|
||||
value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType}
|
||||
onClick={(e) => {
|
||||
// 禁止冒泡触发Radio点击后续逻辑
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onChange={(value: string) => {
|
||||
updateAdvancedPanelFormData(
|
||||
{ periodType: value },
|
||||
DynamicAdvancedConfigType.LAST,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
>
|
||||
{getDatePeriodTypeOptions(dateRangeTypeProps)}
|
||||
</Select>
|
||||
<Checkbox
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||
DynamicAdvancedConfigType.LAST,
|
||||
)}
|
||||
checked={
|
||||
advancedPanelFormData[DynamicAdvancedConfigType.LAST]
|
||||
.includesCurrentPeriod
|
||||
}
|
||||
onChange={(e) => {
|
||||
const isChecked = e.target.checked;
|
||||
updateAdvancedPanelFormData(
|
||||
{ includesCurrentPeriod: isChecked },
|
||||
DynamicAdvancedConfigType.LAST,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
>
|
||||
包含
|
||||
{
|
||||
datePeriodTypeWordingMap[
|
||||
advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType
|
||||
]
|
||||
}
|
||||
</Checkbox>
|
||||
</Space>
|
||||
</Radio>
|
||||
<Radio value={DynamicAdvancedConfigType.HISTORY}>
|
||||
<Space size={10}>
|
||||
<span className={styles.advancedSettingItemText}>过去第</span>
|
||||
|
||||
<InputNumber
|
||||
style={{ width: 120 }}
|
||||
placeholder="请输入数字"
|
||||
min={1}
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||
DynamicAdvancedConfigType.HISTORY,
|
||||
)}
|
||||
value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].number}
|
||||
// defaultValue={3}
|
||||
onChange={(value: number | null) => {
|
||||
updateAdvancedPanelFormData(
|
||||
{ number: value },
|
||||
DynamicAdvancedConfigType.HISTORY,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
// defaultValue={DatePeriodType.DAY}
|
||||
style={{ width: 120 }}
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||
DynamicAdvancedConfigType.HISTORY,
|
||||
)}
|
||||
value={
|
||||
advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].periodType
|
||||
}
|
||||
onClick={(e) => {
|
||||
// 禁止冒泡触发Radio点击后续逻辑
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onChange={(value: string) => {
|
||||
updateAdvancedPanelFormData(
|
||||
{ periodType: value },
|
||||
DynamicAdvancedConfigType.HISTORY,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
>
|
||||
{getDatePeriodTypeOptions(dateRangeTypeProps)}
|
||||
</Select>
|
||||
</Space>
|
||||
</Radio>
|
||||
<Radio value={DynamicAdvancedConfigType.FROM_DATE}>
|
||||
<Space size={10}>
|
||||
<span className={styles.advancedSettingItemText}>自从</span>
|
||||
<DatePicker
|
||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||
DynamicAdvancedConfigType.FROM_DATE,
|
||||
)}
|
||||
value={dayjs(
|
||||
advancedPanelFormData[DynamicAdvancedConfigType.FROM_DATE].date,
|
||||
)}
|
||||
disabledDate={(current) => {
|
||||
return current && current > dayjs().endOf('day');
|
||||
}}
|
||||
picker={DateRangeTypeToPickerMap[dateRangeTypeProps]}
|
||||
onChange={(date, dateString) => {
|
||||
if (!date) {
|
||||
return;
|
||||
}
|
||||
const picker = DateRangeTypeToPickerMap[dateRangeTypeProps];
|
||||
|
||||
if (picker === DateRangePicker.WEEK) {
|
||||
date.startOf('week').format('YYYY-MM-DD');
|
||||
}
|
||||
if (picker === DateRangePicker.MONTH) {
|
||||
date.startOf('month').format('YYYY-MM-DD');
|
||||
}
|
||||
updateAdvancedPanelFormData(
|
||||
{ date },
|
||||
DynamicAdvancedConfigType.FROM_DATE,
|
||||
);
|
||||
handleAdvancedPanelFormChange();
|
||||
}}
|
||||
/>
|
||||
至此刻
|
||||
</Space>
|
||||
</Radio>
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default DynamicDate;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { InfoCircleOutlined, CalendarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
|
||||
import { Input, Tooltip, Popover, Space, Button, Select, Row, Col, Tag } from 'antd';
|
||||
import styles from './style.less';
|
||||
@@ -36,6 +36,8 @@ const MDatePicker: React.FC<Props> = ({
|
||||
onDateRangeTypeChange,
|
||||
onInit,
|
||||
}: any) => {
|
||||
const dynamicDateRef = useRef<any>({});
|
||||
|
||||
const getDynamicDefaultConfig = (dateRangeType: DateRangeType) => {
|
||||
const dynamicDefaultConfig = {
|
||||
shortCutId: 'last7Days',
|
||||
@@ -95,7 +97,6 @@ const MDatePicker: React.FC<Props> = ({
|
||||
const [dateRangesParams] = useState(() => {
|
||||
return initialValues ? generatorDateRangesParams(initialValues) : {};
|
||||
});
|
||||
const [confirmBtnClickState, setConfirmBtnClickState] = useState(false);
|
||||
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
@@ -153,9 +154,9 @@ const MDatePicker: React.FC<Props> = ({
|
||||
}
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
onInit?.({ dateRange: currentDateRange });
|
||||
}, []);
|
||||
// useEffect(() => {
|
||||
// onInit?.({ dateRange: currentDateRange });
|
||||
// }, []);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedDateRangeString(getSelectedDateRangeString());
|
||||
@@ -255,12 +256,6 @@ const MDatePicker: React.FC<Props> = ({
|
||||
initDefaultDynamicData({ latestDateMap });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
setConfirmBtnClickState(false);
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
useEffect(() => {
|
||||
const { dateRange } = dateRangesParams;
|
||||
setDateRangeStringShow(getDateRangeStringShow(dateRange));
|
||||
@@ -310,7 +305,6 @@ const MDatePicker: React.FC<Props> = ({
|
||||
</Row>
|
||||
</div>
|
||||
</ProCard>
|
||||
|
||||
<ProCard
|
||||
className={styles.dateProCard}
|
||||
title={'快捷选项'}
|
||||
@@ -320,10 +314,10 @@ const MDatePicker: React.FC<Props> = ({
|
||||
// extra="2019年9月28日"
|
||||
>
|
||||
<DynamicDate
|
||||
ref={dynamicDateRef}
|
||||
disabledAdvanceSetting={disabledAdvanceSetting}
|
||||
initialValues={dynamicParams}
|
||||
dateRangeTypeProps={dateRangeType}
|
||||
submitFormDataState={confirmBtnClickState}
|
||||
onDateRangeChange={handleDateRangeChange}
|
||||
onDateRangeStringAndDescChange={({ dateRangeString }) => {
|
||||
setCurrentDateRange(dateRangeString);
|
||||
@@ -333,7 +327,6 @@ const MDatePicker: React.FC<Props> = ({
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
|
||||
<ProCard
|
||||
className={styles.dateProCard}
|
||||
title={
|
||||
@@ -354,7 +347,6 @@ const MDatePicker: React.FC<Props> = ({
|
||||
onDateRangeChange={handleDateRangeChange}
|
||||
/>
|
||||
</ProCard>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
@@ -372,7 +364,7 @@ const MDatePicker: React.FC<Props> = ({
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
if (currentDateSettingType === DateSettingType.DYNAMIC) {
|
||||
setConfirmBtnClickState(true);
|
||||
dynamicDateRef.current.dynamicDateUpdateAdvancedPanelFormData();
|
||||
}
|
||||
setVisible(false);
|
||||
}}
|
||||
@@ -394,7 +386,7 @@ const MDatePicker: React.FC<Props> = ({
|
||||
<Space direction="vertical">
|
||||
<Popover
|
||||
content={content}
|
||||
// destroyTooltipOnHide={true}
|
||||
destroyTooltipOnHide={false}
|
||||
// title="Title"
|
||||
open={visible}
|
||||
trigger="click"
|
||||
|
||||
Reference in New Issue
Block a user