feat: add actionBar and samples

Author: wewoor

src/components/actionbar/index.tsx

@@ -0,0 +1,54 @@
+import './style.scss';
+import * as React from 'react';
+import { prefixClaName, classNames } from 'mo/common/className';
+
+export interface IActionBarItem<T = any> extends React.ComponentProps<any> {
+    id: string;
+    name?: string;
+    title?: string;
+    iconName?: string;
+    disabled?: boolean;
+    data?: T;
+    className?: string;
+    onClick?(event: React.MouseEvent, item: IActionBarItem): void;
+}
+
+export interface IActionBar<T = any> {
+    data: IActionBarItem<T>[];
+    className?: string;
+    onClick?(event: React.MouseEvent, item: IActionBarItem): void;
+}
+
+const rootClassName = 'action-bar';
+
+export function ActionBarItem(props: IActionBarItem) {
+    const { id, title, name, onClick } = props;
+    const click = (e: React.MouseEvent) => {
+        if (onClick) {
+            onClick(e, props);
+        }
+    }
+    const disabled = props.disabled ? 'disabled' : null;
+    const claNames = classNames('action-label', 'codicon', props.iconName, disabled);
+    return (
+        <li className={classNames('action-item', disabled)} onClick={click} key={`${id}`}>
+            <a className={claNames} title={title}>{name}</a>
+        </li>
+    )
+}
+
+export default function ActionBar<T = any>(props: IActionBar<T>) {
+    const { data = [], onClick, className, ...others } = props;
+
+    const claNames = classNames(prefixClaName(rootClassName), className);
+   
+    const items = data.map((item: IActionBarItem<T>) => <ActionBarItem key={item.id} {...item} />)
+    
+    return (
+        <div className={claNames} {...others}>
+            <ul className={prefixClaName('container', rootClassName)}>
+                { items }
+            </ul>
+        </div>
+    )
+}

src/components/actionbar/style.scss

@@ -0,0 +1,46 @@
+@import 'mo/style/const';
+$actionBar: 'action-bar';
+
+#{prefix($actionBar)} {
+    overflow: hidden;
+    text-align: right;
+    white-space: nowrap;
+
+    .#{$actionBar}-container {
+        display: flex;
+        justify-content: flex-end;
+        margin: 0 auto;
+        padding: 0;
+        width: 100%;
+    }
+
+    .action-item {
+        cursor: pointer;
+        display: inline-block;
+        position: relative;
+        transition: transform 50ms ease;
+    }
+
+    .action-label {
+        align-items: center;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: 16px;
+        height: 35px;
+        justify-content: center;
+        margin-right: 4px;
+        min-width: 28px;
+        text-decoration: none;
+    }
+
+    .action-label.codicon {
+        color: inherit;
+        line-height: 35px;
+    }
+
+    .disabled {
+        cursor: default;
+        opacity: 0.4;
+        pointer-events: none;
+    }
+}

src/extensions/activityBar/index.tsx

@@ -7,6 +7,19 @@ function initActivityBar(extensionCtx: IExtensionService) {
         name: 'Settings',
         iconName: 'codicon-settings-gear',
         type: 'global',
+        contextMenu: [{
+            id: 'CommandPalette',
+            name: 'Command Palette...',
+            title: 'Command Palette'
+        }, {
+            id: 'Settings',
+            name: 'Settings',
+            title: 'Settings'
+        }, {
+            id: 'ColorTheme',
+            name: 'Color Theme',
+            title: 'Color Theme'
+        }]
     };
 
     const globalUserAccount: IActivityBarItem = {
@@ -29,6 +42,7 @@ function initActivityBar(extensionCtx: IExtensionService) {
         const target = data[0].target;
         console.log('activityBar onSelect:', data, target);
     });
+    
 }
 
 export const ExtendActivityBar: IExtension = {

src/extensions/explore/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
     activityBarService,
-    ActivityBarEvent,
     IActivityBarItem,
     sidebarService,
 } from 'mo';
@@ -10,40 +9,47 @@ import { Explorer } from './explore';
 import { ExtensionService } from 'mo/services/extensionService';
 import { IExtension } from 'mo/model/extension';
 
