Terminal TAST

Visibility

Inlines are visible by default, but they have a property called isVisible that allows hiding them.

By Attribute

Visible by default

All Inlines are visible by default. There is no need to add a property.

tast.json

Copy 
[
  "Hello",
  {
    "type": "Inline",
    "children": [", I am Visible"]
  },
  "!"
]

package.json

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

Explicitly visible

Although all Inlines are visible by default, you can add explicitly isVisible to true. It is helpful if this value may change programmatically, or if you want to explicit that it might change.

tast.json

Copy 
[
  "Hello",
  {
    "type": "Inline",
    "isVisible": true,
    "children": [", I am Visible"]
  },
  "!"
]

package.json

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

Invisble inlines

Hide any Inline by setting isVisible to false. It does not remove the inline but makes it invisible. Note that it affects anything inside it, including newlines.

tast.json

Copy 
[
  "Hello",
  {
    "type": "Inline",
    "isVisible": false,
    "children": [", I am a ghost"]
  },
  "!"
]

package.json

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

Programmatively

The attribute isVisible is present in the TAST before adding it to the terminal. Once the terminal shows the TAST content, there is an API that allows showing or hiding Inlines. The available API is:

Note that in the following example, we use the Scope and refs to find the inline ids more quickly.

configureMyRefAction.js

Copy 
import tast from './tast.json';

export default function configureMyRefAction({ dispatchersHelper, selectorsHelper, storeHelper }) {
  const getTerminalInlineRef = selectorsHelper.make('getTerminalInlineRef');
  const { getState } = storeHelper;

  storeHelper.handleReducedAction('example/MY_SHOW_ACTION', ({ action }) => {
    const { terminalId, inlineId, ref } = action;
    const refedInlineId = getTerminalInlineRef(getState(), { terminalId, inlineId, ref });
    dispatchersHelper.dispatch('showTerminalInline', { terminalId, inlineId: refedInlineId });
  });

  storeHelper.handleReducedAction('example/MY_HIDE_ACTION', ({ action }) => {
    const { terminalId, inlineId, ref } = action;
    const refedInlineId = getTerminalInlineRef(getState(), { terminalId, inlineId, ref });
    dispatchersHelper.dispatch('hideTerminalInline', { terminalId, inlineId: refedInlineId });
  });

  storeHelper.handleReducedAction('example/MY_TOGGLE_ACTION', ({ action }) => {
    const { terminalId, inlineId, ref } = action;
    const refedInlineId = getTerminalInlineRef(getState(), { terminalId, inlineId, ref });
    dispatchersHelper.dispatch('toggleTerminalInlineVisibility', {
      terminalId,
      inlineId: refedInlineId,
    });
  });

  const isTerminalInlineVisible = selectorsHelper.make('isTerminalInlineVisible');

  storeHelper.handleReducedAction('example/MY_QUESTION_ACTION', ({ action }) => {
    const { terminalId, inlineId, ref } = action;
    const refedInlineId = getTerminalInlineRef(getState(), { terminalId, inlineId, ref });
    const isVisible = isTerminalInlineVisible(getState(), { terminalId, inlineId: refedInlineId });
    dispatchersHelper.dispatch('appendTerminalTAST', {
      terminalId,
      tast: [`- The visibility is ${isVisible}\n`],
    });
  });
}

tast.json

Copy 
[
  {
    "type": "Scope",
    "children": [
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_HIDE_ACTION",
          "ref": "anInline"
        },
        "children": ["[ HIDE INLINE   ]\n"]
      },
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_SHOW_ACTION",
          "ref": "anInline"
        },
        "children": ["[ SHOW INLINE   ]\n"]
      },
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_TOGGLE_ACTION",
          "ref": "anInline"
        },
        "children": ["[ TOGGLE INLINE ]\n"]
      },
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_QUESTION_ACTION",
          "ref": "anInline"
        },
        "children": ["[ IS VISIBLE ?  ]\n"]
      },
      "\n",
      {
        "type": "Inline",
        "ref": "anInline",
        "children": ["- An Inline\n"]
      }
    ]
  }
]

index.js

Copy 
import configureMyRefAction from './configureMyRefAction.js';
import configureTerminal from './configureTerminal.js';
import configureExampleComponent from './configureExampleComponent.js';

export default class Plugin {
  constructor(dio) {
    configureMyRefAction(dio);
    configureTerminal(dio);
    configureExampleComponent(dio);
  }
}

configureTerminal.js

Copy 
import tast from './tast.json';

export default function configureTerminal({ dispatchersHelper, tastHelper }) {
  dispatchersHelper.dispatch('createTerminal', { terminal: { id: '1' } });
  dispatchersHelper.dispatch('spliceTerminalTAST', {
    terminalId: '1',
    tast: tastHelper.bind(tast, {}),
    from: { line: 1 },
    to: { line: 2 },
  });
}

configureExampleComponent.js

Copy 
import React from 'react';

export default function configureExampleComponent({ uiHelper }) {
  uiHelper.putComponent('Example', () => (
    <div style={{ background: '#555', lineHeight: 1.1 }}>
      <uiHelper.POSComponent componentName="Terminal" terminalId="1" />
    </div>
  ));
}

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "showTerminalInline",
            "toggleTerminalInlineVisibility",
            "spliceTerminalTAST",
            "hideTerminalInline",
            "appendTerminalTAST"
          ]
        }
      }
    },
    "selectorsHelper": {
      "selectorFactories": {
        "consumes": {
          "@orion/terminals": [
            "getTerminalInlineRef",
            "isTerminalInlineVisible"
          ]
        }
      }
    }
  }
}

Toggling with toggleRef

There is an special action with no type that has only one property toggleRef. It toggles a reference by showing and hiding it. It toggles the value of the isVisible.

tast.json

Copy 
[
  {
    "type": "Scope",
    "children": [
      {
        "type": "Inline",
        "action": {
          "toggleRef": "first"
        },
        "inlineType": "infoLink",
        "children": ["[ Toggle Ref: 'first' ]\n"]
      },
      {
        "type": "Inline",
        "ref": "first",
        "children": ["- I am first\n"]
      },
      {
        "type": "Inline",
        "ref": "second",
        "children": ["- Second Inline\n"]
      }
    ]
  }
]

package.json

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