@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
53 lines (52 loc) • 4.63 kB
JavaScript
import * as React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
import { Box, Flex, Text } from 'rebass';
import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
import { ButtonPause } from '../Components/Buttons/ButtonPause';
import { ButtonStop } from '../Components/Buttons/ButtonStop';
import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
import Tooltip from '../../components/Tooltip';
import { useAdaptable } from '../AdaptableContext';
import SimpleButton from '../../components/SimpleButton';
import { Icon } from '../../components/icons';
export const DataChangeHistoryViewPanelControl = (props) => {
const adaptable = useAdaptable();
const dispatch = useDispatch();
const onChangeHistoryEnable = React.useCallback(() => dispatch(DataChangeHistoryEnable()), []);
const onChangeHistoryDisable = React.useCallback(() => dispatch(DataChangeHistoryDisable()), []);
const onChangeHistorySuspend = React.useCallback(() => dispatch(DataChangeHistorySuspend()), []);
const onChangeHistoryResume = React.useCallback(() => dispatch(DataChangeHistoryResume()), []);
const handleOpenPopup = React.useCallback(() => {
adaptable.api.settingsPanelApi.openSettingsPanel('DataChangeHistory');
}, []);
const { changeHistoryMode, activationTime, suspensionTime } = useSelector((state) => ({
changeHistoryMode: state.Internal.DataChangeHistory.currentMode,
activationTime: state.Internal.DataChangeHistory.enableTime,
suspensionTime: state.Internal.DataChangeHistory.suspendTime,
}));
const enabled = changeHistoryMode === 'ACTIVE';
const disabled = changeHistoryMode === 'INACTIVE';
const suspended = changeHistoryMode === 'SUSPENDED';
const gap = props.gap ?? 'var(--ab-space-1)';
const buttonsPaddingY = props.buttonsPaddingY ?? 2;
const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
disabled && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
suspended && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
enabled && (React.createElement(ButtonPause, { className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
(enabled || suspended) && (React.createElement(ButtonStop, { className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
enabled && (React.createElement(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}` },
React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
suspended && (React.createElement(Tooltip, { label: !!suspensionTime && `since ${DateFormatter(suspensionTime, { Pattern: dateFormat })}` },
React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
disabled && (React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate Data Tracking"))));
return (React.createElement(Flex, { flexDirection: 'row' },
buttonPanel,
statusPanel,
React.createElement(Flex, { ml: 2, alignItems: "center" },
React.createElement(SimpleButton, { onClick: handleOpenPopup, variant: "text" },
React.createElement(Icon, { name: "open-in-new" }),
React.createElement(Box, { ml: 1 }, "Show")))));
};