@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
142 lines (141 loc) • 9.17 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledColumnBadgeSection = exports.renderBadgeSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
const Tabs_1 = require("../../../components/Tabs");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
const PredicateEditor_1 = require("../../Components/PredicateEditor/PredicateEditor");
const StyleComponent_1 = require("../../Components/StyleComponent");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
const Badge_1 = require("../../Components/Badge");
const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponent");
const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
const Accordion_1 = require("../../../components/Accordion");
const CheckBox_1 = require("../../../components/CheckBox");
const BadgeEditor = (props) => {
const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const { badge, columnId, onChange } = props;
// badges evaluate predicate per value
const predicateDefs = api.styledColumnApi.internalApi.getBadgePredicateDefsForColumn(columnId);
const dataType = api.columnApi.getColumnDataTypeForColumnId(columnId);
const previewValue = dataType === 'number' || dataType == 'numberArray'
? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
: GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
return (React.createElement(rebass_1.Flex, { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
React.createElement(rebass_1.Box, { flex: 1 },
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, { label: "Preview" },
React.createElement(Badge_1.Badge, { adaptableStyle: badge.Style, icon: badge.Icon, iconPosition: badge.IconPosition }, previewValue)),
React.createElement(FormLayout_1.FormRow, { label: "Style" },
React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select the Style for the Badge"),
' ',
React.createElement(Accordion_1.Accordion, { title: "Edit Badge Style" },
React.createElement(StyleComponent_1.StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: badge.Style ?? {}, UpdateStyle: (Style) => {
onChange({
...badge,
Style,
});
} }))),
React.createElement(FormLayout_1.FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
onChange({
...badge,
Predicate: predicate,
});
}, onClear: () => onChange({
...badge,
Predicate: undefined,
}) }))) : (React.createElement(ErrorBox_1.default, null, "Select a column first"))),
React.createElement(FormLayout_1.FormRow, { label: "Icon" },
React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select (optional) Icon (and Icon position) to display in the Badge"),
' ',
// for now, only show for system icons the
!badge.Icon || 'name' in badge.Icon ? (React.createElement(AdaptableIconSelector_1.AdaptableIconSelector, { value: badge?.Icon && 'name' in badge?.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
if (iconName) {
onChange({
...badge,
Icon: {
name: iconName,
},
});
}
else {
onChange({
...badge,
Icon: undefined,
});
}
} })) : (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: badge.Icon }))),
badge.Icon && (React.createElement(FormLayout_1.FormRow, { label: "Icon Position" },
React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
{
label: 'Start',
onClick: () => onChange({ ...badge, IconPosition: 'Start' }),
},
{
label: 'End',
onClick: () => onChange({ ...badge, IconPosition: 'End' }),
},
] }, badge.IconPosition ?? 'Start'))),
badge.Icon && (React.createElement(FormLayout_1.FormRow, { label: "Show Icon Only" },
React.createElement(CheckBox_1.CheckBox, { checked: badge.IconOnly,
// onClick=()=> onChange({ ...badge, IconPosition: 'End' })
onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }))))),
React.createElement(rebass_1.Box, { justifyContent: "end" },
React.createElement(SimpleButton_1.default, { icon: "delete", onClick: props.onDelete }))));
};
const renderBadgeSummary = (styledColumn) => {
return React.createElement(StyledColumnBadgePreview_1.StyledColumnBadgePreview, { data: styledColumn });
};
exports.renderBadgeSummary = renderBadgeSummary;
const StyledColumnBadgeSection = (props) => {
const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const badges = data?.BadgeStyle?.Badges ?? [];
return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
React.createElement(Tabs_1.Tabs.Tab, null, "Badges"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(rebass_1.Flex, { justifyContent: "end" },
React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
props.onChange({
...data,
BadgeStyle: {
Badges: [...badges, ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
},
});
} }, "Add Badge")),
React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2 }, badges.map((badge, index) => {
const handleEditBadge = (badge) => {
const newBadges = [...badges];
newBadges[index] = badge;
props.onChange({
...data,
BadgeStyle: {
...data.BadgeStyle,
Badges: newBadges,
},
});
};
return (React.createElement(BadgeEditor, { key: index, badge: badge, columnId: data.ColumnId, onChange: handleEditBadge, onDelete: () => {
const newBadges = [...badges];
newBadges.splice(index, 1);
props.onChange({
...data,
BadgeStyle: {
...data.BadgeStyle,
Badges: newBadges,
},
});
} }));
})))));
};
exports.StyledColumnBadgeSection = StyledColumnBadgeSection;