• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15import common from '@ohos.app.ability.common';
16import i18n from '@ohos.i18n';
17import prompt from '@ohos.prompt';
18import router from '@ohos.router';
19import TitleBar from '../../components/TitleBar';
20import Logger from '../../utils/Logger';
21import LazyDataSource, { BaseData } from '../../utils/LazyDataSource';
22import OperationView from '../../components/OperationView';
23import ResourceUtil from '../../utils/ResourceUtil';
24
25const TAG: string = 'Language';
26
27@Entry
28@Component
29struct Language {
30  private context = getContext(this) as common.UIAbilityContext;
31  private languageSwitchTips: string = '';
32  @State localLanguage: string = '';
33  @State preferredLanguages: LazyDataSource = new LazyDataSource();
34  @State currentRegion: string = '';
35
36  async aboutToAppear() {
37    this.languageSwitchTips = await ResourceUtil.getString($r('app.string.language_switch_tips').id);
38  }
39
40  onPageShow() {
41    this.refreshData();
42  }
43
44  refreshData() {
45    this.currentRegion = i18n.System.getDisplayCountry(i18n.System.getSystemRegion(), i18n.System.getSystemLocale());
46    Logger.info(TAG, `this.currentRegion = ${this.currentRegion}`);
47    this.localLanguage = i18n.System.getSystemLanguage();
48    Logger.info(TAG, `this.localLanguage = ${this.localLanguage}`);
49    let preferredLanguages: BaseData[] = [];
50    let preferredLanguageIds = i18n.System.getPreferredLanguageList();
51    Logger.info(TAG, `this.preferredLanguageIds = ${JSON.stringify(preferredLanguageIds)}`);
52    preferredLanguageIds.forEach(id => {
53      let item: BaseData = {
54        id: id,
55        key: i18n.System.getDisplayLanguage(id, id),
56        value: i18n.System.getDisplayLanguage(id, this.localLanguage)
57      }
58      preferredLanguages.push(item);
59    });
60    this.preferredLanguages.dataArray = preferredLanguages;
61    this.preferredLanguages.notifyDataReload();
62  }
63
64  @Builder
65  LanguageItem($$: Data) {
66    Column() {
67      if ($$.index !== 0) {
68        Divider()
69          .color($r('app.color.divider'))
70          .width('100%')
71          .strokeWidth(1)
72          .margin({ top: 10, bottom: 10 })
73      }
74      Row() {
75        Column() {
76          Text($$.languageInfo.key)
77            .fontSize(22)
78            .margin({ top: 10, bottom: 10 })
79            .fontColor($$.languageInfo.id === this.localLanguage ? $r('app.color.blue') : $r('app.color.black'))
80
81          if ($$.languageInfo.id !== this.localLanguage) {
82            Text($$.languageInfo.value)
83              .fontColor($r('app.color.gray'))
84              .fontSize(22)
85              .width('100%')
86              .margin({ top: 10, bottom: 10 })
87          }
88        }
89        .alignItems(HorizontalAlign.Start)
90
91        Blank()
92        if ($$.languageInfo.id === this.localLanguage) {
93          Image($r('app.media.check'))
94            .size({ width: 35, height: 35 })
95        }
96      }
97      .width('100%')
98    }
99    .width('100%')
100    .onClick($$.handleClick)
101  }
102
103  @Builder
104  LanguageView() {
105    Column() {
106      List() {
107        LazyForEach(this.preferredLanguages, (item: BaseData, index: number) => {
108          ListItem() {
109            this.LanguageItem(new Data(item, index, () => {
110              if (item.id !== this.localLanguage) {
111                try {
112                  i18n.System.setSystemLanguage(item.id);
113                } catch (err) {
114                  Logger.error(`setSystemLanguage failed, code is ${err.code}, message is ${err.message}`);
115                }
116                this.refreshData();
117                prompt.showToast({
118                  message: this.languageSwitchTips
119                });
120                setTimeout(() => {
121                  this.context.terminateSelf();
122                }, 2000);
123              }
124            }))
125          }
126        }, (item: BaseData) => item.key)
127      }
128    }
129    .width('95%')
130    .padding(10)
131    .backgroundColor($r('app.color.white'))
132    .margin({ top: 10 })
133    .border({ color: $r('app.color.white'), width: 1, radius: 15 })
134  }
135
136  build() {
137    Column() {
138      TitleBar({ hasBackPress: true, title: $r('app.string.language_region') })
139      Scroll() {
140        Column() {
141          Row() {
142            Text($r('app.string.language'))
143              .fontSize(22).fontColor($r('app.color.gray'))
144            Blank()
145            Text($r('app.string.edit'))
146              .key('edit')
147              .fontSize(22).fontColor($r('app.color.blue'))
148              .margin({ right: 10 })
149              .onClick(() => {
150                router.push({
151                  url: 'international/pages/EditPreferred',
152                  params: {
153                    language: this.localLanguage
154                  }
155                });
156              })
157          }
158          .width('95%')
159          .margin({ top: 20, right: 10, left: 10 })
160
161          this.LanguageView()
162          OperationView({ mKey: $r('app.string.add_language'), value: '', showArrow: false, handleClick: () => {
163            router.push({
164              url: 'international/pages/AddLanguage'
165            });
166          }
167          })
168          Text($r('app.string.region'))
169            .fontSize(20).fontColor($r('app.color.gray'))
170            .width('95%')
171            .margin({ top: 20, right: 10, left: 10 })
172          OperationView({ mKey: $r('app.string.current_region'), value: this.currentRegion, handleClick: () => {
173            router.push({
174              url: 'international/pages/Region',
175              params: {
176                language: this.localLanguage,
177                currentCountry: this.currentRegion
178              }
179            });
180          }
181          })
182        }
183      }
184    }
185    .width('100%')
186    .height('100%')
187    .backgroundColor($r('app.color.f5f5f5'))
188  }
189}
190
191class Data {
192  languageInfo: BaseData = new BaseData();
193  index: number = 0;
194  handleClick: (event: ClickEvent) => void;
195
196  constructor(languageInfo: BaseData, index: number, handleClick: (event: ClickEvent) => void) {
197    this.languageInfo = languageInfo;
198    this.index = index;
199    this.handleClick = handleClick;
200  }
201}