@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
48 lines (47 loc) • 2.81 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StatusBarPanel = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
const AdaptablePopover_1 = require("../AdaptablePopover");
const Flex_1 = require("../../components/Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
/**
* Statusbar sub panel are similar to vs code:
* - text
* - action
* - icon
*/
const StatusBarPanel = (props) => {
const { icon, content, popover, popoverMinWidth, view, onAction, extraActions, triggerActionOnWrapperClick = true, tooltip, ...flexProps } = props;
const handleAction = () => onAction();
if (view) {
const View = view;
return React.createElement(View, null);
}
const baseClassName = 'ab-StatusBar__SubPanel';
const handleIconClick = React.useCallback(() => {
handleAction();
}, []);
const shouldTriggerActionOnWrapperClick = triggerActionOnWrapperClick && !popover;
const handleWrapperClick = React.useCallback(() => {
// handle action only if there is no popover
if (shouldTriggerActionOnWrapperClick) {
handleAction();
}
}, [popover, triggerActionOnWrapperClick]);
// popover
const popoverContent = typeof popover === 'function'
? React.createElement(popover)
: popover;
const preparedContent = typeof content === 'function'
? React.createElement(content)
: content;
return (React.createElement(Flex_1.Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: (0, clsx_1.default)(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick },
props.icon && (React.createElement(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })),
popover ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent),
ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && (React.createElement(Flex_1.Box, { className: "twa:ml-1" }, extraActions?.map?.((action, index) => React.createElement(action, { key: index }))))));
};
exports.StatusBarPanel = StatusBarPanel;