@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
57 lines (56 loc) • 5.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataChangeHistoryViewPanelControl = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
const rebass_1 = require("rebass");
const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
const AdaptableContext_1 = require("../AdaptableContext");
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const icons_1 = require("../../components/icons");
const DataChangeHistoryViewPanelControl = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const dispatch = (0, react_redux_1.useDispatch)();
const onChangeHistoryEnable = React.useCallback(() => dispatch((0, InternalRedux_1.DataChangeHistoryEnable)()), []);
const onChangeHistoryDisable = React.useCallback(() => dispatch((0, InternalRedux_1.DataChangeHistoryDisable)()), []);
const onChangeHistorySuspend = React.useCallback(() => dispatch((0, InternalRedux_1.DataChangeHistorySuspend)()), []);
const onChangeHistoryResume = React.useCallback(() => dispatch((0, InternalRedux_1.DataChangeHistoryResume)()), []);
const handleOpenPopup = React.useCallback(() => {
adaptable.api.settingsPanelApi.openSettingsPanel('DataChangeHistory');
}, []);
const dataChangeHistoryState = (0, react_redux_1.useSelector)((state) => state.Internal.DataChangeHistory);
const changeHistoryMode = dataChangeHistoryState.currentMode;
const activationTime = dataChangeHistoryState.enableTime;
const suspensionTime = dataChangeHistoryState.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(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
suspended && (React.createElement(ButtonPlay_1.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 && (React.createElement(ButtonPause_1.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) && (React.createElement(ButtonStop_1.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 = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
enabled && (React.createElement(Tooltip_1.default, { label: !!activationTime && `since ${(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}` },
React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
suspended && (React.createElement(Tooltip_1.default, { label: !!suspensionTime && `since ${(0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat })}` },
React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate Data Tracking"))));
return (React.createElement(rebass_1.Flex, { flexDirection: 'row' },
buttonPanel,
statusPanel,
React.createElement(rebass_1.Flex, { ml: 2, alignItems: "center" },
React.createElement(SimpleButton_1.default, { onClick: handleOpenPopup, variant: "text" },
React.createElement(icons_1.Icon, { name: "open-in-new" }),
React.createElement(rebass_1.Box, { ml: 1 }, "Show")))));
};
exports.DataChangeHistoryViewPanelControl = DataChangeHistoryViewPanelControl;