@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
154 lines (153 loc) • 7.96 kB
JavaScript
import * as React from 'react';
import { Tabs } from '../../../components/Tabs';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { CheckBox } from '../../../components/CheckBox';
import { CodeBlock } from '../../../components/CodeBlock';
import { Box, Flex, Text } from 'rebass';
import { ValueOptionsTags } from '../../Components/ValueSelector';
import { StyleComponent } from '../../Components/StyleComponent';
import ObjectFactory from '../../../Utilities/ObjectFactory';
import { useAdaptable } from '../../AdaptableContext';
import { StylePreview } from '../../../components/StylePreview';
import Panel from '../../../components/Panel';
import { Select } from '../../../components/Select';
const HighlightStyle = (props) => {
const adaptable = useAdaptable();
const options = [
{
label: 'Use Message Type',
onClick: () => {
props.onChange(true);
},
},
{
label: 'Custom Style',
onClick: () => {
const initialStyle = ObjectFactory.CreateEmptyStyle();
props.onChange(initialStyle);
},
},
];
const options2 = [
{
label: 'Use Message Type',
value: 'system',
},
{
label: 'Custom Style',
value: 'custom',
},
];
return (React.createElement(Box, { "data-name": props.dataName },
React.createElement(Flex, null,
React.createElement(CheckBox, { mr: 2, style: { alignItems: 'flex-start' }, checked: Boolean(props.highlight), onChange: (checked) => {
props.onChange(checked);
} }, props.label),
Boolean(props.highlight) && (React.createElement(Select, { options: options2, value: typeof props.highlight === 'boolean' ? 'system' : 'custom', onChange: (value) => {
if (value === 'system') {
props.onChange(true);
}
else {
const initialStyle = ObjectFactory.CreateEmptyStyle();
props.onChange(initialStyle);
}
} }))),
typeof props.highlight === 'object' && (React.createElement(Panel, { margin: 2 },
React.createElement(Box, { paddingLeft: 3 },
React.createElement(StyleComponent, { headless: true, api: adaptable.api, Style: props.highlight, UpdateStyle: (style) => {
props.onChange(style);
} }))))));
};
export const renderAlertBehaviourWizardSummary = (alertDefinition) => {
const { api } = useOnePageAdaptableWizardContext();
return renderAlertBehaviourSummary(alertDefinition, api);
};
export const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
const { AlertProperties = {} } = alert;
const values = [
AlertProperties.PreventEdit ? { label: 'Prevent Cell Edit', id: 'preventCellEdit' } : null,
AlertProperties.HighlightCell ? { label: 'Highlight Cell', id: 'highlightCell' } : null,
AlertProperties.HighlightRow ? { label: 'Highlight Row', id: 'highlightRow' } : null,
AlertProperties.JumpToCell ? { label: 'Jump To Cell', id: 'jumptocell' } : null,
AlertProperties.JumpToRow ? { label: 'Jump To Row', id: 'jumptorow' } : null,
AlertProperties.ShowInDiv
? {
label: (React.createElement(React.Fragment, null,
"Show in ",
React.createElement(CodeBlock, { ml: 1, p: 0 }, `<div />`))),
id: 'showInDiv',
}
: null,
AlertProperties.LogToConsole ? { label: 'Log To Console', id: 'logtoconsole' } : null,
].filter(Boolean);
if (!values.length) {
values.push({
label: 'No ' + api.internalApi.getCorrectEnglishVariant('Behaviour') + ' Selected',
id: 'none',
});
}
return (React.createElement(ValueOptionsTags, { allowWrap: allowWrap, options: values, value: values.map((v) => v.id), readOnly: true, toIdentifier: (x) => x.id, toLabel: (x) => {
if (x.id === 'highlightCell' && typeof AlertProperties.HighlightCell === 'object') {
return (React.createElement(StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightCell }, "Highlight Cell"));
}
if (x.id === 'highlightRow' && typeof AlertProperties.HighlightRow === 'object') {
return (React.createElement(StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightRow }, "Highlight Row"));
}
return React.createElement(React.Fragment, null, x.label);
} }));
};
export const AlertBehaviourWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const { AlertProperties = {} } = data;
const rowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(data);
// data change only
const hasPreventCellEdit = props.alertType === 'Validation';
// except row change
const hasHighlightCell = props.alertType !== 'RowChange';
// except row removed
const hasHighlightRow = !rowRemovedAlert;
// except row changed
const hasJumpToCell = props.alertType !== 'RowChange';
// for all
const showInSeparateDiv = true;
// for all
const logToConsole = true;
// except row removed
const hasJumpToRow = !rowRemovedAlert;
const onChange = (AlertProperties) => {
props.onChange({
...data,
AlertProperties: {
...data.AlertProperties,
...AlertProperties,
},
});
};
return (React.createElement(Tabs, null,
React.createElement(Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),
React.createElement(Tabs.Content, null,
hasPreventCellEdit && (React.createElement(CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, disabled: true },
"Prevent Cell Edit",
React.createElement(Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)"))),
hasHighlightCell && (React.createElement(HighlightStyle, { dataName: "highlight-cell", highlight: AlertProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
onChange({ HighlightCell });
} })),
hasHighlightRow && (React.createElement(HighlightStyle, { dataName: "highlight-row", highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
onChange({ HighlightRow });
} })),
hasJumpToCell && (React.createElement(CheckBox, { "data-name": "jump-to-cell", checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
onChange({ JumpToCell });
} }, "Jump To Cell")),
hasJumpToRow && (React.createElement(CheckBox, { "data-name": "jump-to-row", checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
onChange({ JumpToRow });
} }, "Jump To Row")),
showInSeparateDiv && (React.createElement(CheckBox, { "data-name": "show-in-div", checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
onChange({ ShowInDiv });
} },
"Show in separate ",
React.createElement(CodeBlock, null, `<div />`),
" element")),
logToConsole && (React.createElement(CheckBox, { "data-name": "log-to-console", checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
onChange({ LogToConsole });
} }, "Log To Console")))));
};