Terminal Decorators

Decorators are utilities which allow to transform the text of the Terminal into a different text or a TAST.

The text is transformed even when the user is typing in the terminal.

Note: The output text or TAST must have the same length than the input text to be transformed.

Show Example

Transforms text for "hello/bye world".

registorDecorator.js

Copy

export default ({ terminalsHelper }) => {
  const decorator = {
    decorateText: (text) => text.replace('hello', 'bye  '),
  };

  terminalsHelper.registerDecorator(decorator);
};

tast.json

Copy

[">hello world!!"]

POSWebPluginMain.js

Copy

import React from 'react';
import tast from './tast.json';
import registerDecorator from './registerDecorator.js';

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, tastHelper, diHelper, terminalId }) => {
    // bind tast to the vm
    const boundTAST = tastHelper.bind(tast);

    // create terminal
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });

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

    // register decorator
    diHelper.invoke(registerDecorator);
  };

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

registerDecorator

Registers a decorator which transforms the text of the Terminal into a different text or a TAST.

Copy

registerDecorator(decorator: { decorateText: (String) => String | Array }): void;

decorator Object

Required. The decorator to be registered.
decorateText Function

Required. A function which receives the text of each row and returns a TAST or a String of the transformed text.

Show Transform Example

Transforms the text to upper case.

registorDecorator.js

Copy

export default ({ terminalsHelper }) => {
  const decorator = {
    decorateText: (text) => text.toUpperCase(),
  };

  terminalsHelper.registerDecorator(decorator);
};

tast.json

Copy

[">hello world!!"]

POSWebPluginMain.js

Copy

import React from 'react';
import tast from './tast.json';
import registerDecorator from './registerDecorator.js';

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, tastHelper, diHelper, terminalId }) => {
    // bind tast to the vm
    const boundTAST = tastHelper.bind(tast);

    // create terminal
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });

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

    // register decorator
    diHelper.invoke(registerDecorator);
  };

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

Show Link Component Example

Links to the www.travelport.com web site.

registorDecorator.js

Copy

export default ({ terminalsHelper }) => {
  const decorator = {
    decorateText: (text) => ({
      type: 'Link',
      href: 'https://www.travelport.com/',
      target: 'Travelport',
      children: [text],
    }),
  };

  terminalsHelper.registerDecorator(decorator);
};

tast.json

Copy

["Go to Travelport Site"]

POSWebPluginMain.js

Copy

import React from 'react';
import tast from './tast.json';
import registerDecorator from './registerDecorator.js';

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, tastHelper, diHelper, terminalId }) => {
    // bind tast to the vm
    const boundTAST = tastHelper.bind(tast);

    // create terminal
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });

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

    // register decorator
    diHelper.invoke(registerDecorator);
  };

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

Show Style Component Example

Adds the Style text style.

registorDecorator.js

Copy

export default ({ terminalsHelper }) => {
  const decorator = {
    decorateText: (text) => ({
      type: 'Style',
      style: {
        color: 'cyan',
        background: 'black',
      },
      children: [text],
    }),
  };

  terminalsHelper.registerDecorator(decorator);
};

tast.json

Copy

["With some Styles"]

POSWebPluginMain.js

Copy

import React from 'react';
import tast from './tast.json';
import registerDecorator from './registerDecorator.js';

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, tastHelper, diHelper, terminalId }) => {
    // bind tast to the vm
    const boundTAST = tastHelper.bind(tast);

    // create terminal
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });

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

    // register decorator
    diHelper.invoke(registerDecorator);
  };

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

Show Action Component Example

Clears all text from the terminal.

registorDecorator.js

Copy

export default ({ terminalsHelper }) => {
  const decorator = {
    decorateText: (text) => ({
      type: 'Action',
      action: {
        type: '@orion/terminals-helper/CLEAR_TERMINAL',
        terminalId: '1',
      },
      children: [text],
    }),
  };

  terminalsHelper.registerDecorator(decorator);
};

tast.json

Copy

["Clear terminal"]

POSWebPluginMain.js

Copy

import React from 'react';
import tast from './tast.json';
import registerDecorator from './registerDecorator.js';

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, tastHelper, diHelper, terminalId }) => {
    // bind tast to the vm
    const boundTAST = tastHelper.bind(tast);

    // create terminal
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });

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

    // register decorator
    diHelper.invoke(registerDecorator);
  };

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

registerDecorator - withFactory

Factories are allowed to register decorators using withFactory.

Copy

registerDecorator(decorator: { decorateText: withFactory(makeDecorator: DecoratorFunction) }): void;

decorator Object

Required. The decorator to be registered.
decorateText Function

Required A function which receives the text of each row and returns a TAST or a String of the transformed text.
makeDecorator Function

Required Function to create the decorator.
withFactory Decorator

Required Decorator to allow dependency injection.

Show Example

Registors "Hello World!!" text string.

registerDecorator.js

Copy

import { withFactory } from '@orion/core';

export default ({ terminalsHelper }) => {
  function makeDecorateText() {
    const decorateText = (text) => text.toUpperCase();
    return decorateText;
  }

  terminalsHelper.registerDecorator({
    decorateText: withFactory(makeDecorateText),
  });
};

tast.json

Copy

[">hello world!!"]

POSWebPluginMain.js

Copy

import React from 'react';
import tast from './tast.json';
import registerDecorator from './registerDecorator.js';

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, tastHelper, diHelper, terminalId }) => {
    // bind tast to the vm
    const boundTAST = tastHelper.bind(tast);

    // create terminal
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });

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

    // register decorator
    diHelper.invoke(registerDecorator);
  };

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