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