I18N

Overview

I18N is used to handle multiple languages in the panel.

Code demo

I18N handles the multiple languages in the panel in the following steps:

1. Define multiple languages.

   Note: edit in the src/i18n/strings.{js,ts} file.

   // en and zh is required
   module.exports = {
   en: {
     hello: 'Hello',
   },
   zh: {
     hello: '你好',
   }
   };
   

2. Generate and export the multiple languages.

   import { I18N } from 'tuya-panel-kit';
   
   const Strings = require('./strings');
   
   module.exports = new I18N(Strings);
   

3. Use the multiple languages.

   import Strings from '../i18n';
   
   const localizedText = Strings.getLang('hello');
   
   console.log(localizedText);
   

4. Multilingual usage specification

Note：To understand the type of bitmap, please refer to How to use of bitmap?

module.exports = {
  en: {
    dsc_edit: 'Edit', // Basic multi language with dsc_ start and name it semantically
    dp_switch: 'Switch', // Datapoint (DP) related multi language should be in accordance with the `dp_${dpCode}`
    dp_switch_on: 'Switch is On', // Boolean type datapoint related multi language should be in accordance with the `dp_${dpCode}_${'on' || 'off'}`
    dp_mode_smart: 'Smart Mode', // Enum type datapoint related multi language should be in accordance with the `dp_${dpCode}_${enumValue}`
    dp_fault_0: 'Binary first bit is faulty', // Bitmap type datapoint related multi language should be in accordance with the `dp_${dpCode}_${bit}`
    dp_fault_1: 'Binary second bit is faulty',
  },
  zh: {
    dsc_edit: '编辑', //  基础多语言以 dcs_ 开头并命名语义化即可
    dp_switch: '开关', // 功能点（DP）相关多语言需按照 `dp_${dpCode}` 进行命名
    dp_switch_on: '开关开', // 布尔类型功能点状态相关多语言需按照 `dp_${dpCode}_${'on' || 'off'}` 进行命名
    dp_mode_smart: '智能模式', // 枚举类型功能点状态相关多语言需按照 `dp_${dpCode}_${enumValue}` 进行命名
    dp_fault_0: '第一位故障', // Bitmap 类型功能点 状态相关多语言需按照 `dp_${dpCode}_${bit}` 进行命名
    dp_fault_1: '第二位故障',
  }
};

Method

getLang

/**
* @desc Get basic multiple languages 
* @param {String} key–multilingual field 
* @returns {String} Specific multilingual value 
*/
 // en: Back; zh: return; 
// If not found: i18n@back; 
Strings.getLang('back'); // -> Strings.back

getDpLang

/**
 * @desc Obtain multiple languages of DP 
 * @param {String} dpCode–dpCode name
 * @param {String|Number} value–DP value
 * @returns {String} Specific multilingual value 
 */
 // en: Mode1; zh: 模式1;
 // If not found: dp_mode_1;
 Strings.getDpLang('mode', 1); // -> Strings.dp_mode_1

formatValue

/**
 * @desc Splice the multiple languages 
 * @param {String} key–multilingual field 
 * @param {...String|Number} values–the value to be matched and replaced; there can be multiple values 
 * @returns {String} Specific multilingual value 
 */
 // Define => en: "Turn on after {0}" zh: 设备将在{0}后开启 
 // Result => en: Turn on after 1 minute; zh: 设备将在1分钟后开启;
 Strings.formatValue('countdown_on', '1 minute');