@pnp/spfx-controls-react 3.26.0-beta.3602791 → 3.26.0-beta.3602956

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/jest-output/JUnit.xml +116 -116
  2. package/lib/common/telemetry/version.js +1 -1
  3. package/lib/controls/DetailsList/DetailsListRow.js +2 -1
  4. package/lib/controls/DetailsList/DetailsListRow.js.map +1 -1
  5. package/lib-commonjs/common/telemetry/version.js +1 -1
  6. package/lib-commonjs/controls/DetailsList/DetailsListRow.js +2 -1
  7. package/lib-commonjs/controls/DetailsList/DetailsListRow.js.map +1 -1
  8. package/lib-commonjs/webparts/controlsTest/components/ControlsTest.js.map +1 -1
  9. package/package.json +1 -1
  10. package/release/analysis-logs/lint.sarif +54 -286
  11. package/release/manifests/45165954-80f9-44c1-9967-cd38ae92a33b.manifest.json +1 -1
  12. package/release/manifests/57ebd944-98ed-43f9-b722-e959d6dac6ad.manifest.json +1 -1
  13. package/release/manifests/f9c6b930-8d5d-4550-bfd9-ed5f6ca443a8.manifest.json +1 -1
package/release/analysis-logs/lint.sarif CHANGED
@@ -91,14 +91,6 @@
91
91
  "text": "Require explicit return types on functions and class methods"
92
92
  }
93
93
  },
94
- {
95
- "id": "@rushstack/no-new-null",
96
- "helpUri": "https://www.npmjs.com/package/@rushstack/eslint-plugin",
97
- "properties": {},
98
- "shortDescription": {
99
- "text": "Prevent usage of JavaScript's \"null\" keyword in new type declarations. To avoid hampering usage of preexisting APIs that require \"null\", the rule ignores declarations that are local variables, private members, or types that are not exported."
100
- }
101
- },
102
94
  {
103
95
  "id": "no-void",
104
96
  "helpUri": "https://eslint.org/docs/latest/rules/no-void",
@@ -163,16 +155,6 @@
163
155
  "text": "Disallow `javascript:` URLs"
164
156
  }
165
157
  },
166
- {
167
- "id": "react/no-unescaped-entities",
168
- "helpUri": "https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-unescaped-entities.md",
169
- "properties": {
170
- "category": "Possible Errors"
171
- },
172
- "shortDescription": {
173
- "text": "Disallow unescaped HTML entities from appearing in markup"
174
- }
175
- },
176
158
  {
177
159
  "id": "no-unused-expressions",
178
160
  "helpUri": "https://eslint.org/docs/latest/rules/no-unused-expressions",
@@ -7906,33 +7888,6 @@
7906
7888
  }
7907
7889
  ]
7908
7890
  },
7909
- {
7910
- "level": "warning",
7911
- "message": {
7912
- "text": "Usage of \"null\" is deprecated except when describing legacy APIs; use \"undefined\" instead"
7913
- },
7914
- "locations": [
7915
- {
7916
- "physicalLocation": {
7917
- "artifactLocation": {
7918
- "uri": "src/controls/DetailsList/DetailsListRow.tsx",
7919
- "index": 215
7920
- },
7921
- "region": {
7922
- "startLine": 73,
7923
- "startColumn": 52,
7924
- "endLine": 73,
7925
- "endColumn": 56,
7926
- "snippet": {
7927
- "text": "null"
7928
- }
7929
- }
7930
- }
7931
- }
7932
- ],
7933
- "ruleId": "@rushstack/no-new-null",
7934
- "ruleIndex": 10
7935
- },
7936
7891
  {
7937
7892
  "level": "warning",
7938
7893
  "message": {
@@ -7955,7 +7910,7 @@
7955
7910
  }
7956
7911
  ],
7957
7912
  "ruleId": "no-void",
7958
- "ruleIndex": 11,
7913
+ "ruleIndex": 10,
7959
7914
  "suppressions": [
7960
7915
  {
7961
7916
  "kind": "inSource",
@@ -8285,7 +8240,7 @@
8285
8240
  }
8286
8241
  ],
8287
8242
  "ruleId": "dot-notation",
8288
- "ruleIndex": 12,
8243
+ "ruleIndex": 11,
8289
8244
  "suppressions": [
8290
8245
  {
8291
8246
  "kind": "inSource",
@@ -9485,7 +9440,7 @@
9485
9440
  }
9486
9441
  ],
9487
9442
  "ruleId": "dot-notation",
9488
- "ruleIndex": 12,
9443
+ "ruleIndex": 11,
9489
9444
  "suppressions": [
9490
9445
  {
9491
9446
  "kind": "inSource",
@@ -9515,7 +9470,7 @@
9515
9470
  }
9516
9471
  ],
9517
9472
  "ruleId": "dot-notation",
9518
- "ruleIndex": 12,
9473
+ "ruleIndex": 11,
9519
9474
  "suppressions": [
9520
9475
  {
9521
9476
  "kind": "inSource",
@@ -10475,7 +10430,7 @@
10475
10430
  }
10476
10431
  ],
10477
10432
  "ruleId": "dot-notation",
10478
- "ruleIndex": 12,
10433
+ "ruleIndex": 11,
10479
10434
  "suppressions": [
10480
10435
  {
10481
10436
  "kind": "inSource",
@@ -14492,7 +14447,7 @@
14492
14447
  }
14493
14448
  ],
14494
14449
  "ruleId": "@typescript-eslint/no-floating-promises",
14495
- "ruleIndex": 13,
14450
+ "ruleIndex": 12,
14496
14451
  "suppressions": [
14497
14452
  {
14498
14453
  "kind": "inSource",
@@ -14672,7 +14627,7 @@
14672
14627
  }
14673
14628
  ],
14674
14629
  "ruleId": "require-atomic-updates",
14675
- "ruleIndex": 14,
14630
+ "ruleIndex": 13,
14676
14631
  "suppressions": [
14677
14632
  {
14678
14633
  "kind": "inSource",
@@ -14702,7 +14657,7 @@
14702
14657
  }
14703
14658
  ],
14704
14659
  "ruleId": "@typescript-eslint/no-floating-promises",
14705
- "ruleIndex": 13,
14660
+ "ruleIndex": 12,
14706
14661
  "suppressions": [
14707
14662
  {
14708
14663
  "kind": "inSource",
@@ -14732,7 +14687,7 @@
14732
14687
  }
14733
14688
  ],
14734
14689
  "ruleId": "require-atomic-updates",
14735
- "ruleIndex": 14,
14690
+ "ruleIndex": 13,
14736
14691
  "suppressions": [
14737
14692
  {
14738
14693
  "kind": "inSource",
@@ -17402,7 +17357,7 @@
17402
17357
  }
17403
17358
  ],
17404
17359
  "ruleId": "@typescript-eslint/no-floating-promises",
17405
- "ruleIndex": 13,
17360
+ "ruleIndex": 12,
17406
17361
  "suppressions": [
17407
17362
  {
17408
17363
  "kind": "inSource",
@@ -17432,7 +17387,7 @@
17432
17387
  }
17433
17388
  ],
17434
17389
  "ruleId": "require-atomic-updates",
17435
- "ruleIndex": 14,
17390
+ "ruleIndex": 13,
17436
17391
  "suppressions": [
17437
17392
  {
17438
17393
  "kind": "inSource",
@@ -17462,7 +17417,7 @@
17462
17417
  }
17463
17418
  ],
17464
17419
  "ruleId": "@typescript-eslint/no-floating-promises",
17465
- "ruleIndex": 13,
17420
+ "ruleIndex": 12,
17466
17421
  "suppressions": [
17467
17422
  {
17468
17423
  "kind": "inSource",
@@ -18872,7 +18827,7 @@
18872
18827
  }
18873
18828
  ],
18874
18829
  "ruleId": "@typescript-eslint/no-floating-promises",
18875
- "ruleIndex": 13,
18830
+ "ruleIndex": 12,
18876
18831
  "suppressions": [
18877
18832
  {
18878
18833
  "kind": "inSource",
@@ -18902,7 +18857,7 @@
18902
18857
  }
18903
18858
  ],
18904
18859
  "ruleId": "@typescript-eslint/no-floating-promises",
18905
- "ruleIndex": 13,
18860
+ "ruleIndex": 12,
18906
18861
  "suppressions": [
18907
18862
  {
18908
18863
  "kind": "inSource",
@@ -19022,7 +18977,7 @@
19022
18977
  }
19023
18978
  ],
19024
18979
  "ruleId": "@typescript-eslint/no-floating-promises",
19025
- "ruleIndex": 13,
18980
+ "ruleIndex": 12,
19026
18981
  "suppressions": [
19027
18982
  {
19028
18983
  "kind": "inSource",
@@ -19112,7 +19067,7 @@
19112
19067
  }
19113
19068
  ],
19114
19069
  "ruleId": "@typescript-eslint/no-floating-promises",
19115
- "ruleIndex": 13,
19070
+ "ruleIndex": 12,
19116
19071
  "suppressions": [
19117
19072
  {
19118
19073
  "kind": "inSource",
@@ -19172,7 +19127,7 @@
19172
19127
  }
19173
19128
  ],
19174
19129
  "ruleId": "@typescript-eslint/no-floating-promises",
19175
- "ruleIndex": 13,
19130
+ "ruleIndex": 12,
19176
19131
  "suppressions": [
19177
19132
  {
19178
19133
  "kind": "inSource",
@@ -19317,7 +19272,7 @@
19317
19272
  }
19318
19273
  ],
19319
19274
  "ruleId": "no-var",
19320
- "ruleIndex": 15,
19275
+ "ruleIndex": 14,
19321
19276
  "suppressions": [
19322
19277
  {
19323
19278
  "kind": "inSource",
@@ -19378,7 +19333,7 @@
19378
19333
  }
19379
19334
  ],
19380
19335
  "ruleId": "no-var",
19381
- "ruleIndex": 15,
19336
+ "ruleIndex": 14,
19382
19337
  "suppressions": [
19383
19338
  {
19384
19339
  "kind": "inSource",
@@ -19439,7 +19394,7 @@
19439
19394
  }
19440
19395
  ],
19441
19396
  "ruleId": "no-var",
19442
- "ruleIndex": 15,
19397
+ "ruleIndex": 14,
19443
19398
  "suppressions": [
19444
19399
  {
19445
19400
  "kind": "inSource",
@@ -19500,7 +19455,7 @@
19500
19455
  }
19501
19456
  ],
19502
19457
  "ruleId": "no-var",
19503
- "ruleIndex": 15,
19458
+ "ruleIndex": 14,
19504
19459
  "suppressions": [
19505
19460
  {
19506
19461
  "kind": "inSource",
@@ -19561,7 +19516,7 @@
19561
19516
  }
19562
19517
  ],
19563
19518
  "ruleId": "no-var",
19564
- "ruleIndex": 15,
19519
+ "ruleIndex": 14,
19565
19520
  "suppressions": [
19566
19521
  {
19567
19522
  "kind": "inSource",
@@ -19622,7 +19577,7 @@
19622
19577
  }
19623
19578
  ],
19624
19579
  "ruleId": "no-var",
19625
- "ruleIndex": 15,
19580
+ "ruleIndex": 14,
19626
19581
  "suppressions": [
19627
19582
  {
19628
19583
  "kind": "inSource",
@@ -19683,7 +19638,7 @@
19683
19638
  }
19684
19639
  ],
19685
19640
  "ruleId": "no-var",
19686
- "ruleIndex": 15,
19641
+ "ruleIndex": 14,
19687
19642
  "suppressions": [
19688
19643
  {
19689
19644
  "kind": "inSource",
@@ -19744,7 +19699,7 @@
19744
19699
  }
19745
19700
  ],
19746
19701
  "ruleId": "no-var",
19747
- "ruleIndex": 15,
19702
+ "ruleIndex": 14,
19748
19703
  "suppressions": [
19749
19704
  {
19750
19705
  "kind": "inSource",
@@ -19805,7 +19760,7 @@
19805
19760
  }
19806
19761
  ],
19807
19762
  "ruleId": "no-var",
19808
- "ruleIndex": 15,
19763
+ "ruleIndex": 14,
19809
19764
  "suppressions": [
19810
19765
  {
19811
19766
  "kind": "inSource",
@@ -19866,7 +19821,7 @@
19866
19821
  }
19867
19822
  ],
19868
19823
  "ruleId": "no-var",
19869
- "ruleIndex": 15,
19824
+ "ruleIndex": 14,
19870
19825
  "suppressions": [
19871
19826
  {
19872
19827
  "kind": "inSource",
@@ -19927,7 +19882,7 @@
19927
19882
  }
19928
19883
  ],
19929
19884
  "ruleId": "no-var",
19930
- "ruleIndex": 15,
19885
+ "ruleIndex": 14,
19931
19886
  "suppressions": [
19932
19887
  {
19933
19888
  "kind": "inSource",
@@ -19988,7 +19943,7 @@
19988
19943
  }
19989
19944
  ],
19990
19945
  "ruleId": "no-var",
