fix(data-grid): build error

src/data-grid/react.tsx

@@ -1,8 +1,12 @@
 import { FC, useEffect, useRef } from 'react'
 import DataGrid, { DataGridNode, IOptions } from './index'
 import each from 'licia/each'
-import lowerCase from 'licia/lowerCase'
-import { useNonInitialEffect, usePrevious } from '../share/hooks'
+import {
+  useEvent,
+  useNonInitialEffect,
+  useOption,
+  usePrevious,
+} from '../share/hooks'
 
 interface IDataGridProps extends IOptions {
   onSelect?: (node: DataGridNode) => void
@@ -25,13 +29,8 @@ const LunaDataGrid: FC<IDataGridProps> = (props) => {
       minHeight: props.minHeight,
       filter: props.filter,
       selectable: props.selectable,
+      theme: props.theme,
     })
-    if (props.onSelect) {
-      dataGrid.current.on('select', props.onSelect)
-    }
-    if (props.onDeselect) {
-      dataGrid.current.on('deselect', props.onDeselect)
-    }
     dataGrid.current.setData(props.data, props.uniqueId)
   }, [])
 
@@ -41,28 +40,18 @@ const LunaDataGrid: FC<IDataGridProps> = (props) => {
     }
   }, [props.data])
 
-  each(['onSelect', 'onDeselect'], (key: 'onSelect' | 'onDeselect') => {
-    useNonInitialEffect(() => {
-      if (dataGrid.current) {
-        const event = lowerCase(key.slice(2))
-        if (prevProps?.[key]) {
-          dataGrid.current.off(event, prevProps[key])
-        }
-        if (props[key]) {
-          dataGrid.current.on(event, props[key])
-        }
-      }
-    }, [props[key]])
-  })
+  useEvent<DataGrid>(dataGrid, 'select', prevProps?.onSelect, props.onSelect)
+  useEvent<DataGrid>(
+    dataGrid,
+    'deselect',
+    prevProps?.onDeselect,
+    props.onDeselect
+  )
 
   each(
-    ['height', 'maxHeight', 'minHeight', 'filter'],
+    ['theme', 'height', 'maxHeight', 'minHeight', 'filter'],
     (key: keyof IDataGridProps) => {
-      useNonInitialEffect(() => {
-        if (dataGrid.current) {
-          dataGrid.current.setOption(key, props[key])
-        }
-      }, [props[key]])
+      useOption<DataGrid, IDataGridProps>(dataGrid, key, props[key])
     }
   )
 

src/data-grid/story.js

@@ -43,7 +43,7 @@ const def = story(
     readme,
     changelog,
     source: __STORY__,
-    ReactComponent() {
+    ReactComponent({ theme }) {
       const { minHeight, maxHeight, filter } = createKnobs()
 
       return (
@@ -58,6 +58,7 @@ const def = story(
           minHeight={minHeight}
           maxHeight={maxHeight}
           filter={filter}
+          theme={theme}
           selectable={true}
           data={getData()}
         />

src/share/hooks.ts

@@ -5,6 +5,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import Component from './Component'
 
 export function useForceUpdate() {
   const [_, setForceUpdateValue] = useState(0)
@@ -40,3 +41,33 @@ export function useNonInitialEffect(
     }
   }, deps)
 }
+
+export function useEvent<C extends Component>(
+  component: React.MutableRefObject<C | undefined>,
+  event: string,
+  prev: any,
+  prop: any
+) {
+  useEffect(() => {
+    if (component.current) {
+      if (prev) {
+        component.current.off(event, prev)
+      }
+      if (prop) {
+        component.current.on(event, prop)
+      }
+    }
+  }, [prop])
+}
+
+export function useOption<C extends Component, P>(
+  component: React.MutableRefObject<C | undefined>,
+  key: keyof P,
+  prop: any
+) {
+  useNonInitialEffect(() => {
+    if (component.current) {
+      component.current.setOption(key as string, prop)
+    }
+  }, [prop])
+}

src/share/story.js

@@ -5,6 +5,7 @@ import map from 'licia/map'
 import h from 'licia/h'
 import waitUntil from 'licia/waitUntil'
 import isArr from 'licia/isArr'
+import isDarkMode from 'licia/isDarkMode'
 import contain from 'licia/contain'
 import upperFirst from 'licia/upperFirst'
 import extend from 'licia/extend'
@@ -188,6 +189,10 @@ function fixKnobs(name) {
 }
 
 function updateBackground(theme) {
+  if (theme === 'auto') {
+    theme = isDarkMode() ? 'dark' : 'light'
+  }
+
   document.documentElement.style.background = contain(theme, 'dark')
     ? '#000'
     : '#fff'