I am doing R&D to see the possibility the integration between KendoUI React components into Ignition Perspective Custom Module. In my scenario i am going to show the description and the input box with DatePicker popup window icon.
The structure of the props to be fed into my perspective custom module can be seen on below interface declaration:
ISingleInputCalendarProps.tsx
export interface ISingleInputCalendarProps {
id: string;
parameters: {
description:string,
};
values:{
default:Date,
};
}
This is how my component look like:
SingleInputCalendar.tsx
import * as React from 'react';
import { ISingleInputCalendarProps } from '../interfaces/ISingleInputCalendarProps'
import { DatePicker, DatePickerChangeEvent } from '@progress/kendo-react-dateinputs';
import { Label } from '@progress/kendo-react-labels';
// Functional Component
export const SingleInputCalendarComponent: React.FC<ISingleInputCalendarProps> = ({id,parameters,values}) => {
const [value, setValue] = React.useState<Date | null>(new Date());
const min = new Date(2025, 0, 1);
const max = new Date(2030, 11, 31);
const changeDate = (event: DatePickerChangeEvent) => {
setValue(event.value);
};
React.useEffect(() => {
//setDate(values.default);
}, []);
return (
<div style={{"width":"auto"} as React.CSSProperties}>
<Label>{parameters.description}</Label>
<DatePicker id="date" value={value} min={min} max={max} onChange={changeDate} defaultShow/>
</div>
);
};
I clean up a little bit the main code from the Ignition github sample:
Messenger.tsx
/**
* Example of a component that utilizes the ComponentStoreDelegate API to send and receive payload-containing messages
* between the browser's instance of a component/store and the Gateway's model.
*
* This is the Client-Side implementation of a ComponentStoreDelegate. The API provides a convenient way to send
* messages over the websocket established by the Perspective runtime. A mirror API on the Gateway provides a
* corresponding opportunity to send/receive messages from the Gateway. Together, they provide a seamless 'realtime'
* message channel for sending state to/from your client stores and server models.
*/
import * as React from 'react';
import {
Component,
ComponentMeta,
ComponentProps,
PComponent,
PropertyTree,
SizeObject
} from '@inductiveautomation/perspective-client';
import { ISingleInputCalendarProps } from './../interfaces/ISingleInputCalendarProps'
import { SingleInputCalendarComponent } from './SingleInputCalendar'
// The 'key' or 'id' for this component type. Component must be registered with this EXACT key in the Java side as well
// as on the client side. In the client, this is done in the index file where we import and register through the
// ComponentRegistry provided by the perspective-client API.
export const COMPONENT_TYPE = "au.com.deloitte.srt.modules.common.component.display.messenger";
/**
* Name of the message config prop defined in the json schema defined in common/src/main/resources/messenger.props.json
*/
interface resultPropConfig {
data:[];
}
/**
* ComponentStoreDelegate provides a way to communicate with a Gateway side implementation of ComponentModelDelegate.
* Communication is done over Perspective's websocket connection. Incoming messages are mapped to implemented handlers
* in the abstract method `handleEvent`. The ComponentStoreDelegate can also be used to store local state if needed.
*
* Tip: Avoid frequently sending large payloads over the websocket connection. The websocket connection is
* the primary way the front-end communicates with the backend (Gateway). Sending large payloads often will cause traffic
* over the network potentially slowing other tasks relying on communication. Consider fetching the payload of a websocket
* message over HTTP instead to help alleviate some websocket traffic for large and frequent payloads.
*
* Since the ComponentStoreDelegate is intended to be paired with a corresponding Perspective component implementation,
* its state, if any, is meant to be passed to the paired component via the component's `props`. This is done by invoking
* `mapStateToProps` of the ComponentStoreDelegate by the paired component's Higher Order Component (HOC)
* once the delegate notifies listeners of state change.
*
* The MessageComponentGateway delegate inherits these methods from the ComponentStoreDelegate abstract class:
*
* @method `public subscribe(listener: Function): Function` - public methods used by listeners to subscribe to state changes or notifications.
* Returns a disposer function that should be use to unsubscribe and remove reference to the listener. Use this to prevent memory leaks where necessary.
* @method `protected notify(): void` - called by the delegate as a means to notify any subscribed listeners of state changes. Listeners will then read the new values.
* @method `abstract handleEvent(eventName: string, eventObject: PlainObject): void` - receives model events from the Gateway side delegate over the websocket connection.
* @method `fireEvent(eventName: string, eventObject: PlainObject): void` - fires model event that is received by the Gateway side delegate over the websocket connection.
* @method `mapStateToProps(): PlainObject` - invoked by the HOC wrapper component to map any delegate state to component props when the HOC is notified of state changes.
*
*/
export class MessengerComponent extends Component<ComponentProps<resultPropConfig>, {}> {
rootElementRef: Element | void;
componentDidMount() {
// If a reference to the root element is needed, it can be achieved using `this.props.store.element` after the
// component has mounted.
this.rootElementRef = this.props.store.element;
}
render() {
const singleInputCalendarProps:ISingleInputCalendarProps = {
id: "31",
parameters: {
description: "When is your birth day ?"
},
values:{
default:new Date()
}
}
return (
<>
<SingleInputCalendarComponent id="{singleInputCalendarProps.id}" parameters={singleInputCalendarProps.parameters} values={singleInputCalendarProps.values}/>
</>
);
}
}
// This is the actual thing that gets registered with the component registry.
export class MessengerComponentMeta implements ComponentMeta {
getComponentType(): string {
return COMPONENT_TYPE;
}
getDefaultSize(): SizeObject {
return ({
width: 250,
height: 250
});
}
getViewComponent(): PComponent {
return MessengerComponent;
}
getPropsReducer(tree: PropertyTree): resultPropConfig {
return {
data:tree.read("data"),
};
}
}
I don’t have any problem during the compilation but when i run this thing, it loose its popup calendar. But still can type something on it.
If i look at the KendoUI website, the calendar icon is shown on the right side and popup calendar appears as the user click on that icon.
https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker
