diff --git a/src/component/hooks/useCheckToolsVisibility.ts b/src/component/hooks/useCheckToolsVisibility.ts
index b3a45ba5f2..fc7b716d5e 100644
--- a/src/component/hooks/useCheckToolsVisibility.ts
+++ b/src/component/hooks/useCheckToolsVisibility.ts
@@ -12,7 +12,7 @@ import useSpectrum from './useSpectrum';
type SpectrumInfo = Info1D | Info2D;
-interface CheckOptions {
+export interface CheckOptions {
checkSpectrumType?: boolean;
checkMode?: boolean;
extraInfoCheckParameters?: SpectrumInfo;
diff --git a/src/component/toolbar/FunctionToolBar.tsx b/src/component/toolbar/FunctionToolBar.tsx
index 153bb495ea..ad9d4cbf77 100644
--- a/src/component/toolbar/FunctionToolBar.tsx
+++ b/src/component/toolbar/FunctionToolBar.tsx
@@ -9,13 +9,17 @@ import {
SvgNmrRangePicking,
SvgNmrZeroFilling,
} from 'cheminfo-font';
+import { NMRiumToolBarPreferences } from 'nmr-load-save';
import { useState, useEffect, useCallback, memo } from 'react';
import { FaSearchPlus, FaExpand, FaDiceFour } from 'react-icons/fa';
-import { Toolbar } from 'react-science/ui';
+import { Toolbar, ToolbarItemProps } from 'react-science/ui';
import { useChartData } from '../context/ChartContext';
import { useDispatch } from '../context/DispatchContext';
-import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility';
+import {
+ CheckOptions,
+ useCheckToolsVisibility,
+} from '../hooks/useCheckToolsVisibility';
import useDatumWithSpectraStatistics from '../hooks/useDatumWithSpectraStatistics';
import useToolsFunctions from '../hooks/useToolsFunctions';
@@ -26,6 +30,15 @@ interface FunctionToolBarInnerProps {
ftCounter: number;
}
+interface ToolItemConfig {
+ id: keyof NMRiumToolBarPreferences;
+ label: string;
+ onClick?: () => void;
+ icon: ToolbarItemProps['icon'];
+ checkOptions?: CheckOptions;
+ condition?: boolean;
+}
+
function FunctionToolBarInner({
defaultValue,
ftCounter,
@@ -67,169 +80,121 @@ function FunctionToolBarInner({
});
}, [dispatch]);
+ const toolItems: ToolItemConfig[] = [
+ {
+ id: 'zoom',
+ label: options.zoom.label,
+ icon: ,
+ },
+ {
+ id: 'zoomOut',
+ label: options.zoomOut.label,
+ onClick: handleFullZoomOut,
+ icon: ,
+ },
+ {
+ id: 'peakPicking',
+ label: `${options.peakPicking.label} ( Press p )`,
+ icon: ,
+ },
+ {
+ id: 'integral',
+ label: `${options.integral.label} ( Press i )`,
+ icon: ,
+ },
+ {
+ id: 'zonePicking',
+ label: `${options.zonePicking.label} ( Press r )`,
+ icon: ,
+ },
+ {
+ id: 'slicing',
+ label: options.slicing.label,
+ icon:
Slic
,
+ },
+ {
+ id: 'rangePicking',
+ label: `${options.rangePicking.label} ( Press r )`,
+ icon: ,
+ },
+ {
+ id: 'multipleSpectraAnalysis',
+ label: options.multipleSpectraAnalysis.label,
+ icon: ,
+ checkOptions: { checkSpectrumType: false },
+ condition: ftCounter > 1,
+ },
+ {
+ id: 'apodization',
+ label: `${options.apodization.label} (Press a)`,
+ icon: ,
+ },
+ {
+ id: 'zeroFilling',
+ label: `${options.zeroFilling.label} ( Press z )`,
+ icon: ,
+ },
+ {
+ id: 'phaseCorrection',
+ label: `${options.phaseCorrection.label} ( Press a )`,
+ icon: ,
+ },
+ {
+ id: 'phaseCorrectionTwoDimensions',
+ label: `${options.phaseCorrectionTwoDimensions.label} ( Press a )`,
+ icon: ,
+ },
+ {
+ id: 'baselineCorrection',
+ label: `${options.baselineCorrection.label} ( Press b )`,
+ icon: ,
+ },
+ {
+ id: 'exclusionZones',
+ label: `${options.exclusionZones.label} ( Press e )`,
+ icon: ,
+ checkOptions: { checkSpectrumType: false },
+ condition: ftCounter > 0,
+ },
+ {
+ id: 'fft',
+ label: `${options.fft.label} ( Press t )`,
+ onClick: handleOnFFTFilter,
+ icon: ,
+ },
+ {
+ id: 'fftDimension1',
+ label: options.fftDimension1.label,
+ onClick: handleFFtDimension1Filter,
+ icon: ,
+ },
+ {
+ id: 'fftDimension2',
+ label: options.fftDimension2.label,
+ onClick: handleFFtDimension2Filter,
+ icon: ,
+ },
+ ];
+
return (
<>
- {isButtonVisible('zoom') && (
- handleChange(options.zoom.id)}
- title={options.zoom.label}
- id={options.zoom.id}
- active={option === options.zoom.id}
- icon={}
- />
- )}
-
- {isButtonVisible('zoomOut') && (
- }
- />
- )}
-
- {isButtonVisible('peakPicking') && (
- handleChange(options.peakPicking.id)}
- title={`${options.peakPicking.label} ( Press p )`}
- id={options.peakPicking.id}
- active={option === options.peakPicking.id}
- icon={}
- />
- )}
- {isButtonVisible('integral') && (
- handleChange(options.integral.id)}
- title={`${options.integral.label} ( Press i )`}
- id={options.integral.id}
- active={option === options.integral.id}
- icon={}
- />
- )}
- {isButtonVisible('zonePicking') && (
- handleChange(options.zonePicking.id)}
- title={`${options.zonePicking.label} ( Press r )`}
- id={options.zonePicking.id}
- active={option === options.zonePicking.id}
- icon={}
- />
- )}
- {isButtonVisible('slicing') && (
- handleChange(options.slicing.id)}
- title={options.slicing.label}
- id={options.slicing.id}
- active={option === options.slicing.id}
- icon={Slic
}
- />
- )}
- {isButtonVisible('rangePicking') && (
- handleChange(options.rangePicking.id)}
- title={`${options.rangePicking.label} ( Press r )`}
- id={options.rangePicking.id}
- active={option === options.rangePicking.id}
- icon={}
- />
- )}
- {isButtonVisible('multipleSpectraAnalysis', {
- checkSpectrumType: false,
- }) &&
- ftCounter > 1 && (
- handleChange(options.multipleSpectraAnalysis.id)}
- title={options.multipleSpectraAnalysis.label}
- id={options.multipleSpectraAnalysis.id}
- active={option === options.multipleSpectraAnalysis.id}
- icon={}
- />
- )}
- {isButtonVisible('apodization') && (
- handleChange(options.apodization.id)}
- title={`${options.apodization.label} (Press a)`}
- id={options.apodization.id}
- active={option === options.apodization.id}
- icon={}
- />
- )}
- {isButtonVisible('zeroFilling') && (
- handleChange(options.zeroFilling.id)}
- title={`${options.zeroFilling.label} ( Press z )`}
- id={options.zeroFilling.id}
- active={option === options.zeroFilling.id}
- icon={}
- />
- )}
- {isButtonVisible('phaseCorrection') && (
- handleChange(options.phaseCorrection.id)}
- title={`${options.phaseCorrection.label} ( Press a )`}
- id={options.phaseCorrection.id}
- active={option === options.phaseCorrection.id}
- icon={}
- />
- )}
- {isButtonVisible('phaseCorrectionTwoDimensions') && (
- handleChange(options.phaseCorrectionTwoDimensions.id)}
- title={`${options.phaseCorrectionTwoDimensions.label} ( Press a )`}
- id={options.phaseCorrectionTwoDimensions.id}
- active={option === options.phaseCorrectionTwoDimensions.id}
- icon={}
- />
- )}
-
- {isButtonVisible('baselineCorrection') && (
- handleChange(options.baselineCorrection.id)}
- title={`${options.baselineCorrection.label} ( Press b )`}
- id={options.baselineCorrection.id}
- active={option === options.baselineCorrection.id}
- icon={}
- />
- )}
-
- {isButtonVisible('exclusionZones', { checkSpectrumType: false }) &&
- ftCounter > 0 && (
- handleChange(options.exclusionZones.id)}
- title={`${options.exclusionZones.label} ( Press e )`}
- id={options.exclusionZones.id}
- active={option === options.exclusionZones.id}
- icon={}
- />
- )}
-
- {isButtonVisible('fft') && (
- }
- />
- )}
- {isButtonVisible('fftDimension1') && (
- }
- />
- )}
- {isButtonVisible('fftDimension2') && (
- }
- />
- )}
+ {toolItems.map((item) => {
+ const { id, icon, label, checkOptions, onClick, condition } = item;
+
+ return (
+ isButtonVisible(id, checkOptions) &&
+ (condition === undefined || condition) && (
+ handleChange(id))}
+ title={label}
+ id={id}
+ active={option === id}
+ icon={icon}
+ />
+ )
+ );
+ })}
>
);
}