Terminal Inlines

The Inlines of a Terminal are entities which enrich the Terminal with content that:

  • Dispatches actions

  • Has special styles

  • Has Tooltips

  • Acts as TabStops

  • Toggles content visibility

More Info

Creates an Inline to clear the content from the Terminal.

makeTAST.js

Copy 
export default ({ terminalId }) => [
  "I'm an Inline to ",
  {
    type: 'Inline',
    style: {
      color: 'red',
      cursor: 'pointer',
      ':hover': {
        color: 'white',
        background: 'red',
      },
    },
    action: {
      type: '@orion/terminals-helper/CLEAR_TERMINAL',
      terminalId,
    },
    tooltip: "Clear the Terminal's content",
    children: ['CLEAR'],
  },
  ' the Content',
];

POSWebPluginMain.js

Copy 
import React from 'react';
import makeTAST from './makeTAST.js';

export default class Plugin {
  constructor({ diHelper }) {
    this._diHelper = diHelper;

    diHelper.useValues({
      terminalId: '1',
    });
    diHelper.useFactories({
      tast: makeTAST,
    });
  }

  onInit() {
    this._diHelper.invoke(this._createTerminal);
    this._diHelper.invoke(this._initTerminalContent);
    this._diHelper.invoke(this._putComponents);
  }

  _createTerminal = ({ dispatchersHelper, terminalId }) => {
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });
  };

  _initTerminalContent = ({ tastHelper, dispatchersHelper, terminalId, tast }) => {
    // bind TAST to the vm
    const vm = {};
    const boundTAST = tastHelper.bind(tast, vm);

    // set TAST
    dispatchersHelper.dispatch('spliceTerminalTAST', {
      terminalId,
      tast: boundTAST,
      from: { line: 1 },
      to: { line: 2 },
    });
  };

  _putComponents = ({ uiHelper, terminalId }) => {
    const { putComponent, POSComponent } = uiHelper;

    putComponent('Example', () => (
      <div style={{ background: '#555', lineHeight: 1.1 }}>
        <POSComponent componentName="Terminal" terminalId={terminalId} />
      </div>
    ));
  };
}

index.js

Copy 
import POSWebPluginMain from './POSWebPluginMain.js';

export default POSWebPluginMain;

package.json

