office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
58 lines • 3.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Panel_1 = require("office-ui-fabric-react/lib/Panel");
var Dropdown_1 = require("office-ui-fabric-react/lib/Dropdown");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var react_hooks_1 = require("@uifabric/react-hooks");
// The panel type and description are passed in by the PanelSizesExample component (later in this file)
var PanelExample = function (props) {
var description = props.description, panelType = props.panelType;
var _a = React.useState(false), isOpen = _a[0], setIsOpen = _a[1];
var openPanel = react_hooks_1.useConstCallback(function () { return setIsOpen(true); });
var dismissPanel = react_hooks_1.useConstCallback(function () { return setIsOpen(false); });
var a = 'aeiou'.indexOf(description[0]) === -1 ? 'a' : 'an'; // grammar...
return (React.createElement("div", null,
React.createElement(Button_1.DefaultButton, { text: "Open panel", onClick: openPanel }),
React.createElement(Panel_1.Panel, { isOpen: isOpen, onDismiss: dismissPanel, type: panelType, customWidth: panelType === Panel_1.PanelType.custom || panelType === Panel_1.PanelType.customNear ? '888px' : undefined, closeButtonAriaLabel: "Close", headerText: "Sample panel" },
React.createElement("p", null,
"This is ",
a,
" ",
React.createElement("strong", null, description),
" panel",
panelType === Panel_1.PanelType.smallFixedFar ? ' (the default size)' : '',
"."),
React.createElement("p", null,
"Select this size using ",
React.createElement("code", null, "type={PanelType." + Panel_1.PanelType[panelType] + "}"),
"."))));
};
var options = [
{ text: 'Small (default)', key: String(Panel_1.PanelType.smallFixedFar) },
{ text: 'Small, near side', key: String(Panel_1.PanelType.smallFixedNear) },
{ text: 'Medium', key: String(Panel_1.PanelType.medium) },
{ text: 'Large', key: String(Panel_1.PanelType.large) },
{ text: 'Large fixed-width', key: String(Panel_1.PanelType.largeFixed) },
{ text: 'Extra large', key: String(Panel_1.PanelType.extraLarge) },
{ text: 'Full-width (fluid)', key: String(Panel_1.PanelType.smallFluid) },
{ text: 'Custom (example: 888px)', key: String(Panel_1.PanelType.custom) },
{ text: 'Custom (example: 888px), near side', key: String(Panel_1.PanelType.customNear) }
];
var dropdownStyles = { root: { maxWidth: 250, marginBottom: 16 } };
var firstPStyle = { marginTop: 0 };
exports.PanelSizesExample = function () {
var _a = React.useState(options[0]), option = _a[0], setOption = _a[1];
var updateOption = react_hooks_1.useConstCallback(function (ev, opt) { return setOption(opt); });
var description = option.text.toLowerCase().replace(' (default)', '');
return (React.createElement("div", null,
React.createElement("p", { style: firstPStyle },
"See the ",
React.createElement(Link_1.Link, { href: "https://developer.microsoft.com/en-us/fabric#/controls/web/panel#PanelType" }, "PanelType documentation"),
" for details on how each option affects panel sizing at different screen widths."),
React.createElement("p", null, "All panels are anchored to the far side of the screen (right in LTR, left in RTL) unless otherwise specified."),
React.createElement(Dropdown_1.Dropdown, { label: "Choose a panel size:", options: options, selectedKey: option.key, onChange: updateOption, styles: dropdownStyles }),
React.createElement(PanelExample, { panelType: Number(option.key), description: description })));
};
//# sourceMappingURL=Panel.Sizes.Example.js.map