@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
37 lines (36 loc) • 4.58 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
import { ButtonPause } from '../Components/Buttons/ButtonPause';
import { ButtonStop } from '../Components/Buttons/ButtonStop';
import { DateFormatter } from '../../Utilities/Helpers/DisplayFormatHelper';
import Tooltip from '../../components/Tooltip';
import { useAdaptable } from '../AdaptableContext';
import SimpleButton from '../../components/SimpleButton';
import { Icon } from '../../components/icons';
import { Box, Flex } from '../../components/Flex';
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 = useSelector((state) => state.Internal.DataChangeHistory.currentMode);
const activationTime = useSelector((state) => state.Internal.DataChangeHistory.enableTime);
const suspensionTime = useSelector((state) => state.Internal.DataChangeHistory.suspendTime);
const enabled = changeHistoryMode === 'ACTIVE';
const disabled = changeHistoryMode === 'INACTIVE';
const suspended = changeHistoryMode === 'SUSPENDED';
const gap = props.gap ?? 'var(--ab-base-space)';
const buttonsPaddingY = props.buttonsPaddingY ?? 2;
const buttonPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY }, children: [disabled && (_jsx(ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })), suspended && (_jsx(ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })), enabled && (_jsx(ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })), (enabled || suspended) && (_jsx(ButtonStop, { "aria-label": "Deactivate Data Change History", 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 = (_jsxs(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap }, children: [enabled && (_jsx(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}`, children: _jsx(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success", children: "Active" }) })), suspended && (_jsx(Tooltip, { label: !!suspensionTime && `since ${DateFormatter(suspensionTime, { Pattern: dateFormat })}`, children: _jsx(Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn", children: "Suspended" }) })), disabled && (_jsx(Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2", children: "Activate Data Tracking" }))] }));
return (_jsxs(Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel, _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsxs(SimpleButton, { onClick: handleOpenPopup, variant: "text", children: [_jsx(Icon, { name: "open-in-new" }), _jsx(Box, { className: "twa:ml-1", children: "Show" })] }) })] }));
};