Hooks

useDatasourceSub

A hook that subscribes to changes in datasources and performs replacements in the Page based on specified actions.

useSources

A hook that facilitates managing datasources and current elements associated with a web form. It provides methods for setting, fetching, and listening to changes in datasource values.

Parameters

param	description
options	UseSourcesOptions An object allowing configuration of the hook behavior. Includes options such as datasourceChange, currentElementChange and acceptIteratorSel.

Returns

{object}

useEnhancedNode

A hook that enhances the functionality of a Craft.js node, providing features for handling data transfer, managing datasources, and styling components.

Parameters

param	description
collector	(optional) (args: Node) => K
options	(optional) { stopPropagation?: (data: IDataTransfer) => boolean; onDrop?: (e: any) => void; }

Returns

{UseEnhancedNodeReturnType} - An object containing enhanced node information, connectors, and actions.

Example 1

Basic usage:

import { useEnhancedNode } from '@ws-ui/webform-editor';
import { useState, useEffect } from 'react';

const ExampleDelayedState = () => {
  const { actions, connectors, linkedNodes } = useEnhancedNode((node) => ({
    nodes: node.data.nodes,
    linkedNodes: node.data.linkedNodes,
    node,
  }));

  const [delayedState, setDelayedState] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      // Fetch your data, e.g., from an API
      const result = await fetch('https://api.example.com/data');
      const data = await result.json();

      setDelayedState(data);

      actions.setDatasourceValue({ key: 'yourDatasourceKey', value: data });
    };

    fetchData();
  }, [actions]);

  return (
    <div ref={connectors.connect}>

      {delayedState && (
        <div>
          {JSON.stringify(delayedState)}
        </div>
      )}
    </div>
  );
};

Example 2

Handling drop events:

import { useEnhancedNode } from '@ws-ui/webform-editor';

const DraggableComponent = () => {
 const { actions, connectors, linkedNodes } = useEnhancedNode((node) => ({
   nodes: node.data.nodes,
    linkedNodes: node.data.linkedNodes,
    node,
  }), {
    onDrop: (event) => {
      console.log('Dropped:', event);
    },
  });

  return (
    <div
      ref={connectors.connect}
      draggable
      onDragStart={(event) => {
        event.dataTransfer.setData('text', 'your data here');
      }}
    >

      </div>
      );
    };

info

The useEnhancedNode function returns an object with the following structure:

• id: The ID of the node.
• store: The store associated with the node.
• connectors: Object containing connectors to interact with the Craft.js editor.
• ...collected: Additional data collected by the collector function.
• actions: An object containing methods for manipulating node values, including setProp, setStyle, setDatasource, and setIterator.

useEnhancedEditor

A Hook that provides methods and state information associated with the entire editor.

Parameters

param	description
collect	A function that collects relevant state information from the editor state. The component will re-render when the values returned by this function changes.

Returns

{useEditorReturnType<S>}

Example 1

Basic usage:

import { useEnhancedEditor } from "@ws-ui/webform-editor";

const BasicUsageExample = () => {
const { isActive, enabled, canvas } = useEnhancedEditor();

 // Your component logic based on the editor state
 return (
   <div>
    <p>Is Active: {isActive ? 'Yes' : 'No'}</p>
    <p>Editor Enabled: {enabled ? 'Yes' : 'No'}</p>
    <p>Canvas Element: {canvas}</p>

   // Additional logic and components based on the editor state
    </div>
    );
  };

Example 2

Basic usage with collector:

import { useEnhancedEditor } from "@ws-ui/webform-editor";

const CollectorUsageExample = () => {
 const collect = (state, query) => ({
    enabled: state.options.enabled,
   isActive: query.getEvent('selected').some(),
 });
 const { isActive, enabled, actions } = useEnhancedEditor(collect);

 // Your component logic based on the collected data
 return (
   <div>
     <p>Is Active: {isActive ? 'Yes' : 'No'}</p>
     <p>Editor Enabled: {enabled ? 'Yes' : 'No'}</p>

     // Additional logic and components based on the collected data
    </div>
   );
  };

Example 3

Usage with a custom collector function:

import { useEnhancedEditor } from "@ws-ui/webform-editor";

const CustomUsageExample = ({ id }) => {
 const { hidden, selected, hovered, topLevel } =
  useEnhancedEditor((state, query) => {
    const node = state.nodes[id];
    const nodeActions = query.node(id);

    return {
      hidden: node?.data.hidden,
      selected: state.events.selected.has(id),
       topLevel: node ? nodeActions.isTopLevelCanvas() : false,
      hovered: state.events.hovered.has(id),
 };
});

// Your component logic based on the useEnhancedEditor results
return (
 <div>
    <p>Is Hidden: {hidden ? 'Yes' : 'No'}</p>
    <p>Is Selected: {selected ? 'Yes' : 'No'}</p>
    <p>Is Top Level: {topLevel ? 'Yes' : 'No'}</p>
    <p>Is Hovered: {hovered ? 'Yes' : 'No'}</p>
</div>
);
 };