コンポーネント共通属性タイプ

このドキュメントでは、宜搭コンポーネントで使用される共通属性のタイプについて説明します。ユーザーはアクションパネルで以下のAPIを使用して、コンポーネントの指定された属性の読み取りまたは設定を行うことができます（詳細はコンポーネント共通APIを参照）：

// コンポーネントの属性値を取得
export function getAttribute(){
  // テキストコンポーネントの内容（content）属性を取得し、コンソールに出力
  const content = this.$('text_kyz78exo').get('content')
  console.log( `text content: ${content}` );
}

// コンポーネントの属性値を設定
export function setAttribute(){
  // テキストコンポーネントの最大行数（maxLine）属性を設定
  this.$('text_kyz78exo').set('maxLine', 5);
}

基本タイプ

I18n

国際化文字列関連設定。

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

フォーム基本属性

Behavior

フォームコントロールの表示状態タイプ:

• NORMAL - 通常表示；
• DISABLED - 無効；
• READONLY - 読み取り専用；
• HIDDEN - 非表示；

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

Size

フォームコントロールのサイズ。

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

LabelTipsTypes

フォームコントロールタイトルのヒント情報タイプ。

• none - なし；
• text - テキストタイプ；
• render - カスタムレンダリング；

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

Validation

フォームコントロール検証ルール。

interface Validation {
  type: 'required' | 'minValue' | 'maxValue' | 'minLength' | 'maxLength' | 'customValidate'; //検証タイプ
  message: string | I18n; // エラーメッセージ
  param: number | (value: any) => boolean; // 検証パラメータ、typeがcustomValidateの場合はカスタム関数
}

コンポーネント関連データソースタイプ

DataSource

ドロップダウン選択、ラジオボタン、チェックボックスなどの選択コンポーネントのオプション形式。

interface DataSource {
  text: string | I18n; // 実際の表示内容
  value: string; // 実際の送信データ
}

CascadeDataSource

カスケード選択などの多層構造のコンポーネントオプション形式。

interface CascadeDataSource {
  label: string | I18n; // 実際の表示内容
  value: string; // 実際の送信データ
  chidren?: CascadeDataSource[]
}

SliderDataSource

画像スライダーコンポーネントのデータ設定に使用。

interface SliderDataSource {
  src: string; // スライダー画像URL
  title?: string | I18n; // スライダー内容タイトル
  link?: string; // 画像クリック時の遷移リンク
}

StepsDataSource

ステップコンポーネントのデータ設定に使用。

interface StepsDataSource {
  title: string;
  content: string;
  status?: '' | 'wait' | 'process' | 'finish'; // 現在のステータス
  customSwitcher?: boolean; // カスタムレンダリングを有効にするか
  customRender?: (item: StepsDataSource) => ReactNode; // カスタムレンダリング関数
  icon?: string; // ステップアイコン
  percent?: number; // 現在のステップ進捗率、1-100の数値
  disabled?: boolean; // 無効化するか
}

TimelineDataSource

タイムラインコンポーネントのデータ設定に使用。

interface TimelineDataSource {
  title: string | I18n; // タイトル
  time: string; // 時間
  icon?: string; // 表示アイコン
  state?: '' | 'process' | 'success' | 'error'; // 現在のノード状態
  timeLeft?: () => ReactNode; // 左側の時間表示
  doc?: () => ReactNode; // カスタムタイムラインノード、iconアイコン属性より優先度が高い
  content?: () => ReactNode; // 右側の内容カスタム
}

TreeDataSource

ツリーコンポーネントのデータ設定に使用。

interface TreeDataSource {
  key: string;
  label: string;
  children?: TreeDataSource[]; // 子ノード
}

MenuDataSource

メニューコンポーネントのデータ設定に使用。

interface MenuDataSource {
  label: string;
  key: string;
  chidlren?: MenuDataSource[]; // 子ノード
}

SearchDataSource

検索ボックスのデータ設定に使用。

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

その他

TabItem

タブ項目の設定属性。

interface TabItem {
  title: string; // タブ名
  primaryKey: string; // タブの唯一識別子
  disabled?: boolean; // 無効化するか
  customKey？: string; // カスタムキー
}

TableColumn

テーブルコンポーネントの列設定。

interface TableColumn {
  dataKey: string; // データフィールド
  title: string | I18n; // 列見出しタイトル
  width?: string; // 列幅。pxまたは%で指定可能
  dataType: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // データタイプ
  float?: '' | 'left' | 'right'; // 画像のフロート（モバイルカードモードでのみ有効）
  imageProps?: React.CSSProperties; // 画像スタイル
  imageWrapProps?: React.CSSProperties; // 画像コンテナスタイル
  imageOnClick?: (e: Event, column: number) => void; // 画像クリックコールバック
  enumBadgeType?: '' | 'color' | 'background'; // 列挙スタイル
  enumData?: any; // 列挙データ
  editType?: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // 編集形式
  timeFormatter?: 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD' | 'YYYY-MM' | 'YYYY'; // 時間形式
  align?: 'left' | 'center' | 'right'; // 整列方式
  lock?: 'none' | 'left' | 'right'; // 列固定
  groupName?: string; // グループタイトル
  message?: string; // ユーザーヒント
  sortable?: boolean; // ソート可能か
  highlight?: boolean; // 強調表示するか、モバイルカードモードでのみ有効
  hidden?: boolean; // 非表示にするか；
  resizable?: boolean; // 列幅の調整が可能か、幅のリサイズ時にトリガーされるイベントと併用する必要がある
  titleRender?: (title: string) => ReactNode; // タイトルカスタムレンダリング
  render?: (value: any, index: number, rowData) => ReactNode; // 内容カスタムレンダリング
  canEdit?: boolean; // 編集可能か
  renderField?: (props: any, value: any, rowData: any) => ReactNode; // 編集状態のカスタムレンダリング
  editProps?: any; // 編集設定
  filters?: {
    label: string;
    value: string;
  }[];
  filterMode?: 'multiple' | 'single'; // フィルターモード
}

FilterConfig

フィルター項目の設定に使用。

interface FilterConfig {
  title: string; // タイトル
  id: string;
  fieldId: string;
  componentName: string;
  prevComponentName: string;
  colspan?: number;
  isAdvanced?: boolean;
}

ScanCodeConfig

DingTalk端末のスキャンモード設定情報、DingTalk端末は以下のスキャンモードをサポート:

• barCode - バーコード；
• qrCode - QRコード；
• all - 上記すべてをサポート；

interface ScanCodeConfig {
  enable: boolean;
  type: 'all' | 'barCode' | 'qrCode';
  editable: boolean; // スキャン結果の変更を許可するか
}

UploadConfig

リッチテキストコンポーネントの画像アップロード設定。

interface UploadConfig {
  inputName?: string; // アップロード時のfile inputのname属性、デフォルトはfile
  actionUrl: string; // アップロードインターフェース
  formatResult?: (response: any) => any; // 戻りデータ処理
  errorCallback?: () => void; // エラーコールバック
  progressCallback?: () => void; // アップロード進捗コールバック
  headers?: Record<string, string>; // 画像アップロードリクエストヘッダー設定
}