Terminal Basic

This section is about the basic functionality of the Terminal (creating, deleting, retrieving... terminal/s).

Show Example

POSWebPluginMain.js

Copy

import React from 'react';

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

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

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

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

  _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"
          ]
        }
      }
    }
  }
}

 

 

Terminal Component

The Terminal Component is exposed as a POSComponent and is used for rendering Terminals.

Properties

terminalId String

Required. The ID of the Terminal to be rendered. It requires the Terminal to be created in order to render it.

isAdaptive Boolean

Optional.Default: false

Indicates to the Terminal to adapt its height to its container.

Important: The Terminal's container must have a height specified, otherwise it won't work.

Examples

Using POSComponent:

const makeMyTerminal = (dio) => {
  const { POSComponent } = dio.uiHelper;

  const MyTerminal = () => <POSComponent componentName="Terminal" terminalId="my-terminal" />;
};

Using usePOSComponents hook:

// file: hooks.js
import { createContext, useContext } from 'react';

export const HooksContext = createContext();

export function useHooks() {
  return useContext(HooksContext);
}

export function usePOSComponents(...args) {
  const hooks = useHooks();
  return hooks.usePOSComponents(...args);
}

// file: MyTerminal.js
import { usePOSComponents } from './hooks';

const MyTerminal = () => {
  const [Terminal] = usePOSComponents('Terminal');

  return <Terminal terminalId="my-terminal" />;
};

createTerminal

Makes a new terminal if it does not exist yet. If the terminal already exists, it does nothing.

It is required to provide a terminal (Object) with an "id" (String). The rest of properties are ignored.

Usage

dispatchersHelper.dispatch('createTerminal', { terminal: { id: String } });

• terminal Object

  Required. The terminal to be created.

• id String

  Required. The ID of the terminal to be created. This ID is required.

Example

const terminal = { id: 'terminal-1' };
dispatchersHelper.dispatch('createTerminal', { terminal });

deleteTerminal

Deletes an existing terminal. If the terminal does not exist, it does nothing.

It is required to provide the "id" (terminalId) of the terminal to be deleted.

Note: Dispatches an action with the type @orion/terminals-helper/DELETE_TERMINAL which can be handled.

Usage

dispatchersHelper.dispatch('deleteTerminal', { terminalId: String });

• terminalId String

  The ID of the terminal to be deleted.

Example

const terminalId = 'terminal-1';
dispatchersHelper.dispatch('deleteTerminal', { terminalId });

clearTerminal

Clears an existing terminal. If the terminal does not exist, it does nothing.

When clearing a terminal, restores the content and the cursor to the initial ones. A SOM in the first position and the cursor just after it (>█).

It is required to provide the "ID" (terminalId) of the terminal to be cleared.

Usage

dispatchersHelper.dispatch('clearTerminal', { terminalId: String });

• terminalId String

  Required. The ID of the terminal to be cleared.

Example

const terminalId = 'terminal-1';
dispatchersHelper.dispatch('clearTerminal', { terminalId });

getTerminalIds

Returns a list with the IDs of all the terminals that are created.

getTerminalIds(state: Object): [String];

• state Object

  Required. The global state of the application.

Returns

• [String]

  The list with all the IDs of all the created terminals.

Example

const state = storeHelper.getState();
const getTerminalsIds = selectorsHelper.make('getTerminalsIds');
const terminalsIds = getTerminalsIds(state);

isTerminalCreated

Checks if a terminal has been already created or not.

It is required to send the ID of the terminal (terminalId) to check its existence.

isTerminalCreated(state: Object, { terminalId: String }): Boolean;

• state Object

  Required. The global state of the application.

• terminalId String

  Required. The ID of the terminal to check if has been created or not.

Returns

• Boolean

• true if the terminal is already created, false if not.

Example

const state = storeHelper.getState();
const isTerminalCreated = selectorsHelper.make('isTerminalCreated');
const terminalId = 'terminal-1';
const isCreated = isTerminalCreated(state, { terminalId });