YiDA JS-API

export function someFunctionName() {
  ...
}

export function setSomeValue() {
  const status = this.state.status;
  const newStatus = status + 1;
  this.setState({ status: newStatus });
  this.$('numberField_xxx').setValue(newStatus);
}

export function setSomeValue(value) {
  // Simpan referensi ke this
  const that = this;

  this.dataSourceMap.xxx.load(function (ret) {
    // SALAH!!! function membuat konteks eksekusi baru.
    // this telah berubah di sini dan tidak dapat membaca Sumber Data atau mengakses bidang lain.
    this.$('numberField_xxx').setValue(ret);

    // Solusi: gunakan referensi yang benar yang disimpan di luar
    that.$('numberField_xxx').setValue(ret);
  });

  // Atau gunakan arrow function agar this tidak diikat ulang
  this.dataSourceMap.xxx.load((ret) => {
    // Arrow function tidak membuat konteks baru, jadi this tetap terjaga
    this.$('numberField_xxx').setValue(ret);
  });
}

export function getState() {
  // Baca nilai variabel global tingkat halaman dan cetak melalui console
  const status = this.state.status;
  console.log( `status: ${status}` )
}

export function setStateValue() {
  // Tetapkan variabel global tingkat halaman dan picu render ulang halaman
  this.setState({
    status: 'loading',
    text: 'Memuat...'
  });
}

export function fetchData() { 
  // Panggil remote API getDataList yang dikonfigurasi di Sumber Data dengan parameter pageSize dan page.
  // Jika berhasil, cetak hasil di console; jika gagal, tampilkan toast.
  this.dataSourceMap.getDataList.load({
    pageSize: 10, 
    page: this.state.currentPage
  }).then((res) => {
    if (res) {
      console.log('fetchData', res);
    }
  }).catch((err) => {
    this.utils.toast({
      type: 'error', 
      title: 'Permintaan gagal!'
    })；
  });
}

export function reload() {
  // Jalankan ulang semua permintaan awal dan tampilkan toast saat berhasil
  this.reloadDataSource().then(res => {
    this.utils.toast({
      type: 'success', 
      title: 'Berhasil disegarkan!'
    })；
  });
}

export function hello(params) {
  this.utils.toast({
    title: `hello ${params}` , 
    type: 'success'
  })
}

export function onClickInvoke(){
  const value = this.$('textField_k1u12o6l').getValue()
  // Panggil fungsi lain yang didefinisikan di panel aksi
  this.hello(value)
}

export function popDialog(){
  this.utils.dialog({
    type: 'confirm', 
    title: 'judul', 
    content: 'konten', // Teruskan HTML/JSX untuk baris baru
    onOk: () => { }, 
    onCancel: () => { }, 
  });
}

// Tutup dialog secara manual
export function closeDialog() {
  // Tangkap nilai kembalian dari dialog, yang berupa object
  const dialog = this.utils.dialog({});

  // Panggil metode hide pada object yang dikembalikan pada saat yang tepat untuk menutup dialog
  dialog.hide();
}

export function format() {
  // Format tanggal. Output: 2022-01-29
  const formatDate = this.utils.formatter('date', new Date(), 'YYYY-MM-DD');

  // Format tanggal. Output: 2022/01/29
  const formatDate = this.utils.formatter('date', new Date(), 'YYYY/MM/DD');

  // Format tanggal-waktu. Output: 2022-01-29 13:01:02
  const formatDate2 = this.utils.formatter('date', new Date(), 'YYYY-MM-DD HH:mm:ss');

  // Format mata uang. Output: 10, 000.99
  const formatMoney = this.utils.formatter('money', '10000.99', ', ');
  
  // Format nomor telepon. Output: +86 1565 2988 282
  const formatPhoneNumber = this.utils.formatter('cnmobile', '+8615652988282');

  // Format nomor kartu bank. Output: 1565 2988 2821 2233
  const formatCardNumber = this.utils.formatter('card', '1565298828212233');
}

