Hey Guys, I'm trying to upload a custom dropdown (just for testing) to ignition designer. I'm using a dropdown component my org's components library. Just to test how the component looks, I created a demo react app and rendered the component, it looks like below on my web app (which means no issue with the component).
My Dropdown.tsx (Komodo is our internal library)
import * as React from 'react';
import {
Component,
ComponentMeta,
ComponentProps,
PComponent,
PropertyTree,
SizeObject
} from '@inductiveautomation/perspective-client';
import { bind } from 'bind-decorator';
import { CoreDropdown } from "@komodo-design-system/komodo-components-react";
export const COMPONENT_TYPE = "rad.display.dropdown";
interface DropdownProps {
placeholder: string;
options: Array<{ uid: string, label: string }>;
}
export class Dropdown extends Component<ComponentProps<DropdownProps>, { selectedOption: string[] }> {
state = {
selectedOption: ['']
};
@bind
onOptionChange(e: any) {
this.setState({ selectedOption: e.value });
}
render() {
const { props, emit } = this.props;
return (
<div {...emit({ classes: ["dropdown"] })}>
<CoreDropdown
label="Label"
placeholder="Select Your Favourite Color"
functionality="single-select"
labeltype="default"
size="regular"
optionslimit={2}
counter={2}
menusize={6}
onChange={this.onOptionChange}
options={props.options}
selected= {this.state.selectedOption}
/>
</div>
);
}
}
export class DropdownMeta implements ComponentMeta {
getComponentType(): string {
return COMPONENT_TYPE;
}
getViewComponent(): PComponent {
return Dropdown;
}
getDefaultSize(): SizeObject {
return ({
width: 300,
height: 200
});
}
getPropsReducer(tree: PropertyTree): DropdownProps {
return {
placeholder: tree.read("placeholder", "Select a City"),
options: tree.read("options", [])
};
}
}
client-components.ts
import {ComponentMeta, ComponentRegistry} from '@inductiveautomation/perspective-client';
import { MessengerComponent, MessengerComponentMeta } from './components/Messenger';
import { TagCounter, TagCounterMeta } from './components/TagCounter';
import { Dropdown, DropdownMeta } from './components/Dropdown';
// export so the components are referencable, e.g. `RadComponents['Image']
export {MessengerComponent, TagCounter, Dropdown};
import '../scss/main';
import '../css/dropdown';
// as new components are implemented, import them, and add their meta to this array
const components: Array<ComponentMeta> = [
new MessengerComponentMeta(),
new TagCounterMeta(),
new DropdownMeta()
];
// iterate through our components, registering each one with the registry. Don't forget to register on the Java side too!
components.forEach((c: ComponentMeta) => ComponentRegistry.register(c) );
Issue is, this component does not even show up in the designer (only the bg of the parent div renders). Below is the image:
Can anybody resolve this issue for me, stuck with this from last few days......Thank You...!!!