19991
- "ruleIndex": 15,
19946
+ "ruleIndex": 14,
19992
19947
  "suppressions": [
19993
19948
  {
19994
19949
  "kind": "inSource",
@@ -20049,7 +20004,7 @@
20049
20004
  }
20050
20005
  ],
20051
20006
  "ruleId": "no-var",
20052
- "ruleIndex": 15,
20007
+ "ruleIndex": 14,
20053
20008
  "suppressions": [
20054
20009
  {
20055
20010
  "kind": "inSource",
@@ -20110,7 +20065,7 @@
20110
20065
  }
20111
20066
  ],
20112
20067
  "ruleId": "no-var",
20113
- "ruleIndex": 15,
20068
+ "ruleIndex": 14,
20114
20069
  "suppressions": [
20115
20070
  {
20116
20071
  "kind": "inSource",
@@ -20171,7 +20126,7 @@
20171
20126
  }
20172
20127
  ],
20173
20128
  "ruleId": "no-var",
20174
- "ruleIndex": 15,
20129
+ "ruleIndex": 14,
20175
20130
  "suppressions": [
20176
20131
  {
20177
20132
  "kind": "inSource",
@@ -20232,7 +20187,7 @@
20232
20187
  }
20233
20188
  ],
20234
20189
  "ruleId": "no-var",
20235
- "ruleIndex": 15,
20190
+ "ruleIndex": 14,
20236
20191
  "suppressions": [
20237
20192
  {
20238
20193
  "kind": "inSource",
@@ -20293,7 +20248,7 @@
20293
20248
  }
20294
20249
  ],
20295
20250
  "ruleId": "no-var",
20296
- "ruleIndex": 15,
20251
+ "ruleIndex": 14,
20297
20252
  "suppressions": [
20298
20253
  {
20299
20254
  "kind": "inSource",
@@ -20354,7 +20309,7 @@
20354
20309
  }
20355
20310
  ],
20356
20311
  "ruleId": "no-var",
20357
- "ruleIndex": 15,
20312
+ "ruleIndex": 14,
20358
20313
  "suppressions": [
20359
20314
  {
20360
20315
  "kind": "inSource",
@@ -20415,7 +20370,7 @@
20415
20370
  }
20416
20371
  ],
20417
20372
  "ruleId": "no-var",
20418
- "ruleIndex": 15,
20373
+ "ruleIndex": 14,
20419
20374
  "suppressions": [
20420
20375
  {
20421
20376
  "kind": "inSource",
@@ -20476,7 +20431,7 @@
20476
20431
  }
20477
20432
  ],
20478
20433
  "ruleId": "no-var",
20479
- "ruleIndex": 15,
20434
+ "ruleIndex": 14,
20480
20435
  "suppressions": [
20481
20436
  {
20482
20437
  "kind": "inSource",
@@ -20537,7 +20492,7 @@
20537
20492
  }
20538
20493
  ],
20539
20494
  "ruleId": "no-var",
20540
- "ruleIndex": 15,
20495
+ "ruleIndex": 14,
20541
20496
  "suppressions": [
20542
20497
  {
20543
20498
  "kind": "inSource",
@@ -20598,7 +20553,7 @@
20598
20553
  }
20599
20554
  ],
20600
20555
  "ruleId": "no-var",
20601
- "ruleIndex": 15,
20556
+ "ruleIndex": 14,
20602
20557
  "suppressions": [
20603
20558
  {
20604
20559
  "kind": "inSource",
@@ -20659,7 +20614,7 @@
20659
20614
  }
20660
20615
  ],
20661
20616
  "ruleId": "no-var",
20662
- "ruleIndex": 15,
20617
+ "ruleIndex": 14,
20663
20618
  "suppressions": [
20664
20619
  {
20665
20620
  "kind": "inSource",
@@ -20720,7 +20675,7 @@
20720
20675
  }
20721
20676
  ],
20722
20677
  "ruleId": "no-var",
20723
- "ruleIndex": 15,
20678
+ "ruleIndex": 14,
20724
20679
  "suppressions": [
20725
20680
  {
20726
20681
  "kind": "inSource",
@@ -20781,7 +20736,7 @@
20781
20736
  }
20782
20737
  ],
20783
20738
  "ruleId": "no-var",
20784
- "ruleIndex": 15,
20739
+ "ruleIndex": 14,
20785
20740
  "suppressions": [
20786
20741
  {
20787
20742
  "kind": "inSource",
@@ -20842,7 +20797,7 @@
20842
20797
  }
20843
20798
  ],
20844
20799
  "ruleId": "no-var",
20845
- "ruleIndex": 15,
20800
+ "ruleIndex": 14,
20846
20801
  "suppressions": [
20847
20802
  {
20848
20803
  "kind": "inSource",
@@ -20903,7 +20858,7 @@
20903
20858
  }
20904
20859
  ],
20905
20860
  "ruleId": "no-var",
20906
- "ruleIndex": 15,
20861
+ "ruleIndex": 14,
20907
20862
  "suppressions": [
20908
20863
  {
20909
20864
  "kind": "inSource",
@@ -20964,7 +20919,7 @@
20964
20919
  }
20965
20920
  ],
20966
20921
  "ruleId": "no-var",
20967
- "ruleIndex": 15,
20922
+ "ruleIndex": 14,
20968
20923
  "suppressions": [
20969
20924
  {
20970
20925
  "kind": "inSource",
@@ -21025,7 +20980,7 @@
21025
20980
  }
21026
20981
  ],
21027
20982
  "ruleId": "no-var",
21028
- "ruleIndex": 15,
20983
+ "ruleIndex": 14,
21029
20984
  "suppressions": [
21030
20985
  {
21031
20986
  "kind": "inSource",
@@ -21086,7 +21041,7 @@
21086
21041
  }
21087
21042
  ],
21088
21043
  "ruleId": "no-var",
21089
- "ruleIndex": 15,
21044
+ "ruleIndex": 14,
21090
21045
  "suppressions": [
21091
21046
  {
21092
21047
  "kind": "inSource",
@@ -21147,7 +21102,7 @@
21147
21102
  }
21148
21103
  ],
21149
21104
  "ruleId": "no-var",
21150
- "ruleIndex": 15,
21105
+ "ruleIndex": 14,
21151
21106
  "suppressions": [
21152
21107
  {
21153
21108
  "kind": "inSource",
@@ -21327,7 +21282,7 @@
21327
21282
  }
21328
21283
  ],
21329
21284
  "ruleId": "no-async-promise-executor",
