feat(toolbar): button

src/setting/story.js

@@ -79,7 +79,7 @@ const def = story(
 
     setting.appendTitle('Element')
 
-    setting.appendText(
+    setting.appendInput(
       'searchKeyword',
       'div',
       'Search Keyword',

src/share/mixin.scss

@@ -247,29 +247,29 @@
 
 @mixin button($dark: false) {
   @if $dark {
-    background: $background-color-dark;
-    border-color: $border-color-dark;
+    background: $color-bg-container-dark;
+    border-color: $color-border-dark;
     &:hover,
     &:active {
       background: $darker-background-color-dark;
     }
     &:active {
-      border: 1px solid $primary-color;
+      border: 1px solid $color-primary;
     }
   } @else {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    background: $background-color;
-    border: 1px solid $border-color;
+    background: $color-bg-container;
+    border: 1px solid $color-border;
     padding: 2px 8px;
-    color: $primary-color;
+    color: $color-primary;
     font-size: $font-size;
     border-radius: 2px;
     &:hover,
     &:active {
       background: $darker-background-color;
     }
     &:active {
-      border: 1px solid $primary-color;
+      border: 1px solid $color-primary;
     }
   }
 }

src/toolbar/index.ts

@@ -38,6 +38,10 @@ export default class Toolbar extends Component {
   appendText(text: string) {
     return this.append(new LunaToolbarText(this, text))
   }
+  /** Append button. */
+  appendButton(title: string, handler: types.AnyFn) {
+    return this.append(new LunaToolbarButton(this, title, handler))
+  }
   /** Append html. */
   appendHtml(html: string | HTMLElement) {
     return this.append(new LunaToolbarHtml(this, html))
@@ -85,7 +89,7 @@ export default class Toolbar extends Component {
   }
   /** Append text input. */
   appendInput(key: string, value: string, placeholder = '') {
-    return this.append(new ToolbarInput(this, key, value, placeholder))
+    return this.append(new LunaToolbarInput(this, key, value, placeholder))
   }
   private append<T extends LunaToolbarItem>(item: T): T {
     this.items.push(item)
@@ -159,7 +163,7 @@ export class LunaToolbarSelect extends LunaToolbarItem {
   }
 }
 
-class ToolbarInput extends LunaToolbarItem {
+export class LunaToolbarInput extends LunaToolbarItem {
   constructor(
     toolbar: Toolbar,
     key: string,
@@ -193,6 +197,17 @@ export class LunaToolbarText extends LunaToolbarItem {
   }
 }
 
+export class LunaToolbarButton extends LunaToolbarItem {
+  constructor(toolbar: Toolbar, title: string, handler: types.AnyFn) {
+    super(toolbar, '', '', 'button')
+
+    this.$container.html(`<button>${escape(title)}</button>`)
+
+    const $button = this.$container.find('button')
+    $button.on('click', handler)
+  }
+}
+
 export class LunaToolbarHtml extends LunaToolbarItem {
   constructor(toolbar: Toolbar, html: string | HTMLElement) {
     super(toolbar, '', '', 'html')

src/toolbar/react.tsx

@@ -13,6 +13,8 @@ import Toolbar, {
   LunaToolbarText as ToolbarText,
   LunaToolbarSelect as ToolbarSelect,
   LunaToolbarHtml as ToolbarHtml,
+  LunaToolbarInput as ToolbarInput,
+  LunaToolbarButton as ToolbarButton,
   LunaToolbarItem,
 } from './index'
 import { useForceUpdate } from '../share/hooks'
@@ -74,6 +76,28 @@ export const LunaToolbarText: FC<IToolbarTextProps> = (props) => {
   return null
 }
 
+interface IToolbarButtonProps extends IToolbarItemProps {
+  title: string
+  onClick: () => void
+}
+
+export const LunaToolbarButton: FC<IToolbarButtonProps> = (props) => {
+  const toolbarButton = useRef<ToolbarButton>()
+
+  useEffect(() => {
+    if (props.toolbar) {
+      toolbarButton.current = props.toolbar.appendButton(
+        props.title,
+        props.onClick
+      )
+    }
+
+    return () => toolbarButton.current?.detach()
+  }, [props.toolbar])
+
+  return null
+}
+
 interface IToolbarSelectProps extends IToolbarItemProps {
   keyName: string
   value: string
@@ -130,12 +154,24 @@ interface IToolbarInputProps extends IToolbarItemProps {
 }
 
 export const LunaToolbarInput: FC<IToolbarInputProps> = (props) => {
+  const toolbarInput = useRef<ToolbarInput>()
+
   useEffect(() => {
     if (props.toolbar) {
-      props.toolbar.appendInput(props.keyName, props.value, props.placeholder)
+      toolbarInput.current = props.toolbar.appendInput(
+        props.keyName,
+        props.value,
+        props.placeholder
+      )
+      setDisabled(toolbarInput.current, props.disabled)
     }
   }, [props.toolbar])
 
+  useEffect(
+    () => setDisabled(toolbarInput.current, props.disabled),
+    [props.disabled]
+  )
+
   return null
 }
 

src/toolbar/story.js

@@ -8,6 +8,7 @@ import LunaToolbar, {
   LunaToolbarSeparator,
   LunaToolbarSpace,
   LunaToolbarInput,
+  LunaToolbarButton,
   LunaToolbarHtml,
 } from './react'
 
@@ -37,6 +38,11 @@ const def = story(
 
     const filter = toolbar.appendInput('filter', '', 'Filter')
     filter.disable()
+
+    toolbar.appendButton('Trigger', () => {
+      console.log('trigger')
+    })
+
     toolbar.appendSpace()
     toolbar.appendHtml(
       '<span style="color:green;line-height:30px;">Loading</span>'
@@ -66,7 +72,16 @@ const def = story(
             }}
           />
           <LunaToolbarSeparator />
-          <LunaToolbarInput keyName="filter" value="" placeholder="Filter" />
+          <LunaToolbarInput
+            keyName="filter"
+            value=""
+            placeholder="Filter"
+            disabled={true}
+          />
+          <LunaToolbarButton
+            title="Trigger"
+            onClick={() => console.log('trigger')}
+          />
           <LunaToolbarSpace />
           <LunaToolbarHtml>
             <span

src/toolbar/style.scss

@@ -45,6 +45,16 @@
   }
 }
 
+.item-button {
+  button {
+    @include button();
+    color: $color-text;
+    height: 22px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+}
+
 .item-space {
   flex-grow: 1;
 }
@@ -59,6 +69,12 @@
   .item-separator {
     background: $border-color-dark;
   }
+  .item-button {
+    button {
+      @include button(true);
+      color: $color-text-dark;
+    }
+  }
   .item-select {
     @include select(true);
   }