feat(toolbar): react support

bin/luna.js

@@ -17,7 +17,7 @@ const build = require('../lib/build')
 const format = wrap(async function (component) {
   await runScript('lsla', [
     'prettier',
-    `src/${component}/**/*.{ts,js,html,json,css,scss}`,
+    `src/${component}/**/*.{ts,tsx,js,html,json,css,scss}`,
     '--write',
   ])
 })

index.json

@@ -333,12 +333,12 @@
     "dependencies": []
   },
   "toolbar": {
+    "react": true,
     "version": "0.3.1",
     "style": true,
     "icon": false,
     "test": true,
     "install": false,
-    "react": false,
     "dependencies": []
   },
   "video-player": {

src/modal/react.tsx

@@ -58,9 +58,11 @@ const LunaModal: FC<PropsWithChildren<IModalProps>> = (props) => {
     }
   }, [props.width])
 
-  return <div ref={modalRef}>
-    {createPortal(<>{props.children}</>, content.current)}
-  </div>
+  return (
+    <div ref={modalRef}>
+      {createPortal(<>{props.children}</>, content.current)}
+    </div>
+  )
 }
 
-export default LunaModal
+export default LunaModal

src/toolbar/package.json

@@ -1,5 +1,8 @@
 {
   "name": "toolbar",
   "version": "0.3.1",
-  "description": "Application toolbar"
+  "description": "Application toolbar",
+  "luna": {
+    "react": true
+  }
 }

src/toolbar/react.tsx

@@ -0,0 +1,100 @@
+import {
+  PropsWithChildren,
+  FC,
+  useRef,
+  useEffect,
+  cloneElement,
+  Children,
+  ReactElement,
+  useState,
+} from 'react'
+import types from 'licia/types'
+import Toolbar from './index'
+
+interface IToolbarProps {}
+
+const LunaToolbar: FC<PropsWithChildren<IToolbarProps>> = (props) => {
+  const toolbarRef = useRef<HTMLDivElement>(null)
+  const toolbar = useRef<Toolbar>()
+  const [_, setForceUpdateValue] = useState(0)
+  const forceUpdate = () => setForceUpdateValue((value) => value + 1)
+
+  useEffect(() => {
+    toolbar.current = new Toolbar(toolbarRef.current!)
+    forceUpdate()
+
+    return () => toolbar.current?.destroy()
+  }, [])
+
+  return (
+    <div ref={toolbarRef}>
+      {Children.map(props.children, (child) =>
+        cloneElement(child as ReactElement, {
+          toolbar: toolbar.current,
+        })
+      )}
+    </div>
+  )
+}
+
+interface IToolbarItemProps {
+  toolbar?: Toolbar
+}
+
+interface IToolbarTextProps extends IToolbarItemProps {
+  text: string
+}
+
+export const LunaToolbarText: FC<IToolbarTextProps> = (props) => {
+  useEffect(() => {
+    if (props.toolbar) {
+      props.toolbar.appendText(props.text)
+    }
+  }, [props.toolbar])
+
+  return null
+}
+
+interface IToolbarSelectProps extends IToolbarItemProps {
+  key: string
+  value: string
+  title?: string
+  options: types.PlainObj<string>
+}
+
+export const LunaToolbarSelect: FC<IToolbarSelectProps> = (props) => {
+  useEffect(() => {
+    const { toolbar, title, key, value, options } = props
+    if (toolbar) {
+      if (title) {
+        toolbar.appendSelect(key, value, title, options)
+      } else {
+        toolbar.appendSelect(key, value, options)
+      }
+    }
+  }, [props.toolbar])
+
+  return null
+}
+
+export const LunaToolbarSeparator: FC<IToolbarItemProps> = (props) => {
+  useEffect(() => {
+    if (props.toolbar) {
+      props.toolbar.appendSeparator()
+    }
+  }, [props.toolbar])
+
+  return null
+}
+
+export const LunaToolbarSpace: FC<IToolbarItemProps> = (props) => {
+  useEffect(() => {
+    if (props.toolbar) {
+      props.toolbar.appendSpace()
+    }
+  }, [props.toolbar])
+
+  return null
+}
+
+export default LunaToolbar

src/toolbar/story.js

@@ -2,6 +2,12 @@ import 'luna-toolbar.css'
 import Toolbar from 'luna-toolbar.js'
 import readme from './README.md'
 import story from '../share/story'
+import LunaToolbar, {
+  LunaToolbarText,
+  LunaToolbarSelect,
+  LunaToolbarSeparator,
+  LunaToolbarSpace,
+} from './react'
 
 const def = story(
   'toolbar',
@@ -37,9 +43,28 @@ const def = story(
   {
     readme,
     source: __STORY__,
+    ReactComponent() {
+      return (
+        <LunaToolbar>
+          <LunaToolbarSelect
+            key="throttling"
+            value="online"
+            title="Throttling"
+            options={{
+              Online: 'online',
+              '3G': '3g',
+              Offline: 'offline',
+            }}
+          />
+          <LunaToolbarSeparator />
+          <LunaToolbarSpace />
+          <LunaToolbarText text="Status: OK" />
+        </LunaToolbar>
+      )
+    },
   }
 )
 
 export default def
 
-export const { toolbar } = def
+export const { toolbar: html, react } = def