@adaptabletools/adaptable/src/View/Theme/VariantSelector.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import * as React from 'react';
import DropdownButton from '../../components/DropdownButton';
import SimpleButton from '../../components/SimpleButton';
import { useAdaptable } from '../AdaptableContext';
import { OS_THEME } from '../../Utilities/Constants/GeneralConstants';
export const VariantSelector = (props) => {
    const adaptable = useAdaptable();
    const systemTemes = adaptable.api.themeApi
        .getSystemThemes()
        .filter((theme) => theme.Name !== OS_THEME);
    const options = systemTemes.map((theme) => ({
        label: theme.Description,
        value: theme.Name,
        onClick: () => props.onChange(theme.Name),
    }));
    const label = props.theme.Variant
        ? options.find((theme) => theme.value === props.theme.Variant)?.label
        : 'Select a theme';
    return (React.createElement(React.Fragment, null,
        React.createElement(DropdownButton, { mr: 2, columns: ['label'], items: options, disabled: props.disabled }, label),
        React.createElement(SimpleButton, { onClick: () => props.onChange(null), disabled: !props.theme.Variant || props.disabled, hidden: props.disabled, icon: "delete" })));
};