export function search() {
  const [dayStart, dayEnd] = this.utils.getDateTimeRange();
  console.log( `dayStart: ${dayStart}, dayEnd: ${dayEnd}` );
  // Cetak stempel waktu awal dan akhir hari ini

  const [monthStart, monthEnd] = this.utils.getDateTimeRange(new Date(), 'month');
  console.log( `monthStart: ${monthStart}, dayEnd: ${monthEnd}` );
  // Cetak stempel waktu awal dan akhir bulan ini
}

export function locale() {
  const locale = this.utils.getLocale();

  console.log( `locale: ${locale}` );
  // Output: locale: zh_CN
}

export function getUserInfo() {
  const userId = this.utils.getLoginUserId();
  console.log( `userId: ${userId}` );
  // Output: userId: 43314767738888
}

export function getUserInfo() {
  const userName = this.utils.getLoginUserName();
  console.log( `userName: ${userName}` );
  // Output: userName: Budi Santoso
}

export function someFunctionName() {
  console.log('isMobile', this.utils.isMobile());
}

export function someFunctionName() {
  console.log('isSubmissionPage', this.utils.isSubmissionPage());
}

export function someFunctionName() {
  console.log('isViewPage', this.utils.isViewPage());
}

export function didMount() {
  this.utils.loadScript('https://g.alicdn.com/code/lib/qrcodejs/1.0.0/qrcode.min.js').then(() => {
    var qrcode = new QRCode(document.getElementById('qrcode'), {
      text: "http://jindo.dev.naver.com/collie",
      width: 128,
      height: 128,
      colorDark : "#000000",
      colorLight : "#ffffff",
      correctLevel : QRCode.CorrectLevel.H
    });
  });
}

export function someFunctionName() {
  this.utils.openPage('/workbench');
}

export function previewImg() {
  this.utils.previewImage({ current: 'https://img.alicdn.com/tfs/TB1JUnZ2GL7gK0jSZFBXXXZZpXa-260-192.png_.webp' });
}

export function popToast(){
  this.utils.toast({
    title: 'berhasil', 
    type: 'success', 
    size: 'large', 
  })
}

// Metode close dapat dipanggil secara manual
export function showLoadingToast() {
  // Tangkap nilai kembalian, yang berupa fungsi close
  const close = this.utils.toast({
    title: 'Memuat', 
    type: 'loading', 
    size: 'large', 
  });
  
  // Panggil fungsi close pada saat yang tepat
  setTimeout(close, 3000);
}

function push(path: string, params?: object, blank?: boolean, isUrl?: boolean, type?: string) => void;

export function pushUrl() {
  // Navigasikan ke halaman dengan parameter fromSource yang disuntikkan. URL akhir: https://www.yidaapps.com?formSource=customPage
  this.utils.router.push('https://www.yidaapps.com', {fromSource: 'customPage'});
}

this.utils.router.push(path, params, false, false, 'replace');

export function replaceUrl() {
  // Navigasikan ke halaman dengan parameter fromSource yang disuntikkan
  this.utils.router.replace('https://www.yidaapps.com', {fromSource: 'customPage'});
}

function getQuery(key?: string, queryStr?: string) => Record<string, string> | string | undefined;

export function getQuery() {
  // Ambil parameter fromSource dari URL
  const fromSource = this.utils.router.getQuery('fromSource');
  console.log( `fromSource: ${fromSource}` );
}

export function stringifyQuery() {
  // Serialisasi object menjadi parameter query URL dan cetak melalui console
  const params = {
    name: 'yida', 
    gender: 'm'
  };
  const urlStr = this.utils.router.stringifyQuery(params);
  console.log( `urlParams: ${urlStr}` );
  // Output: urlParams: name=yida&gender='m'
}

export function getAttribute(){
  // Ambil properti content dari komponen Text dan cetak di console
  const content = this.$('text_kyz78exo').get('content')
  console.log( `text content: ${content}` );
}

export function setAttribute(){
  // Tetapkan properti maxLine dari komponen Text
  this.$('text_kyz78exo').set('maxLine', 5);
}

export function getValue(){
  // Ambil input pengguna dari kolom teks dan cetak di console
  const value = this.$('textField_kyz78exp').getValue();
  console.log( `input value: ${value}` );
}

