Components

Last Updated on October 26, 2024 by Neil Murray

Visual Components #

Components

  • Form
    • Edit
      • Type
    • Items
      • InputItem
      • InputItemMenu
    • Notice
    • Select
      • SelectItem
      • Tip

Further reading:

back to top

Visual Component Functions #

src/visual/index.js – Class Visual #

React Functions

  • componentWillMount ()
    • allow loading of selected Template to Skins>Form tab [x]
  • componentDidMount ()
    • add current form field items with user settings or setup default form [x]

Action Functions

  • Visual.onTreeChange (treeData) – update RST tree data [x]
  • Visual.saveVisualForm (event) – save …
  • Visual.updateTreeData () –
  • Visual.duplicateNode (rowInfo) – duplicate form field including all sub-items [x]
  • Visual.deleteNode (rowInfo) – delete form field including all sub-items
  • Visual.addElementOnClick (node) – click event to add element into RST tree
  • Visual.getAncestor (rowInfo) – get current edited node top level parent node ???
  • Visual.clickMenu (rowInfo, menu) – pass rowInfo for item where Add-ons menu is selected

Edit Functions

  • Visual.editCF7Element (rowInfo) – edit Form Field Item
  • Visual.editOnChange (event, optionsArrayType = null, index = null, _rowInfo = null) – edit handling 
  • Visual.editOnKeyPress (event) –
  • Visual.validateOnBlur (event) – edit input validation/sanitation
  • Visual.addEditCF7Option (event) – add option item to CF7 tag options [x]
  • Visual.removeEditCF7Option (event, index) – remove option item [x]
  • Visual.closeEditModal () – close edit window
  • changeNodeType () –

Toolbar Functions

  • Visual.clickVisualObject () –
  • Visual.clickFormOptions () –

Notice Functions

  • Visual.showNotice (content, status, isDismissible) – show notice in Skins>Form tab [x]
  • Visual.removeNotice () – remove notice [x]

State

treeData: [], //
showEditModal: false, //
notice: {
  status: 'success',
  content: '',
  isDismissible: true,		  
},
rowInfo: null,
value: [],
showTreeData: false,

RST Functions

  • insertNode – insert a node into the tree at the given depth, after the minimum index
  • removeNodeAtPath – removes the node at the specified path and returns the resulting treeData
  • getNodeAtPath – gets the node at the specified path
  • walk – walk descendants depth-first and call a callback on each
  • changeNodeAtPath – replaces node at path with object, or callback-defined object

src/visual/Form/index.js – Class Form #

React Functions

  • componentDidUpdate ()

Action Functions

  • saveVisualForm (event) – save …

back to top

Utility Functions #

src/visual/util/index.js

  • cf7sItems – define all CF7 Tags & CF7 Skins Items [x]
  • cf7sRequest () – AJAX post request function [x]
  • cf7sDropRules () – 
  • cf7sSurroundingRules () – 
  • cf7sDuplicateRules () –
  • getVisualVar () – @since 2.3.0
  • randomizeName – random tag name numbering
  • mergeDefault (nodes) – merge node with default from cf7sItems.js
  • versionCompare () – compares two software version numbers

back to top

Add-ons Functions #

src/visual/Addons/addons.js #

  • register ( hook, callback ) –
  • get ( hook ) –

src/visual/Addons/Multi/index.js #

  • updateVisualState –
  • updateVisualTreeData –
  • onTabClick –
  • onTabDoubleClick –
  • onAddTab –
  • onRemoveTab –
  • updateTabs –
  • dragTab –
  • dropTab –
  • scrollTab –
  • redrawScroll –

Global – window.cf7svisual_save_multi() – connect Multi and Visual by updating Multi tabs and settings.

back to top

Further reading

back to top

Notes

Add notes here

Save all Images to Sync – use ..\Sync\..\Development\Development Guidelines\CF7 Skins Code\CF7 Skins Visual Tools\Components\