@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
185 lines • 14.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PropertyControlsTest_module_scss_1 = tslib_1.__importDefault(require("./PropertyControlsTest.module.scss"));
/**
* Property control test component that renders the property control values
*/
class PropertyControlsTest extends React.Component {
setHtml() {
return { __html: this.props.htmlCode };
}
render() {
return (React.createElement("div", { className: PropertyControlsTest_module_scss_1.default.propertyControlsTest },
React.createElement("div", { className: PropertyControlsTest_module_scss_1.default.container },
React.createElement("div", { className: `ms-Grid-row ms-bgColor-neutralLight ms-fontColor-neutralDark ${PropertyControlsTest_module_scss_1.default.row}` },
React.createElement("div", { className: "ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1" },
React.createElement("h2", { className: "ms-font-xxl ms-fontColor-neutralDark" }, "Property pane control values"),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "Grid"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Grid: ",
this.props.gridItems.map(i => i.title).join(', ')),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "Message"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Message: ",
this.props.message),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "Inputs"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Library: ",
this.props.searchLibrary),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"password: ",
this.props.password),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Number value: ",
this.props.numberValue),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Multi-select: ",
this.props.multiSelect.toString()),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Date: ",
this.props.datetime.displayValue),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Spin Value: ",
this.props.spinValue),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"GUID: ",
this.props.guid),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Editable ComboBox: ",
this.props.editableComboBox),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "Sites, Lists, and Views"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"List: ",
this.props.list),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"List Filtered: ",
this.props.listFiltered),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"List (Multi baseTemplate): ",
this.props.singleListMultipleBaseTemplate),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"View: ",
this.props.view),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"ContentType: ",
this.props.contentType),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Column: ",
this.props.column),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Multi Column: ",
this.props.multiColumn ? this.props.multiColumn.join(', ') : ''),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Multi List: ",
this.props.multiList.join(', ')),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Multi Filtered: ",
this.props.multiListFiltered.join(', ')),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Site(s): ",
this.props.sites.map(t => t.title).join(', ')),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "Colors"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Color: ",
React.createElement("span", { className: PropertyControlsTest_module_scss_1.default.colorBox, style: { backgroundColor: this.props.color } }, "\u00A0"),
this.props.color),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Color Object: ",
React.createElement("span", { className: PropertyControlsTest_module_scss_1.default.colorBox, style: { backgroundColor: this.props.colorObj ? this.props.colorObj.str : '' } }, "\u00A0"),
this.props.colorObj ? `${this.props.colorObj.str}= R:${this.props.colorObj.r},G:${this.props.colorObj.g},B:${this.props.colorObj.b},A:${this.props.colorObj.a} H:${this.props.colorObj.h},S:${this.props.colorObj.s},V:${this.props.colorObj.v} HEX:${this.props.colorObj.hex}` : ''),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Swatch Color: ",
React.createElement("span", { className: PropertyControlsTest_module_scss_1.default.colorBox, style: { backgroundColor: this.props.swatchColor } }, "\u00A0"),
this.props.swatchColor),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "Brand Center"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Selected Brand Font: ",
this.props.brandFont || 'None selected'),
React.createElement("div", { style: { fontFamily: this.props.brandFont || 'inherit', padding: '10px', border: '1px solid #ccc', marginTop: '10px' } },
React.createElement("h4", null, "Sample text using selected brand font:"),
React.createElement("p", null, "The quick brown fox jumps over the lazy dog."),
React.createElement("p", null, "ABCDEFGHIJKLMNOPQRSTUVWXYZ"),
React.createElement("p", null, "abcdefghijklmnopqrstuvwxyz"),
React.createElement("p", null, "0123456789")),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "Selected Palette"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Palette Name: ",
this.props.selectedPalette || 'None selected'),
React.createElement("div", { style: { display: 'flex', gap: '8px', marginTop: '10px', marginBottom: '10px' } }, this.props.selectedPaletteColors && this.props.selectedPaletteColors.length > 0 ? (this.props.selectedPaletteColors.map((color, index) => (React.createElement("div", { key: index, style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
React.createElement("div", { style: {
width: '40px',
height: '40px',
backgroundColor: color,
borderRadius: '4px',
border: '1px solid #ccc'
} }),
React.createElement("span", { style: { fontSize: '10px', marginTop: '4px' } }, color))))) : (React.createElement("span", null, "No palette colors selected"))),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "Controls with callout"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Dropdown With Callout Key: ",
this.props.dropdownWithCalloutKey),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Toggle Info Header Value: ",
this.props.toggleInfoHeaderValue ? 'Marvel' : 'DC Comics'),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Slider With Callout Value: ",
this.props.sliderWithCalloutValue),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Choice Group With Callout Value: ",
this.props.choiceGroupWithCalloutValue),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Checkbox with Callout Value: ",
(this.props.checkboxWithCalloutValue || '').toString()),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Dropdown Info Header Key: ",
this.props.dropdownInfoHeaderKey),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Text Info Header Value: ",
this.props.textInfoHeaderValue),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "People and Terms"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"People: ",
this.props.people.map(p => {
return !!p.fullName ? p.fullName : p.description;
}).join(', ')),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Term(s): ",
this.props.terms.map(t => t.name).join(', ')),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Enterprise Term(s): ",
this.props.enterpriseTerms.map(t => t.name).join(', ')),
React.createElement("h3", { className: "ms-font-xl ms-fontColor-neutralDark" }, "Editors"),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Ordered Items: ",
this.props.orderedItems.map((value) => {
return (React.createElement("i", { className: "ms-Icon ms-Icon--" + value.iconName + " " + PropertyControlsTest_module_scss_1.default.orderedIcon, title: value.text, key: value.text }));
})),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"HTML:",
React.createElement("div", { dangerouslySetInnerHTML: this.setHtml() })),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark", style: { wordBreak: "break-all" } },
"Collection data: ",
JSON.stringify(this.props.collectionData)),
React.createElement("p", null,
"File Picker: ",
this.props.filePickerResult ? this.props.filePickerResult.fileAbsoluteUrl : ""),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Role Definitions: ",
this.props.roleDefinitions && this.props.roleDefinitions.length > 0 ? this.props.roleDefinitions.map(p => {
return p.Name;
}).join(', ') : this.props.roleDefinitions[0] ? this.props.roleDefinitions[0].Name : "",
" "),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Folder Picker: ",
this.props.folderPicker ? this.props.folderPicker.Name : "",
" "),
React.createElement("p", { className: "ms-font-m ms-fontColor-neutralDark" },
"Icon Picker: ",
this.props.iconPicker ? this.props.iconPicker : "",
" "))))));
}
}
exports.default = PropertyControlsTest;
//# sourceMappingURL=PropertyControlsTest.js.map