interface IOptions {
  doNotValidate: boolean; // Apakah melewati validasi otomatis. Default: false
  formatted: boolean; // Apakah nilainya sudah diformat. Default: false
  triggerChange: boolean; // Apakah memicu peristiwa change komponen. Default: true
};

/**
 * @param {any} value  Nilai formulir yang akan ditetapkan
 * @param {IOptions} [options] Opsi konfigurasi, opsional
 */
function setValue(value: any, options?: IOptions) => void;

export function setValue(){
  // Tetapkan nilai kolom teks menjadi "hello world"
   this.$('textField_kyz78exp').setValue('hello world');
}

/**
 * @param {boolean} toDefault Apakah mengatur ulang ke nilai Default komponen. Default: true
 */
function reset(toDefault?: boolean) => void;

export function reset() {
  // Atur ulang nilai kolom teks
   this.$('textField_kyz78exp').reset();
}

export function getBehavior() {
  // Ambil state kolom teks dan cetak
  const behavior = this.$('textField_kyz78exp').getBehavior();
  console.log( `text behavior: ${behavior}` );
}

export function setBehavior() {
  // Tetapkan state kolom teks menjadi DISABLED
  this.$('textField_kyz78exp').setBehavior('DISABLED');
}

export function resetBehavior() {
  // Atur ulang state kolom teks
  this.$('textField_kyz78exp').resetBehavior();
}

/**
 * @param {Array|null} errors Pesan error, atau null jika tidak ada error
 * @param {Object} values Nilai komponen formulir
 */
function ValidateCallback(errors: string[] | null, values: object | null) => void

/**
 * @param {Function} callback Callback validasi, opsional
 */
function validate(callback?: ValidateCallback) => void;

export function validate() {
  // Validasi kolom teks. Jika gagal, cetak errors dan values di console.
  this.$('textField_kyz78exp').validate((errors, values) => {
    console.log(JSON.stringify({errors, values}, null, 2));
  });
}

{
  "errors": {
    "textField_kyz78exp": {
      "errors": [
        "Kolom teks bukan format nomor telepon yang valid"
      ]
    }
  }, 
  "values": {
    "textField_kyz78exp": "33"
  }
}

export function disableValid() {
  this.$('textField_kyz78exp').disableValid();
}

/**
 * @param {boolean} doValidate Apakah menjalankan validasi segera. Opsional. Default: false
 */
function enableValid(doValidate?: boolean) => void;

export function enableValid() {
  // Aktifkan validasi pada kolom teks dan jalankan segera
  this.$('textField_kyz78exp').enableValid(true);
}

interface IRule {
  type: string; // Tipe validasi
  param: any; // Parameter untuk tipe validasi
  message: string; // Pesan error
}

/**
 * @param {IRule[]} rules Aturan validasi. Wajib.
 * @param {boolean} [doValidate] Apakah menjalankan validasi segera. Opsional. Default: false
 */
function setValidation(rules: IRule[], doValidate?: boolean) => void;

export function setValidation() {
  // Tetapkan aturan validasi pada kolom teks: Wajib, panjang maksimum 10, dan hanya angka
  this.$('textField_kyz78exp').setValidation([{
    type: 'required'
  }, {
    type: 'maxLength', 
    param: '10'
  }, {
    type: 'customValidate', 
    param: (value, rule) => {
      if(/^\d*$/.test(value)) {
        return true;
      }

      return rule.message;
    }, 
    message: 'Hanya angka yang diizinkan'
  }]);
}

/**
 * @param {boolean} [doValidate] Apakah menjalankan validasi segera. Opsional. Default: false
 */
function resetValidation(doValidate?: boolean) => void;

export function resetValiation() {
  // Atur ulang aturan validasi kolom teks dan jalankan validasi segera
  this.$('textField_kyz78exp').resetValidation(true);
}

export function openDialog() {
  this.$('dialog_kyz78exr').show(() => {
    console.log('Dialog terbuka');
  });
}

export function closeDialog() {
  this.$('dialog_kyz78exr').hide();
}