Common Component Property Types

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

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

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

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

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

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

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

interface DataSource {
  text: string | I18n; // Display content
  value: string; // Submitted data
}

interface CascadeDataSource {
  label: string | I18n; // Display content
  value: string; // Submitted data
  chidren?: CascadeDataSource[]
}

interface SliderDataSource {
  src: string; // Carousel image URL
  title?: string | I18n; // Carousel title
  link?: string; // Redirect link when the image is clicked
}

interface StepsDataSource {
  title: string;
  content: string;
  status?: '' | 'wait' | 'process' | 'finish'; // Status of the current step
  customSwitcher?: boolean; // Whether to enable custom rendering
  customRender?: (item: StepsDataSource) => ReactNode; // Custom rendering function
  icon?: string; // Step icon
  percent?: number; // Progress percentage of the current step. A number between 1 and 100.
  disabled?: boolean; // Whether the step is disabled
}

interface TimelineDataSource {
  title: string | I18n; // Title
  time: string; // Time
  icon?: string; // Icon to display
  state?: '' | 'process' | 'success' | 'error'; // Status of the current node
  timeLeft?: () => ReactNode; // Time display on the left
  doc?: () => ReactNode; // Custom timeline node. Takes precedence over the icon property.
  content?: () => ReactNode; // Custom content on the right
}

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

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

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

interface TabItem {
  title: string; // Tab name
  primaryKey: string; // Unique identifier of the tab
  disabled?: boolean; // Whether the tab is disabled
  customKey？: string; // Custom key
}

interface TableColumn {
  dataKey: string; // Data field
  title: string | I18n; // Column header title
  width?: string; // Column width. Can be in px or %.
  dataType: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // Data type
  float?: '' | 'left' | 'right'; // Image floating (takes effect only 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 lock
  groupName?: string; // Group title
  message?: string; // User tip
  sortable?: boolean; // Whether the column is sortable
  highlight?: boolean; // Whether to highlight. Takes effect only in mobile card mode.
  hidden?: boolean; // Whether the column is hidden.
  resizable?: boolean; // Whether the column width can be adjusted. Must be used together with the event triggered when the column width is reset.
  titleRender?: (title: string) => ReactNode; // Custom title rendering
  render?: (value: any, index: number, rowData) => ReactNode; // Custom content rendering
  canEdit?: boolean; // Whether the column is editable
  renderField?: (props: any, value: any, rowData: any) => ReactNode; // Custom rendering in edit state
  editProps?: any; // Edit configuration
  filters?: {
    label: string;
    value: string;
  }[];
  filterMode?: 'multiple' | 'single'; // Filter mode
}

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

interface ScanCodeConfig {
  enable: boolean;
  type: 'all' | 'barCode' | 'qrCode';
  editable: boolean; // Whether the scan result can be modified
}

interface UploadConfig {
  inputName?: string; // The name attribute of the file input for upload. Defaults to file.
  actionUrl: string; // Upload endpoint
  formatResult?: (response: any) => any; // Response data processing
  errorCallback?: () => void; // Error callback
  progressCallback?: () => void; // Upload progress callback
  headers?: Record<string, string>; // Request header configuration for image upload
}