Copy 
{
  "name": "plugin-test",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

getTerminalInlineRef

Gets the ID of the Inline which has the mentioned ref and is in the same scope than the mentioned Inline.

Do an inlineId and a ref returns the ID of the Inline which has that ref and is inside the same scope of the Inline with the provided inlineId.

More info about Scopes

Usage
Copy 
getTerminalInlineRef(state: Object, { terminalId: String, inlineId: String, ref: String }): String;

  • state Object

    Required. The global state of the application.

  • terminalId String

    Required. ID of the terminal which contains the Inline.

  • inlineId String

    Required. The ID of the Inline which should be in the same scope than the Inline to find by its ref.

  • ref String

    Required. The Label to locate from the current Inline another different Inline which is inside the same scope.

Returns

  • String

    The ID of the Inline that has the provided reg and is in the same scope than the Inline with the provided inlineId. Returns null if the Inline could not be found.

Example
Copy 
const inline1 = { type: 'Inline', id: 'inline1', ref: 'ref1' };
const inline2 = { type: 'Inline', id: 'inline2' };
dispatchersHelper.dispatch('writeTerminalTAST', {
terminalId,
tast: [{ type: 'Scope', children: [inline1, inline2] }],
});
const getTerminalInlineRef = selectorsHelper.make('getTerminalInlineRef');
const foundRef = getTerminalInlineRef(storeHelper.getState(), {
terminalId,
inlineId: 'inline2',
ref: 'ref1',
});
expect(foundRef).toBe('inline1');

getTerminalInlineTooltip

Gets the tooltip of an Inline.

Usage
Copy 
getTerminalInlineTooltip(state: Object, { terminalId: String, inlineId: String }): String;

  • state Object

    Required. The global state of the application.

  • terminalId String

    Required. ID of the terminal which contains the Inline.

  • inlineId String

    Required. The ID of the Inline to get its tooltip.

Returns

  • String

    The tooltip of the Inline. Returns undefined if the Inline does not have a tooltip.

Example
Copy 
dispatchersHelper.dispatch('writeTerminalTAST', {
terminalId,
tast: [{ type: 'Inline', id: 'inline1', tooltip: 'Custom tooltip' }],
});
const getTerminalInlineTooltip = selectorsHelper.make('getTerminalInlineTooltip');
const foundTooltip = getTerminalInlineTooltip(storeHelper.getState(), {
inlineId: 'inline1',
terminalId,
});
expect(foundTooltip).toBe('Custom tooltip');

getTerminalInlineAction

Gets the action of an Inline. The action is a Redux action and must have a type.

Usage
Copy 
getTerminalInlineAction(state: Object, { terminalId: String, inlineId: String }): Object;

  • state Object

    Required. The global state of the application.

  • terminalId String

    Required. ID of the terminal which contains the Inline.

  • inlineId String

    Required. The ID of the Inline to get its action.

Returns

  • Object

    The action of the Inline. Returns undefined if the Inline does not have an action.

Example
Copy 
const action = { type: 'SAY_HELLO' };
dispatchersHelper.dispatch('writeTerminalTAST', {
terminalId,
tast: [{ type: 'Inline', id: 'inline1', action }],
});
const getTerminalInlineAction = selectorsHelper.make('getTerminalInlineAction');
const foundAction = getTerminalInlineAction(storeHelper.getState(), {
inlineId: 'inline1',
terminalId,
});
expect(foundAction).toBe(action);

getTerminalInlineActions

Gets the actions (events) of an Inline. These actions are events with their respective actions to dispatch for each event.

Supported Events

Usage
Copy 
getTerminalInlineActions(state: Object, { terminalId: String, inlineId: String }): Object;

  • state Object

    Required. The global state of the application.

  • terminalId String

    Required. ID of the terminal which contains the Inline.

  • inlineId String

    Required. The ID of the Inline to get its actions (events).

Returns

  • Object

    The actions (events) of the Inline. Returns an empty object if the Inline does not have any event.

Example
Copy 
dispatchersHelper.dispatch('writeTerminalTAST', {
terminalId,
tast: [
{
type: 'Inline',
id: 'inline1',
actions: {
onDoubleClick: { type: 'FETCH_POST' },
onContextMenu: { type: 'HIDE_POST' },
},
},
],
});
const getTerminalInlineActions = selectorsHelper.make('getTerminalInlineActions');
const foundActions = getTerminalInlineActions(storeHelper.getState(), {
inlineId: 'inline1',
terminalId,
});
expect(actions.onDoubleClick).toMatchObject({ type: 'FETCH_POST' });
expect(actions.onContextMenu).toMatchObject({ type: 'HIDE_POST' });

getTerminalInlineStyle

Gets the style of an Inline. The style is an Object with the css properties that the Inline has.

Usage
Copy 
getTerminalInlineStyle(state: Object, { terminalId: String, inlineId: String }): Object;

  • state Object

    Required. The global state of the application.

  • terminalId String

    Required. ID of the terminal which contains the Inline.

  • inlineId String

    Required. The ID of the Inline to get its style.

Returns

  • Object

    The styles of the Inline. Returns undefined if the Inline does not have any style.

Example
Copy 
const style = { color: 'red', background: 'blue' };
dispatchersHelper.dispatch('writeTerminalTAST', {
terminalId,
tast: [{ type: 'Inline', id: 'inline1', style }],
});
const getTerminalInlineStyle = selectorsHelper.make('getTerminalInlineStyle');
const foundStyle = getTerminalInlineStyle(storeHelper.getState(), {
inlineId: 'inline1',
terminalId,
});
expect(foundStyle).toBe(style);

isTerminalInlineTabStop

Checks if an Inline is or not a TabStop. By default an Inline is not a TabStop.

Usage
Copy 
isTerminalInlineTabStop(state: Object, { terminalId: String, inlineId: String }): Boolean;

  • state Object

    Required. The global state of the application.

  • terminalId String

    Required. ID of the terminal which contains the Inline.

  • inlineId String

    Required. The ID of the Inline to check if it is a TabStop.

Returns

  • Boolean

    true if the Inline is a TabStop, false if not.

Example
Copy 
dispatchersHelper.dispatch('writeTerminalTAST', {
terminalId,
tast: [
{ type: 'Inline', id: 'inline1', isTabStop: true }
{ type: 'Inline', id: 'inline2', isTabStop: false }
{ type: 'Inline', id: 'inline3' }
],
});
const state = storeHelper.getState();
const isTerminalInlineTabStop = selectorsHelper.make('isTerminalInlineTabStop');
const isInline1TabStop = isTerminalInlineTabStop(state, {
inlineId: 'inline1',
terminalId,
});
const isInline2TabStop = isTerminalInlineTabStop(state, {
inlineId: 'inline1',
terminalId,
});
const isInline3TabStop = isTerminalInlineTabStop(state, {
inlineId: 'inline1',
terminalId,
});
expect(isInline1TabStop).toBe(true);
expect(isInline2TabStop).toBe(false);
expect(isInline3TabStop).toBe(false);

isTerminalInlineVisible

Checks if an Inline is or not visible. By default an Inline is visible.

Usage
Copy 
isTerminalInlineVisible(state: Object, { terminalId: String, inlineId: String }): Boolean;

  • state Object

    Required. The global state of the application.

  • terminalId String

    Required. ID of the terminal which contains the Inline.

  • inlineId String

    Required. The ID of the Inline to check if it is visible.

Returns

  • Boolean

    true if the Inline is visible, false if not.

Example
Copy 
dispatchersHelper.dispatch('writeTerminalTAST', {
terminalId,
tast: [
{ type: 'Inline', id: 'inline1', isVisible: true }
{ type: 'Inline', id: 'inline2', isVisible: false }
{ type: 'Inline', id: 'inline3' }
],
});
const state = storeHelper.getState();
const isTerminalInlineVisible = selectorsHelper.make('isTerminalInlineVisible');
const isInline1Visible = isTerminalInlineVisible(state, {
inlineId: 'inline1',
terminalId,
});
const isInline2Visible = isTerminalInlineVisible(state, {
inlineId: 'inline1',
terminalId,
});
const isInline3Visible = isTerminalInlineVisible(state, {
inlineId: 'inline1',
terminalId,
});
expect(isInline1Visible).toBe(true);
expect(isInline2Visible).toBe(false);
expect(isInline3Visible).toBe(true);

getTerminalScopeInlines

Gets all the Inlines inside a Scope by:

  • The ID of the Scope.

  • The ID of one of the Inlines inside the Scope.

Usage
Copy 
getTerminalScopeInlines(state: Object, { terminalId: String, inlineId: String, scope: String }): [String];

  • state Object

    Required. The global state of the application.

  • terminalId String

    Required. ID of the terminal which contains the Inline.

  • inlineId String

    Required. The ID of the Inline to all the Inlines inside its same scope.

  • scope String

    Optional. The ID of the Scope to get all the Inlines that it contains.

Returns

  • String

    An array with the IDs of all the Inlines inside the scope.

Examples
Copy 
const inline1 = { type: 'Inline', id: 'inline1', ref: 'ref1' };
const inline2 = { type: 'Inline', id: 'inline2' };
dispatchersHelper.dispatch('writeTerminalTAST', {
terminalId,
tast: [{ type: 'Scope', id: 'scope1', children: [inline1, inline2] }],
});
const getTerminalScopeInlines = selectorsHelper.make('getTerminalScopeInlines');
const inlinesFound = getTerminalScopeInlines(storeHelper.getState(), {
terminalId,
inlineId: 'inline1',
});
expect(inlinesFound[0].id).toBe('inline1');
expect(inlinesFound[1].id).toBe('inline2');
Copy 
const inline1 = { type: 'Inline', id: 'inline1', ref: 'ref1' };
const inline2 = { type: 'Inline', id: 'inline2' };
dispatchersHelper.dispatch('writeTerminalTAST', {
terminalId,
tast: [{ type: 'Scope', id: 'scope1', children: [inline1, inline2] }],
});
const getTerminalScopeInlines = selectorsHelper.make('getTerminalScopeInlines');
const inlinesFound = getTerminalScopeInlines(storeHelper.getState(), {
terminalId,
scope: 'scope1',
});
expect(inlinesFound[0].id).toBe('inline1');
expect(inlinesFound[1].id).toBe('inline2');

getTerminalsInlineTypes

Gets all the global InlineTypes.

More Info

Usage
Copy 
getTerminalsInlineTypes(state: Object): Object;

  • state Object

    Required. The global state of the application.

Returns

  • Object

    An object which contains all the global InlineTypes.

Example
Copy 
const getTerminalsInlineTypes = selectorsHelper.make('getTerminalsInlineTypes');
const inlineTypes = getTerminalsInlineTypes(storeHelper.getState());

hideTerminalInline

Hides an Inline of a Terminal. If the Inline already was hidden, it stays hidden.

Note: Dispatches an action with the type @orion/terminals-helper/HIDE_TERMINAL_INLINE which can be handled.
Usage
Copy 
dispatchersHelper.dispatch('hideTerminalInline', {
terminalId: String,
inlineId: String,
});

  • terminalId String

    Required. ID of the terminal which contains the Inline to be hidden.

  • inlineId String

    Required. The ID of the Inline to be hidden.

Example
Copy 
const terminalId = 'terminal-1';
const inlineId = 'inline-1';

dispatchersHelper.dispatch('hideTerminalInline', { terminalId, inlineId });

showTerminalInline

Shows a hidden Inline of a Terminal. If the Inline already was visible, it stays visible.

Note: Dispatches an action with the type @orion/terminals-helper/SHOW_TERMINAL_INLINE which can be handled.
Usage
Copy 
dispatchersHelper.dispatch('hideTerminalInline', {
terminalId: String,
inlineId: String,
});

  • terminalId String

    Required. The ID of the terminal which contains the Inline to be shown.

  • inlineId String

    Required. The ID of the Inline to be shown.

Example
Copy 
const terminalId = 'terminal-1';
const inlineId = 'inline-1';
dispatchersHelper.dispatch('showTerminalInline', { terminalId, inlineId });

toggleTerminalInlineVisibility

Toggles the visibility of an Inline of a Terminal.

  • If the Inline was visible, it hides the Inline.

  • If the Inline was hidden, it shows the Inline.

Note: Dispatches an action with the type @orion/terminals-helper/TOGGLE_TERMINAL_INLINE_VISIBILITY which can be handled.
Usage
Copy 
dispatchersHelper.dispatch('toggleTerminalInlineVisibility', {
terminalId: String,
inlineId: String,
});

  • terminalId String

    Required. The ID of the terminal which contains the Inline to toggle its visibility.

  • inlineId String

    Required. The ID of the Inline to toggle its visibility.

Example
Copy 
const terminalId = 'terminal-1';
const inlineId = 'inline-1';
dispatchersHelper.dispatch('toggleTerminalInlineVisibility', {
terminalId,
inlineId,
});

setTerminalInline

Modifies an existing Inline of a Terminal, adds new properties, and merges existing ones.

  • If the Inline does not have property defined, it adds it.

  • If the Inline has the property defined, it overwrites its value.

  • If the Inline does not exist, it does nothing, the Inline is not created.

The properties that can be modified are:

  • style

  • action

  • actions

  • tooltip

  • isTabStop

  • isVisible

  • inlineType

  • themeType

  • ref

The content property can not be modified by this method.

Note: Dispatches an action with the type @orion/terminals-helper/SET_TERMINAL_INLINE which can be handled.
Usage
Copy 
dispatchersHelper.dispatch('setTerminalInline', {
terminalId: String,
inline: Object,
});

  • terminalId String

    Required. The ID of the terminal which contains the Inline to be hidden.

  • inlineId String

    Required. The Inline to be set. It must contain the ID of the Inline.

Example
Copy 
const terminalId = 'terminal-1';
const inlineId = 'inline-1';
const inline = {
id: 'inline-1',
tooltip: 'new tooltip',
action: { type: 'NEW-ACTION' },
},
dispatchersHelper.dispatch('setTerminalInline', { terminalId, inline });

setTerminalsInlineTypes

Modifies the global InlineTypes. Adds new InlineTypes and overwrites existing ones.

  • If the InlineType does not exists, it is created.

  • If the InlineType already exists, it overwrites the existing InlineType with the new one.

More Info

Note: Dispatches an action with the type @orion/terminals-helper/SET_TERMINALS_INLINE_TYPES which can be handled.
Usage
Copy 
dispatchersHelper.dispatch('setTerminalsInlineTypes', {
inlineTypes: Object,
});

  • inlineTypes String

    Required. An object which contains one or more InlineTypes to create new InlineTypes or overwrite existing InlineTypes.

Example
Copy 
const inlineTypes = {
Red: {
style: {
color: 'red',
},
},
FetchGet: {
action: {
inlineType: 'FETCH_GET',
},
},
};
dispatchersHelper.dispatch('setTerminalsInlineTypes', { inlineTypes });