Overriding default settings tab content

To change the content of the default settings tab, use the overrideDefaultTab function from the override file.

Example

Source code

import React, { useState, useCallback } from 'react';
import { ChartReactAppWrapper } from '../../../../../src/components/ChartReactApp';
import { FlexContainer } from '../../../../../src/components/FlexContainer';
import { overrideDefaultTab } from '@dx-private/dxchart5-react/dist/chart/ui-overrides/settings';
import { Checkbox } from '@dx-private/dxchart5-react/dist/chart-kit/Checkbox/Checkbox.component';
import {
    ChartSettingsTabForm,
    ChartSettingsTabGeneralItemStyled,
} from '@dx-private/dxchart5-react/dist/chart/components/chart-settings/chart-settings-general/chart-settings-tab-general.styled';
import { ChartSettingsField } from '@dx-private/dxchart5-react/dist/chart/components/chart-settings/chart-settings-field.component';
import { ChartSettingsContentProps } from '@dx-private/dxchart5-react/dist/chart/components/chart-settings/chart-settings-content.component';
import { chartSettingsLens } from '@dx-private/dxchart5-react/dist/chart/view-models/chart-configurator.view-model';
import { TabTypeWithIcon } from '@dx-private/dxchart5-react/dist/chart/components/chart-settings/chart-settings.model';
import { useIcons } from '@dx-private/dxchart5-react/dist/chart/ui-overrides';
const CustomTradingTab = (props: ChartSettingsContentProps) => {
    const { value, onValueChange } = props;
    const [showAlerts, setShowAlerts] = useState(false);
    const showOrdersAndPositionsHandler = useCallback(
        (value: boolean = false) => {
            onValueChange(chartSettingsLens(['chartReact', 'trading', 'visible']), value);
            onValueChange(chartSettingsLens(['chartReact', 'trading', 'showOrders']), value);
            onValueChange(chartSettingsLens(['chartReact', 'trading', 'showPositions']), value);
        },
        [onValueChange],
    );
    const showOrdersHandler = useCallback(
        (value: boolean = false) => {
            onValueChange(chartSettingsLens(['chartReact', 'trading', 'showOrders']), value);
        },
        [onValueChange],
    );
    const showPositionsHandler = useCallback(
        (value: boolean = false) => {
            onValueChange(chartSettingsLens(['chartReact', 'trading', 'showPositions']), value);
        },
        [onValueChange],
    );
    return (
        <ChartSettingsTabForm>
            <ChartSettingsTabGeneralItemStyled>
                <ChartSettingsField label={'Trading'}>
                    <Checkbox value={value.chartReact.trading.visible} onValueChange={showOrdersAndPositionsHandler} />
                </ChartSettingsField>
            </ChartSettingsTabGeneralItemStyled>
            <ChartSettingsTabGeneralItemStyled>
                <ChartSettingsField isDisabled={!value.chartReact.trading.visible} label={'Show orders'}>
                    <Checkbox
                        isDisabled={!value.chartReact.trading.visible}
                        value={value.chartReact.trading.showOrders}
                        onValueChange={showOrdersHandler}
                    />
                </ChartSettingsField>
            </ChartSettingsTabGeneralItemStyled>
            <ChartSettingsTabGeneralItemStyled>
                <ChartSettingsField isDisabled={!value.chartReact.trading.visible} label={'Show positions'}>
                    <Checkbox
                        isDisabled={!value.chartReact.trading.visible}
                        value={value.chartReact.trading.showPositions}
                        onValueChange={showPositionsHandler}
                    />
                </ChartSettingsField>
            </ChartSettingsTabGeneralItemStyled>
            <ChartSettingsTabGeneralItemStyled>
                <ChartSettingsField label={'Show alerts'}>
                    <Checkbox value={showAlerts} onValueChange={() => setShowAlerts(!showAlerts)} />
                </ChartSettingsField>
            </ChartSettingsTabGeneralItemStyled>
        </ChartSettingsTabForm>
    );
};
export const OverriddenTradingTab = () => {
    const iconsConfig = useIcons();
    const myCustomTradingTab: Record<string, TabTypeWithIcon> = {
        ChartTradingTab: {
            id: 'Trading',
            label: 'Trading',
            content: () => CustomTradingTab,
            icon: iconsConfig.drawings.drawingsTypes.callout,
        },
    };
    const customDefaultTabTitle = Object.keys(myCustomTradingTab)[0];
    const customTab = myCustomTradingTab[customDefaultTabTitle!];
    const overriddenTabs = overrideDefaultTab(customDefaultTabTitle!, customTab!);
    return (
        <FlexContainer justifyContent={'flex-start'}>
            {/* TODO fix TS error */}
            {/* @ts-ignore */}
            <ChartReactAppWrapper uiOverrides={{ ChartSettingsTabs: overriddenTabs }} />
        </FlexContainer>
    );
};