@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
48 lines (47 loc) • 2.49 kB
JavaScript
import * as React from 'react';
import { Box, Flex } from 'rebass';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import Input from '../../../../components/Input';
import Radio from '../../../../components/Radio';
import { Tabs } from '../../../../components/Tabs';
import { Tag } from '../../../../components/Tag';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
export const SettingsSectionSummary = () => {
const { data: layout } = useOnePageAdaptableWizardContext();
const isPivot = isPivotLayout(layout);
return (React.createElement(Box, null,
React.createElement(Tag, { mr: 2 },
"Layout Name: ",
layout.Name),
React.createElement(Tag, { mr: 2 },
"Layout Grid Type: ",
isPivot ? 'Pivot' : 'Table'),
React.createElement(Tag, { mr: 2 },
"Suppress Aggregation Function in Column Header:",
' ',
layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));
};
export const SettingsSection = (props) => {
const { data: layout } = useOnePageAdaptableWizardContext();
const onNameChange = (event) => {
props.onChange({
...layout,
Name: event.target.value,
});
};
return (React.createElement(React.Fragment, null,
React.createElement(Tabs, { mb: 3 },
React.createElement(Tabs.Tab, null, "Settings"),
React.createElement(Tabs.Content, null,
React.createElement(Flex, { flexDirection: "row" },
React.createElement(FormLayout, { width: "100%", style: { maxWidth: 300 } },
React.createElement(FormRow, { label: "Name" },
React.createElement(Input, { width: "100%", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' })))))),
React.createElement(Tabs, { mb: 2 },
React.createElement(Tabs.Tab, null, "Grid Type"),
React.createElement(Tabs.Content, null,
React.createElement(Flex, { flexDirection: "column" },
React.createElement(Radio, { "data-name": "layout-type-table", disabled: true, checked: !isPivotLayout(layout) }, "Table"),
React.createElement(Radio, { "data-name": "layout-type-pivot", disabled: true, checked: isPivotLayout(layout) }, "Pivot"))))));
};