Terminal Themes

This section is about the Themes of the Terminal. The themes specify how the Terminals should look like.

There are a set of built-in Themes which includes a Default Theme.

Show example

TerminalThemeSelector.gast

Copy

<div>
  <select
    value="select('getTerminalThemeId', { terminalId })"
    onChange="({ target: { value } }) => dispatch('replaceTerminalThemeId', { terminalId, themeId: value })"
  >
    <For in="select('getTerminalsThemesIds')">
      <template themeId="item" index="index">
        <option value="themeId">
          {themeId}
        </option>
      </template>
    </For>
  </select>
</div>

POSWebPluginMain.js

Copy

import React from 'react';
import TerminalThemeSelector from './TerminalThemeSelector.gast';

export default class Plugin {
  constructor({ uiHelper, dispatchersHelper, diHelper }) {
    this._uiHelper = uiHelper;
    this._dispatchersHelper = dispatchersHelper;
    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 },
    });
    dispatchersHelper.dispatch('appendTerminalTAST', {
      terminalId,
      tast: ['Hello'],
    });
  };

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

    putGASTComponent('TerminalThemeSelector', TerminalThemeSelector);
    putComponent('Example', () => (
      <div style={{ lineHeight: 1.1 }}>
        <POSComponent componentName="TerminalThemeSelector" terminalId={terminalId} />
        <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",
            "replaceTerminalThemeId",
            "appendTerminalTAST"
          ]
        }
      }
    },
    "selectorsHelper": {
      "selectorFactories": {
        "consumes": {
          "@orion/terminals": [
            "getTerminalThemeId",
            "getTerminalsThemesIds"
          ]
        }
      }
    }
  }
}

getTerminalsTheme

Given a themeId, returns the complete theme associated with that Id.

getTerminalsTheme(state: Object, {themeId: String}): Object);

• state Object

  Required. The global state of the application.

• themeId String

  Required. The ID of the theme that we want to retrieve.

Returns

Object

The complete theme.

Example

const state = storeHelper.getState();
const themeId = 'theme-1';
const getTerminalsTheme = selectorsHelper.make('getTerminalsTheme');
const theme = getTerminalsTheme(state, { themeId });

getTerminalThemeId

Given a terminalId, returns the themeId associated to it.

getTerminalThemeId(state: Object, { terminalId: String }): String;

• state Object

  Required. The global state of the application.

• terminalId String

  Required. The ID from the terminal of which we want to know the theme.

Returns

String

ID of the theme that is applied to the terminal.

Example

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

getTerminalsThemesIds

Returns an array with all the themes' IDs.

getTerminalsThemesIds(state: Object): [String];

• state Object

  Required. The global state of the application.

Returns

String

Array with all the themes' IDs.

Example

const state = storeHelper.getState();
const getTerminalsThemesIds = selectorsHelper.make('getTerminalsThemesIds');
const themesIds = getTerminalsThemesIds(state);

replaceTerminalThemeId

Changes the themeId from a terminal, changing it's theme.

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

• terminalId String

  Required. The terminal ID from the terminal that we want to change.

• themeID String

  Required. The ID of the new theme.

Example

const terminalId = 'terminal-1';
const themeId = 'theme-1';

dispatchersHelper.dispatch('replaceTerminalThemeId', { terminalId, themeId });

createTerminalsTheme

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

dispatchersHelper.dispatch('createTerminalsTheme', { theme: { id: String } });

• theme Object

  Required. The theme to be created.

  • id String

    Required. The ID of the theme to be created.

Example

const theme = {
  id: 'theme-1',
  name: 'Test Theme',
  version: '1.0.0',

  selection: {
    background: 'black',
    color: 'red',
    opacity: '0.5',
  },
};

dispatchersHelper.dispatch('createTerminalsTheme', { theme });