• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import { ColorBlock, RadioBlock, SliderBlock } from 'common';
2
3@Component
4export struct CompPopupControlBlocks {
5  @Link enableCompBindPopupType: boolean;
6  @Link compBindPopupType: boolean;
7  @Link handlePopup: boolean;
8  @Link enableCompPopupType: boolean;
9  @Link compPopupType: number;
10  @Link enableCompBindPopupArrowOffset: boolean;
11  @Link compBindPopupArrowOffset: number;
12  @Link enableCompBindPopupShowInSubWindow: boolean;
13  @Link compBindPopupShowInSubWindow: boolean;
14  @Link enableCompBindPopupMaskType: boolean;
15  @Link compBindPopupMaskType: boolean;
16  @Link enableCompBindPopupMaskBoolean: boolean;
17  @Link compBindPopupMaskBoolean: boolean;
18  @Link enableCompBindPopupMaskColor: boolean;
19  @Link compBindPopupMaskColor: ResourceStr;
20  @Link enableCompBindPopupMessageOptionsTextColor: boolean;
21  @Link compBindPopupMessageOptionsTextColor: ResourceStr;
22  @Link enableCompBindPopupMessageOptionsFontSize: boolean;
23  @Link compBindPopupMessageOptionsFontSize: number;
24  @Link enableCompBindPopupMessageOptionsFontWeight: boolean;
25  @Link compBindPopupMessageOptionsFontWeight: FontWeight;
26  @Link enableCompBindPopupMessageOptionsFontStyle: boolean;
27  @Link compBindPopupMessageOptionsFontStyle: FontStyle;
28  @Link enableCompBindPopupTargetSpace: boolean;
29  @Link compBindPopupTargetSpace: number;
30  @Link enableCompBindPopupPlacement: boolean;
31  @Link compBindPopupPlacement: Placement;
32  @Link enableCompBindPopupOffsetX: boolean;
33  @Link compBindPopupOffsetX: number;
34  @Link enableCompBindPopupOffsetY: boolean;
35  @Link compBindPopupOffsetY: number;
36  @Link enableCompBindPopupEnableArrow: boolean;
37  @Link compBindPopupEnableArrow: boolean;
38  @Link enableCompBindPopupPopupColor: boolean;
39  @Link compBindPopupPopupColor: ResourceStr;
40  @Link enableCompBindPopupAutoCancel: boolean;
41  @Link compBindPopupAutoCancel: boolean;
42  @Link enableCompBindPopupWidth: boolean;
43  @Link compBindPopupWidth: number;
44  @Link enableCompBindPopupArrowPointPosition: boolean;
45  @Link compBindPopupArrowPointPosition: ArrowPointPosition;
46  @Link enableCompBindPopupArrowWidth: boolean;
47  @Link compBindPopupArrowWidth: number;
48  @Link enableCompBindPopupArrowHeight: boolean;
49  @Link compBindPopupArrowHeight: number;
50  @Link enableCompBindPopupRadius: boolean;
51  @Link compBindPopupRadius: number;
52  @Link enableCompBindPopupShadowType: boolean;
53  @Link compBindPopupShadowType: boolean;
54  @Link enableCompBindPopupShadowStyle: boolean;
55  @Link compBindPopupShadowStyle: ShadowStyle;
56  @Link enableCompBindPopupShadowOptionsRadius: boolean;
57  @Link compBindPopupShadowOptionsRadius: number;
58  @Link enableCompBindPopupShadowOptionsType: boolean;
59  @Link compBindPopupShadowOptionsType: ShadowType;
60  @Link enableCompBindPopupShadowOptionsColor: boolean;
61  @Link compBindPopupShadowOptionsColor: ResourceColor;
62  @Link enableCompBindPopupShadowOptionsOffsetX: boolean;
63  @Link compBindPopupShadowOptionsOffsetX: number;
64  @Link enableCompBindPopupShadowOptionsOffsetY: boolean;
65  @Link compBindPopupShadowOptionsOffsetY: number;
66  @Link enableCompBindPopupShadowOptionsFill: boolean;
67  @Link compBindPopupShadowOptionsFill: boolean;
68  @Link enableCompBindPopupBackgroundBlurStyle: boolean;
69  @Link compBindPopupBackgroundBlurStyle: BlurStyle;
70  @Link enableTransitionTransitionEffect: boolean;
71  @Link transitionTransitionEffect: TransitionEffect;
72  @Link enableCompBindPopupTransitionOpacity: boolean;
73  @Link compBindPopupTransitionOpacity: number;
74  @Link enableCompBindPopupTransitionTranslateX: boolean
75  @Link compBindPopupTransitionTranslateX: number;
76  @Link enableCompBindPopupTransitionTranslateY: boolean;
77  @Link compBindPopupTransitionTranslateY: number;
78  @Link enableCompBindPopupTransitionTranslateZ: boolean;
79  @Link compBindPopupTransitionTranslateZ: number;
80  @Link enableCompBindPopupTransitionScaleX: boolean;
81  @Link compBindPopupTransitionScaleX: number;
82  @Link enableCompBindPopupTransitionScaleY: boolean;
83  @Link compBindPopupTransitionScaleY: number;
84  @Link enableCompBindPopupTransitionScaleZ: boolean;
85  @Link compBindPopupTransitionScaleZ: number;
86  @Link enableCompBindPopupTransitionScaleCenterX: boolean;
87  @Link compBindPopupTransitionScaleCenterX: number;
88  @Link enableCompBindPopupTransitionScaleCenterY: boolean;
89  @Link compBindPopupTransitionScaleCenterY: number;
90  @Link enableCompBindPopupTransitionRotateX: boolean;
91  @Link compBindPopupTransitionRotateX: number;
92  @Link enableCompBindPopupTransitionRotateY: boolean;
93  @Link compBindPopupTransitionRotateY: number;
94  @Link enableCompBindPopupTransitionRotateZ: boolean;
95  @Link compBindPopupTransitionRotateZ: number;
96  @Link enableCompBindPopupTransitionRotateAngle: boolean;
97  @Link compBindPopupTransitionRotateAngle: number;
98  @Link enableCompBindPopupTransitionRotateCenterX: boolean;
99  @Link compBindPopupTransitionRotateCenterX: number;
100  @Link enableCompBindPopupTransitionRotateCenterY: boolean;
101  @Link compBindPopupTransitionRotateCenterY: number;
102  @Link enableCompBindPopupTransitionRotateCenterZ: boolean;
103  @Link compBindPopupTransitionRotateCenterZ: number;
104  @Link enableCompBindPopupTransitionRotatePerspective: boolean;
105  @Link compBindPopupTransitionRotatePerspective: number;
106  @Link enableCompBindPopupTransitionMove: boolean;
107  @Link compBindPopupTransitionMove: TransitionEdge;
108
109  build() {
110    Column() {
111
112      RadioBlock({
113        title: 'show.button',
114        isEnabled: $enableCompPopupType,
115        value: $compPopupType,
116        dataSource: [
117          { label: 'true', value: 0 },
118          { label: 'false', value: 1 }
119        ]
120      })
121
122
123      SliderBlock({
124        title: 'bindPopup.arrowOffset',
125        isEnabled: $enableCompBindPopupArrowOffset,
126        value: $compBindPopupArrowOffset,
127        min: 0,
128        max: 50
129      })
130
131      RadioBlock({
132        title: 'bindPopup.showInSubWindow',
133        isEnabled: $enableCompBindPopupShowInSubWindow,
134        value: $compBindPopupShowInSubWindow,
135        dataSource: [
136          { label: 'true', value: true },
137          { label: 'false', value: false }
138        ]
139      })
140
141      RadioBlock({
142        title: 'bindPopup.maskType',
143        isEnabled: $enableCompBindPopupMaskType,
144        value: $compBindPopupMaskType,
145        dataSource: [
146          { label: 'boolean', value: true },
147          { label: 'color', value: false }
148        ]
149      })
150
151      if (this.compBindPopupMaskType) {
152
153        RadioBlock({
154          title: 'bindPopup.mask.boolean',
155          isEnabled: $enableCompBindPopupMaskBoolean,
156          value: $compBindPopupMaskBoolean,
157          dataSource: [
158            { label: 'true', value: true },
159            { label: 'false', value: false }
160          ]
161        })
162
163      } else {
164
165        ColorBlock({
166          title: 'bindPopup.mask.color',
167          isEnabled: $enableCompBindPopupMaskColor,
168          color: $compBindPopupMaskColor
169        })
170
171      }
172
173      ColorBlock({
174        title: 'bindPopup.messageOptions.textColor',
175        isEnabled: $enableCompBindPopupMessageOptionsTextColor,
176        color: $compBindPopupMessageOptionsTextColor,
177      })
178
179      SliderBlock({
180        title: 'bindPopup.messageOptions.font.size',
181        isEnabled: $enableCompBindPopupMessageOptionsFontSize,
182        value: $compBindPopupMessageOptionsFontSize,
183        min: 0,
184        max: 30
185      })
186
187      RadioBlock({
188        title: 'bindPopup.messageOptions.font.weight',
189        isEnabled: $enableCompBindPopupMessageOptionsFontWeight,
190        value: $compBindPopupMessageOptionsFontWeight,
191        dataSource: [
192          { label: 'Lighter', value: FontWeight.Lighter },
193          { label: 'Normal', value: FontWeight.Normal },
194          { label: 'Regular', value: FontWeight.Regular },
195          { label: 'Medium', value: FontWeight.Medium },
196          { label: 'Bold', value: FontWeight.Bold },
197          { label: 'Bolder', value: FontWeight.Bolder },
198        ]
199      })
200
201      RadioBlock({
202        title: 'bindPopup.messageOptions.font.style',
203        isEnabled: $enableCompBindPopupMessageOptionsFontStyle,
204        value: $compBindPopupMessageOptionsFontStyle,
205        dataSource: [
206          { label: 'Normal', value: FontStyle.Normal },
207          { label: 'Italic', value: FontStyle.Italic },
208        ]
209      })
210
211      SliderBlock({
212        title: 'bindPopup.targetSpace',
213        isEnabled: $enableCompBindPopupTargetSpace,
214        value: $compBindPopupTargetSpace,
215        min: 0,
216        max: 30
217      })
218
219      RadioBlock({
220        title: 'bindPopup.placement',
221        isEnabled: $enableCompBindPopupPlacement,
222        value: $compBindPopupPlacement,
223        dataSource: [
224          { label: 'Left', value: Placement.Left },
225          { label: 'Right', value: Placement.Right },
226          { label: 'Top', value: Placement.Top },
227          { label: 'Bottom', value: Placement.Bottom },
228          { label: 'TopRight', value: Placement.TopRight },
229          { label: 'TopLeft', value: Placement.TopLeft },
230          { label: 'BottomLeft', value: Placement.BottomLeft },
231          { label: 'BottomRight', value: Placement.BottomRight },
232          { label: 'RightTop', value: Placement.RightTop },
233          { label: 'RightBottom', value: Placement.RightBottom },
234        ]
235      })
236
237      SliderBlock({
238        title: 'bindPopup.offsetX',
239        isEnabled: $enableCompBindPopupOffsetX,
240        value: $compBindPopupOffsetX,
241        min: 0,
242        max: 50
243      })
244
245      SliderBlock({
246        title: 'bindPopup.offsetY',
247        isEnabled: $enableCompBindPopupOffsetY,
248        value: $compBindPopupOffsetY,
249        min: 0,
250        max: 50
251      })
252
253      RadioBlock({
254        title: 'bindPopup.enableArrow',
255        isEnabled: $enableCompBindPopupEnableArrow,
256        value: $compBindPopupEnableArrow,
257        dataSource: [
258          { label: 'true', value: true },
259          { label: 'false', value: false },
260        ]
261      })
262
263      ColorBlock({
264        title: 'bindPopup.popupColor',
265        isEnabled: $enableCompBindPopupPopupColor,
266        color: $compBindPopupPopupColor,
267      })
268
269      RadioBlock({
270        title: 'bindPopup.autoCancel',
271        isEnabled: $enableCompBindPopupAutoCancel,
272        value: $compBindPopupAutoCancel,
273        dataSource: [
274          { label: 'true', value: true },
275          { label: 'false', value: false },
276        ]
277      })
278
279      SliderBlock({
280        title: 'bindPopup.width',
281        isEnabled: $enableCompBindPopupWidth,
282        value: $compBindPopupWidth,
283        min: 0,
284        max: 400
285      })
286
287      RadioBlock({
288        title: 'bindPopup.arrowPointPosition',
289        isEnabled: $enableCompBindPopupArrowPointPosition,
290        value: $compBindPopupArrowPointPosition,
291        dataSource: [
292          { label: 'CENTER', value: ArrowPointPosition.CENTER },
293          { label: 'START', value: ArrowPointPosition.START },
294          { label: 'END', value: ArrowPointPosition.END },
295        ]
296      })
297
298      RadioBlock({
299        title: 'bindPopup.shadowType',
300        isEnabled: $enableCompBindPopupShadowType,
301        value: $compBindPopupShadowType,
302        dataSource: [
303          { label: 'shadowStyle', value: true },
304          { label: 'shadowOptions', value: false }
305        ]
306      })
307
308      if (this.compBindPopupShadowType) {
309        RadioBlock({
310          title: 'bindPopup.shadowType.shadowStyle',
311          isEnabled: $enableCompBindPopupShadowStyle,
312          value: $compBindPopupShadowStyle,
313          dataSource: [
314            { label: 'OUTER_DEFAULT_XS', value: ShadowStyle.OUTER_DEFAULT_XS },
315            { label: 'OUTER_DEFAULT_SM', value: ShadowStyle.OUTER_DEFAULT_SM },
316            { label: 'OUTER_DEFAULT_MD', value: ShadowStyle.OUTER_DEFAULT_MD },
317            { label: 'OUTER_DEFAULT_LG', value: ShadowStyle.OUTER_DEFAULT_LG },
318            { label: 'OUTER_FLOATING_SM', value: ShadowStyle.OUTER_FLOATING_SM },
319            { label: 'OUTER_FLOATING_MD', value: ShadowStyle.OUTER_FLOATING_MD },
320          ]
321        })
322      } else {
323
324        SliderBlock({
325          title: 'bindPopup.shadowType.shadowOptions.radius',
326          isEnabled: $enableCompBindPopupShadowOptionsRadius,
327          value: $compBindPopupShadowOptionsRadius,
328          min: 0,
329          max: 30,
330        })
331
332        RadioBlock({
333          title: 'bindPopup.shadowType.shadowOptions.type',
334          isEnabled: $enableCompBindPopupShadowOptionsType,
335          value: $compBindPopupShadowOptionsType,
336          dataSource: [
337            { label: 'COLOR', value: ShadowType.COLOR },
338            { label: 'BLUR', value: ShadowType.BLUR },
339          ]
340        })
341
342        ColorBlock({
343          title: 'bindPopup.shadowType.shadowOptions.color',
344          isEnabled: $enableCompBindPopupShadowOptionsColor,
345          color: $compBindPopupShadowOptionsColor,
346        })
347
348        SliderBlock({
349          title: 'bindPopup.shadowType.shadowOptions.offsetX',
350          isEnabled: $enableCompBindPopupShadowOptionsOffsetX,
351          value: $compBindPopupShadowOptionsOffsetX,
352          min: 0,
353          max: 40,
354        })
355
356        SliderBlock({
357          title: 'bindPopup.shadowType.shadowOptions.offsetY',
358          isEnabled: $enableCompBindPopupShadowOptionsOffsetY,
359          value: $compBindPopupShadowOptionsOffsetY,
360          min: 0,
361          max: 40,
362        })
363
364        RadioBlock({
365          title: 'bindPopup.shadowType.shadowOptions.fill',
366          isEnabled: $enableCompBindPopupShadowOptionsFill,
367          value: $compBindPopupShadowOptionsFill,
368          dataSource: [
369            { label: 'true', value: true },
370            { label: 'false', value: false },
371          ]
372        })
373
374      }
375
376      RadioBlock({
377        title: 'bindPopup.BackgroundBlurStyle',
378        isEnabled: $enableCompBindPopupBackgroundBlurStyle,
379        value: $compBindPopupBackgroundBlurStyle,
380        dataSource: [
381          { label: 'Thin', value: BlurStyle.Thin },
382          { label: 'Regular', value: BlurStyle.Regular },
383          { label: 'Thick', value: BlurStyle.Thick },
384          { label: 'BACKGROUND_THIN', value: BlurStyle.BACKGROUND_THIN },
385          { label: 'BACKGROUND_REGULAR', value: BlurStyle.BACKGROUND_REGULAR },
386          { label: 'BACKGROUND_THICK', value: BlurStyle.BACKGROUND_THICK },
387          { label: 'BACKGROUND_ULTRA_THICK', value: BlurStyle.BACKGROUND_ULTRA_THICK },
388          { label: 'NONE', value: BlurStyle.NONE },
389          { label: 'COMPONENT_ULTRA_THIN', value: BlurStyle.COMPONENT_ULTRA_THIN },
390          { label: 'COMPONENT_REGULAR', value: BlurStyle.COMPONENT_REGULAR },
391          { label: 'COMPONENT_THICK', value: BlurStyle.COMPONENT_THICK },
392          { label: 'COMPONENT_ULTRA_THICK', value: BlurStyle.COMPONENT_ULTRA_THICK },
393        ]
394      })
395
396      SliderBlock({
397        title: 'bindPopup.transition.opacity',
398        isEnabled: $enableCompBindPopupTransitionOpacity,
399        value: $compBindPopupTransitionOpacity,
400        step: 0.1,
401        min: 0,
402        max: 1
403      })
404
405
406      SliderBlock({
407        title: 'bindPopup.transition.translateX',
408        isEnabled: $enableCompBindPopupTransitionTranslateX,
409        value: $compBindPopupTransitionTranslateX,
410        min: 0,
411        max: 100
412      })
413
414      SliderBlock({
415        title: 'bindPopup.transition.translateY',
416        isEnabled: $enableCompBindPopupTransitionTranslateY,
417        value: $compBindPopupTransitionTranslateY,
418        min: 0,
419        max: 100
420      })
421
422      SliderBlock({
423        title: 'bindPopup.transition.translateZ',
424        isEnabled: $enableCompBindPopupTransitionTranslateZ,
425        value: $compBindPopupTransitionTranslateZ,
426        min: 0,
427        max: 100
428      })
429
430      SliderBlock({
431        title: 'bindPopup.transition.scaleX',
432        isEnabled: $enableCompBindPopupTransitionScaleX,
433        value: $compBindPopupTransitionScaleX,
434        min: 0,
435        max: 100
436      })
437
438      SliderBlock({
439        title: 'bindPopup.transition.scaleY',
440        isEnabled: $enableCompBindPopupTransitionScaleY,
441        value: $compBindPopupTransitionScaleY,
442        min: 0,
443        max: 100
444      })
445
446      SliderBlock({
447        title: 'bindPopup.transition.scaleZ',
448        isEnabled: $enableCompBindPopupTransitionScaleZ,
449        value: $compBindPopupTransitionScaleZ,
450        min: 0,
451        max: 100
452      })
453
454      SliderBlock({
455        title: 'bindPopup.transition.scale.centerX',
456        isEnabled: $enableCompBindPopupTransitionScaleCenterX,
457        value: $compBindPopupTransitionScaleCenterX,
458        min: 0,
459        max: 100
460      })
461
462      SliderBlock({
463        title: 'bindPopup.transition.scale.centerY',
464        isEnabled: $enableCompBindPopupTransitionScaleCenterY,
465        value: $compBindPopupTransitionScaleCenterY,
466        min: 0,
467        max: 100
468      })
469
470
471      SliderBlock({
472        title: 'bindPopup.transition.RotateX',
473        isEnabled: $enableCompBindPopupTransitionRotateX,
474        value: $compBindPopupTransitionRotateX,
475        min: 0,
476        max: 100
477      })
478
479      SliderBlock({
480        title: 'bindPopup.transition.RotateY',
481        isEnabled: $enableCompBindPopupTransitionRotateY,
482        value: $compBindPopupTransitionRotateY,
483        min: 0,
484        max: 100
485      })
486
487      SliderBlock({
488        title: 'bindPopup.transition.RotateY',
489        isEnabled: $enableCompBindPopupTransitionRotateZ,
490        value: $compBindPopupTransitionRotateZ,
491        min: 0,
492        max: 100
493      })
494
495
496      SliderBlock({
497        title: 'bindPopup.transition.Rotate.CenterX',
498        isEnabled: $enableCompBindPopupTransitionRotateCenterX,
499        value: $compBindPopupTransitionRotateCenterX,
500        min: 0,
501        max: 100
502      })
503
504      SliderBlock({
505        title: 'bindPopup.transition.Rotate.CenterY',
506        isEnabled: $enableCompBindPopupTransitionRotateCenterY,
507        value: $compBindPopupTransitionRotateCenterY,
508        min: 0,
509        max: 100
510      })
511
512      RadioBlock({
513        title: 'bindPopup.transition.move',
514        isEnabled: $enableCompBindPopupTransitionMove,
515        value: $compBindPopupTransitionMove,
516        dataSource: [
517          { label: 'TOP', value: TransitionEdge.TOP },
518          { label: 'BOTTOM', value: TransitionEdge.BOTTOM },
519          { label: 'START', value: TransitionEdge.START },
520          { label: 'END', value: TransitionEdge.END },
521        ]
522      })
523    }
524    .width('100%')
525  }
526}