@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
45 lines • 3.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarFind = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_northstar_1 = require("@fluentui/react-northstar");
var react_icons_northstar_1 = require("@fluentui/react-icons-northstar");
var Toolbar_module_scss_1 = tslib_1.__importDefault(require("./Toolbar.module.scss"));
var ToolbarFind = function (props) {
switch (props.layout) {
case "verbose":
return (React.createElement(react_northstar_1.Input, { clearable: true, placeholder: "Find", "aria-label": "Find", className: "extended-toolbar__far-side__input", icon: React.createElement(react_icons_northstar_1.SearchIcon, { outline: true }), styles: {
flexShrink: 1,
width: "13.125rem",
}, onChange: function (e, inputProps) {
if (props.onFindQueryChange && inputProps)
props.onFindQueryChange(inputProps.value);
} }));
default:
case "compact":
return props.findActive ? (React.createElement(React.Fragment, null,
React.createElement(react_northstar_1.Input, { autoFocus: true, clearable: true, placeholder: "Find", "aria-label": "Find", className: "extended-toolbar__far-side__input", icon: React.createElement(react_icons_northstar_1.SearchIcon, { outline: true }), styles: {
flexShrink: 1,
flexGrow: 1,
width: "13.125rem",
}, onChange: function (e, inputProps) {
if (props.onFindQueryChange && inputProps)
props.onFindQueryChange(inputProps.value);
} }),
React.createElement(react_northstar_1.Button, { text: true, title: "Cancel", content: "Cancel", className: "extended-toolbar__find-cancel " + Toolbar_module_scss_1.default.toolbarButtonStyles, styles: {
marginLeft: "1px",
marginRight: "1px"
}, onClick: function (_e) {
if (props.onFindQueryChange) {
props.onFindQueryChange("");
}
props.setFindActive(false);
} }))) : (React.createElement(react_northstar_1.Tooltip, { trigger: React.createElement(react_northstar_1.Button, { text: true, title: "Find", content: "", className: "extended-toolbar__find-invoker " + Toolbar_module_scss_1.default.toolbarButtonStyles, icon: React.createElement(react_icons_northstar_1.SearchIcon, { outline: true }), styles: {
marginRight: ".5rem",
flex: "0 0 auto",
}, onClick: function (_e) { return props.setFindActive(true); } }), content: "Find", accessibility: react_northstar_1.tooltipAsLabelBehavior }));
}
};
exports.ToolbarFind = ToolbarFind;
//# sourceMappingURL=ToolbarFind.js.map