feat(toolbar): button state

index.json

@@ -234,13 +234,13 @@
     "dependencies": []
   },
   "painter": {
+    "dependencies": ["toolbar"],
     "icon": true,
     "version": "0.1.0",
     "style": true,
     "test": true,
     "install": false,
-    "react": false,
-    "dependencies": []
+    "react": false
   },
   "performance-monitor": {
     "react": true,
@@ -343,7 +343,7 @@
   },
   "toolbar": {
     "react": true,
-    "version": "0.4.3",
+    "version": "0.5.0",
     "style": true,
     "icon": false,
     "test": true,

src/share/story.js

@@ -88,6 +88,10 @@ export default function story(
 
       ReactDOM.render(<ReactComponent theme={theme} />, container)
 
+      document.documentElement.style.background = contain(theme, 'dark')
+          ? '#000'
+          : '#fff'
+
       return container
     }
   }

src/toolbar/index.ts

@@ -42,8 +42,12 @@ export default class Toolbar extends Component {
     return this.append(new LunaToolbarText(this, text))
   }
   /** Append button. */
-  appendButton(title: string, handler: types.AnyFn) {
-    return this.append(new LunaToolbarButton(this, title, handler))
+  appendButton(
+    content: string | HTMLElement,
+    handler: types.AnyFn,
+    state?: IButtonState
+  ) {
+    return this.append(new LunaToolbarButton(this, content, handler, state))
   }
   /** Append html. */
   appendHtml(html: string | HTMLElement) {
@@ -245,14 +249,33 @@ export class LunaToolbarText extends LunaToolbarItem {
   }
 }
 
+export type IButtonState = '' | 'hover' | 'active'
+
 export class LunaToolbarButton extends LunaToolbarItem {
-  constructor(toolbar: Toolbar, title: string, handler: types.AnyFn) {
+  private $button: $.$
+  constructor(
+    toolbar: Toolbar,
+    content: string | HTMLElement,
+    handler: types.AnyFn,
+    state: IButtonState = ''
+  ) {
     super(toolbar, '', '', 'button')
 
-    this.$container.html(`<button>${escape(title)}</button>`)
+    this.$container.html(`<button></button>`)
 
     const $button = this.$container.find('button')
+    $button.append(content)
     $button.on('click', handler)
+    this.$button = $button
+
+    this.setState(state)
+  }
+  setState(state: IButtonState) {
+    const { $button } = this
+    $button.rmAttr('class')
+    if (state) {
+      $button.addClass(this.toolbar.c(state))
+    }
   }
 }
 

src/toolbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolbar",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Application toolbar",
   "luna": {
     "react": true

src/toolbar/react.tsx

@@ -16,11 +16,13 @@ import Toolbar, {
   LunaToolbarInput as ToolbarInput,
   LunaToolbarButton as ToolbarButton,
   LunaToolbarItem,
+  IButtonState,
 } from './index'
 import { useForceUpdate } from '../share/hooks'
+import { IComponentOptions } from '../share/Component'
 import { createPortal } from 'react-dom'
 
-interface IToolbarProps {
+interface IToolbarProps extends IComponentOptions {
   className?: string
   onChange?: (key: string, val: any, oldVal: any) => void
 }
@@ -40,6 +42,12 @@ const LunaToolbar: FC<PropsWithChildren<IToolbarProps>> = (props) => {
     return () => toolbar.current?.destroy()
   }, [])
 
+  useEffect(() => {
+    if (toolbar.current) {
+      toolbar.current.setOption('theme', props.theme)
+    }
+  }, [props.theme])
+
   return (
     <div className={props.className || ''} ref={toolbarRef}>
       {Children.map(props.children, (child) => {
@@ -77,8 +85,9 @@ export const LunaToolbarText: FC<IToolbarTextProps> = (props) => {
 }
 
 interface IToolbarButtonProps extends IToolbarItemProps {
-  title: string
+  content: string | HTMLElement
   onClick: () => void
+  state?: IButtonState
 }
 
 export const LunaToolbarButton: FC<IToolbarButtonProps> = (props) => {
@@ -87,14 +96,21 @@ export const LunaToolbarButton: FC<IToolbarButtonProps> = (props) => {
   useEffect(() => {
     if (props.toolbar) {
       toolbarButton.current = props.toolbar.appendButton(
-        props.title,
-        props.onClick
+        props.content,
+        props.onClick,
+        props.state
       )
     }
 
     return () => toolbarButton.current?.detach()
   }, [props.toolbar])
 
+  useEffect(() => {
+    if (toolbarButton.current && props.state) {
+      toolbarButton.current.setState(props.state)
+    }
+  }, [props.state])
+
   return null
 }
 

src/toolbar/story.js

@@ -39,9 +39,13 @@ const def = story(
     const filter = toolbar.appendInput('filter', '', 'Filter')
     filter.disable()
 
-    toolbar.appendButton('Trigger', () => {
-      console.log('trigger')
-    })
+    toolbar.appendButton(
+      'Trigger',
+      () => {
+        console.log('trigger')
+      },
+      'hover'
+    )
 
     toolbar.appendText('Size:')
     toolbar.appendNumber('size', 50, {
@@ -61,12 +65,13 @@ const def = story(
   {
     readme,
     source: __STORY__,
-    ReactComponent() {
+    ReactComponent({ theme }) {
       return (
         <LunaToolbar
           onChange={(key, val, oldVal) => {
             console.log(key, val, oldVal)
           }}
+          theme={theme}
         >
           <LunaToolbarSelect
             keyName="throttling"
@@ -86,8 +91,9 @@ const def = story(
             disabled={true}
           />
           <LunaToolbarButton
-            title="Trigger"
+            content="Trigger"
             onClick={() => console.log('trigger')}
+            state="hover"
           />
           <LunaToolbarSpace />
           <LunaToolbarHtml>

src/toolbar/style.scss

@@ -57,11 +57,23 @@
 
 .item-button {
   button {
-    @include button();
     color: $color-text;
     height: 22px;
     margin-top: 4px;
     margin-bottom: 4px;
+    border: none;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: #{$border-radius-x-s}px;
+    &:hover,
+    &.hover {
+      background: $color-fill-tertiary;
+      border-color: $color-border;
+    }
+    &:active,
+    &.active {
+      background: $color-fill-secondary;
+    }
   }
 }
 
@@ -81,8 +93,16 @@
   }
   .item-button {
     button {
-      @include button(true);
       color: $color-text-dark;
+      &:hover,
+      &.hover {
+        background: $color-fill-secondary-dark;
+        border-color: $color-border-dark;
+      }
+      &:active,
+      &.active {
+        background: $color-fill-tertiary-dark;
+      }
     }
   }
   .item-select {