Custom Component Types
// The content of this module will be used to declare the types of @cloudio-saas/custom-types
export interface BaseCommonProps {
comments?: string;
}
export interface Responsive {
xl?: boolean;
lg?: boolean;
md?: boolean;
sm?: boolean;
xs?: boolean;
}
export type ExpressionOnlyValue = string;
export type ExpressionType = 'text' | 'expression';
export interface ExpressionValue {
type: ExpressionType;
value: string;
}
export const DefaultExpressionValue: ExpressionValue = Object.freeze({
type: 'text',
value: '',
});
export interface CommonProps extends BaseCommonProps {
responsive?: Responsive;
visible?: boolean;
visibleCondition?: ExpressionOnlyValue;
cssClassName?: ExpressionValue;
}
export type ItemID = string;
export interface BaseItem {
children: ItemID[];
itemId: ItemID;
parent: ItemID;
props: BaseCommonProps;
type: string;
}
export interface BaseComponentItem extends BaseItem {
props: CommonProps;
}
/** Add your custom component types below */
// Find below an example type definition for two custom components MyCardContainer & MyCard
// MyCardContainer
// 1. Define the type for the props to your custom component
export interface MyCardContainer extends CommonProps {
filterDatasourceAlias: string;
filterAttribute: string;
}
// 2. Define the item type of your custom component
export interface MyCardContainerItem extends BaseComponentItem {
props: MyCardContainer;
type: 'MyCardContainer';
}
// MyCard
// 1. Define the type for the props to your custom component
export interface MyCard extends CommonProps {
seeMoreLabel?: string;
borderRadius?: number;
boxShadow?: string;
}
// 2. Define the item type of your custom component
export interface MyCardItem extends BaseComponentItem {
props: MyCard;
type: 'MyCard';
}
// 3. Register your custom component type by adding an entry to CustomComponentItemTypeRegistry
export interface CustomComponentItemTypeRegistry {
MyCardContainer: MyCardContainer;
MyCard: MyCard;
}
// 4. Added your custom component item type to CustomComponentItem
export type CustomComponentItem = MyCardContainerItem | MyCardItem;
/*
5. You can then import the above types in your component source as shown below
import { MyCard, MyCardContainer, MyCardItem, MyCardContainerItem } from '@cloudio-saas/custom-types';
*/
/** END custom component types */
/** Define any other Custom Types you would like to reuse between custom components
* or between manager & component code tabs. These types can then be
* imported as
*
* import { MyCustomType } from '@cloudio-saas/custom-types';
*
*******/
export interface MyCustomType {
sampleType?: string;
}
/* END Custom Types */
export type CustomComponentItemType = keyof CustomComponentItemTypeRegistry;
Last updated