feat(data-grid): react support

index.json

@@ -72,12 +72,12 @@
     "dependencies": []
   },
   "data-grid": {
+    "react": true,
     "version": "0.4.3",
     "style": true,
     "icon": false,
     "test": true,
     "install": false,
-    "react": false,
     "dependencies": []
   },
   "dom-highlighter": {

src/data-grid/package.json

@@ -1,5 +1,8 @@
 {
   "name": "data-grid",
   "version": "0.4.3",
-  "description": "Grid for displaying datasets"
+  "description": "Grid for displaying datasets",
+  "luna": {
+    "react": true
+  }
 }

src/data-grid/react.tsx

@@ -0,0 +1,67 @@
+import { FC, useEffect, useRef } from 'react'
+import DataGrid, { IColumn } from './index'
+import types from 'licia/types'
+import each from 'licia/each'
+
+interface IDataGridProps {
+  columns: IColumn[]
+  data?: any[]
+  height?: number
+  maxHeight?: number
+  minHeight?: number
+  filter?: string | RegExp | types.AnyFn
+}
+
+const LunaDataGrid: FC<IDataGridProps> = (props) => {
+  const dataGridRef = useRef<HTMLDivElement>(null)
+  const dataGrid = useRef<DataGrid>()
+
+  useEffect(() => {
+    dataGrid.current = new DataGrid(dataGridRef.current!, {
+      columns: props.columns,
+      height: props.height,
+      maxHeight: props.maxHeight,
+      minHeight: props.minHeight,
+      filter: props.filter,
+    })
+    setData(dataGrid, props.data)
+  }, [])
+
+  useEffect(() => setData(dataGrid, props.data), [props.data])
+  useEffect(() => setOption(dataGrid, 'height', props.height), [props.height])
+  useEffect(
+    () => setOption(dataGrid, 'maxHeight', props.maxHeight),
+    [props.maxHeight]
+  )
+  useEffect(
+    () => setOption(dataGrid, 'minHeight', props.minHeight),
+    [props.minHeight]
+  )
+  useEffect(() => setOption(dataGrid, 'filter', props.filter), [props.filter])
+
+  return <div ref={dataGridRef}></div>
+}
+
+function setData(
+  dataGrid: React.MutableRefObject<DataGrid | undefined>,
+  data: any
+) {
+  if (dataGrid.current) {
+    dataGrid.current.clear()
+    each(data, (item: any) =>
+      dataGrid.current?.append(item, { selectable: true })
+    )
+  }
+}
+
+function setOption(
+  dataGrid: React.MutableRefObject<DataGrid | undefined>,
+  name: string,
+  val: any
+) {
+  if (dataGrid.current) {
+    dataGrid.current.setOption(name, val)
+  }
+}
+
+export default LunaDataGrid

src/data-grid/story.js

@@ -4,42 +4,13 @@ import story from '../share/story'
 import readme from './README.md'
 import each from 'licia/each'
 import toEl from 'licia/toEl'
+import LunaDataGrid from './react'
 import { object, number, button, text } from '@storybook/addon-knobs'
 
 const def = story(
   'data-grid',
   (container) => {
-    const columns = object('Columns', [
-      {
-        id: 'index',
-        title: 'Index',
-        weight: 20,
-        sortable: true,
-      },
-      {
-        id: 'name',
-        title: 'Name',
-        sortable: true,
-        weight: 30,
-      },
-      {
-        id: 'site',
-        title: 'Site',
-      },
-    ])
-
-    const minHeight = number('Min Height', 80, {
-      range: true,
-      min: 23,
-      max: 500,
-    })
-
-    const maxHeight = number('Max Height', 100, {
-      range: true,
-      min: 50,
-      max: 1000,
-    })
-    const filter = text('Filter', '')
+    const { columns, maxHeight, minHeight, filter } = createKnobs()
 
     const dataGrid = new DataGrid(container, {
       columns,
@@ -48,50 +19,7 @@ const def = story(
       filter,
     })
 
-    const data = [
-      {
-        index: 1,
-        name: 'Runoob',
-        site: 'www.runoob.com',
-      },
-      {
-        index: 2,
-        name: 'Google',
-        site: 'www.google.com',
-      },
-      {
-        index: 0,
-        name: 'Taobao',
-        site: 'www.taobao.com',
-      },
-      {
-        index: 3,
-        name: 'Bilibili',
-        site: 'www.bilibili.com',
-      },
-      {
-        index: 4,
-        name: 'Baidu',
-        site: 'www.baidu.com',
-      },
-      {
-        index: 5,
-        name: 'Zhihu',
-        site: 'www.zhihu.com',
-      },
-      {
-        index: 6,
-        name: 'Twitter',
-        site: 'www.twitter.com',
-      },
-      {
-        index: 7,
-        name: toEl('<span style="color:red">Luna</span>'),
-        site: 'luna.liriliri.io',
-      },
-    ]
-
-    each(data, (item) => dataGrid.append(item, { selectable: true }))
+    each(getData(), (item) => dataGrid.append(item, { selectable: true }))
 
     let selectedNode
     dataGrid.on('select', (node) => (selectedNode = node))
@@ -113,9 +41,108 @@ const def = story(
   {
     readme,
     source: __STORY__,
+    ReactComponent() {
+      const { columns, minHeight, maxHeight, filter } = createKnobs()
+
+      return (
+        <LunaDataGrid
+          columns={columns}
+          minHeight={minHeight}
+          maxHeight={maxHeight}
+          filter={filter}
+          data={getData()}
+        />
+      )
+    },
   }
 )
 
+function getData() {
+  return [
+    {
+      index: 1,
+      name: 'Runoob',
+      site: 'www.runoob.com',
+    },
+    {
+      index: 2,
+      name: 'Google',
+      site: 'www.google.com',
+    },
+    {
+      index: 0,
+      name: 'Taobao',
+      site: 'www.taobao.com',
+    },
+    {
+      index: 3,
+      name: 'Bilibili',
+      site: 'www.bilibili.com',
+    },
+    {
+      index: 4,
+      name: 'Baidu',
+      site: 'www.baidu.com',
+    },
+    {
+      index: 5,
+      name: 'Zhihu',
+      site: 'www.zhihu.com',
+    },
+    {
+      index: 6,
+      name: 'Twitter',
+      site: 'www.twitter.com',
+    },
+    {
+      index: 7,
+      name: toEl('<span style="color:red">Luna</span>'),
+      site: 'luna.liriliri.io',
+    },
+  ]
+}
+
+function createKnobs() {
+  const columns = object('Columns', [
+    {
+      id: 'index',
+      title: 'Index',
+      weight: 20,
+      sortable: true,
+    },
+    {
+      id: 'name',
+      title: 'Name',
+      sortable: true,
+      weight: 30,
+    },
+    {
+      id: 'site',
+      title: 'Site',
+    },
+  ])
+
+  const minHeight = number('Min Height', 80, {
+    range: true,
+    min: 23,
+    max: 500,
+  })
+
+  const maxHeight = number('Max Height', 100, {
+    range: true,
+    min: 50,
+    max: 1000,
+  })
+  const filter = text('Filter', '')
+
+  return {
+    columns,
+    minHeight,
+    maxHeight,
+    filter,
+  }
+}
+
 export default def
 
-export const { dataGrid } = def
+export const { dataGrid: html, react } = def