@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
116 lines (115 loc) • 5.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptableOptionsForm = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const CheckBox_1 = require("../../../components/CheckBox");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
const MetamodelService_1 = require("../../../Utilities/Services/MetamodelService");
const AdaptablePopover_1 = require("../../AdaptablePopover");
const LABEL_WIDTH = 250;
const SUPPORTED_PRIMITEVE_TYPES = ['s', 'n', 'b'];
const OptionInput = (props) => {
const { name, defaultValue, value, description, uiLabel } = props.option;
const label = uiLabel ?? StringExtensions_1.default.Humanize(name);
let input = React.createElement(React.Fragment, null);
const info = (React.createElement(rebass_1.Box, { ml: 2 },
React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [description] })));
const handleInputChange = (event) => props.onChange({ ...props.option, value: event.currentTarget.value });
const handleCheckboxChange = (checked) => props.onChange({ ...props.option, value: checked });
// option is mutated to acomodate complex types overrides
const option = { ...props.option };
const isOptionNonHomogenusUnion = (option) => {
const isUnion = option.kind.includes('|');
return isUnion && option.kind.split('|').some((unionEl) => !/['"]/.test(unionEl));
};
if (isOptionNonHomogenusUnion(option)) {
// pick the first type
const newKind = option.kind
.split('|')
.find((unionEl) => SUPPORTED_PRIMITEVE_TYPES.includes(unionEl.trim()))
.trim();
if (newKind)
option.kind = newKind;
}
const inputProps = {
value: value ?? defaultValue,
minWidth: 200,
fontSize: 3,
mr: 2,
};
if (option.kind.includes('|')) {
const options = option.kind
.split('|')
.map((str) => str.trim().replace(/['"]/g, ''))
.map((str) => ({
label: StringExtensions_1.default.Humanize(str),
onClick: () => props.onChange({ ...option, value: str }),
}));
input = (React.createElement(DropdownButton_1.default, { ...inputProps, columns: ['label'], items: options }, StringExtensions_1.default.Humanize(value)));
}
else {
switch (option.kind) {
case 'n':
input = React.createElement(Input_1.default, { type: "number", onChange: handleInputChange, ...inputProps });
break;
case 's':
input = React.createElement(Input_1.default, { type: "text", onChange: handleInputChange, ...inputProps });
break;
case 'b':
input = (React.createElement(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
break;
}
}
let content = (React.createElement(React.Fragment, null,
React.createElement(rebass_1.Flex, { minWidth: LABEL_WIDTH, alignItems: "center" },
label,
" ",
info),
input));
if (option.kind === 'b') {
content = (React.createElement(rebass_1.Flex, { alignItems: "center" },
input,
" ",
info));
}
return (React.createElement(rebass_1.Flex, { mb: 2, pl: 1 }, content));
};
const OptionsSection = (props) => {
if (!props.options.length) {
return React.createElement(React.Fragment, null);
}
return (React.createElement(rebass_1.Box, { mb: 2 },
React.createElement(HelpBlock_1.default, { mb: 2 }, props.name ?? props.id),
props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
};
const AdaptableOptionsForm = (props) => {
const nocodeOptions = React.useMemo(() => {
const metamodelService = new MetamodelService_1.MetamodelService(() => props.adaptableOptions);
return [...metamodelService.getGridInfoNoCodeOptions()];
}, [props.adaptableOptions]);
const handleOptionChange = (sectionName) => (option) => {
const adaptableOptions = { ...props.adaptableOptions };
if (sectionName === 'baseOptions') {
// @ts-ignore
adaptableOptions[option.name] = option.value;
}
else {
// @ts-ignore
adaptableOptions[sectionName] = {
// @ts-ignore
...adaptableOptions[sectionName],
[option.name]: option.value,
};
}
props.onChangedAdaptableOptions(adaptableOptions);
};
return (React.createElement(rebass_1.Box, { p: 2 }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
return (React.createElement(OptionsSection, { onChange: handleOptionChange(sectionName), key: sectionName, id: sectionName, name: containerLabel, options: items }));
})));
};
exports.AdaptableOptionsForm = AdaptableOptionsForm;