@mikezimm/npmfunctions
Version:
Functions used in my SPFx webparts
160 lines • 8.01 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.buildRefElement = exports.buildPropsHoverCard = void 0;
var React = __importStar(require("react"));
var HoverCard_1 = require("office-ui-fabric-react/lib/HoverCard");
var Icon_1 = require("office-ui-fabric-react/lib/Icon");
var Styling_1 = require("office-ui-fabric-react/lib/Styling");
require('./styles.css');
function buildPropsHoverCard(item, highlightKeys, specialKeys, showOthers, icon) {
//let highlightKeys = ["Title","Email","IsSiteAdmin","LoginName", "Id"];
//let specialKeys = highlightKeys.concat("meta","searchString");
var iconClassInfo = (0, Styling_1.mergeStyles)({
fontSize: 18,
margin: '2px',
verticalAlign: 'bottom',
padding: '0px !important',
fontWeight: 600,
});
var iconClassInfoSmaller = (0, Styling_1.mergeStyles)({
fontSize: 16,
margin: '2px',
verticalAlign: 'unset',
padding: '0px !important',
fontWeight: 600,
});
var iconStyles = { root: {
//color: h.color ? h.color : "blue",
} };
var normalIcon = icon !== null ? icon : React.createElement(Icon_1.Icon, { iconName: "Info", className: iconClassInfo, styles: iconStyles });
var hiddenIcon = item.Hidden === true ? React.createElement(Icon_1.Icon, { title: 'Hidden', iconName: "Hide3", className: iconClassInfoSmaller, styles: { root: { color: 'blue' } } }) : null;
var requiredIcon = item.Required === true ? React.createElement(Icon_1.Icon, { title: 'Required', iconName: "AsteriskSolid", className: iconClassInfoSmaller, styles: { root: { color: 'red' } } }) : null;
var readOnly = item.ReadOnlyField === true ? React.createElement(Icon_1.Icon, { title: 'ReadOnly', iconName: "Lock12", className: iconClassInfoSmaller, styles: { root: { color: 'green' } } }) : null;
var indexed = item.Indexed === true ? React.createElement(Icon_1.Icon, { title: 'Indexed', iconName: "Database", className: iconClassInfoSmaller, styles: { root: { color: 'purple' } } }) : null;
var onRenderHoverCard = function () {
//Build Highlighted Props:
var hoverWebStyle = { fontWeight: 700 };
var showTheseProps = [];
var missingProp = "Error: prop not available";
highlightKeys.map(function (prop) {
if (prop === 'refElement') {
showTheseProps.push(buildRefElement(item['ref']));
}
else {
var propType = typeof item[prop];
var propVal = propType === 'object' || propType === 'boolean' ? JSON.stringify(item[prop]) : item[prop];
if (propVal === undefined) {
propVal = missingProp;
}
showTheseProps.push(React.createElement("p", null,
React.createElement("span", { style: hoverWebStyle },
prop,
":"),
" ",
propVal));
}
});
if (specialKeys.length > 0) {
showTheseProps.push(React.createElement("div", null,
React.createElement("h2", null, "Special Props")));
}
specialKeys.map(function (prop) {
if (prop === 'refElement') {
showTheseProps.push(buildRefElement(item['ref']));
}
else {
var propType = typeof item[prop];
var propVal = propType === 'object' || propType === 'boolean' ? JSON.stringify(item[prop]) : item[prop];
if (propVal === undefined) {
propVal = missingProp;
}
showTheseProps.push(React.createElement("p", null,
React.createElement("span", { style: hoverWebStyle },
prop,
":"),
" ",
propVal));
}
});
if (showOthers) {
showTheseProps.push(React.createElement("div", null,
React.createElement("h2", null, "Other Props")));
var hoverMinorPropStyle_1 = { fontSize: 'smaller', fontWeight: 700 };
Object.keys(item).map(function (prop) {
if (prop === 'refElement') {
showTheseProps.push(buildRefElement(item['ref']));
}
else if (highlightKeys.indexOf(prop) < 0 && specialKeys.indexOf(prop) < 0) {
var propType = typeof item[prop];
var propVal = propType === 'object' || propType === 'boolean' ? JSON.stringify(item[prop]) : item[prop];
if (propVal === undefined) {
propVal = missingProp;
}
showTheseProps.push(React.createElement("p", null,
React.createElement("span", { style: hoverMinorPropStyle_1 },
prop,
":"),
" ",
propVal));
}
});
}
var tipLine = showTheseProps.length > 20 ? React.createElement("p", null,
React.createElement("span", { style: { fontSize: 'x-large', fontWeight: 600, color: 'darkblue' } },
React.createElement("mark", null, "TIP: "),
"Use Mouse Wheel to scroll down page, Don't use scroll bar!")) : null;
return React.createElement("div", { className: 'fps-hover-card', style: { padding: 30, maxWidth: 800 } },
React.createElement("div", null,
tipLine,
showTheseProps));
};
var detailsCard = React.createElement("div", null,
React.createElement(HoverCard_1.HoverCard, { cardDismissDelay: 300, type: HoverCard_1.HoverCardType.plain, plainCardProps: {
onRenderPlainCard: onRenderHoverCard,
renderData: 'testRenderData'
} },
React.createElement("div", { style: { whiteSpace: 'nowrap' } },
normalIcon,
" ",
hiddenIcon,
" ",
requiredIcon,
" ",
readOnly,
" ",
indexed)));
return detailsCard;
}
exports.buildPropsHoverCard = buildPropsHoverCard;
function buildRefElement(ref) {
if (ref != null && ref.indexOf('\n') > 0) {
//Remove left padding: https://stackoverflow.com/a/13939142
ref = React.createElement("ul", { style: { paddingLeft: 15 } }, ref.replace('-- FULL ERROR', '\n-- FULL ERROR').split('\n').map(function (x) { return React.createElement("li", { style: { paddingLeft: 0 } }, x); }));
}
return ref;
}
exports.buildRefElement = buildRefElement;
//# sourceMappingURL=component.js.map