Component General Property Types

This document mainly lists the type descriptions of general properties used by Yida components. Users can read or set the specified properties of components through the following API in the action panel (see Component General API for details):

// Get component property value
export function getAttribute(){
  // Get the content (content) property of the text component and print it to console
  const content = this.$('text_kyz78exo').get('content')
  console.log( `text content: ${content}` );
}

// Set component property value
export function setAttribute(){
  // Set the maximum lines (maxLine) property of the text component
  this.$('text_kyz78exo').set('maxLine', 5);
}

Basic Types

I18n

Internationalized string related configuration.

interface I18n {
  zh_CN: string;
  en_US: string;
  type: 'i18n';
}

Form Basic Properties

Behavior

Display state type of form controls:

• NORMAL - Normal display;
• DISABLED - Disabled;
• READONLY - Read-only;
• HIDDEN - Hidden;

type Behavior = 'NORMAL' | 'DISABLED' | 'READONLY' | 'HIDDEN';

Size

Form control size.

type Size = 'small' | 'medium' | 'large';

LabelTipsTypes

Form control title tip information type.

• none - None;
• text - Text type;
• render - Custom rendering;

type LabelTipsTypes = 'none' | 'text' | 'render';

Validation

Form control validation rules.

interface Validation {
  type: 'required' | 'minValue' | 'maxValue' | 'minLength' | 'maxLength' | 'customValidate'; // Validation type
  message: string | I18n; // Error message
  param: number | (value: any) => boolean; // Validation parameter, corresponds to custom function when type is customValidate
}

Component Related Data Source Types

DataSource

Option format for selective components such as dropdown selection, radio buttons, checkboxes, etc.

interface DataSource {
  text: string | I18n; // Actual display content
  value: string; // Actual submitted data
}

CascadeDataSource

Option format for components with multi-layer nested structures such as cascading selection.

interface CascadeDataSource {
  label: string | I18n; // Actual display content
  value: string; // Actual submitted data
  chidren?: CascadeDataSource[]
}

SliderDataSource

Used for image carousel component data settings.

interface SliderDataSource {
  src: string; // Carousel image URL
  title?: string | I18n; // Carousel content title
  link?: string; // Image click jump link
}

StepsDataSource

Used for step bar component data settings.

interface StepsDataSource {
  title: string;
  content: string;
  status?: '' | 'wait' | 'process' | 'finish'; // Current step status
  customSwitcher?: boolean; // Whether to enable custom rendering
  customRender?: (item: StepsDataSource) => ReactNode; // Custom rendering function
  icon?: string; // Step icon
  percent?: number; // Current step progress percentage, number between 1-100
  disabled?: boolean; // Whether disabled
}

TimelineDataSource

Used for timeline component data settings.

interface TimelineDataSource {
  title: string | I18n; // Title
  time: string; // Time
  icon?: string; // Display icon
  state?: '' | 'process' | 'success' | 'error'; // Current node status
  timeLeft?: () => ReactNode; // Left side time display
  doc?: () => ReactNode; // Custom timeline node, priority higher than icon property
  content?: () => ReactNode; // Right side content custom
}

TreeDataSource

Used for tree component data settings.

interface TreeDataSource {
  key: string;
  label: string;
  children?: TreeDataSource[]; // Child nodes
}

MenuDataSource

Used for menu component data settings.

interface MenuDataSource {
  label: string;
  key: string;
  chidlren?: MenuDataSource[]; // Child nodes
}

SearchDataSource

Used for search box data settings.

interface SearchDataSource {
  label: string;
  value: string;
}

Others

TabItem

Configuration properties of tab items.

interface TabItem {
  title: string; // Tab name
  primaryKey: string; // Tab unique identifier
  disabled?: boolean; // Whether disabled
  customKey?: string; // Custom Key
}

TableColumn

Column configuration for table component.

interface TableColumn {
  dataKey: string; // Data field
  title: string | I18n; // Column header title
  width?: string; // Column width can be px or %
  dataType: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // Data type
  float?: '' | 'left' | 'right'; // Image float (only effective in mobile card mode)
  imageProps?: React.CSSProperties; // Image style
  imageWrapProps?: React.CSSProperties; // Image container style
  imageOnClick?: (e: Event, column: number) => void; // Image click callback
  enumBadgeType?: '' | 'color' | 'background'; // Enum style
  enumData?: any; // Enum data
  editType?: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // Edit format
  timeFormatter?: 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD' | 'YYYY-MM' | 'YYYY'; // Time format
  align?: 'left' | 'center' | 'right'; // Alignment
  lock?: 'none' | 'left' | 'right'; // Column fixed
  groupName?: string; // Group title
  message?: string; // User tip
  sortable?: boolean; // Whether sortable
  highlight?: boolean; // Whether to highlight, only effective in mobile card mode
  hidden?: boolean; // Whether hidden;
  resizable?: boolean; // Whether column width can be adjusted, must be used with Width and resize column triggered events
  titleRender?: (title: string) => ReactNode; // Title custom rendering
  render?: (value: any, index: number, rowData) => ReactNode; // Content custom rendering
  canEdit?: boolean; // Whether can be edited
  renderField?: (props: any, value: any, rowData: any) => ReactNode; // Custom edit mode rendering
  editProps?: any; // Edit configuration
  filters?: {
    label: string;
    value: string;
  }[];
  filterMode?: 'multiple' | 'single'; // Filter mode
}

FilterConfig

Used for filter item configuration.

interface FilterConfig {
  title: string; // Title
  id: string;
  fieldId: string;
  componentName: string;
  prevComponentName: string;
  colspan?: number;
  isAdvanced?: boolean;
}

ScanCodeConfig

DingTalk end scan code mode configuration information, DingTalk end supports the following scan code modes:

• barCode - Barcode;
• qrCode - QR code;
• all - All of the above;

interface ScanCodeConfig {
  enable: boolean;
  type: 'all' | 'barCode' | 'qrCode';
  editable: boolean; // Whether to allow modification of scan results
}

UploadConfig

Rich text component image upload configuration.

interface UploadConfig {
  inputName?: string; // Upload file input's name attribute, defaults to file
  actionUrl: string; // Upload interface
  formatResult?: (response: any) => any; // Return data processing
  errorCallback?: () => void; // Error callback
  progressCallback?: () => void; // Upload progress callback
  headers?: Record<string, string>; // Image upload request header configuration
}