import type { CustomDomain } from '@h5web/lib' ; import { ScaleType } from '@h5web/shared' ; import create from 'zustand' ; import createContext from 'zustand/context' ; import { persist } from 'zustand/middleware' ; import type { ConfigProviderProps } from '../../models' ; import type { ColorMap , Layout } from './models' ; interface HeatmapConfig { customDomain : CustomDomain ; setCustomDomain : ( customDomain : CustomDomain ) => void ; colorMap : ColorMap ; setColorMap : ( colorMap : ColorMap ) => void ; invertColorMap : boolean ; toggleColorMapInversion : ( ) => void ; scaleType : ScaleType ; setScaleType : ( scaleType : ScaleType ) => void ; showGrid : boolean ; toggleGrid : ( ) => void ; layout : Layout ; setLayout : ( layout : Layout ) => void ; flipYAxis : boolean ; toggleYAxisFlip : ( ) => void ; } function createStore ( ) { return create < HeatmapConfig > ( persist ( ( set , get ) => ( { customDomain : [ null , null ] , setCustomDomain : ( customDomain ) => set ( { customDomain } ) , colorMap : 'Viridis' , setColorMap : ( colorMap ) => set ( { colorMap } ) , invertColorMap : false , toggleColorMapInversion : ( ) => { set ( ( state ) => ( { invertColorMap : ! state . invertColorMap } ) ) ; } , scaleType : ScaleType . Linear , setScaleType : ( scaleType ) => { set ( ( ) => ( { scaleType } ) ) ; } , showGrid : true , toggleGrid : ( ) => set ( ( state ) => ( { showGrid : ! state . showGrid } ) ) , layout : 'cover' , setLayout : ( layout ) => set ( { layout } ) , flipYAxis : false , toggleYAxisFlip : ( ) => set ( ( state ) => ( { flipYAxis : ! state . flipYAxis } ) ) , } ) , { name : 'h5web:heatmap' , version : 9 , } ) ) ; } const { Provider , useStore } = createContext < HeatmapConfig > ( ) ; export const useHeatmapConfig = useStore ; export function HeatmapConfigProvider ( props ) { const { children } = props ; return < Provider createStore = { createStore } > { children } < /Provider>; }