@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
31 lines (30 loc) • 1.92 kB
JavaScript
import * as React from 'react';
import { Flex } from 'rebass';
import { useAdaptable } from '../../View/AdaptableContext';
import { CheckBox } from '../CheckBox';
import EditorButton from './EditorButton';
export const NamedQueryEditor = (props) => {
const adaptable = useAdaptable();
const [showColumnIds, setShowColumnIds] = React.useState(false);
const [inlineQuery, setInlineQuery] = React.useState(false);
return (React.createElement(Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked) }, "Show Column IDs"),
React.createElement(CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked) }, "Inline Query"),
props.namedQueries.map((namedQuery) => (React.createElement(Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
padding: 3,
marginTop: 'var(--ab-space-2)',
marginBottom: 'var(--ab-space-2)',
width: '100%',
}, backgroundColor: "primarylight" },
' ',
React.createElement(EditorButton, { width: "100%", height: "100%", style: {
background: 'var(--ab-color-primary)',
cursor: 'grab',
}, data: inlineQuery ? namedQuery.BooleanExpression : `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
React.createElement(Flex, { alignItems: "start", style: {
padding: 5,
} }, showColumnIds
? namedQuery.BooleanExpression
: adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
};