@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
76 lines (75 loc) • 3.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const Tabs_1 = require("../../../components/Tabs");
const Tag_1 = require("../../../components/Tag");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
const AdaptableContext_1 = require("../../AdaptableContext");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const TypeRadio_1 = require("../../Wizard/TypeRadio");
const renderStyledColumnTypeSummary = (data) => {
let type = null;
if (data.GradientStyle) {
type = 'Gradient Column';
}
else if (data.PercentBarStyle) {
type = 'Percent Bar';
}
else if (data.SparklineStyle) {
type = 'Spark Line';
}
else if (data.BadgeStyle) {
type = 'Badge';
}
return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
"Type ",
React.createElement(Tag_1.Tag, null, type)));
};
exports.renderStyledColumnTypeSummary = renderStyledColumnTypeSummary;
const StyledColumnWizardTypeSection = (props) => {
const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const handleTypeChange = (type) => {
const newStyledColumn = {
...data,
};
delete newStyledColumn.GradientStyle;
delete newStyledColumn.PercentBarStyle;
delete newStyledColumn.SparklineStyle;
delete newStyledColumn.BadgeStyle;
switch (type) {
case 'gradient':
newStyledColumn.GradientStyle = {};
break;
case 'percent':
newStyledColumn.PercentBarStyle = {};
break;
case 'sparkline':
newStyledColumn.SparklineStyle = {
options: {
type: 'line',
},
};
break;
case 'badge':
newStyledColumn.BadgeStyle = {
Badges: [ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
};
break;
}
newStyledColumn.ColumnId = null;
props.onChange(newStyledColumn);
};
return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "styled-column-type" },
React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
React.createElement(Tabs_1.Tabs.Tab, null, "Type"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(TypeRadio_1.TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }),
React.createElement(TypeRadio_1.TypeRadio, { text: "Percent Bar", description: "Display a coloured Bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }),
adaptable.api.styledColumnApi.canDisplaySparklines() && (React.createElement(TypeRadio_1.TypeRadio, { text: "Sparkline", description: "Render the column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparklineStyle), onClick: () => handleTypeChange('sparkline') })),
React.createElement(TypeRadio_1.TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') })))));
};
exports.StyledColumnWizardTypeSection = StyledColumnWizardTypeSection;