119 lines
6.4 KiB
JSON
119 lines
6.4 KiB
JSON
|
{
|
||
|
|
"id": "3c0443ba-8202-4d11-817e-482586feeb6f",
|
||
|
|
"alias": "ReactHtmWebPart",
|
||
|
|
"componentType": "WebPart",
|
||
|
|
"version": "0.0.1",
|
||
|
|
"manifestVersion": 2,
|
||
|
|
"requiresCustomScript": false,
|
||
|
|
"supportedHosts": [
|
||
|
|
"SharePointWebPart",
|
||
|
|
"SharePointFullPage"
|
||
|
|
],
|
||
|
|
"supportsThemeVariants": true,
|
||
|
|
"supportsFullBleed": true,
|
||
|
|
"preconfiguredEntries": [
|
||
|
|
{
|
||
|
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||
|
|
"group": {
|
||
|
|
"default": "Other"
|
||
|
|
},
|
||
|
|
"title": {
|
||
|
|
"default": "React HTM (Hyperscript Tagged Markup)"
|
||
|
|
},
|
||
|
|
"description": {
|
||
|
|
"default": "Use HTM (Hyperscript Tagged Markup) as Template Engine for React components like 'Fluent UI React'"
|
||
|
|
},
|
||
|
|
"officeFabricIconFontName": "CodeEdit",
|
||
|
|
"properties": {
|
||
|
|
"template": "let [count, setCount] = this.react.useState(0);\r\nconst originalItems = this.fuiHooks.useConst(() => this.fuiSampleData.createListItems(10));\r\nconst classNames = this.fui.mergeStyleSets({\r\n itemCell: [\r\n this.fui.getFocusStyle(this.theme, { inset: -1 }),\r\n {\r\n minHeight: 54,\r\n padding: 10,\r\n boxSizing: 'border-box',\r\n borderBottom: `1px solid ${this.themeVariant.semanticColors.bodyDivider}`,\r\n display: 'flex',\r\n selectors: {\r\n '&:hover': { background: this.themeVariant.palette.neutralLight },\r\n }\r\n },\r\n ],\r\n itemImage: {\r\n flexShrink: 0,\r\n },\r\n itemContent: {\r\n marginLeft: 10,\r\n overflow: 'hidden',\r\n flexGrow: 1,\r\n },\r\n itemName: [\r\n this.themeVariant.fonts.xLarge,\r\n {\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n ],\r\n itemIndex: {\r\n fontSize: this.themeVariant.fonts.small.fontSize,\r\n color: this.themeVariant.palette.neutralTertiary,\r\n marginBottom: 10,\r\n },\r\n chevron: {\r\n alignSelf: 'center',\r\n marginLeft: 10,\r\n color: this.themeVariant.palette.neutralTertiary,\r\n fontSize: this.themeVariant.fonts.large.fontSize,\r\n flexShrink: 0,\r\n },\r\n});\r\n\r\nconst onRenderCell = (item, index) => {\r\n return this.html`\r\n <div class=${classNames.itemCell} data-is-focusable>\r\n <${this.fui.Image} className=${classNames.itemImage} src=${item.thumbnail} width=${50} height=${50} imageFit=${this.fui.ImageFit.cover} />\r\n <div class=${classNames.itemContent}>\r\n <div class=${classNames.itemName}>${item.name}</div>\r\n <div class=${classNames.itemIndex}>${`Item ${index}`}</div>\r\n <div>${item.description}</div>\r\n </div>\r\n <${this.fui.Icon} className=${classNames.chevron} iconName=${this.fui.getRTL() ? 'ChevronLeft' : 'ChevronRight'} />\r\n </div>`;\r\n};\r\n\r\nreturn this.html`\r\n <${this.fui.ThemeProvider} theme=${this.themeVariant}>\r\n <${this.fui.Stack} tokens=${{ childrenGap: 10 }}>\r\n <${this.fui.Label}>Clicked ${count} times<//>\r\n <${this.fui.PrimaryButton} text=\"Click here!\" onClick=${() => setCount(count + 1)} />\r\n <${this.fui.List} items=${originalItems} onRenderCell=${onRenderCell} />\r\n <//>\r\n <//>`;",
|
||
|
|
"loadFluentUI": true,
|
||
|
|
"loadFluentUISampleData": true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"loaderConfig": {
|
||
|
|
"internalModuleBaseUrls": [
|
||
|
|
"<!-- PATH TO CDN -->"
|
||
|
|
],
|
||
|
|
"entryModuleId": "react-htm-web-part",
|
||
|
|
"scriptResources": {
|
||
|
|
"react-htm-web-part": {
|
||
|
|
"type": "path",
|
||
|
|
"path": "react-htm-web-part.js"
|
||
|
|
},
|
||
|
|
"@microsoft/sp-property-pane": {
|
||
|
|
"type": "component",
|
||
|
|
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||
|
|
"version": "1.12.1"
|
||
|
|
},
|
||
|
|
"@microsoft/sp-component-base": {
|
||
|
|
"type": "component",
|
||
|
|
"id": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
|
||
|
|
"version": "1.12.1"
|
||
|
|
},
|
||
|
|
"@microsoft/sp-lodash-subset": {
|
||
|
|
"type": "component",
|
||
|
|
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
|
||
|
|
"version": "1.12.1"
|
||
|
|
},
|
||
|
|
"@microsoft/sp-core-library": {
|
||
|
|
"type": "component",
|
||
|
|
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||
|
|
"version": "1.12.1"
|
||
|
|
},
|
||
|
|
"@microsoft/sp-webpart-base": {
|
||
|
|
"type": "component",
|
||
|
|
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||
|
|
"version": "1.12.1"
|
||
|
|
},
|
||
|
|
"react": {
|
||
|
|
"type": "component",
|
||
|
|
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||
|
|
"version": "16.9.0"
|
||
|
|
},
|
||
|
|
"ReactHtmWebPartStrings": {
|
||
|
|
"type": "path",
|
||
|
|
"path": "ReactHtmWebPartStrings_en-us.js"
|
||
|
|
},
|
||
|
|
"react-dom": {
|
||
|
|
"type": "component",
|
||
|
|
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||
|
|
"version": "16.9.0"
|
||
|
|
},
|
||
|
|
"PropertyControlStrings": {
|
||
|
|
"type": "localizedPath",
|
||
|
|
"paths": {
|
||
|
|
"bg-BG": "PropertyControlStrings_bg-bg.js",
|
||
|
|
"ca-ES": "PropertyControlStrings_ca-es.js",
|
||
|
|
"da-DK": "PropertyControlStrings_da-dk.js",
|
||
|
|
"de-DE": "PropertyControlStrings_de-de.js",
|
||
|
|
"el-GR": "PropertyControlStrings_el-gr.js",
|
||
|
|
"en-US": "PropertyControlStrings_en-us.js",
|
||
|
|
"es-ES": "PropertyControlStrings_es-es.js",
|
||
|
|
"et-EE": "PropertyControlStrings_et-ee.js",
|
||
|
|
"fi-FI": "PropertyControlStrings_fi-fi.js",
|
||
|
|
"fr-FR": "PropertyControlStrings_fr-fr.js",
|
||
|
|
"it-IT": "PropertyControlStrings_it-it.js",
|
||
|
|
"ja-JP": "PropertyControlStrings_ja-jp.js",
|
||
|
|
"lt-LT": "PropertyControlStrings_lt-lt.js",
|
||
|
|
"lv-LV": "PropertyControlStrings_lv-lv.js",
|
||
|
|
"nb-NO": "PropertyControlStrings_nb-no.js",
|
||
|
|
"nl-NL": "PropertyControlStrings_nl-nl.js",
|
||
|
|
"no": "PropertyControlStrings_no.js",
|
||
|
|
"pl-PL": "PropertyControlStrings_pl-pl.js",
|
||
|
|
"pt-PT": "PropertyControlStrings_pt-pt.js",
|
||
|
|
"ro-RO": "PropertyControlStrings_ro-ro.js",
|
||
|
|
"ru-RU": "PropertyControlStrings_ru-ru.js",
|
||
|
|
"sk-SK": "PropertyControlStrings_sk-sk.js",
|
||
|
|
"sr-Latn-RS": "PropertyControlStrings_sr-latn-rs.js",
|
||
|
|
"sv-SE": "PropertyControlStrings_sv-se.js",
|
||
|
|
"tr-TR": "PropertyControlStrings_tr-tr.js",
|
||
|
|
"vi-VN": "PropertyControlStrings_vi-vn.js",
|
||
|
|
"zh-CN": "PropertyControlStrings_zh-cn.js",
|
||
|
|
"zh-TW": "PropertyControlStrings_zh-tw.js"
|
||
|
|
},
|
||
|
|
"defaultPath": "PropertyControlStrings_en-us.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|