21330
- "ruleIndex": 16,
21285
+ "ruleIndex": 15,
21331
21286
  "suppressions": [
21332
21287
  {
21333
21288
  "kind": "inSource",
@@ -22366,14 +22321,14 @@
22366
22321
  "endLine": 3259,
22367
22322
  "endColumn": 1,
22368
22323
  "snippet": {
22369
- "text": " </div>\n }\n {controlVisibility.ListItemPicker &&\n <div id=\"ListItemPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">List Item picker list data tester:\n\n <ListItemPicker listId={'b1416fca-dc77-4198-a082-62a7657dcfa9'}\n columnInternalName=\"DateAndTime\"\n keyColumnInternalName=\"Id\"\n // filter={\"Title eq 'SPFx'\"}\n orderBy={'Title desc'}\n itemLimit={5}\n context={this.props.context}\n placeholder={'Select list items'}\n onSelectedItem={this.listItemPickerDataSelected} />\n\n </div>\n </div>\n }\n {controlVisibility.ListItemComments &&\n <div id=\"ListItemCommentsDiv\" className={styles.container}>\n <div className=\"ms-font-m\">List Item Comments Tester\n <ListItemComments webUrl='https://contoso.sharepoint.com/sites/ThePerspective'\n listId='6f151a33-a7af-4fae-b8c4-f2f04cbc690f'\n itemId={\"1\"}\n serviceScope={this.props.context.serviceScope}\n numberCommentsPerPage={10}\n label=\"ListItem Comments\"\n />\n </div>\n </div>\n }\n {controlVisibility.ViewPicker &&\n <div id=\"ViewPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">View picker tester:\n <ViewPicker context={this.props.context}\n label=\"Select view(s)\"\n listId={\"9f3908cd-1e88-4ab3-ac42-08efbbd64ec9\"}\n placeholder={'Select list view(s)'}\n orderBy={1}\n multiSelect={true}\n onSelectionChanged={this.onViewPickerChange} />\n </div>\n </div>\n }\n {controlVisibility.FieldPicker &&\n <div id=\"FieldPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">Field picker tester:\n <FieldPicker\n context={this.props.context}\n label={'Select a field'}\n listId={this.state.selectedList}\n onSelectionChanged={(fields) => {\n console.log(fields);\n }}\n />\n </div>\n </div>\n }\n {controlVisibility.IconPicker &&\n <div id=\"IconPickerDiv\" className={styles.container}>\n <div>Icon Picker</div>\n <div>\n <IconPicker\n renderOption=\"panel\"\n onSave={(value) => { console.log(value); }}\n currentIcon={'Warning'}\n buttonLabel=\"Icon Picker\" />\n </div>\n <IconPicker buttonLabel={'Icon'}\n onChange={(iconName: string) => { console.log(iconName); }}\n onCancel={() => { console.log(\"Panel closed\"); }}\n onSave={(iconName: string) => { console.log(iconName); }} />\n </div>\n }\n {controlVisibility.ComboBoxListItemPicker &&\n <div id=\"ComboBoxListItemPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">ComboBoxListItemPicker:\n\n <ComboBoxListItemPicker listId={this.state.comboBoxListItemPickerListId}\n columnInternalName='Title'\n keyColumnInternalName='Id'\n orderBy='Title desc'\n multiSelect={true}\n onSelectedItem={(data) => {\n console.log(`Item(s):`, data);\n }}\n defaultSelectedItems={this.state.comboBoxListItemPickerIds}\n webUrl={this.props.context.pageContext.web.absoluteUrl}\n spHttpClient={this.props.context.spHttpClient} />\n\n <PrimaryButton text=\"Change List\" onClick={() => {\n this.setState({\n comboBoxListItemPickerListId: '71210430-8436-4962-a14d-5525475abd6b'\n });\n }} />\n <PrimaryButton text=\"Change default items\" onClick={() => {\n this.setState({\n comboBoxListItemPickerIds: [{ Id: 2, Title: '222' }]\n });\n }} />\n\n </div>\n </div>\n }\n {controlVisibility.IFrameDialog &&\n <div id=\"IFrameDialogDiv\" className={styles.container}>\n <div className=\"ms-font-m\">iframe dialog tester:\n <PrimaryButton\n text=\"Open iframe Dialog\"\n onClick={() => { this.setState({ iFrameDialogOpened: true }); }} />\n <IFrameDialog\n url={iframeUrl}\n iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n hidden={!this.state.iFrameDialogOpened}\n onDismiss={() => { this.setState({ iFrameDialogOpened: false }); }}\n modalProps={{\n isBlocking: true,\n styles: {\n root: {\n backgroundColor: '#00ff00'\n },\n main: {\n backgroundColor: '#ff0000'\n }\n }\n }}\n dialogContentProps={{\n type: DialogType.close,\n showCloseButton: true\n }}\n width={'570px'}\n height={'315px'} />\n </div>\n </div>\n }\n {controlVisibility.IFramePanel &&\n <div id=\"IFramePanelDiv\" className={styles.container}>\n <div className=\"ms-font-m\">iframe Panel tester:\n <PrimaryButton\n text=\"Open iframe Panel\"\n onClick={() => { this.setState({ iFramePanelOpened: true }); }} />\n <IFramePanel\n url={iframeUrl}\n type={PanelType.medium}\n // height=\"300px\"\n headerText=\"iframe panel title\"\n closeButtonAriaLabel=\"Close\"\n isOpen={this.state.iFramePanelOpened}\n onDismiss={() => { this.setState({ iFramePanelOpened: false }); }}\n iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n />\n </div>\n </div>\n }\n {controlVisibility.ImagePicker &&\n <div id=\"ImagePickerDiv\" className={styles.container}>\n <ImagePicker\n context={this.props.context}\n onFileSelected={(file) => { console.log(file); this.setState({ selectedUrlImagePicker: file.fileAbsoluteUrl }); }}\n onDeleteFile={() => { console.log('file deleted'); }}\n selectedFileUrl={this.state.selectedUrlImagePicker}\n />\n </div>\n }\n {controlVisibility.FolderPicker &&\n <div id=\"FolderPickerDiv\" className={styles.container}>\n <FolderPicker context={this.props.context}\n rootFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n onSelect={this._onFolderSelect}\n label='Folder Picker'\n required={true}\n canCreateFolders={true}\n />\n </div>\n }\n <div id=\"FilterBarDiv\" className={styles.container} hidden={!controlVisibility.FilterBar}>\n <FilterBar items={this.state.filters} inlineItemCount={3} onClearFilters={this.onClearFilters} onRemoveFilter={this.onRemoveFilter} />\n <button onClick={this.addFilter}>Add new filter</button>\n </div>\n {controlVisibility.Carousel &&\n\n <div id=\"CarouselDiv\" className={styles.container}>\n <div>\n <h3>Carousel with fixed elements:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.top}\n buttonsDisplay={CarouselButtonsDisplay.block}\n\n contentContainerStyles={styles.carouselContent}\n containerButtonsStyles={styles.carouselButtonsContainer}\n\n isInfinite={true}\n\n element={this.carouselElements}\n onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n />\n </div>\n <div>\n <h3>Carousel with CarouselImage elements:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.center}\n buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n contentContainerStyles={styles.carouselImageContent}\n //containerButtonsStyles={styles.carouselButtonsContainer}\n\n isInfinite={true}\n indicatorShape={CarouselIndicatorShape.circle}\n indicatorsDisplay={CarouselIndicatorsDisplay.block}\n pauseOnHover={true}\n\n element={[\n {\n imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',\n title: 'Colosseum',\n description: 'This is Colosseum',\n url: 'https://en.wikipedia.org/wiki/Colosseum',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n },\n {\n imageSrc: 'https://www.telegraph.co.uk/content/dam/science/2018/06/20/stonehenge-2326750_1920_trans%2B%2BZgEkZX3M936N5BQK4Va8RWtT0gK_6EfZT336f62EI5U.jpg',\n title: 'Stonehenge',\n description: 'This is Stonehendle',\n url: 'https://en.wikipedia.org/wiki/Stonehenge',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n },\n {\n imageSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/All_Gizah_Pyramids.jpg/2560px-All_Gizah_Pyramids.jpg',\n title: 'Pyramids of Giza',\n description: 'This are Pyramids of Giza (Egypt)',\n url: 'https://en.wikipedia.org/wiki/Egyptian_pyramids',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n }\n ]}\n onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}\n onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n rootStyles={mergeStyles({\n backgroundColor: '#C3C3C3'\n })}\n />\n </div>\n <div>\n <h3>Carousel with triggerPageElement:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.bottom}\n buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n contentContainerStyles={styles.carouselContent}\n\n canMoveNext={this.state.canMoveNext}\n canMovePrev={this.state.canMovePrev}\n triggerPageEvent={this.triggerNextElement}\n element={this.state.currentCarouselElement}\n />\n </div>\n <div>\n <h3>Carousel with minimal configuration:</h3>\n <Carousel\n element={this.carouselElements}\n contentHeight={200}\n />\n </div>\n </div>\n }\n {controlVisibility.SiteBreadcrumb &&\n <div id=\"SiteBreadcrumbDiv\" className={styles.container}>\n <div className={styles.siteBreadcrumb}>\n <SiteBreadcrumb context={this.props.context} />\n </div>\n </div>\n }\n {controlVisibility.FilePicker &&\n <div id=\"FilePickerDiv\" className={styles.container}>\n <div>\n <h3>File Picker</h3>\n <TextField\n label=\"Default SiteFileTab Folder\"\n onChange={debounce((ev, newVal) => { this.setState({ filePickerDefaultFolderAbsolutePath: newVal }); }, 500)}\n styles={{ root: { marginBottom: 10 } }}\n />\n <FilePicker\n bingAPIKey=\"<BING API KEY>\"\n //webAbsoluteUrl=\"https://023xn.sharepoint.com/sites/test1\"\n //defaultFolderAbsolutePath={\"https://aterentiev.sharepoint.com/sites/SPFxinTeamsDemo/Shared%20Documents/General\"}\n //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n buttonLabel=\"Add File\"\n buttonIconProps={{ iconName: 'Add', styles: { root: { fontSize: 42 } } }}\n onSave={this._onFilePickerSave}\n onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n context={this.props.context}\n hideRecentTab={false}\n includePageLibraries={true}\n checkIfFileExists={false}\n />\n {\n this.state.filePickerResult &&\n <div>\n <div>\n FileName: {this.state.filePickerResult[0].fileName}\n </div>\n <div>\n File size: {GeneralHelper.formatBytes(this.state.filePickerResult[0].fileSize, 2)}\n </div>\n </div>\n }\n </div>\n\n <div>\n <h3>File Picker with target folder browser</h3>\n <FilePicker\n bingAPIKey=\"<BING API KEY>\"\n //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n buttonLabel=\"Upload image\"\n buttonIcon=\"FileImage\"\n onSave={this._onFilePickerSave}\n onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n context={this.props.context}\n hideRecentTab={false}\n renderCustomUploadTabContent={() => (\n <FolderExplorer context={this.props.context}\n rootFolder={this.rootFolder}\n defaultFolder={this.rootFolder}\n onSelect={this._onFolderSelect}\n canCreateFolders={true}\n />)}\n />\n </div>\n <p><a href=\"javascript:;\" onClick={this.deleteItem}>Deletes second item</a></p>\n </div>\n }\n {controlVisibility.Progress &&\n <div id=\"ProgressDiv\" className={styles.container}>\n <Progress title={'Progress Test'}\n showOverallProgress={true}\n showIndeterminateOverallProgress={false}\n hideNotStartedActions={false}\n actions={this.state.progressActions}\n currentActionIndex={this.state.currentProgressActionIndex}\n longRunningText={'This operation takes longer than expected'}\n longRunningTextDisplayDelay={7000}\n height={'350px'}\n inProgressIconName={'ChromeBackMirrored'} />\n <PrimaryButton text={'Start Progress'} onClick={this._startProgress} />\n </div>\n }\n {controlVisibility.ProgressStepsIndicator &&\n <div id=\"ProgressStepsIndicatorDiv\" className={styles.container}>\n <ProgressStepsIndicator steps={this.progressSteps} currentStep={0} themeVariant={this.props.themeVariant} />\n </div>\n }\n {controlVisibility.Toast &&\n <div id=\"ToastDiv\" className={styles.container}>\n <h3>Toast</h3>\n <Toast\n title=\"Decision saved\"\n body=\"This native Fluent UI toast will dismiss after five seconds.\"\n subtitle=\"Controls Test\"\n intent=\"success\"\n dismissible\n autoDismiss\n duration={5}\n durationUnit=\"seconds\"\n />\n </div>\n }\n {controlVisibility.GridLayout &&\n <div id=\"GridLayoutDiv\" className={styles.container}>\n <div className=\"ms-font-l\">Grid Layout</div>\n <GridLayout\n ariaLabel={\"List of content, use right and left arrow keys to navigate, arrow down to access details.\"}\n items={sampleGridData}\n onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}\n itemMinWidth={250}\n itemMaxWidth={600}\n itemPadding={60}\n //compactThreshold={220}\n //rowsPerPage={1}\n />\n </div>\n }\n {controlVisibility.HoverReactionsBar &&\n <div ref={this.divRefAddReaction} id=\"HoverReactionsBarDiv\" className={styles.container}>\n <PrimaryButton text=\"Open HoverReactionsBar\" onClick={() => { this.setState({ isOpenHoverReactionBar: true }); }} />\n <HoverReactionsBar\n isOpen={this.state.isOpenHoverReactionBar}\n onSelect={(emoji, emojiInfo) => { console.log(emoji); }}\n onDismiss={(): void => {\n this.setState({ isOpenHoverReactionBar: false });\n }}\n target={this.divRefAddReaction.current as HTMLDivElement} />\n </div>\n }\n {controlVisibility.FolderExplorer &&\n <div id=\"FolderExplorerDiv\" className={styles.container}>\n <FolderExplorer\n context={this.props.context}\n rootFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n defaultFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n onSelect={this._onFolderSelect}\n canCreateFolders={true}\n orderby='Name' //'ListItemAllFields/Created'\n orderAscending={true}\n showFiles={true}\n onFileClick={this._onFileClick}\n />\n </div>\n }\n {controlVisibility.TreeView &&\n <div id=\"TreeViewDiv\" className={styles.container}>\n <h3>Tree View</h3>\n <TreeView items={this.treeitems}\n defaultExpanded={false}\n selectionMode={TreeViewSelectionMode.Multiple}\n showCheckboxes={true}\n treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}\n defaultSelectedKeys={this.state.treeViewSelectedKeys}\n onExpandCollapse={this.onExpandCollapseTree}\n onSelect={this.onItemSelected}\n defaultExpandedChildren={true}\n theme={this.props.themeVariant}\n //expandToSelected={true}\n // onRenderItem={this.renderCustomTreeItem}\n />\n <PrimaryButton onClick={() => { this.setState({ treeViewSelectedKeys: [] }); }}>Clear selection</PrimaryButton>\n </div>\n }\n {controlVisibility.Pagination &&\n <div id=\"PaginationDiv\" className={styles.container}>\n <Pagination\n currentPage={3}\n onChange={(page) => (this._getPage(page))}\n totalPages={this.props.paginationTotalPages || 13}\n //limiter={3}\n // hideFirstPageJump\n //hideLastPageJump\n //limiterIcon={\"NumberedListText\"}\n />\n </div>\n }\n {controlVisibility.FieldCollectionData &&\n <div id=\"FieldCollectionDataDiv\" className={styles.container}>\n <FieldCollectionData\n key={\"FieldCollectionData\"}\n label={\"Fields Collection\"}\n itemsPerPage={3}\n manageBtnLabel={\"Manage\"}\n onChanged={(value) => { console.log(value); }}\n panelHeader={\"Manage values\"}\n enableSorting={true}\n panelProps={{ type: PanelType.custom, customWidth: \"98vw\" }}\n fields={[\n { id: \"Field1\", title: \"String field\", type: CustomCollectionFieldType.string, required: true },\n { id: \"Field2\", title: \"Number field\", type: CustomCollectionFieldType.number },\n { id: \"Field3\", title: \"URL field\", type: CustomCollectionFieldType.url },\n { id: \"Field4\", title: \"Boolean field\", type: CustomCollectionFieldType.boolean },\n {\n id: \"Field5\", title: \"People picker\", type: CustomCollectionFieldType.peoplepicker, required: true,\n minimumUsers: 2, minimumUsersMessage: \"2 Users is the minimum\", maximumUsers: 3,\n },\n {\n id: \"Field6\", title: \"Combo Single\", type: CustomCollectionFieldType.combobox, required: true,\n multiSelect: false, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n },\n {\n id: \"Field7\", title: \"Combo Multi\", type: CustomCollectionFieldType.combobox,\n allowFreeform: true, multiSelect: true, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n },\n { id: \"Field8\", title: \"Date field\", type: CustomCollectionFieldType.date, placeholder: \"Select a date\" }\n ]}\n value={this.getRandomCollectionFieldData()}\n\n // value = {null}\n context={this.props.context as any} //error when this is omitted and people picker is used\n usePanel={true}\n noDataMessage=\"No data is selected\" //overrides the default message\n />\n </div>\n }\n {controlVisibility.ContentTypePicker &&\n <ContentTypePicker\n context={this.props.context}\n // group=\"Content Feedback\"\n // includeHidden={false}\n // includeReadOnly={false}\n // label=\"Select your content type\"\n // multiSelect={false}\n // orderBy={ContentTypesOrderBy.Name}\n // listId=\"00000000-0000-0000-0000-000000000000\"\n // onSelectionChanged={this.onContentTypePickerChanged}\n // showBlankOption={true}\n />\n }\n {controlVisibility.Dashboard &&\n <div id=\"DashboardDiv\" className={styles.container}>\n <Dashboard\n widgets={[{\n title: \"Card 1\",\n desc: \"Last updated Monday, April 4 at 11:15 AM (PT)\",\n widgetActionGroup: calloutItemsExample,\n size: WidgetSize.Quadruple,\n body: [\n {\n id: \"t1\",\n title: \"Tab 1\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #1\n </NorthstarText>\n </Flex>\n ),\n },\n {\n id: \"t2\",\n title: \"Tab 2\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #2\n </NorthstarText>\n </Flex>\n ),\n },\n {\n id: \"t3\",\n title: \"Tab 3\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #3\n </NorthstarText>\n </Flex>\n ),\n },\n ],\n link: linkExample,\n },\n {\n title: \"Card 2\",\n size: WidgetSize.Single,\n link: customizedLinkExample,\n rowSpan: 2\n },\n {\n title: \"Card 3\",\n size: WidgetSize.Double,\n link: linkExample,\n },\n {\n title: \"Card 4\",\n size: WidgetSize.Single,\n link: customizedLinkExample,\n },\n {\n title: \"Card 5\",\n size: WidgetSize.Single,\n link: linkExample,\n },\n {\n title: \"Card 6\",\n size: WidgetSize.Single,\n link: linkExample,\n }]} />\n </div>\n }\n {controlVisibility.Toolbar &&\n <div id=\"ToolbarDiv\" className={styles.container}>\n <div>\n <h3>Uncontrolled toolbar</h3>\n <Toolbar actionGroups={{\n 'group1': {\n 'action1': {\n title: 'Edit',\n iconName: 'Edit',\n onClick: () => { console.log('Edit action click'); }\n },\n 'action2': {\n title: 'New',\n iconName: 'Add',\n onClick: () => { console.log('New action click'); }\n }\n }\n }}\n filters={toolbarFilters}\n onSelectedFiltersChange={this.onToolbarSelectedFiltersChange}\n />\n </div>\n <div>\n <h3>Controlled toolbar</h3>\n <Toolbar actionGroups={{\n 'group1': {\n 'action1': {\n title: 'Edit',\n iconName: 'Edit',\n onClick: () => { console.log('Edit action click'); }\n },\n 'action2': {\n title: 'New',\n iconName: 'Add',\n onClick: () => { console.log('New action click'); }\n }\n }\n }}\n filters={toolbarFilters}\n selectedFilterIds={this.state.selectedFilters}\n onSelectedFiltersChange={this.onToolbarSelectedFiltersChange} />\n </div>\n <div>Selected filter IDs: {this.state.selectedFilters.join(\", \")}</div>\n <PrimaryButton text='Toggle filter1' onClick={() => this.toggleToolbarFilter(\"filter1\")} />\n <PrimaryButton text='Toggle filter2' onClick={() => this.toggleToolbarFilter(\"filter2\")} />\n </div>\n }\n {controlVisibility.AnimatedDialog &&\n <div id=\"AnimatedDialogDiv\" className={styles.container}>\n <h3>Animated Dialogs</h3>\n\n {/* Multiple elements added only for demo - can be controlled with fewer elements */}\n\n <PrimaryButton text='Show animated dialog' onClick={() => { this.setState({ showAnimatedDialog: true }); }} />\n {/* Normal animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showAnimatedDialog}\n onDismiss={() => { this.setState({ showAnimatedDialog: false }); }}\n dialogContentProps={animatedDialogContentProps}\n modalProps={animatedModalProps}\n >\n <DialogFooter>\n <PrimaryButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"Yes\" />\n <DefaultButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"No\" />\n </DialogFooter>\n </AnimatedDialog>\n <br />\n <br />\n\n <PrimaryButton text='Show animated dialog with icon' onClick={() => { this.setState({ showCustomisedAnimatedDialog: true }); }} />\n {/* Animated dialog with icon */}\n <AnimatedDialog\n hidden={!this.state.showCustomisedAnimatedDialog}\n onDismiss={() => { this.setState({ showCustomisedAnimatedDialog: false }); }}\n dialogContentProps={customizedAnimatedDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n dialogAnimationInType='fadeInDown'\n dialogAnimationOutType='fadeOutDown'\n iconName='UnknownSolid'\n iconAnimationType='zoomInDown'\n showAnimatedDialogFooter={true}\n okButtonText=\"Yes\"\n cancelButtonText=\"No\"\n onOkClick={() => timeout(1500)}\n onSuccess={() => {\n this.setState({ showCustomisedAnimatedDialog: false });\n this.setState({ showSuccessDialog: true });\n }}\n onError={() => {\n this.setState({ showCustomisedAnimatedDialog: false });\n this.setState({ showErrorDialog: true });\n }}>\n <div className={styles.dialogContent}>\n <span>Do you like the animated dialog?</span>\n </div>\n </AnimatedDialog>\n\n {/* Success animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showSuccessDialog}\n onDismiss={() => { this.setState({ showSuccessDialog: false }); }}\n dialogContentProps={successDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n iconName='CompletedSolid'\n >\n <div className={styles.dialogContent}><span>Thank you.</span></div>\n <div className={styles.dialogFooter}>\n <PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text=\"OK\" />\n </div>\n </AnimatedDialog>\n\n {/* Error animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showErrorDialog}\n onDismiss={() => { this.setState({ showErrorDialog: false }); }}\n dialogContentProps={errorDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n iconName='StatusErrorFull'\n >\n <div className={styles.dialogContent}><span>Ther was an error.</span></div>\n <div className={styles.dialogFooter}>\n <PrimaryButton onClick={() => { this.setState({ showErrorDialog: false }); }} text=\"OK\" />\n </div>\n </AnimatedDialog>\n </div>\n }\n {controlVisibility.LivePersona &&\n <div id=\"LivePersonaDiv\" className={styles.container}>\n <LivePersona upn=\"meganb@contoso.onmicrosoft.com\"\n template={\n <>\n <Persona text=\"Megan Bowen\" secondaryText=\"meganb@contoso.onmicrosoft.com\" coinSize={48} />\n </>\n }\n serviceScope={this.props.context.serviceScope}\n />\n </div>\n }\n {controlVisibility.LocationPicker &&\n <div id=\"LocationPickerDiv\" className={styles.container}>\n <LocationPicker context={this.props.context} label=\"Location\" onChange={(locValue: ILocationPickerItem) => { console.log(locValue.DisplayName + \", \" + locValue.Address.Street); }} />\n </div>\n }\n {controlVisibility.ModernTaxonomyPicker &&\n <div id=\"ModernTaxonomyPickerDiv\" className={styles.container}>\n <ModernTaxonomyPicker\n allowMultipleSelections={true}\n termSetId={this.termSetId}\n panelTitle=\"Panel title\"\n label={\"Modern Taxonomy Picker\"}\n context={this.props.context}\n required={false}\n disabled={false}\n customPanelWidth={400}\n />\n </div>\n }\n {controlVisibility.MonacoEditor &&\n <div id=\"MonacoEditorDiv\" className={styles.container}>\n <MonacoEditor value={\"\"}\n showMiniMap={true}\n onValueChange={(value, validationErrors) => { console.log(value); console.log(validationErrors); }}\n language={\"javascript\"} />\n </div>\n }\n {controlVisibility.AdaptiveCardHost &&\n <div id=\"AdaptiveCardHostDiv\" className={styles.container}>\n <h3>Adaptive Card Host</h3>\n <AdaptiveCardHost\n card={{\n \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n \"type\": \"AdaptiveCard\",\n \"version\": \"1.0\",\n \"body\": [\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \" ${ParticipantInfoForm.title}\",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Name\",\n \"style\": \"text\",\n \"id\": \"SimpleVal\",\n \"isRequired\": true,\n \"errorMessage\": \"Name is required\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Homepage\",\n \"style\": \"url\",\n \"id\": \"UrlVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Email\",\n \"style\": \"email\",\n \"id\": \"EmailVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Phone\",\n \"style\": \"tel\",\n \"id\": \"TelVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Comments\",\n \"style\": \"text\",\n \"isMultiline\": true,\n \"id\": \"MultiLineVal\"\n },\n {\n \"type\": \"Input.Number\",\n \"label\": \"Quantity\",\n \"min\": -5,\n \"max\": 5,\n \"value\": 1,\n \"id\": \"NumVal\",\n \"errorMessage\": \"The quantity must be between -5 and 5\"\n },\n {\n \"type\": \"Input.Date\",\n \"label\": \"Due Date\",\n \"id\": \"DateVal\",\n \"value\": \"2017-09-20\"\n },\n {\n \"type\": \"Input.Time\",\n \"label\": \"Start time\",\n \"id\": \"TimeVal\",\n \"value\": \"16:59\"\n },\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \"${Survey.title} \",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"CompactSelectVal\",\n \"label\": \"${Survey.questions[0].question}\",\n \"style\": \"compact\",\n \"value\": \"1\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[0].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"SingleSelectVal\",\n \"label\": \"${Survey.questions[1].question}\",\n \"style\": \"expanded\",\n \"value\": \"1\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[1].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"MultiSelectVal\",\n \"label\": \"${Survey.questions[2].question}\",\n \"isMultiSelect\": true,\n \"value\": \"1,3\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[2].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \"Input.Toggle\",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.Toggle\",\n \"label\": \"Please accept the terms and conditions:\",\n \"title\": \"${Survey.questions[3].question}\",\n \"valueOn\": \"true\",\n \"valueOff\": \"false\",\n \"id\": \"AcceptsTerms\",\n \"isRequired\": true,\n \"errorMessage\": \"Accepting the terms and conditions is required\"\n },\n {\n \"type\": \"Input.Toggle\",\n \"label\": \"How do you feel about red cars?\",\n \"title\": \"${Survey.questions[4].question}\",\n \"valueOn\": \"RedCars\",\n \"valueOff\": \"NotRedCars\",\n \"id\": \"ColorPreference\"\n }\n ],\n \"actions\": [\n {\n \"type\": \"Action.Submit\",\n \"title\": \"Submit\",\n \"data\": {\n \"id\": \"1234567890\"\n }\n },\n {\n \"type\": \"Action.ShowCard\",\n \"title\": \"Show Card\",\n \"card\": {\n \"type\": \"AdaptiveCard\",\n \"body\": [\n {\n \"type\": \"Input.Text\",\n \"label\": \"enter comment\",\n \"style\": \"text\",\n \"id\": \"CommentVal\"\n }\n ],\n \"actions\": [\n {\n \"type\": \"Action.Submit\",\n \"title\": \"OK\"\n }\n ]\n }\n }\n ]\n }}\n data={{\n \"$root\": {\n \"ParticipantInfoForm\": {\n \"title\": \"Input.Text elements\"\n },\n \"Survey\": {\n \"title\": \"Input ChoiceSet\",\n \"questions\": [\n {\n \"question\": \"What color do you want? (compact)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"What color do you want? (expanded)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"What color do you want? (multiselect)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"I accept the terms and conditions (True/False)\"\n },\n {\n \"question\": \"Red cars are better than other cars\"\n }\n ]\n }\n }\n }}\n theme={this.props.themeVariant}\n themeType={AdaptiveCardHostThemeType.SharePoint}\n onInvokeAction={(action) => alert(JSON.stringify(action))}\n onError={(error) => console.log(error.message)}\n onSetCustomElements={(registry: CardObjectRegistry<CardElement>) => { }}\n onSetCustomActions={(registry: CardObjectRegistry<Action>) => { }}\n onUpdateHostCapabilities={(hostCapabilities: HostCapabilities) => {\n hostCapabilities.setCustomProperty(\"CustomPropertyName\", Date.now);\n }}\n context={this.props.context}\n />\n </div>\n }\n {controlVisibility.VariantThemeProvider &&\n <div id=\"VariantThemeProviderDiv\" className={styles.container}>\n <h3>Variant Theme Provider</h3>\n <VariantThemeProvider variantType={VariantType.Strong}>\n <Stack tokens={{ childrenGap: 5, padding: 5 }}>\n <Label>This Web Part implements an example on how to use the 'Fluent UI' theme library and how to apply/generate theme variation for the Web Part itself.</Label>\n <PrimaryButton>Primary Button</PrimaryButton>\n <DefaultButton>Default Button</DefaultButton>\n <Link>Link</Link>\n </Stack>\n </VariantThemeProvider>\n </div>\n }\n {controlVisibility.EnhancedThemeProvider &&\n <div id=\"EnhancedThemeProviderDiv\" className={styles.container}>\n <h3>Enhanced Theme Provider</h3>\n <EnhancedThemeProvider applyTo=\"element\" context={this.props.context} theme={this.props.themeVariant}>\n <ControlsTestEnhancedThemeProviderFunctionComponent />\n <ControlsTestEnhancedThemeProvider />\n </EnhancedThemeProvider>\n </div>\n }\n {controlVisibility.AdaptiveCardDesignerHost &&\n <div id=\"AdaptiveCardDesignerHostDiv\" className={styles.container}>\n <h3>Adaptive Card Designer Host</h3>\n <AdaptiveCardDesignerHost\n headerText={`Adaptive Card Designer`}\n buttonText=\"Open Designer\"\n card={{ \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\", \"type\": \"AdaptiveCard\", \"version\": \"1.5\", \"body\": [{ \"type\": \"ColumnSet\", \"columns\": [{ \"width\": \"auto\", \"items\": [{ \"type\": \"Image\", \"size\": \"Small\", \"style\": \"Person\", \"url\": \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }, { \"width\": \"stretch\", \"items\": [{ \"type\": \"TextBlock\", \"text\": \"${$root['@context']['userInfo']['displayName']}\", \"weight\": \"Bolder\" }, { \"type\": \"TextBlock\", \"spacing\": \"None\", \"text\": \"${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }] }] }}\n data={undefined}\n context={this.props.context}\n theme={this.props.themeVariant}\n onSave={(payload: object) => alert(JSON.stringify(payload))}\n snippets={[{\n name: \"Persona\",\n category: \"Snippets\",\n payload: {\n type: \"ColumnSet\",\n columns: [\n {\n width: \"auto\",\n items: [\n {\n type: \"Image\",\n size: \"Small\",\n style: \"Person\",\n url: \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\"\n }\n ]\n },\n {\n width: \"stretch\",\n items: [\n {\n type: \"TextBlock\",\n text: \"${$root['@context']['userInfo']['displayName']}\",\n weight: \"Bolder\"\n },\n {\n type: \"TextBlock\",\n spacing: \"None\",\n text: \"${$root['@context']['userInfo']['email']}\"\n }\n ]\n }\n ]\n }\n }]}\n />\n </div>\n }\n {controlVisibility.ShareDialog &&\n <div id=\"ShareDialogDiv\" className={styles.container}>\n <PrimaryButton text=\"Open Share dialog\" onClick={() => { this.setState({ isOpenShareDialog: true }); }} />\n <ShareDialog\n isOpen={this.state.isOpenShareDialog}\n onClose={() => this.setState({ isOpenShareDialog: false })}\n options={{\n siteUrl: this.props.context.pageContext.web.absoluteUrl,\n listId: 'b1416fca-dc77-4198-a082-62a7657dcfa9',\n itemId: 1,\n name: 'Document Name'\n }} />\n </div>\n }\n {controlVisibility.TaxonomyTree &&\n <div id=\"TaxonomyTreeDiv\" className={styles.container} hidden={!controlVisibility.TaxonomyTree}>\n <h3>Modern Taxonomy Tree</h3>\n {this.state.termStoreInfo && (\n <TaxonomyTree\n languageTag={this.state.termStoreInfo.defaultLanguageTag}\n onLoadMoreData={this.spTaxonomyService.getTerms}\n pageSize={50}\n setTerms={(value) => this.setState({ testTerms: value as any })}\n termStoreInfo={this.state.termStoreInfo}\n termSetInfo={this.state.termSetInfo}\n terms={this.state.testTerms as any[]}\n onRenderActionButton={() => <button>test button</button>}\n hideDeprecatedTerms={false}\n showIcons={true}\n />\n )}\n </div>\n }\n {controlVisibility.ListToolbar &&\n <div id=\"ListToolbarDiv\" className={styles.container}>\n <h3>ListToolbar</h3>\n <ListToolbar\n context={this.props.context}\n theme={this.props.themeVariant as any}\n items={[\n { key: 'new', label: 'New', icon: <span>+</span>, onClick: () => console.log('New clicked'), group: 'actions' },\n { key: 'edit', label: 'Edit', icon: <span>✎</span>, onClick: () => console.log('Edit clicked'), group: 'actions' },\n { key: 'delete', label: 'Delete', icon: <span>🗑</span>, onClick: () => console.log('Delete clicked'), appearance: 'subtle', group: 'danger' },\n ]}\n farItems={[\n { key: 'filter', label: 'Filter', icon: <span>🔍</span>, onClick: () => console.log('Filter clicked'), isFarItem: true },\n { key: 'settings', label: 'Settings', icon: <span>⚙</span>, onClick: () => console.log('Settings clicked'), isFarItem: true },\n ]}\n totalCount={10}\n showGroupDividers={true}\n ariaLabel=\"List Toolbar\"\n />\n </div>\n }\n {controlVisibility.TestControl &&\n <div id=\"TestControlDiv\" className={styles.container}>\n <TestControl context={this.props.context} themeVariant={this.props.themeVariant} />\n </div>\n }\n {controlVisibility.UploadFiles &&\n <div id=\"UploadFilesDiv\" className={styles.container}>\n <h3>Upload Files</h3>\n <EnhancedThemeProvider theme={this.props.themeVariant} context={this.props.context}>\n <Stack>\n <UploadFiles\n context={this.props.context}\n title=\"Upload Files\"\n onUploadFiles={(files) => {\n console.log(\"files\", files);\n }}\n themeVariant={this.props.themeVariant}\n />\n </Stack>\n </EnhancedThemeProvider>\n </div>\n }\n {controlVisibility.UserPicker &&\n <div id=\"UserPickerDiv\" className={styles.container}>\n <UserPicker\n context={this.props.context}\n secondaryTextPropertyName=\"mail\"\n theme={this.props.themeVariant}\n placeholder={\"Search User\"}\n // label={\n // <div>\n // <Person20Filled color={tokens.colorBrandForeground1} />\n // <Body1>Select User</Body1>\n // </div>\n // }\n // onSelectedUsers={onSelectedUsers}\n // onRemoveSelectedUser={onRemovedUser}\n />\n </div>\n }\n {\n controlVisibility.Calendar &&\n <div id=\"CalendarDiv\" className={styles.container}>\n <TestCalendarControl\n context={this.props.context} theme={this.props.themeVariant as any} hasTeamsContext={false} themeString={'default'} title={'Calendar'} appHostName={EAppHostName.SharePoint} />\n </div>\n\n }\n {\n controlVisibility.SPFilePicker &&\n <div id=\"SPFilePickerDiv\" className={styles.container}>\n <TestSPFilePickerControl context={this.props.context} />\n </div>\n\n }\n {controlVisibility.WorldMap &&\n <div id=\"WorldMapDiv\" className={styles.container}>\n <WorldMap description={'World Map Sample'} isDarkTheme={false} hasTeamsContext={false} title={'Microsoft Locations Worldwide'} />\n </div>\n }\n </div>\n </React.Suspense>\n );\n }\n\n private getRandomCollectionFieldData = () => {\n const result: Record<string, unknown>[] = [];\n for (let i = 1; i < 16; i++) {\n\n const sampleDate = new Date();\n sampleDate.setDate(sampleDate.getDate() + i);\n\n result.push({\n \"Field1\": `String${i}`,\n \"Field2\": i,\n \"Field3\": \"https://pnp.github.io/\",\n \"Field4\": true,\n \"Field5\": null as any,\n \"Field6\": { key: \"choice 1\", text: \"choice 1\" },\n \"Field7\": [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }],\n \"Field8\": sampleDate\n });\n }\n return result;\n }\n\n private onExpandCollapseTree(item: ITreeItem, isExpanded: boolean) {\n console.log((isExpanded ? \"item expanded: \" : \"item collapsed: \") + item);\n }\n\n private onItemSelected(items: ITreeItem[]) {\n console.log(\"items selected: \" + items.length);\n }\n\n private renderCustomTreeItem(item: ITreeItem): JSX.Element {\n return (\n <span>\n {\n item.iconProps &&\n <i className={\"ms-Icon ms-Icon--\" + item.iconProps.iconName} style={{ paddingRight: '4px' }} />\n }\n {item.label}\n </span>\n );\n }\n\n private _getPage(page: number) {\n console.log('Page:', page);\n }\n\n // private _onFolderSelect = (folder: IFolder): void => {\n // console.log('selected folder', folder);\n //\n}\n"
22324
+ "text": " </div>\n }\n {controlVisibility.ListItemPicker &&\n <div id=\"ListItemPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">List Item picker list data tester:\n\n <ListItemPicker listId={'b1416fca-dc77-4198-a082-62a7657dcfa9'}\n columnInternalName=\"DateAndTime\"\n keyColumnInternalName=\"Id\"\n // filter={\"Title eq 'SPFx'\"}\n orderBy={'Title desc'}\n itemLimit={5}\n context={this.props.context}\n placeholder={'Select list items'}\n onSelectedItem={this.listItemPickerDataSelected} />\n\n </div>\n </div>\n }\n {controlVisibility.ListItemComments &&\n <div id=\"ListItemCommentsDiv\" className={styles.container}>\n <div className=\"ms-font-m\">List Item Comments Tester\n <ListItemComments webUrl='https://contoso.sharepoint.com/sites/ThePerspective'\n listId='6f151a33-a7af-4fae-b8c4-f2f04cbc690f'\n itemId={\"1\"}\n serviceScope={this.props.context.serviceScope}\n numberCommentsPerPage={10}\n label=\"ListItem Comments\"\n />\n </div>\n </div>\n }\n {controlVisibility.ViewPicker &&\n <div id=\"ViewPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">View picker tester:\n <ViewPicker context={this.props.context}\n label=\"Select view(s)\"\n listId={\"9f3908cd-1e88-4ab3-ac42-08efbbd64ec9\"}\n placeholder={'Select list view(s)'}\n orderBy={1}\n multiSelect={true}\n onSelectionChanged={this.onViewPickerChange} />\n </div>\n </div>\n }\n {controlVisibility.FieldPicker &&\n <div id=\"FieldPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">Field picker tester:\n <FieldPicker\n context={this.props.context}\n label={'Select a field'}\n listId={this.state.selectedList}\n onSelectionChanged={(fields) => {\n console.log(fields);\n }}\n />\n </div>\n </div>\n }\n {controlVisibility.IconPicker &&\n <div id=\"IconPickerDiv\" className={styles.container}>\n <div>Icon Picker</div>\n <div>\n <IconPicker\n renderOption=\"panel\"\n onSave={(value) => { console.log(value); }}\n currentIcon={'Warning'}\n buttonLabel=\"Icon Picker\" />\n </div>\n <IconPicker buttonLabel={'Icon'}\n onChange={(iconName: string) => { console.log(iconName); }}\n onCancel={() => { console.log(\"Panel closed\"); }}\n onSave={(iconName: string) => { console.log(iconName); }} />\n </div>\n }\n {controlVisibility.ComboBoxListItemPicker &&\n <div id=\"ComboBoxListItemPickerDiv\" className={styles.container}>\n <div className=\"ms-font-m\">ComboBoxListItemPicker:\n\n <ComboBoxListItemPicker listId={this.state.comboBoxListItemPickerListId}\n columnInternalName='Title'\n keyColumnInternalName='Id'\n orderBy='Title desc'\n multiSelect={true}\n onSelectedItem={(data) => {\n console.log(`Item(s):`, data);\n }}\n defaultSelectedItems={this.state.comboBoxListItemPickerIds}\n webUrl={this.props.context.pageContext.web.absoluteUrl}\n spHttpClient={this.props.context.spHttpClient} />\n\n <PrimaryButton text=\"Change List\" onClick={() => {\n this.setState({\n comboBoxListItemPickerListId: '71210430-8436-4962-a14d-5525475abd6b'\n });\n }} />\n <PrimaryButton text=\"Change default items\" onClick={() => {\n this.setState({\n comboBoxListItemPickerIds: [{ Id: 2, Title: '222' }]\n });\n }} />\n\n </div>\n </div>\n }\n {controlVisibility.IFrameDialog &&\n <div id=\"IFrameDialogDiv\" className={styles.container}>\n <div className=\"ms-font-m\">iframe dialog tester:\n <PrimaryButton\n text=\"Open iframe Dialog\"\n onClick={() => { this.setState({ iFrameDialogOpened: true }); }} />\n <IFrameDialog\n url={iframeUrl}\n iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n hidden={!this.state.iFrameDialogOpened}\n onDismiss={() => { this.setState({ iFrameDialogOpened: false }); }}\n modalProps={{\n isBlocking: true,\n styles: {\n root: {\n backgroundColor: '#00ff00'\n },\n main: {\n backgroundColor: '#ff0000'\n }\n }\n }}\n dialogContentProps={{\n type: DialogType.close,\n showCloseButton: true\n }}\n width={'570px'}\n height={'315px'} />\n </div>\n </div>\n }\n {controlVisibility.IFramePanel &&\n <div id=\"IFramePanelDiv\" className={styles.container}>\n <div className=\"ms-font-m\">iframe Panel tester:\n <PrimaryButton\n text=\"Open iframe Panel\"\n onClick={() => { this.setState({ iFramePanelOpened: true }); }} />\n <IFramePanel\n url={iframeUrl}\n type={PanelType.medium}\n // height=\"300px\"\n headerText=\"iframe panel title\"\n closeButtonAriaLabel=\"Close\"\n isOpen={this.state.iFramePanelOpened}\n onDismiss={() => { this.setState({ iFramePanelOpened: false }); }}\n iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n />\n </div>\n </div>\n }\n {controlVisibility.ImagePicker &&\n <div id=\"ImagePickerDiv\" className={styles.container}>\n <ImagePicker\n context={this.props.context}\n onFileSelected={(file) => { console.log(file); this.setState({ selectedUrlImagePicker: file.fileAbsoluteUrl }); }}\n onDeleteFile={() => { console.log('file deleted'); }}\n selectedFileUrl={this.state.selectedUrlImagePicker}\n />\n </div>\n }\n {controlVisibility.FolderPicker &&\n <div id=\"FolderPickerDiv\" className={styles.container}>\n <FolderPicker context={this.props.context}\n rootFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n onSelect={this._onFolderSelect}\n label='Folder Picker'\n required={true}\n canCreateFolders={true}\n />\n </div>\n }\n <div id=\"FilterBarDiv\" className={styles.container} hidden={!controlVisibility.FilterBar}>\n <FilterBar items={this.state.filters} inlineItemCount={3} onClearFilters={this.onClearFilters} onRemoveFilter={this.onRemoveFilter} />\n <button onClick={this.addFilter}>Add new filter</button>\n </div>\n {controlVisibility.Carousel &&\n\n <div id=\"CarouselDiv\" className={styles.container}>\n <div>\n <h3>Carousel with fixed elements:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.top}\n buttonsDisplay={CarouselButtonsDisplay.block}\n\n contentContainerStyles={styles.carouselContent}\n containerButtonsStyles={styles.carouselButtonsContainer}\n\n isInfinite={true}\n\n element={this.carouselElements}\n onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n />\n </div>\n <div>\n <h3>Carousel with CarouselImage elements:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.center}\n buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n contentContainerStyles={styles.carouselImageContent}\n //containerButtonsStyles={styles.carouselButtonsContainer}\n\n isInfinite={true}\n indicatorShape={CarouselIndicatorShape.circle}\n indicatorsDisplay={CarouselIndicatorsDisplay.block}\n pauseOnHover={true}\n\n element={[\n {\n imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',\n title: 'Colosseum',\n description: 'This is Colosseum',\n url: 'https://en.wikipedia.org/wiki/Colosseum',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n },\n {\n imageSrc: 'https://www.telegraph.co.uk/content/dam/science/2018/06/20/stonehenge-2326750_1920_trans%2B%2BZgEkZX3M936N5BQK4Va8RWtT0gK_6EfZT336f62EI5U.jpg',\n title: 'Stonehenge',\n description: 'This is Stonehendle',\n url: 'https://en.wikipedia.org/wiki/Stonehenge',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n },\n {\n imageSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/All_Gizah_Pyramids.jpg/2560px-All_Gizah_Pyramids.jpg',\n title: 'Pyramids of Giza',\n description: 'This are Pyramids of Giza (Egypt)',\n url: 'https://en.wikipedia.org/wiki/Egyptian_pyramids',\n showDetailsOnHover: true,\n imageFit: ImageFit.cover\n }\n ]}\n onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}\n onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n rootStyles={mergeStyles({\n backgroundColor: '#C3C3C3'\n })}\n />\n </div>\n <div>\n <h3>Carousel with triggerPageElement:</h3>\n <Carousel\n buttonsLocation={CarouselButtonsLocation.bottom}\n buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n contentContainerStyles={styles.carouselContent}\n\n canMoveNext={this.state.canMoveNext}\n canMovePrev={this.state.canMovePrev}\n triggerPageEvent={this.triggerNextElement}\n element={this.state.currentCarouselElement}\n />\n </div>\n <div>\n <h3>Carousel with minimal configuration:</h3>\n <Carousel\n element={this.carouselElements}\n contentHeight={200}\n />\n </div>\n </div>\n }\n {controlVisibility.SiteBreadcrumb &&\n <div id=\"SiteBreadcrumbDiv\" className={styles.container}>\n <div className={styles.siteBreadcrumb}>\n <SiteBreadcrumb context={this.props.context} />\n </div>\n </div>\n }\n {controlVisibility.FilePicker &&\n <div id=\"FilePickerDiv\" className={styles.container}>\n <div>\n <h3>File Picker</h3>\n <TextField\n label=\"Default SiteFileTab Folder\"\n onChange={debounce((ev, newVal) => { this.setState({ filePickerDefaultFolderAbsolutePath: newVal }); }, 500)}\n styles={{ root: { marginBottom: 10 } }}\n />\n <FilePicker\n bingAPIKey=\"<BING API KEY>\"\n //webAbsoluteUrl=\"https://023xn.sharepoint.com/sites/test1\"\n //defaultFolderAbsolutePath={\"https://aterentiev.sharepoint.com/sites/SPFxinTeamsDemo/Shared%20Documents/General\"}\n //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n buttonLabel=\"Add File\"\n buttonIconProps={{ iconName: 'Add', styles: { root: { fontSize: 42 } } }}\n onSave={this._onFilePickerSave}\n onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n context={this.props.context}\n hideRecentTab={false}\n includePageLibraries={true}\n checkIfFileExists={false}\n />\n {\n this.state.filePickerResult &&\n <div>\n <div>\n FileName: {this.state.filePickerResult[0].fileName}\n </div>\n <div>\n File size: {GeneralHelper.formatBytes(this.state.filePickerResult[0].fileSize, 2)}\n </div>\n </div>\n }\n </div>\n\n <div>\n <h3>File Picker with target folder browser</h3>\n <FilePicker\n bingAPIKey=\"<BING API KEY>\"\n //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n buttonLabel=\"Upload image\"\n buttonIcon=\"FileImage\"\n onSave={this._onFilePickerSave}\n onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n context={this.props.context}\n hideRecentTab={false}\n renderCustomUploadTabContent={() => (\n <FolderExplorer context={this.props.context}\n rootFolder={this.rootFolder}\n defaultFolder={this.rootFolder}\n onSelect={this._onFolderSelect}\n canCreateFolders={true}\n />)}\n />\n </div>\n <p><a href=\"javascript:;\" onClick={this.deleteItem}>Deletes second item</a></p>\n </div>\n }\n {controlVisibility.Progress &&\n <div id=\"ProgressDiv\" className={styles.container}>\n <Progress title={'Progress Test'}\n showOverallProgress={true}\n showIndeterminateOverallProgress={false}\n hideNotStartedActions={false}\n actions={this.state.progressActions}\n currentActionIndex={this.state.currentProgressActionIndex}\n longRunningText={'This operation takes longer than expected'}\n longRunningTextDisplayDelay={7000}\n height={'350px'}\n inProgressIconName={'ChromeBackMirrored'} />\n <PrimaryButton text={'Start Progress'} onClick={this._startProgress} />\n </div>\n }\n {controlVisibility.ProgressStepsIndicator &&\n <div id=\"ProgressStepsIndicatorDiv\" className={styles.container}>\n <ProgressStepsIndicator steps={this.progressSteps} currentStep={0} themeVariant={this.props.themeVariant} />\n </div>\n }\n {controlVisibility.Toast &&\n <div id=\"ToastDiv\" className={styles.container}>\n <h3>Toast</h3>\n <Toast\n title=\"Decision saved\"\n body=\"This native Fluent UI toast will dismiss after five seconds.\"\n subtitle=\"Controls Test\"\n intent=\"success\"\n dismissible\n autoDismiss\n duration={5}\n durationUnit=\"seconds\"\n />\n </div>\n }\n {controlVisibility.GridLayout &&\n <div id=\"GridLayoutDiv\" className={styles.container}>\n <div className=\"ms-font-l\">Grid Layout</div>\n <GridLayout\n ariaLabel={\"List of content, use right and left arrow keys to navigate, arrow down to access details.\"}\n items={sampleGridData}\n onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}\n itemMinWidth={250}\n itemMaxWidth={600}\n itemPadding={60}\n //compactThreshold={220}\n //rowsPerPage={1}\n />\n </div>\n }\n {controlVisibility.HoverReactionsBar &&\n <div ref={this.divRefAddReaction} id=\"HoverReactionsBarDiv\" className={styles.container}>\n <PrimaryButton text=\"Open HoverReactionsBar\" onClick={() => { this.setState({ isOpenHoverReactionBar: true }); }} />\n <HoverReactionsBar\n isOpen={this.state.isOpenHoverReactionBar}\n onSelect={(emoji, emojiInfo) => { console.log(emoji); }}\n onDismiss={(): void => {\n this.setState({ isOpenHoverReactionBar: false });\n }}\n target={this.divRefAddReaction.current as HTMLDivElement} />\n </div>\n }\n {controlVisibility.FolderExplorer &&\n <div id=\"FolderExplorerDiv\" className={styles.container}>\n <FolderExplorer\n context={this.props.context}\n rootFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n defaultFolder={{\n Name: 'Documents',\n ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n }}\n onSelect={this._onFolderSelect}\n canCreateFolders={true}\n orderby='Name' //'ListItemAllFields/Created'\n orderAscending={true}\n showFiles={true}\n onFileClick={this._onFileClick}\n />\n </div>\n }\n {controlVisibility.TreeView &&\n <div id=\"TreeViewDiv\" className={styles.container}>\n <h3>Tree View</h3>\n <TreeView items={this.treeitems}\n defaultExpanded={false}\n selectionMode={TreeViewSelectionMode.Multiple}\n showCheckboxes={true}\n treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}\n defaultSelectedKeys={this.state.treeViewSelectedKeys}\n onExpandCollapse={this.onExpandCollapseTree}\n onSelect={this.onItemSelected}\n defaultExpandedChildren={true}\n theme={this.props.themeVariant}\n //expandToSelected={true}\n // onRenderItem={this.renderCustomTreeItem}\n />\n <PrimaryButton onClick={() => { this.setState({ treeViewSelectedKeys: [] }); }}>Clear selection</PrimaryButton>\n </div>\n }\n {controlVisibility.Pagination &&\n <div id=\"PaginationDiv\" className={styles.container}>\n <Pagination\n currentPage={3}\n onChange={(page) => (this._getPage(page))}\n totalPages={this.props.paginationTotalPages || 13}\n //limiter={3}\n // hideFirstPageJump\n //hideLastPageJump\n //limiterIcon={\"NumberedListText\"}\n />\n </div>\n }\n {controlVisibility.FieldCollectionData &&\n <div id=\"FieldCollectionDataDiv\" className={styles.container}>\n <FieldCollectionData\n key={\"FieldCollectionData\"}\n label={\"Fields Collection\"}\n itemsPerPage={3}\n manageBtnLabel={\"Manage\"}\n onChanged={(value) => { console.log(value); }}\n panelHeader={\"Manage values\"}\n enableSorting={true}\n panelProps={{ type: PanelType.custom, customWidth: \"98vw\" }}\n fields={[\n { id: \"Field1\", title: \"String field\", type: CustomCollectionFieldType.string, required: true },\n { id: \"Field2\", title: \"Number field\", type: CustomCollectionFieldType.number },\n { id: \"Field3\", title: \"URL field\", type: CustomCollectionFieldType.url },\n { id: \"Field4\", title: \"Boolean field\", type: CustomCollectionFieldType.boolean },\n {\n id: \"Field5\", title: \"People picker\", type: CustomCollectionFieldType.peoplepicker, required: true,\n minimumUsers: 2, minimumUsersMessage: \"2 Users is the minimum\", maximumUsers: 3,\n },\n {\n id: \"Field6\", title: \"Combo Single\", type: CustomCollectionFieldType.combobox, required: true,\n multiSelect: false, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n },\n {\n id: \"Field7\", title: \"Combo Multi\", type: CustomCollectionFieldType.combobox,\n allowFreeform: true, multiSelect: true, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n },\n { id: \"Field8\", title: \"Date field\", type: CustomCollectionFieldType.date, placeholder: \"Select a date\" }\n ]}\n value={this.getRandomCollectionFieldData()}\n\n // value = {null}\n context={this.props.context as any} //error when this is omitted and people picker is used\n usePanel={true}\n noDataMessage=\"No data is selected\" //overrides the default message\n />\n </div>\n }\n {controlVisibility.ContentTypePicker &&\n <ContentTypePicker\n context={this.props.context}\n // group=\"Content Feedback\"\n // includeHidden={false}\n // includeReadOnly={false}\n // label=\"Select your content type\"\n // multiSelect={false}\n // orderBy={ContentTypesOrderBy.Name}\n // listId=\"00000000-0000-0000-0000-000000000000\"\n // onSelectionChanged={this.onContentTypePickerChanged}\n // showBlankOption={true}\n />\n }\n {controlVisibility.Dashboard &&\n <div id=\"DashboardDiv\" className={styles.container}>\n <Dashboard\n widgets={[{\n title: \"Card 1\",\n desc: \"Last updated Monday, April 4 at 11:15 AM (PT)\",\n widgetActionGroup: calloutItemsExample,\n size: WidgetSize.Quadruple,\n body: [\n {\n id: \"t1\",\n title: \"Tab 1\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #1\n </NorthstarText>\n </Flex>\n ),\n },\n {\n id: \"t2\",\n title: \"Tab 2\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #2\n </NorthstarText>\n </Flex>\n ),\n },\n {\n id: \"t3\",\n title: \"Tab 3\",\n content: (\n <Flex\n vAlign=\"center\"\n hAlign=\"center\"\n styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n >\n <NorthstarText size=\"large\" weight=\"semibold\">\n Content #3\n </NorthstarText>\n </Flex>\n ),\n },\n ],\n link: linkExample,\n },\n {\n title: \"Card 2\",\n size: WidgetSize.Single,\n link: customizedLinkExample,\n rowSpan: 2\n },\n {\n title: \"Card 3\",\n size: WidgetSize.Double,\n link: linkExample,\n },\n {\n title: \"Card 4\",\n size: WidgetSize.Single,\n link: customizedLinkExample,\n },\n {\n title: \"Card 5\",\n size: WidgetSize.Single,\n link: linkExample,\n },\n {\n title: \"Card 6\",\n size: WidgetSize.Single,\n link: linkExample,\n }]} />\n </div>\n }\n {controlVisibility.Toolbar &&\n <div id=\"ToolbarDiv\" className={styles.container}>\n <div>\n <h3>Uncontrolled toolbar</h3>\n <Toolbar actionGroups={{\n 'group1': {\n 'action1': {\n title: 'Edit',\n iconName: 'Edit',\n onClick: () => { console.log('Edit action click'); }\n },\n 'action2': {\n title: 'New',\n iconName: 'Add',\n onClick: () => { console.log('New action click'); }\n }\n }\n }}\n filters={toolbarFilters}\n onSelectedFiltersChange={this.onToolbarSelectedFiltersChange}\n />\n </div>\n <div>\n <h3>Controlled toolbar</h3>\n <Toolbar actionGroups={{\n 'group1': {\n 'action1': {\n title: 'Edit',\n iconName: 'Edit',\n onClick: () => { console.log('Edit action click'); }\n },\n 'action2': {\n title: 'New',\n iconName: 'Add',\n onClick: () => { console.log('New action click'); }\n }\n }\n }}\n filters={toolbarFilters}\n selectedFilterIds={this.state.selectedFilters}\n onSelectedFiltersChange={this.onToolbarSelectedFiltersChange} />\n </div>\n <div>Selected filter IDs: {this.state.selectedFilters.join(\", \")}</div>\n <PrimaryButton text='Toggle filter1' onClick={() => this.toggleToolbarFilter(\"filter1\")} />\n <PrimaryButton text='Toggle filter2' onClick={() => this.toggleToolbarFilter(\"filter2\")} />\n </div>\n }\n {controlVisibility.AnimatedDialog &&\n <div id=\"AnimatedDialogDiv\" className={styles.container}>\n <h3>Animated Dialogs</h3>\n\n {/* Multiple elements added only for demo - can be controlled with fewer elements */}\n\n <PrimaryButton text='Show animated dialog' onClick={() => { this.setState({ showAnimatedDialog: true }); }} />\n {/* Normal animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showAnimatedDialog}\n onDismiss={() => { this.setState({ showAnimatedDialog: false }); }}\n dialogContentProps={animatedDialogContentProps}\n modalProps={animatedModalProps}\n >\n <DialogFooter>\n <PrimaryButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"Yes\" />\n <DefaultButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"No\" />\n </DialogFooter>\n </AnimatedDialog>\n <br />\n <br />\n\n <PrimaryButton text='Show animated dialog with icon' onClick={() => { this.setState({ showCustomisedAnimatedDialog: true }); }} />\n {/* Animated dialog with icon */}\n <AnimatedDialog\n hidden={!this.state.showCustomisedAnimatedDialog}\n onDismiss={() => { this.setState({ showCustomisedAnimatedDialog: false }); }}\n dialogContentProps={customizedAnimatedDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n dialogAnimationInType='fadeInDown'\n dialogAnimationOutType='fadeOutDown'\n iconName='UnknownSolid'\n iconAnimationType='zoomInDown'\n showAnimatedDialogFooter={true}\n okButtonText=\"Yes\"\n cancelButtonText=\"No\"\n onOkClick={() => timeout(1500)}\n onSuccess={() => {\n this.setState({ showCustomisedAnimatedDialog: false });\n this.setState({ showSuccessDialog: true });\n }}\n onError={() => {\n this.setState({ showCustomisedAnimatedDialog: false });\n this.setState({ showErrorDialog: true });\n }}>\n <div className={styles.dialogContent}>\n <span>Do you like the animated dialog?</span>\n </div>\n </AnimatedDialog>\n\n {/* Success animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showSuccessDialog}\n onDismiss={() => { this.setState({ showSuccessDialog: false }); }}\n dialogContentProps={successDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n iconName='CompletedSolid'\n >\n <div className={styles.dialogContent}><span>Thank you.</span></div>\n <div className={styles.dialogFooter}>\n <PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text=\"OK\" />\n </div>\n </AnimatedDialog>\n\n {/* Error animated dialog */}\n <AnimatedDialog\n hidden={!this.state.showErrorDialog}\n onDismiss={() => { this.setState({ showErrorDialog: false }); }}\n dialogContentProps={errorDialogContentProps}\n modalProps={customizedAnimatedModalProps}\n iconName='StatusErrorFull'\n >\n <div className={styles.dialogContent}><span>Ther was an error.</span></div>\n <div className={styles.dialogFooter}>\n <PrimaryButton onClick={() => { this.setState({ showErrorDialog: false }); }} text=\"OK\" />\n </div>\n </AnimatedDialog>\n </div>\n }\n {controlVisibility.LivePersona &&\n <div id=\"LivePersonaDiv\" className={styles.container}>\n <LivePersona upn=\"meganb@contoso.onmicrosoft.com\"\n template={\n <>\n <Persona text=\"Megan Bowen\" secondaryText=\"meganb@contoso.onmicrosoft.com\" coinSize={48} />\n </>\n }\n serviceScope={this.props.context.serviceScope}\n />\n </div>\n }\n {controlVisibility.LocationPicker &&\n <div id=\"LocationPickerDiv\" className={styles.container}>\n <LocationPicker context={this.props.context} label=\"Location\" onChange={(locValue: ILocationPickerItem) => { console.log(locValue.DisplayName + \", \" + locValue.Address.Street); }} />\n </div>\n }\n {controlVisibility.ModernTaxonomyPicker &&\n <div id=\"ModernTaxonomyPickerDiv\" className={styles.container}>\n <ModernTaxonomyPicker\n allowMultipleSelections={true}\n termSetId={this.termSetId}\n panelTitle=\"Panel title\"\n label={\"Modern Taxonomy Picker\"}\n context={this.props.context}\n required={false}\n disabled={false}\n customPanelWidth={400}\n />\n </div>\n }\n {controlVisibility.MonacoEditor &&\n <div id=\"MonacoEditorDiv\" className={styles.container}>\n <MonacoEditor value={\"\"}\n showMiniMap={true}\n onValueChange={(value, validationErrors) => { console.log(value); console.log(validationErrors); }}\n language={\"javascript\"} />\n </div>\n }\n {controlVisibility.AdaptiveCardHost &&\n <div id=\"AdaptiveCardHostDiv\" className={styles.container}>\n <h3>Adaptive Card Host</h3>\n <AdaptiveCardHost\n card={{\n \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n \"type\": \"AdaptiveCard\",\n \"version\": \"1.0\",\n \"body\": [\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \" ${ParticipantInfoForm.title}\",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Name\",\n \"style\": \"text\",\n \"id\": \"SimpleVal\",\n \"isRequired\": true,\n \"errorMessage\": \"Name is required\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Homepage\",\n \"style\": \"url\",\n \"id\": \"UrlVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Email\",\n \"style\": \"email\",\n \"id\": \"EmailVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Phone\",\n \"style\": \"tel\",\n \"id\": \"TelVal\"\n },\n {\n \"type\": \"Input.Text\",\n \"label\": \"Comments\",\n \"style\": \"text\",\n \"isMultiline\": true,\n \"id\": \"MultiLineVal\"\n },\n {\n \"type\": \"Input.Number\",\n \"label\": \"Quantity\",\n \"min\": -5,\n \"max\": 5,\n \"value\": 1,\n \"id\": \"NumVal\",\n \"errorMessage\": \"The quantity must be between -5 and 5\"\n },\n {\n \"type\": \"Input.Date\",\n \"label\": \"Due Date\",\n \"id\": \"DateVal\",\n \"value\": \"2017-09-20\"\n },\n {\n \"type\": \"Input.Time\",\n \"label\": \"Start time\",\n \"id\": \"TimeVal\",\n \"value\": \"16:59\"\n },\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \"${Survey.title} \",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"CompactSelectVal\",\n \"label\": \"${Survey.questions[0].question}\",\n \"style\": \"compact\",\n \"value\": \"1\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[0].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"SingleSelectVal\",\n \"label\": \"${Survey.questions[1].question}\",\n \"style\": \"expanded\",\n \"value\": \"1\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[1].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"Input.ChoiceSet\",\n \"id\": \"MultiSelectVal\",\n \"label\": \"${Survey.questions[2].question}\",\n \"isMultiSelect\": true,\n \"value\": \"1,3\",\n \"choices\": [\n {\n \"$data\": \"${Survey.questions[2].items}\",\n \"title\": \"${choice}\",\n \"value\": \"${value}\"\n }\n ]\n },\n {\n \"type\": \"TextBlock\",\n \"size\": \"medium\",\n \"weight\": \"bolder\",\n \"text\": \"Input.Toggle\",\n \"horizontalAlignment\": \"center\",\n \"wrap\": true,\n \"style\": \"heading\"\n },\n {\n \"type\": \"Input.Toggle\",\n \"label\": \"Please accept the terms and conditions:\",\n \"title\": \"${Survey.questions[3].question}\",\n \"valueOn\": \"true\",\n \"valueOff\": \"false\",\n \"id\": \"AcceptsTerms\",\n \"isRequired\": true,\n \"errorMessage\": \"Accepting the terms and conditions is required\"\n },\n {\n \"type\": \"Input.Toggle\",\n \"label\": \"How do you feel about red cars?\",\n \"title\": \"${Survey.questions[4].question}\",\n \"valueOn\": \"RedCars\",\n \"valueOff\": \"NotRedCars\",\n \"id\": \"ColorPreference\"\n }\n ],\n \"actions\": [\n {\n \"type\": \"Action.Submit\",\n \"title\": \"Submit\",\n \"data\": {\n \"id\": \"1234567890\"\n }\n },\n {\n \"type\": \"Action.ShowCard\",\n \"title\": \"Show Card\",\n \"card\": {\n \"type\": \"AdaptiveCard\",\n \"body\": [\n {\n \"type\": \"Input.Text\",\n \"label\": \"enter comment\",\n \"style\": \"text\",\n \"id\": \"CommentVal\"\n }\n ],\n \"actions\": [\n {\n \"type\": \"Action.Submit\",\n \"title\": \"OK\"\n }\n ]\n }\n }\n ]\n }}\n data={{\n \"$root\": {\n \"ParticipantInfoForm\": {\n \"title\": \"Input.Text elements\"\n },\n \"Survey\": {\n \"title\": \"Input ChoiceSet\",\n \"questions\": [\n {\n \"question\": \"What color do you want? (compact)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"What color do you want? (expanded)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"What color do you want? (multiselect)\",\n \"items\": [\n {\n \"choice\": \"Red\",\n \"value\": \"1\"\n },\n {\n \"choice\": \"Green\",\n \"value\": \"2\"\n },\n {\n \"choice\": \"Blue\",\n \"value\": \"3\"\n }\n ]\n },\n {\n \"question\": \"I accept the terms and conditions (True/False)\"\n },\n {\n \"question\": \"Red cars are better than other cars\"\n }\n ]\n }\n }\n }}\n theme={this.props.themeVariant}\n themeType={AdaptiveCardHostThemeType.SharePoint}\n onInvokeAction={(action) => alert(JSON.stringify(action))}\n onError={(error) => console.log(error.message)}\n onSetCustomElements={(registry: CardObjectRegistry<CardElement>) => { }}\n onSetCustomActions={(registry: CardObjectRegistry<Action>) => { }}\n onUpdateHostCapabilities={(hostCapabilities: HostCapabilities) => {\n hostCapabilities.setCustomProperty(\"CustomPropertyName\", Date.now);\n }}\n context={this.props.context}\n />\n </div>\n }\n {controlVisibility.VariantThemeProvider &&\n <div id=\"VariantThemeProviderDiv\" className={styles.container}>\n <h3>Variant Theme Provider</h3>\n <VariantThemeProvider variantType={VariantType.Strong}>\n <Stack tokens={{ childrenGap: 5, padding: 5 }}>\n <Label>This Web Part implements an example on how to use the &#39;Fluent UI&#39; theme library and how to apply/generate theme variation for the Web Part itself.</Label>\n <PrimaryButton>Primary Button</PrimaryButton>\n <DefaultButton>Default Button</DefaultButton>\n <Link>Link</Link>\n </Stack>\n </VariantThemeProvider>\n </div>\n }\n {controlVisibility.EnhancedThemeProvider &&\n <div id=\"EnhancedThemeProviderDiv\" className={styles.container}>\n <h3>Enhanced Theme Provider</h3>\n <EnhancedThemeProvider applyTo=\"element\" context={this.props.context} theme={this.props.themeVariant}>\n <ControlsTestEnhancedThemeProviderFunctionComponent />\n <ControlsTestEnhancedThemeProvider />\n </EnhancedThemeProvider>\n </div>\n }\n {controlVisibility.AdaptiveCardDesignerHost &&\n <div id=\"AdaptiveCardDesignerHostDiv\" className={styles.container}>\n <h3>Adaptive Card Designer Host</h3>\n <AdaptiveCardDesignerHost\n headerText={`Adaptive Card Designer`}\n buttonText=\"Open Designer\"\n card={{ \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\", \"type\": \"AdaptiveCard\", \"version\": \"1.5\", \"body\": [{ \"type\": \"ColumnSet\", \"columns\": [{ \"width\": \"auto\", \"items\": [{ \"type\": \"Image\", \"size\": \"Small\", \"style\": \"Person\", \"url\": \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }, { \"width\": \"stretch\", \"items\": [{ \"type\": \"TextBlock\", \"text\": \"${$root['@context']['userInfo']['displayName']}\", \"weight\": \"Bolder\" }, { \"type\": \"TextBlock\", \"spacing\": \"None\", \"text\": \"${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }] }] }}\n data={undefined}\n context={this.props.context}\n theme={this.props.themeVariant}\n onSave={(payload: object) => alert(JSON.stringify(payload))}\n snippets={[{\n name: \"Persona\",\n category: \"Snippets\",\n payload: {\n type: \"ColumnSet\",\n columns: [\n {\n width: \"auto\",\n items: [\n {\n type: \"Image\",\n size: \"Small\",\n style: \"Person\",\n url: \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\"\n }\n ]\n },\n {\n width: \"stretch\",\n items: [\n {\n type: \"TextBlock\",\n text: \"${$root['@context']['userInfo']['displayName']}\",\n weight: \"Bolder\"\n },\n {\n type: \"TextBlock\",\n spacing: \"None\",\n text: \"${$root['@context']['userInfo']['email']}\"\n }\n ]\n }\n ]\n }\n }]}\n />\n </div>\n }\n {controlVisibility.ShareDialog &&\n <div id=\"ShareDialogDiv\" className={styles.container}>\n <PrimaryButton text=\"Open Share dialog\" onClick={() => { this.setState({ isOpenShareDialog: true }); }} />\n <ShareDialog\n isOpen={this.state.isOpenShareDialog}\n onClose={() => this.setState({ isOpenShareDialog: false })}\n options={{\n siteUrl: this.props.context.pageContext.web.absoluteUrl,\n listId: 'b1416fca-dc77-4198-a082-62a7657dcfa9',\n itemId: 1,\n name: 'Document Name'\n }} />\n </div>\n }\n {controlVisibility.TaxonomyTree &&\n <div id=\"TaxonomyTreeDiv\" className={styles.container} hidden={!controlVisibility.TaxonomyTree}>\n <h3>Modern Taxonomy Tree</h3>\n {this.state.termStoreInfo && (\n <TaxonomyTree\n languageTag={this.state.termStoreInfo.defaultLanguageTag}\n onLoadMoreData={this.spTaxonomyService.getTerms}\n pageSize={50}\n setTerms={(value) => this.setState({ testTerms: value as any })}\n termStoreInfo={this.state.termStoreInfo}\n termSetInfo={this.state.termSetInfo}\n terms={this.state.testTerms as any[]}\n onRenderActionButton={() => <button>test button</button>}\n hideDeprecatedTerms={false}\n showIcons={true}\n />\n )}\n </div>\n }\n {controlVisibility.ListToolbar &&\n <div id=\"ListToolbarDiv\" className={styles.container}>\n <h3>ListToolbar</h3>\n <ListToolbar\n context={this.props.context}\n theme={this.props.themeVariant as any}\n items={[\n { key: 'new', label: 'New', icon: <span>+</span>, onClick: () => console.log('New clicked'), group: 'actions' },\n { key: 'edit', label: 'Edit', icon: <span>✎</span>, onClick: () => console.log('Edit clicked'), group: 'actions' },\n { key: 'delete', label: 'Delete', icon: <span>🗑</span>, onClick: () => console.log('Delete clicked'), appearance: 'subtle', group: 'danger' },\n ]}\n farItems={[\n { key: 'filter', label: 'Filter', icon: <span>🔍</span>, onClick: () => console.log('Filter clicked'), isFarItem: true },\n { key: 'settings', label: 'Settings', icon: <span>⚙</span>, onClick: () => console.log('Settings clicked'), isFarItem: true },\n ]}\n totalCount={10}\n showGroupDividers={true}\n ariaLabel=\"List Toolbar\"\n />\n </div>\n }\n {controlVisibility.TestControl &&\n <div id=\"TestControlDiv\" className={styles.container}>\n <TestControl context={this.props.context} themeVariant={this.props.themeVariant} />\n </div>\n }\n {controlVisibility.UploadFiles &&\n <div id=\"UploadFilesDiv\" className={styles.container}>\n <h3>Upload Files</h3>\n <EnhancedThemeProvider theme={this.props.themeVariant} context={this.props.context}>\n <Stack>\n <UploadFiles\n context={this.props.context}\n title=\"Upload Files\"\n onUploadFiles={(files) => {\n console.log(\"files\", files);\n }}\n themeVariant={this.props.themeVariant}\n />\n </Stack>\n </EnhancedThemeProvider>\n </div>\n }\n {controlVisibility.UserPicker &&\n <div id=\"UserPickerDiv\" className={styles.container}>\n <UserPicker\n context={this.props.context}\n secondaryTextPropertyName=\"mail\"\n theme={this.props.themeVariant}\n placeholder={\"Search User\"}\n // label={\n // <div>\n // <Person20Filled color={tokens.colorBrandForeground1} />\n // <Body1>Select User</Body1>\n // </div>\n // }\n // onSelectedUsers={onSelectedUsers}\n // onRemoveSelectedUser={onRemovedUser}\n />\n </div>\n }\n {\n controlVisibility.Calendar &&\n <div id=\"CalendarDiv\" className={styles.container}>\n <TestCalendarControl\n context={this.props.context} theme={this.props.themeVariant as any} hasTeamsContext={false} themeString={'default'} title={'Calendar'} appHostName={EAppHostName.SharePoint} />\n </div>\n\n }\n {\n controlVisibility.SPFilePicker &&\n <div id=\"SPFilePickerDiv\" className={styles.container}>\n <TestSPFilePickerControl context={this.props.context} />\n </div>\n\n }\n {controlVisibility.WorldMap &&\n <div id=\"WorldMapDiv\" className={styles.container}>\n <WorldMap description={'World Map Sample'} isDarkTheme={false} hasTeamsContext={false} title={'Microsoft Locations Worldwide'} />\n </div>\n }\n </div>\n </React.Suspense>\n );\n }\n\n private getRandomCollectionFieldData = () => {\n const result: Record<string, unknown>[] = [];\n for (let i = 1; i < 16; i++) {\n\n const sampleDate = new Date();\n sampleDate.setDate(sampleDate.getDate() + i);\n\n result.push({\n \"Field1\": `String${i}`,\n \"Field2\": i,\n \"Field3\": \"https://pnp.github.io/\",\n \"Field4\": true,\n \"Field5\": null as any,\n \"Field6\": { key: \"choice 1\", text: \"choice 1\" },\n \"Field7\": [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }],\n \"Field8\": sampleDate\n });\n }\n return result;\n }\n\n private onExpandCollapseTree(item: ITreeItem, isExpanded: boolean) {\n console.log((isExpanded ? \"item expanded: \" : \"item collapsed: \") + item);\n }\n\n private onItemSelected(items: ITreeItem[]) {\n console.log(\"items selected: \" + items.length);\n }\n\n private renderCustomTreeItem(item: ITreeItem): JSX.Element {\n return (\n <span>\n {\n item.iconProps &&\n <i className={\"ms-Icon ms-Icon--\" + item.iconProps.iconName} style={{ paddingRight: '4px' }} />\n }\n {item.label}\n </span>\n );\n }\n\n private _getPage(page: number) {\n console.log('Page:', page);\n }\n\n // private _onFolderSelect = (folder: IFolder): void => {\n // console.log('selected folder', folder);\n //\n}\n"
22370
22325
  }
22371
22326
  }
22372
22327
  }
