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.isLoading = !0; 126 this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + '%'; 127 } 128 } 129 130 initialRender() { 131 this.observeComponentCreation(((e, t) => { 132 ViewStackProcessor.StartGetAccessRecordingFor(e); 133 Button.createWithChild(); 134 Button.borderRadius(BUTTON_BORDER_RADIUS); 135 Button.clip(!1); 136 Button.hoverEffect(HoverEffect.None); 137 Button.backgroundColor({ 138 id: -1, 139 type: 10001, 140 params: ['sys.color.ohos_id_color_foreground_contrary'], 141 bundleName: '', 142 moduleName: '' 143 }); 144 Button.constraintSize({ minWidth: 44 }); 145 Button.width(this.progressButtonWidth < BUTTON_NORMARL_WIDTH ? BUTTON_NORMARL_WIDTH : this.progressButtonWidth); 146 Button.stateEffect(this.enable); 147 Button.onClick((() => { 148 if (this.enable) { 149 this.progress < MAX_PROGRESS && (this.isLoading = !this.isLoading); 150 this.clickCallback && this.clickCallback(); 151 } 152 })); 153 t || Button.pop(); 154 ViewStackProcessor.StopGetAccessRecording(); 155 })); 156 this.observeComponentCreation(((e, t) => { 157 ViewStackProcessor.StartGetAccessRecordingFor(e); 158 Stack.create(); 159 t || Stack.pop(); 160 ViewStackProcessor.StopGetAccessRecording(); 161 })); 162 this.observeComponentCreation(((e, t) => { 163 ViewStackProcessor.StartGetAccessRecordingFor(e); 164 Progress.create({ value: this.getButtonProgress(), total: MAX_PROGRESS, style: ProgressStyle.Capsule }); 165 Progress.height(BUTTON_NORMARL_HEIGHT); 166 Progress.borderRadius(BUTTON_BORDER_RADIUS); 167 Progress.width('100%'); 168 Progress.hoverEffect(HoverEffect.None); 169 Progress.clip(!1); 170 Progress.enabled(this.enable); 171 Progress.color('#330A59F7'); 172 t || Progress.pop(); 173 ViewStackProcessor.StopGetAccessRecording(); 174 })); 175 this.observeComponentCreation(((e, t) => { 176 ViewStackProcessor.StartGetAccessRecordingFor(e); 177 Row.create(); 178 t || Row.pop(); 179 ViewStackProcessor.StopGetAccessRecording(); 180 })); 181 this.observeComponentCreation(((e, t) => { 182 ViewStackProcessor.StartGetAccessRecordingFor(e); 183 Text.create(this.isLoading ? this.textProgress : this.content); 184 Text.fontSize({ 185 id: -1, 186 type: 10002, 187 params: ['sys.float.ohos_id_text_size_button3'], 188 bundleName: '', 189 moduleName: '' 190 }); 191 Text.fontWeight(FontWeight.Medium); 192 Text.fontColor({ 193 id: -1, 194 type: 10001, 195 params: ['sys.color.ohos_id_color_text_primary'], 196 bundleName: '', 197 moduleName: '' 198 }); 199 Text.maxLines(1); 200 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 201 Text.padding({ left: 8, right: 8 }); 202 Text.opacity(this.enable ? 1 : TEXT_OPACITY); 203 t || Text.pop(); 204 ViewStackProcessor.StopGetAccessRecording(); 205 })); 206 Text.pop(); 207 Row.pop(); 208 this.observeComponentCreation(((e, t) => { 209 ViewStackProcessor.StartGetAccessRecordingFor(e); 210 Row.create(); 211 Row.backgroundColor(Color.Transparent); 212 Row.border({ width: 1, color: '#330A59F7'}); 213 Row.height(28); 214 Row.borderRadius(14); 215 Row.width('100%'); 216 t || Row.pop(); 217 ViewStackProcessor.StopGetAccessRecording(); 218 })); 219 Row.pop(); 220 Stack.pop(); 221 Button.pop(); 222 } 223 224 rerender() { 225 this.updateDirtyElements(); 226 } 227} 228export default { ProgressButton };