add simple action indicator

Author: MykolaGolubyev

src/components/actions/ActionListener.ts

@@ -0,0 +1,3 @@
+export interface ActionListener {
+    onAction(label: string): void;
+}

src/components/actions/ActionsListener.ts

@@ -0,0 +1,19 @@
+import { ActionListener } from './ActionListener';
+
+export class ActionsListener {
+    private listeners: ActionListener[] = [];
+
+    add(listener: ActionListener) {
+        this.listeners.push(listener);
+    }
+
+    remove(listener: ActionListener) {
+        this.listeners = this.listeners.filter(l => l !== listener);
+    }
+
+    notify(label: string) {
+        this.listeners.forEach(l => l.onAction(label));
+    }
+}
+
+export const actionsListener = new ActionsListener();

src/components/actions/VisualizedActions.css

@@ -0,0 +1,21 @@
+.rcv-visualized-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    justify-content: end;
+
+    position: fixed;
+    right: 0;
+    bottom: 0;
+
+    z-index: 1000;
+}
+
+.rcv-visualized-action {
+    font-family: var(--rcv-font-family);
+    background-color: var(--rcv-attention-text-color);
+    color: white;
+
+    padding: 16px;
+    border: 1px solid var(--rcv-primary-border-color);
+}

src/components/actions/VisualizedActions.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { actionsListener } from './ActionsListener';
+import { ActionListener } from './ActionListener';
+import Timer = NodeJS.Timer;
+
+import './VisualizedActions.css';
+
+export interface State {
+    actionLabelToShow?: string;
+    timer?: Timer;
+}
+
+export class VisualizedActions extends React.Component<{}, State> {
+    state: State = {
+    };
+
+    private actionListener: ActionListener;
+
+    constructor(props: {}) {
+        super(props);
+        this.actionListener = {
+            onAction: this.onNewAction
+        };
+    }
+
+    render() {
+        const {actionLabelToShow} = this.state;
+
+        return (
+            <div className="rcv-visualized-actions">
+                {actionLabelToShow &&
+                    <div className="rcv-visualized-action">{actionLabelToShow}</div>
+                }
+            </div>
+        );
+    }
+
+    componentDidMount() {
+        actionsListener.add(this.actionListener);
+    }
+
+    componentWillUnmount() {
+        actionsListener.remove(this.actionListener);
+    }
+
+    private removeActions = () => {
+        this.setState({actionLabelToShow: undefined});
+    }
+
+    private onNewAction = (label: string) => {
+        this.setState(prev => {
+            if (prev.timer) {
+                clearTimeout(prev.timer);
+            }
+
+            return {
+                actionLabelToShow: label,
+                timer: setTimeout(this.removeActions, 3000)
+            };
+        });
+    }
+}

src/components/actions/actions.ts

@@ -0,0 +1,8 @@
+import { actionsListener } from './ActionsListener';
+
+export function simpleAction(label: string) {
+    return () => {
+        actionsListener.notify(label);
+        console.log('action triggered: ' + label);
+    };
+}

src/components/viewer/ComponentViewer.tsx

@@ -24,6 +24,8 @@ import { ComponentViewerDropDown } from './ComponentViewerDropDown';
 import { ComponentViewerHelp } from './help/ComponentViewerHelp';
 import { globalActionDefaultKeys } from './GlobalActions';
 
+import { VisualizedActions } from '../actions/VisualizedActions';
+
 import './ComponentViewer.css';
 
 export interface Props {
@@ -73,6 +75,7 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
             <React.Fragment>
                 <GlobalHotKeysHandler keyBoundActions={this.hotKeyBoundActions}/>
                 {rendered}
+                <VisualizedActions/>
             </React.Fragment>
         );
     }

src/demo-components/Button.css

@@ -2,6 +2,10 @@
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 4px;
+
+    max-width: 240px;
+
+    cursor: pointer;
 }
 
 .button.primary {

src/demos/buttons.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 
 import { Registry } from '../components';
 import { Button } from '../demo-components/Button';
+import { simpleAction } from '../components/actions/actions';
 
-function onClick() {
-    return 0;
-}
+const onPrimaryClick = simpleAction('primary clicked');
+const onSecondaryClick = simpleAction('secondary clicked');
 
 export function buttonsDemo(registry: Registry) {
     registry
-        .add('primary', () => <Button primary label="click me" onClick={onClick}/>,
-             `long description
-             multiline markdown`)
-        .add('secondary', () => <Button label="click me" onClick={onClick}/>);
+        .add('primary',
+             () => <Button primary label="click me" onClick={onPrimaryClick}/>)
+        .add('secondary',
+             () => <Button label="click me" onClick={onSecondaryClick}/>);
 }