@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
26 lines (25 loc) • 1.39 kB
JavaScript
import * as React from 'react';
import { useAdaptable } from '../../View/AdaptableContext';
export const ExpressionPreview = (props) => {
const adaptableApi = useAdaptable().api;
const displayColumnFriendlyNames = adaptableApi.optionsApi.getExpressionOptions()?.displayColumnFriendlyNamesForExpressions;
if (!displayColumnFriendlyNames) {
return React.createElement(React.Fragment, null, adaptableApi.expressionApi.getAdaptableQueryExpression(props.query));
}
const expressionWithFriendlyNames = adaptableApi.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(props.query);
// '[Column Name] > 2' => ['[Column Name]', '>', '2']
// not the prettiest
const strWithMarkedGroupes = expressionWithFriendlyNames.replace(/\]/gi, '],').split(',');
return (
/**
* The etra wrapper is neede because the tag has display inline-flex and makes the content inside <i> to be displayed on
* multiple lines when the expression is too long.
*
* The div allows the text to flow normally.
*/
(React.createElement("div", null, strWithMarkedGroupes.map((part, index) => {
const partEl = part.includes('[') ? React.createElement("i", null, part.replace(/[\[\]]/g, '')) : part;
return React.createElement(React.Fragment, { key: index }, partEl);
})))
);
};