1/* 2 * Copyright (c) 2023-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 */ 15 16const EMPTY_STRING = ''; 17const MAX_PROGRESS = 100; 18const MAX_PERCENTAGE = '100%'; 19const MIN_PERCENTAGE = '0%'; 20const TEXT_OPACITY = 0.4; 21const BUTTON_NORMARL_WIDTH = 44; 22const BUTTON_NORMARL_HEIGHT = 28; 23const BUTTON_BORDER_RADIUS = 14; 24const BUTTON_BORDER_WIDTH = 0.5; 25 26export class ProgressButton extends ViewPU { 27 constructor(e, t, s, r = -1) { 28 super(e, s, r); 29 this.__progress = new SynchedPropertySimpleOneWayPU(t.progress, this, 'progress'); 30 this.__textProgress = new ObservedPropertySimplePU('', this, 'textProgress'); 31 this.__content = new SynchedPropertySimpleOneWayPU(t.content, this, 'content'); 32 this.__isLoading = new ObservedPropertySimplePU(!1, this, 'isLoading'); 33 this.__enable = new SynchedPropertySimpleOneWayPU(t.enable, this, 'enable'); 34 this.progressButtonWidth = 44; 35 this.clickCallback = null; 36 this.setInitiallyProvidedValue(t); 37 this.declareWatch('progress', this.getProgressContext); 38 } 39 40 setInitiallyProvidedValue(e) { 41 void 0 !== e.textProgress && (this.textProgress = e.textProgress); 42 void 0 !== e.content ? this.__content.set(e.content) : this.__content.set(''); 43 void 0 !== e.isLoading && (this.isLoading = e.isLoading); 44 void 0 !== e.enable ? this.__enable.set(e.enable) : this.__enable.set(!0); 45 void 0 !== e.progressButtonWidth && (this.progressButtonWidth = e.progressButtonWidth); 46 void 0 !== e.clickCallback && (this.clickCallback = e.clickCallback); 47 } 48 49 updateStateVars(e) { 50 this.__progress.reset(e.progress); 51 this.__content.reset(e.content); 52 this.__enable.reset(e.enable); 53 } 54 55 purgeVariableDependenciesOnElmtId(e) { 56 this.__progress.purgeDependencyOnElmtId(e); 57 this.__textProgress.purgeDependencyOnElmtId(e); 58 this.__content.purgeDependencyOnElmtId(e); 59 this.__isLoading.purgeDependencyOnElmtId(e); 60 this.__enable.purgeDependencyOnElmtId(e); 61 } 62 63 aboutToBeDeleted() { 64 this.__progress.aboutToBeDeleted(); 65 this.__textProgress.aboutToBeDeleted(); 66 this.__content.aboutToBeDeleted(); 67 this.__isLoading.aboutToBeDeleted(); 68 this.__enable.aboutToBeDeleted(); 69 SubscriberManager.Get().delete(this.id__()); 70 this.aboutToBeDeletedInternal(); 71 } 72 73 get progress() { 74 return this.__progress.get(); 75 } 76 77 set progress(e) { 78 this.__progress.set(e); 79 } 80 81 get textProgress() { 82 return this.__textProgress.get(); 83 } 84 85 set textProgress(e) { 86 this.__textProgress.set(e); 87 } 88 89 get content() { 90 return this.__content.get(); 91 } 92 93 set content(e) { 94 this.__content.set(e); 95 } 96 97 get isLoading() { 98 return this.__isLoading.get(); 99 } 100 101 set isLoading(e) { 102 this.__isLoading.set(e); 103 } 104 105 get enable() { 106 return this.__enable.get(); 107 } 108 109 set enable(e) { 110 this.__enable.set(e); 111 } 112 113 getButtonProgress() { 114 return this.progress < 0 ? 0 : this.progress > MAX_PROGRESS ? MAX_PROGRESS : this.progress; 115 } 116 117 getProgressContext() { 118 if (this.progress < 0) { 119 this.isLoading = !1; 120 this.textProgress = '0%'; 121 } else if (this.progress >= MAX_PROGRESS) { 122 this.isLoading = !1; 123 this.textProgress = '100%'; 124 } else { 125 this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + '%'; 126 } 127 } 128 129 initialRender() { 130 this.observeComponentCreation(((e, t) => { 131 ViewStackProcessor.StartGetAccessRecordingFor(e); 132 Button.createWithChild(); 133 Button.borderRadius(BUTTON_BORDER_RADIUS); 134 Button.clip(!1); 135 Button.hoverEffect(HoverEffect.None); 136 Button.backgroundColor({ 137 id: -1, 138 type: 10001, 139 params: ['sys.color.ohos_id_color_foreground_contrary'], 140 bundleName: '', 141 moduleName: '' 142 }); 143 Button.border({ 144 width: BUTTON_BORDER_WIDTH, 145 color: this.enable ? { 146 id: -1, 147 type: 10001, 148 params: ['sys.color.ohos_id_color_toolbar_text_actived'], 149 bundleName: '', 150 moduleName: '' 151 } : { 152 id: -1, 153 type: 10001, 154 params: ['sys.color.ohos_id_color_foreground_contrary_disable'], 155 bundleName: '', 156 moduleName: '' 157 } 158 }); 159 Button.constraintSize({ minWidth: 44 }); 160 Button.width(this.progressButtonWidth < BUTTON_NORMARL_WIDTH ? BUTTON_NORMARL_WIDTH : this.progressButtonWidth); 161 Button.stateEffect(this.enable); 162 Button.onClick((() => { 163 if (this.enable) { 164 this.progress < MAX_PROGRESS && (this.isLoading = !this.isLoading); 165 this.clickCallback && this.clickCallback(); 166 } 167 })); 168 t || Button.pop(); 169 ViewStackProcessor.StopGetAccessRecording(); 170 })); 171 this.observeComponentCreation(((e, t) => { 172 ViewStackProcessor.StartGetAccessRecordingFor(e); 173 Stack.create(); 174 t || Stack.pop(); 175 ViewStackProcessor.StopGetAccessRecording(); 176 })); 177 this.observeComponentCreation(((e, t) => { 178 ViewStackProcessor.StartGetAccessRecordingFor(e); 179 Progress.create({ value: this.getButtonProgress(), total: MAX_PROGRESS, style: ProgressStyle.Capsule }); 180 Progress.height(BUTTON_NORMARL_HEIGHT); 181 Progress.borderRadius(BUTTON_BORDER_RADIUS); 182 Progress.width('100%'); 183 Progress.hoverEffect(HoverEffect.None); 184 Progress.clip(!1); 185 Progress.enabled(this.enable); 186 t || Progress.pop(); 187 ViewStackProcessor.StopGetAccessRecording(); 188 })); 189 this.observeComponentCreation(((e, t) => { 190 ViewStackProcessor.StartGetAccessRecordingFor(e); 191 Row.create(); 192 t || Row.pop(); 193 ViewStackProcessor.StopGetAccessRecording(); 194 })); 195 this.observeComponentCreation(((e, t) => { 196 ViewStackProcessor.StartGetAccessRecordingFor(e); 197 Text.create(this.isLoading ? this.textProgress : this.content); 198 Text.fontSize({ 199 id: -1, 200 type: 10002, 201 params: ['sys.float.ohos_id_text_size_button3'], 202 bundleName: '', 203 moduleName: '' 204 }); 205 Text.fontWeight(FontWeight.Medium); 206 Text.fontColor(this.isLoading ? { 207 id: -1, 208 type: 10001, 209 params: ['sys.color.ohos_id_color_text_primary'], 210 bundleName: '', 211 moduleName: '' 212 } : { 213 id: -1, 214 type: 10001, 215 params: ['sys.color.ohos_id_color_emphasize'], 216 bundleName: '', 217 moduleName: '' 218 }); 219 Text.maxLines(1); 220 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 221 Text.padding({ left: 8, right: 8 }); 222 Text.opacity(this.enable ? 1 : TEXT_OPACITY); 223 t || Text.pop(); 224 ViewStackProcessor.StopGetAccessRecording(); 225 })); 226 Text.pop(); 227 Row.pop(); 228 Stack.pop(); 229 Button.pop(); 230 } 231 232 rerender() { 233 this.updateDirtyElements(); 234 } 235} 236export default { ProgressButton };