import { useEffect, useState, useCallback } from "react";
const SET_STATE = "setState";
const REQUEST_STATE = "requestState";
const REMOVE_ELEMENT = "removeElement";
const ADD_ELEMENT = "addElement";
const CLEAR_ELEMENT = "clearElement";
const SYNC_ELEMENT = "syncElement";
export default function useDashboardEvent(elementId, initialState) {
const { content, ...attributes } = initialState;
const [state, setState] = useState({
content: content,
attributes: attributes
});
useEffect(() => {
// console.log('UniversalDashboard Object: ', UniversalDashboard)
// console.log("ud event hook: ", state);
const pubSubToken = UniversalDashboard.subscribe(elementId, events);
return () => UniversalDashboard.unsubscribe(pubSubToken);
}, [elementId, initialState]);
const events = useCallback(
(msg, event) => {
switch (event.type) {
// Set-UDElement
case SET_STATE:
setState(state => {
return {
attributes: { ...state.attributes, ...event.state.attributes },
content: event.state.content ? (Array.isArray(event.state.content) ? event.state.content : Array.from(event.state.content)) : []
}
});
break;
// Get-UDElement
case REQUEST_STATE:
UniversalDashboard.post(
`/api/internal/component/element/sessionState/${event.requestId}`,
{ ...state }
);
break;
// Add-UDElement
case ADD_ELEMENT:
setState(state => {
return {
...state,
content: state.content.concat(event.elements)
};
});
break;
// Remove-UDElement
case REMOVE_ELEMENT:
setState(state => {
let newStateContent = state.content;
newStateContent.splice(-1, 1);
return {
...state,
content: [...newStateContent]
};
});
break;
// Clear-UDElement
case CLEAR_ELEMENT:
setState(state => {
return {
...state,
content: []
};
});
break;
// Sync-UDElement
case SYNC_ELEMENT:
reload();
break;
// Just break
default:
break;
}
},
[event]
);
const reload = useCallback(() => {
UniversalDashboard.get(
`/api/internal/component/element/${elementId}`,
data =>
setState(state => {
return {
...state,
content: data
};
})
);
}, [elementId]);
return [state, reload, setState];
}
This is a custom react hook that i’ve created , it take care of all ud events so copy this content to new file
now the second step
in your component
add this line
import useDashboardEvent from "../Hooks/useDashboardEvent";
step 3 inside your component add thus lines
const [state, reload] = useDashboardEvent(props.id, props);
const { content, attributes } = state;
example code for onChange
const onChange = event => {
UniversalDashboard.publish("element-event", {
type: "clientEvent",
eventId: attributes.id + "onChange",
eventName: "onChange",
eventData: event
});
};
example of the switch component return
<Switch
{...attributes}
{...customIcons}
checked={checked}
onChange={onChange}
/>
);
Example of the full UDAntd Switch component
import React, { useState } from "react";
import { Switch } from "antd";
import useDashboardEvent from "../Hooks/useDashboardEvent";
const AntdSwitch = props => {
const [state, reload] = useDashboardEvent(props.id, props);
const { content, attributes } = state;
const [checked, setChecked] = useState(attributes.checked)
const onChange = event => {
setChecked(!checked)
UniversalDashboard.publish("element-event", {
type: "clientEvent",
eventId: attributes.id + "onChange",
eventName: "onChange",
eventData: event
});
};
const customIcons = {
checkedChildren: UniversalDashboard.renderComponent(attributes.checkedChildren),
unCheckedChildren: UniversalDashboard.renderComponent(attributes.unCheckedChildren)
}
return (
<Switch
{...attributes}
{...customIcons}
checked={checked}
onChange={onChange}
/>
);
};
export default AntdSwitch;
the powershell command file look like this
function New-UDAntdSwitch {
param(
[Parameter()]
[string]$Id = (New-Guid).ToString(),
[Parameter()]
[string]$ClassName,
[Parameter()]
[switch]$autoFocus,
[Parameter()]
[switch]$checked,
[Parameter()]
[object]$checkedChildren,
[Parameter()]
[switch]$defaultChecked,
[Parameter()]
[switch]$disabled,
[Parameter()]
[switch]$loading,
[Parameter()]
[ValidateSet("default","small","large")]
[string]$size,
[Parameter()]
[object]$unCheckedChildren,
[Parameter()]
[object]$onChange,
[Parameter()]
[hashtable]$Style
)
End {
if ($null -ne $OnClick) {
if ($OnClick -is [scriptblock]) {
$OnClick = New-UDEndpoint -Endpoint $OnClick -Id ($Id + "onClick")
}
elseif ($OnClick -isnot [UniversalDashboard.Models.Endpoint]) {
throw "OnClick must be a script block or UDEndpoint"
}
}
if ($null -ne $onChange) {
if ($onChange -is [scriptblock]) {
$onChange = New-UDEndpoint -Endpoint $onChange -Id ($Id + "onChange")
}
elseif ($onChange -isnot [UniversalDashboard.Models.Endpoint]) {
throw "OnClick must be a script block or UDEndpoint"
}
}
@{
assetId = $AssetId
isPlugin = $true
type = "ud-antd-switch"
id = $Id
className = $ClassName
autoFocus = $AutoFocus.IsPresent
checked = $Checked.IsPresent
checkedChildren = $CheckedChildren
defaultChecked = $DefaultChecked.IsPresent
disabled = $Disabled.IsPresent
loading = $Loading.IsPresent
size = $Size
unCheckedChildren = $UnCheckedChildren
# onChange = $OnChange
# onClick = $OnClick
style = $Style
}
}
}
will make sure I review this and apply, as need to build this into all custom components essentially to get the most out of them interacting with universal dashboard?
