CF Editor Field State

This package will be used in the Caldera Forms admin for:

• The one true source of state for conditionals -- storing there settings in the DOM is the biggest problem and probably the easiest one to replace.
• Keeping an up to date magic tags auto-selector. Fields and processors will -- for now -- still write there data to the DOM. Will have ability to get magic tags by type.
• Some field state managment, enough for magic tags.
• Ability for processors to update avaible magic tags in real time.

See: https://github.com/CalderaWP/Caldera-Forms/issues/3435

This project was bootstrapped with TSDX.

Install

• Install with Yarn:

  • yarn add @calderajs/cf-editor-state

• Install With npm

  • npm i @calderajs/cf-editor-state

API Documentation

The API documentation, which is generated using typedoc is avaible at http://cf-editor-state.saturdaydev.com/

Usage

Managing State Of Conditional Logic

import cfEditorState from 'this-package';
const state = cfEditorState();
state.addConditional({ type: 'disable', ID: 'c1' });
state.updateConditonal({ type: 'enable', ID: 'c1' });
state.removeConditonal('c1');

Adding, Updating And Removing A Field

import cfEditorState from 'this-package';
const state = cfEditorState();

//Add one field
state.addField({
  ID: 'fld3',
  tag: '3',
  slug: 'three',
  label: 'Three',
});

//Get all the fields
console.log(state.getAllFields());

//Change the field
state.updateField({
  ID: 'fld3',
  tag: 'three',
  slug: 'three',
  label: 'Option Three',
});

//Get updated field
console.log(state.getField('fld3'));

//Remove field
state.removeField('fld3');

Tags From Processors

Processor's can add have magic tags. When a processor is added, it will add a magic tag type. And when a processor is removed, it will remove that tag type.

import cfEditorState from 'this-package';
const state = cfEditorState();
state.addMagicType(
  //name of procersor
  'special_payment',
  //processors use brackets for magic tags
  true,
  //the processor's magic tags
  [
    { tag: 'transaction_id', type: 'string' },
    { tag: 'transaction_status', type: 'string' },
  ]
);

//Remove a processor's magic tag types:
state.removeMagicTagType('special_payment');

Development

Below is a list of commands you will probably find useful.

yarn start

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

Your library will be rebuilt if you make edits.

yarn build

Bundles the package to the dist folder. The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

yarn test

Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.

Or: yarn test --watchAll

yarn docs

Generate documentation site.