@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
67 lines (66 loc) • 4.53 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const BaseEditorInput_1 = require("./BaseEditorInput");
const rebass_1 = require("rebass");
const editorButtonsSearch_1 = require("./editorButtonsSearch");
const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
const editorButtonsObservable_1 = require("./editorButtonsObservable");
const CheckBox_1 = require("../CheckBox");
const EditorContext_1 = require("./EditorContext");
const editorButtonsAggregatedBoolean_1 = require("./editorButtonsAggregatedBoolean");
function EditorInputWithWhereClause(props) {
const moduleExpressionFunctions = props.api.internalApi
.getQueryLanguageService()
.getModuleExpressionFunctionsMap(props.module);
const reactiveExpressionFns = props.type === 'observable'
? moduleExpressionFunctions.observableFunctions
: moduleExpressionFunctions.aggregatedBooleanFunctions;
const whereClauseExpressionsFns = {
...moduleExpressionFunctions.booleanFunctions,
...moduleExpressionFunctions.scalarFunctions,
};
const [value, setValue] = (0, useProperty_1.default)(props, 'value', '', {
onChange: props.onChange,
});
const [reactiveValue, whereClauseValue] = value.split(' WHERE ');
const updateReactiveValue = (value) => {
let fullExpressionString = value;
if ((0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(value) && (0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(whereClauseValue)) {
fullExpressionString = `${value} WHERE ${whereClauseValue}`;
}
if ((0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(value)) {
setShowWhereClause(false);
}
setValue(fullExpressionString);
};
const updateWhereClauseValue = (value) => {
if ((0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(value)) {
setValue(reactiveValue);
}
else {
setValue(`${reactiveValue} WHERE ${value}`);
}
};
const { setSelectedFunction } = (0, EditorContext_1.useExpressionEditor)();
const [showWhereClause, setShowWhereClause] = (0, react_1.useState)((0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(whereClauseValue));
const queryName = `${(0, StringExtensions_1.CapitaliseFirstLetter)(props.type)}Query`;
return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" },
React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable_1.editorButtonsObservable : editorButtonsAggregatedBoolean_1.editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }),
React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 2, pl: 3 },
"Add a ",
React.createElement("i", null, "WHERE"),
" Clause to narrow the scope of the Query"),
React.createElement(CheckBox_1.CheckBox, { disabled: (0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(reactiveValue), checked: showWhereClause, style: { alignItems: 'center' }, onChange: (checked) => {
setShowWhereClause(checked);
if (!checked) {
// reset whereClause value if textarea is hidden
updateWhereClauseValue(null);
}
}, pl: 3 }, "WHERE"),
showWhereClause && (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'secondary', disabled: (0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))));
}
exports.default = EditorInputWithWhereClause;