22373
22328
  }
22374
22329
  ],
22375
22330
  "ruleId": "max-lines",
22376
- "ruleIndex": 17,
22331
+ "ruleIndex": 16,
22377
22332
  "suppressions": []
22378
22333
  },
22379
22334
  {
@@ -22457,7 +22412,7 @@
22457
22412
  }
22458
22413
  ],
22459
22414
  "ruleId": "no-script-url",
22460
- "ruleIndex": 18,
22415
+ "ruleIndex": 17,
22461
22416
  "suppressions": []
22462
22417
  },
22463
22418
  {
@@ -22516,58 +22471,6 @@
22516
22471
  "ruleIndex": 0,
22517
22472
  "suppressions": []
22518
22473
  },
22519
- {
22520
- "level": "warning",
22521
- "message": {
22522
- "text": "`'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`."
22523
- },
22524
- "locations": [
22525
- {
22526
- "physicalLocation": {
22527
- "artifactLocation": {
22528
- "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
22529
- "index": 914
22530
- },
22531
- "region": {
22532
- "startLine": 3025,
22533
- "startColumn": 80,
22534
- "snippet": {
22535
- "text": "'Fluent UI' theme library and how to apply/generate theme variation for the Web Part itself.</Label>"
22536
- }
22537
- }
22538
- }
22539
- }
22540
- ],
22541
- "ruleId": "react/no-unescaped-entities",
22542
- "ruleIndex": 19,
22543
- "suppressions": []
22544
- },
22545
- {
22546
- "level": "warning",
22547
- "message": {
22548
- "text": "`'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`."
22549
- },
22550
- "locations": [
22551
- {
22552
- "physicalLocation": {
22553
- "artifactLocation": {
22554
- "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
22555
- "index": 914
22556
- },
22557
- "region": {
22558
- "startLine": 3025,
22559
- "startColumn": 90,
22560
- "snippet": {
22561
- "text": "' theme library and how to apply/generate theme variation for the Web Part itself.</Label>"
22562
- }
22563
- }
22564
- }
22565
- }
22566
- ],
22567
- "ruleId": "react/no-unescaped-entities",
22568
- "ruleIndex": 19,
22569
- "suppressions": []
22570
- },
22571
22474
  {
22572
22475
  "level": "warning",
22573
22476
  "message": {
@@ -23082,7 +22985,7 @@
23082
22985
  }
23083
22986
  ],
