@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
89 lines • 7.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ControlsTestEnhancedThemeProvider = exports.ControlsTestEnhancedThemeProviderFunctionComponent = void 0;
var tslib_1 = require("tslib");
var react_1 = require("@fluentui/react");
var React = tslib_1.__importStar(require("react"));
var EnhancedThemeProvider_1 = require("../../../EnhancedThemeProvider");
var Placeholder_1 = require("../../../Placeholder");
var ControlsTestEnhancedThemeProviderFunctionComponent = function () {
var theme = (0, EnhancedThemeProvider_1.useTheme)();
return (React.createElement(react_1.Stack, { tokens: { childrenGap: 10 } },
React.createElement("h1", null, "Title H1"),
React.createElement("h2", null, "Title H2"),
React.createElement("h3", null, "Title H3"),
React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis malesuada elit, in accumsan erat vehicula nec. Donec molestie eu quam vel pulvinar. Proin eu est a felis hendrerit sodales. Quisque non consequat sapien. Donec at neque libero. In vel ante nec ex sagittis consectetur. Ut euismod nunc sed ullamcorper tincidunt. Morbi justo dolor, rutrum vehicula urna quis, tempor pulvinar ligula. Sed quis gravida mi. In fermentum augue rhoncus odio lacinia pharetra. Aliquam elementum mollis nibh, rutrum iaculis tortor."),
React.createElement(Placeholder_1.Placeholder, { iconName: "Edit", iconText: "Configure your web part", description: "Please configure the web part.", buttonLabel: "Configure", onConfigure: function () {
alert("onConfigure");
} }),
React.createElement(react_1.Link, { theme: theme, href: "#" }, "Fluent Link"),
React.createElement(react_1.ActionButton, { theme: theme }, "Action Button"),
React.createElement(react_1.PrimaryButton, { theme: theme }, "PrimaryButton"),
React.createElement(react_1.DefaultButton, { theme: theme }, "DefaultButton"),
React.createElement(react_1.CompoundButton, { theme: theme, secondaryText: "This is the secondary text." }, "CompoundButton"),
React.createElement(react_1.IconButton, { iconProps: { iconName: "Emoji2" }, title: "Emoji", ariaLabel: "Emoji", disabled: false, checked: false }),
React.createElement(react_1.IconButton, { iconProps: { iconName: "Emoji2" }, title: "Emoji", ariaLabel: "Emoji", disabled: true, checked: false }),
React.createElement(react_1.IconButton, { iconProps: { iconName: "Emoji2" }, title: "Emoji", ariaLabel: "Emoji", disabled: true, checked: true }),
React.createElement(react_1.IconButton, { iconProps: { iconName: "Emoji2" }, title: "Emoji", ariaLabel: "Emoji", disabled: false, checked: true })));
};
exports.ControlsTestEnhancedThemeProviderFunctionComponent = ControlsTestEnhancedThemeProviderFunctionComponent;
var ControlsTestEnhancedThemeProvider = /** @class */ (function (_super) {
tslib_1.__extends(ControlsTestEnhancedThemeProvider, _super);
function ControlsTestEnhancedThemeProvider() {
return _super !== null && _super.apply(this, arguments) || this;
}
ControlsTestEnhancedThemeProvider.prototype.render = function () {
return (React.createElement(EnhancedThemeProvider_1.ThemeContext.Consumer, null, function (theme) { return (React.createElement(react_1.Stack, { tokens: { childrenGap: 10 } },
React.createElement(react_1.ChoiceGroup, { defaultSelectedKey: "B", options: [
{ key: "A", text: "Option A" },
{ key: "B", text: "Option B" },
{ key: "C", text: "Option C", disabled: true },
{ key: "D", text: "Option D" },
], label: "Pick one", required: true }),
React.createElement(react_1.Checkbox, { label: "Unchecked checkbox (uncontrolled)" }),
React.createElement(react_1.Checkbox, { label: "Checked checkbox (uncontrolled)", defaultChecked: true }),
React.createElement(react_1.Checkbox, { label: "Disabled checkbox", disabled: true }),
React.createElement(react_1.Checkbox, { label: "Disabled checked checkbox", disabled: true, defaultChecked: true }),
React.createElement(react_1.ComboBox, { theme: theme, defaultSelectedKey: "C", label: "Basic single-select ComboBox", options: [
{
key: "Header1",
text: "First heading",
itemType: react_1.SelectableOptionMenuItemType.Header,
},
{ key: "A", text: "Option A" },
{ key: "B", text: "Option B" },
{ key: "C", text: "Option C" },
{ key: "D", text: "Option D" },
{
key: "divider",
text: "-",
itemType: react_1.SelectableOptionMenuItemType.Divider,
},
{
key: "Header2",
text: "Second heading",
itemType: react_1.SelectableOptionMenuItemType.Header,
},
{ key: "E", text: "Option E" },
{ key: "F", text: "Option F", disabled: true },
{ key: "G", text: "Option G" },
{ key: "H", text: "Option H" },
{ key: "I", text: "Option I" },
{ key: "J", text: "Option J" },
] }),
React.createElement(react_1.DatePicker, { theme: theme }),
React.createElement(react_1.SpinButton, { label: "Basic SpinButton", defaultValue: "0", min: 0, max: 100, step: 1, incrementButtonAriaLabel: "Increase value by 1", decrementButtonAriaLabel: "Decrease value by 1" }),
React.createElement(react_1.TextField, { theme: theme, label: "Standard" }),
React.createElement(react_1.Toggle, { label: "Enabled and checked", defaultChecked: true, onText: "On", offText: "Off" }),
React.createElement(react_1.Toggle, { label: "Enabled and unchecked", onText: "On", offText: "Off" }),
React.createElement(react_1.Toggle, { label: "Disabled and checked", defaultChecked: true, disabled: true, onText: "On", offText: "Off" }),
React.createElement(react_1.Toggle, { label: "Disabled and unchecked", disabled: true, onText: "On", offText: "Off" }),
React.createElement(react_1.Toggle, { label: "With inline label", inlineLabel: true, onText: "On", offText: "Off" }),
React.createElement(react_1.Toggle, { label: "Disabled with inline label", inlineLabel: true, disabled: true, onText: "On", offText: "Off" }),
React.createElement(react_1.Toggle, { label: "With inline label and without onText and offText", inlineLabel: true }),
React.createElement(react_1.Toggle, { label: "Disabled with inline label and without onText and offText", inlineLabel: true, disabled: true }))); }));
};
return ControlsTestEnhancedThemeProvider;
}(React.Component));
exports.ControlsTestEnhancedThemeProvider = ControlsTestEnhancedThemeProvider;
//# sourceMappingURL=ControlsTestEnhancedThemeProvider.js.map