-function initActivityBar(extensionCtx: ExtensionService) {
-    const activeId = 'active-explorer';
+function init(extensionCtx: ExtensionService) {
     const state = activityBarService.getState();
-    const folderFeat: IActivityBarItem = {
-        id: activeId,
+    const sideBarState = sidebarService.getState();
+
+    const exploreActiveItem = {
+        id: 'active-explorer',
         name: 'Explore',
         iconName: 'codicon-files',
     };
-    // activityBarService.push(folderFeat);
-    // state.data?.push(folderFeat);
-    // state.selected = activeId;
-    activityBarService.updateState({
-        selected: activeId,
-        data: [...state.data, folderFeat],
-    });
 
-    activityBarService.subscribe(ActivityBarEvent.OnClick, (data) => {
-        console.log('Explore activityBar subscribe onClick:', data);
+    activityBarService.updateState({
+        selected: exploreActiveItem.id,
+        data: [...state.data, exploreActiveItem],
     });
-}
 
-function initSidebar(extensionCtx: ExtensionService) {
-    sidebarService.push({
+    const explorePane = {
         id: 'explore',
-        name: 'EXPLORER',
+        title: 'EXPLORER',
         render() {
             return <Explorer />;
         },
-    });
+    };
+
+    // sidebarService.push(explorePane);
+    sidebarService.updateState({
+        current: explorePane.id,
+        panes: [...sideBarState.panes, explorePane]
+    })
+
+    activityBarService.onSelect((e, item: IActivityBarItem) =>  {
+        console.log('Search Pane onClick:', e, item);
+        if (item.id === exploreActiveItem.id) {
+            sidebarService.updateState({
+                current: explorePane.id
+            })
+        }
+    })
 }
 
 export const ExtendExplore: IExtension = {
     activate: function (extensionCtx: ExtensionService) {
-        initActivityBar(extensionCtx);
-        initSidebar(extensionCtx);
+        init(extensionCtx);
     },
 };

src/extensions/search/index.tsx

@@ -1,14 +1,38 @@
-import { activityBarService, IExtensionService } from 'mo';
+import * as React from 'react';
+import { activityBarService, sidebarService, IExtensionService, IActivityBarItem } from 'mo';
 import { IExtension } from 'mo/model/extension';
+import SearchPane from './searchPane';
+
+function init() {
+    const searchSidePane = {
+        id: 'searchPane',
+        title: 'SEARCH',
+        render() {
+            return <SearchPane />
+        }
+    };
+
+    sidebarService.push(searchSidePane)
+
+    const searchActivityItem = {
+        id: 'search',
+        name: 'Search',
+        iconName: 'codicon-search',
+    };
+
+    activityBarService.push(searchActivityItem);
+
+    activityBarService.onSelect((e, item: IActivityBarItem) =>  {
+        if (item.id === searchActivityItem.id) {
+            sidebarService.updateState({
+                current: searchSidePane.id
+            })
+        }
+    })
+}
 
 export const ExtendSearch: IExtension = {
     activate(extensionCtx: IExtensionService) {
-        const searchFeat = {
-            id: 'search',
-            name: 'Search',
-            iconName: 'codicon-search',
-        };
-
-        activityBarService.push(searchFeat);
+       init();
     },
 };

src/extensions/search/searchPane.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import Toolbar from 'mo/components/toolbar';
+import { prefixClaName } from 'mo/common/className';
+import { Header, Content } from 'mo/workbench/sidebar';
+
+interface ISearchPaneToolBar {}
+
+const initialState = {
+    input: '',
+    toolbar: [{
+        id: 'Refresh',
+        title: 'Refresh',
+        disabled: true,
+        iconName: 'codicon-refresh'
+    }, {
+        id: 'Clear',
+        disabled: true,
+        title: 'Clear all',
+        iconName: 'codicon-clear-all'
+    }, {
+        id: 'Collapse',
+        title: 'Collapse all',
+        disabled: true,
+        iconName: 'codicon-collapse-all'
+    }]
+}
+
+type State = typeof initialState;
+
+export default class SearchPane extends React.Component<ISearchPaneToolBar, State> {
+
+    state: State;
+
+    constructor(props) {
+        super(props);
+        this.state = initialState;
+    }
+
+    onClick = (e, item) => {
+        console.log('onClick:', e, item );
+    }
+    
+    onInput = (e) => {
+        const nextToolBar = [...this.state.toolbar];
+     
+        const value = e.target.value;
+        if (!value) {
+            nextToolBar.forEach(item => {
+                item.disabled = true
+            });
+        } else {
+            nextToolBar.forEach(item => {
+                item.disabled = false
+            });
+        }
+        this.setState({
+            input: value,
+            toolbar: nextToolBar
+        })
+    }
+
+    render() {
+        const { toolbar } = this.state;
+        return (
+            <div className={prefixClaName('search-pane', 'sidebar')}>
+                <Header title={'Search'} toolbar={
+                    <Toolbar data={toolbar} onClick={this.onClick} />
+                } />
+                <Content>
+                    <h1>Search Pane</h1>
+                    <p>{this.state.input}</p>
+                    <input onInput={this.onInput}/>
+                </Content>
+            </div>
+        )
+    }
+}