23084
22987
  "ruleId": "no-unused-expressions",
23085
- "ruleIndex": 20,
22988
+ "ruleIndex": 18,
23086
22989
  "suppressions": [
23087
22990
  {
23088
22991
  "kind": "inSource",
@@ -23112,7 +23015,7 @@
23112
23015
  }
23113
23016
  ],
23114
23017
  "ruleId": "no-unused-expressions",
23115
- "ruleIndex": 20,
23018
+ "ruleIndex": 18,
23116
23019
  "suppressions": [
23117
23020
  {
23118
23021
  "kind": "inSource",
@@ -23929,141 +23832,6 @@
23929
23832
  "justification": ""
23930
23833
  }
23931
23834
  ]
23932
- },
23933
- {
23934
- "level": "warning",
23935
- "message": {
23936
- "text": "Unexpected any. Specify a different type."
23937
- },
23938
- "locations": [
23939
- {
23940
- "physicalLocation": {
23941
- "artifactLocation": {
23942
- "uri": "src/webparts/controlsTest/components/TestImagePickerControl.tsx",
23943
- "index": 935
23944
- },
23945
- "region": {
23946
- "startLine": 11,
23947
- "startColumn": 16,
23948
- "endLine": 11,
23949
- "endColumn": 19,
23950
- "snippet": {
23951
- "text": "any"
23952
- }
23953
- }
23954
- }
23955
- }
23956
- ],
23957
- "ruleId": "@typescript-eslint/no-explicit-any",
23958
- "ruleIndex": 0
23959
- },
23960
- {
23961
- "level": "warning",
23962
- "message": {
23963
- "text": "Missing return type on function."
23964
- },
23965
- "locations": [
23966
- {
23967
- "physicalLocation": {
23968
- "artifactLocation": {
23969
- "uri": "src/webparts/controlsTest/components/TestImagePickerControl.tsx",
23970
- "index": 935
23971
- },
23972
- "region": {
23973
- "startLine": 23,
23974
- "startColumn": 56,
23975
- "endLine": 23,
23976
- "endColumn": 58,
23977
- "snippet": {
23978
- "text": "=>"
23979
- }
23980
- }
23981
- }
23982
- }
23983
- ],
23984
- "ruleId": "@typescript-eslint/explicit-function-return-type",
23985
- "ruleIndex": 9
23986
- },
23987
- {
23988
- "level": "warning",
23989
- "message": {
23990
- "text": "Missing return type on function."
23991
- },
23992
- "locations": [
23993
- {
23994
- "physicalLocation": {
23995
- "artifactLocation": {
23996
- "uri": "src/webparts/controlsTest/components/TestImagePickerControl.tsx",
23997
- "index": 935
23998
- },
23999
- "region": {
24000
- "startLine": 28,
24001
- "startColumn": 31,
24002
- "endLine": 28,
24003
- "endColumn": 33,
24004
- "snippet": {
24005
- "text": "=>"
24006
- }
24007
- }
24008
- }
24009
- }
24010
- ],
24011
- "ruleId": "@typescript-eslint/explicit-function-return-type",
24012
- "ruleIndex": 9
24013
- },
24014
- {
24015
- "level": "warning",
24016
- "message": {
24017
- "text": "Unexpected any. Specify a different type."
24018
- },
24019
- "locations": [
24020
- {
24021
- "physicalLocation": {
24022
- "artifactLocation": {
24023
- "uri": "src/webparts/controlsTest/components/TestUserPickerControl.tsx",
24024
- "index": 936
24025
- },
24026
- "region": {
24027
- "startLine": 43,
24028
- "startColumn": 17,
24029
- "endLine": 43,
24030
- "endColumn": 20,
24031
- "snippet": {
24032
- "text": "any"
24033
- }
24034
- }
24035
- }
24036
- }
24037
- ],
24038
- "ruleId": "@typescript-eslint/no-explicit-any",
24039
- "ruleIndex": 0
24040
- },
24041
- {
24042
- "level": "warning",
24043
- "message": {
24044
- "text": "Missing return type on function."
24045
- },
24046
- "locations": [
24047
- {
24048
- "physicalLocation": {
24049
- "artifactLocation": {
24050
- "uri": "src/webparts/controlsTest/components/TestUserPickerControl.tsx",
24051
- "index": 936
24052
- },
24053
- "region": {
24054
- "startLine": 57,
24055
- "startColumn": 47,
24056
- "endLine": 57,
24057
- "endColumn": 49,
24058
- "snippet": {
24059
- "text": "=>"
24060
- }
24061
- }
24062
- }
24063
- }
24064
- ],
24065
- "ruleId": "@typescript-eslint/explicit-function-return-type",
24066
- "ruleIndex": 9
24067
23835
  }
24068
23836
  ]
24069
23837
  }