ensemble-react/apps/kitchen-sink/src/ensemble/screens/help.yaml at ec94ef4e42cd8e6f22a6793fe62ecc9834e7fb29 · EnsembleUI/ensemble-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
View:
  onLoad:
    executeCode: |
      ensemble.storage.set('testlistoptions', [
        { label: 'William Smith', value: 'william_smith' },
        { label: 'Evelyn Johnson', value: 'evelyn_johnson' },
        { label: 'Liam Brown', value: 'liam_brown' },
        { label: 'Bella Davis', value: 'bella_davis' },
        { label: 'James Wilson', value: 'james_wilson' },
        { label: 'Zachary Taylor', value: 'zachary_taylor' },
        { label: 'Nolan Martinez', value: 'nolan_martinez' },
        { label: 'Emma Thompson', value: 'emma_thompson' },
        { label: 'Oliver White', value: 'oliver_white' },
        { label: 'Sophia Lee', value: 'sophia_lee' },
      ])
      ensemble.storage.set('testoptions', [])

  styles:
    scrollableView: true

  header:
    title:
      Header:

  body:
    Column:
      styles:
        names: page
      children:
        - Row:
            styles:
              mainAxis: spaceBetween
            children:
              - Icon:
                  name: ArrowBack
                  onTap:
                    executeCode: |-
                      ensemble.navigateBack();
              - Button:
                  label: navigate to widgets
                  onTap:
                    navigateScreen:
                      name: widgets
                      inputs:
                        input1: "hello"
                        input2: "world"

        - Button:
            label: toggle modal
            onTap:
              showDialog:
                options:
                  minWidth: 500px
                body:
                  MultiSelect:
                    label: test
                    data: ${ensemble.storage.get('testoptions')}
                    labelKey: label
                    valueKey: value
                    value: ${ensemble.storage.get('testselect') || []}
                    onChange:
                      executeCode: |
                        ensemble.storage.set('testselect', option)
                    onSearch:
                      executeCode: |
                        const tempOptions = ensemble.storage.get('testlistoptions')
                        const filteredResult = tempOptions.filter(option =>
                          option.label.toLowerCase().startsWith(search.toLowerCase())
                        )
                        ensemble.storage.set('testoptions', filteredResult)

        - Text:
            styles:
              names: heading-1
            text: Help
        - Markdown:
            text: More to come! In the meantime, checkout the Ensemble [documentation](https://docs.ensembleui.com/).
        - Card:
            styles:
              maxWidth: unset
              width: unset
              gap: 10px
            children:
              - Markdown:
                  text: |
                    ### Image Cropper
              - ImageCropper:
                  id: imageCropper
                  source: https://img.huffingtonpost.com/asset/5ab4d4ac2000007d06eb2c56.jpeg?cache=sih0jwle4e&ops=1910_1000
                  styles:
                    strokeColor: red
                    strokeWidth: 2px
                  onCropped:
                    executeCode: |
                      console.log('Image Cropped Successfully', file)
                      croppedImage.setSource(file)

              - Button:
                  label: Rotate clockwise
                  onTap:
                    executeCode: |
                      imageCropper.setRotate(imageCropper.rotate + 90)
              - Button:
                  label: Rotate anti-clockwise
                  onTap:
                    executeCode: |
                      imageCropper.setRotate(imageCropper.rotate - 90)
              - Button:
                  label: Crop
                  onTap:
                    executeCode: |
                      imageCropper.crop()

              - Image:
                  id: croppedImage
                  styles:
                    maxWidth: 500px
                  source: https://img.huffingtonpost.com/asset/5ab4d4ac2000007d06eb2c56.jpeg?cache=sih0jwle4e&ops=1910_1000

API:
  getProducts:
    method: GET
    inputs:
      - search
    uri: "https://dummyjson.com/users/search?q=${search}&limit=10"