@fluentui/react-northstar
Version:
A themable React component library.
253 lines (251 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.DebugPanel = void 0;
var _get2 = _interopRequireDefault(require("lodash/get"));
var _set2 = _interopRequireDefault(require("lodash/set"));
var _replace2 = _interopRequireDefault(require("lodash/replace"));
var _uniq2 = _interopRequireDefault(require("lodash/uniq"));
var _concat2 = _interopRequireDefault(require("lodash/concat"));
var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
var React = _interopRequireWildcard(require("react"));
var _DebugPanelItem = require("./DebugPanelItem");
var _utils = require("./utils");
var _DebugComponentViewer = require("./DebugComponentViewer");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var DebugPanel = function DebugPanel(props) {
var cssStyles = props.cssStyles,
inputDebugData = props.debugData,
fiberNav = props.fiberNav,
onActivateDebugSelectorClick = props.onActivateDebugSelectorClick,
onClose = props.onClose,
position = props.position,
onPositionLeft = props.onPositionLeft,
onPositionRight = props.onPositionRight,
onFiberChanged = props.onFiberChanged,
onFiberSelected = props.onFiberSelected;
var _React$useState = React.useState('root'),
slot = _React$useState[0],
setSlot = _React$useState[1];
var left = position === 'left';
var debugData = (0, _isNil2.default)(inputDebugData) || (0, _isEmpty2.default)(inputDebugData) ? {
componentStyles: {},
componentVariables: [],
siteVariables: []
} : inputDebugData;
debugData.componentStyles = debugData.componentStyles || {};
debugData.componentVariables = debugData.componentVariables || [];
debugData.siteVariables = debugData.siteVariables || [];
var styleSlots = Object.keys(debugData.componentStyles);
var siteVariablesUsedInComponentVariables = [];
debugData.componentVariables.map(function (val) {
return val.input;
}).forEach(function (val) {
return siteVariablesUsedInComponentVariables = (0, _concat2.default)(siteVariablesUsedInComponentVariables, (0, _utils.getValues)(val, function (val) {
return val.indexOf('siteVariables.') > -1;
}));
});
var uniqUsedSiteVariables = (0, _uniq2.default)(siteVariablesUsedInComponentVariables);
var siteVariablesDataWithNulls = debugData.siteVariables.map(function (val) {
return Object.assign({}, val, {
resolved: uniqUsedSiteVariables.reduce(function (acc, next) {
var key = (0, _replace2.default)(next, 'siteVariables.', '');
(0, _set2.default)(acc, key, (0, _get2.default)(val['resolved'], key));
return acc;
}, {})
});
});
var siteVariablesData = siteVariablesDataWithNulls.map(function (val) {
return Object.assign({}, val, {
resolved: (0, _utils.removeNulls)(val.resolved)
});
});
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
style: debugPanelRoot(left)
}, /*#__PURE__*/React.createElement("div", {
style: debugPanelHeader
}, /*#__PURE__*/React.createElement("div", {
tabIndex: 0,
onClick: onActivateDebugSelectorClick,
style: debugPanelArrowIcon
}, "\u21F1"), /*#__PURE__*/React.createElement("div", {
style: {
float: 'right'
}
}, /*#__PURE__*/React.createElement("div", {
tabIndex: 0,
style: debugPanelIcon(true, left),
onClick: onPositionLeft
}), /*#__PURE__*/React.createElement("div", {
tabIndex: 0,
style: debugPanelIcon(false, left),
onClick: onPositionRight
}), /*#__PURE__*/React.createElement("div", {
tabIndex: 0,
onClick: onClose,
style: debugPanelCloseIcon
}, "\u2715"))), /*#__PURE__*/React.createElement(_DebugComponentViewer.DebugComponentViewer, {
fiberNav: fiberNav,
onFiberChanged: onFiberChanged,
onFiberSelected: onFiberSelected
}), /*#__PURE__*/React.createElement("div", {
style: debugPanelBody
}, /*#__PURE__*/React.createElement("div", {
style: debugPanel
}, /*#__PURE__*/React.createElement("div", {
style: debugHeaderContainer()
}, /*#__PURE__*/React.createElement("div", {
style: debugHeader()
}, "Styles"), !(0, _isEmpty2.default)(debugData.componentStyles) && /*#__PURE__*/React.createElement("div", {
style: debugPanelSelectContainer()
}, /*#__PURE__*/React.createElement("select", {
value: slot,
onChange: function onChange(e) {
return setSlot(e.target.value);
}
}, styleSlots.map(function (val) {
return /*#__PURE__*/React.createElement("option", {
value: val,
key: val
}, "Slot: ", val);
})))), !(0, _isEmpty2.default)(debugData.componentStyles) ? /*#__PURE__*/React.createElement(_DebugPanelItem.DebugPanelItem, {
data: debugData.componentStyles[slot],
valueKey: "styles",
idKey: "debugId"
}) : /*#__PURE__*/React.createElement("div", {
style: debugNoData()
}, "None in use")), /*#__PURE__*/React.createElement("div", {
style: debugPanel
}, /*#__PURE__*/React.createElement("div", {
style: debugHeaderContainer()
}, /*#__PURE__*/React.createElement("div", {
style: debugHeader()
}, "Variables")), !(0, _isEmpty2.default)(debugData.componentVariables) ? /*#__PURE__*/React.createElement(_DebugPanelItem.DebugPanelItem, {
data: debugData.componentVariables,
valueKey: "resolved",
idKey: "debugId",
commentKey: "input",
commentKeyPredicate: function commentKeyPredicate(val) {
return typeof val === 'string' && val.indexOf('siteVariables.') > -1;
}
}) : /*#__PURE__*/React.createElement("div", {
style: debugNoData()
}, "None in use")), /*#__PURE__*/React.createElement("div", {
style: debugPanel
}, /*#__PURE__*/React.createElement("div", {
style: debugHeaderContainer()
}, /*#__PURE__*/React.createElement("div", {
style: debugHeader()
}, "Site variables")), !(0, _isEmpty2.default)(siteVariablesData) && !(0, _isEmpty2.default)(uniqUsedSiteVariables) ? /*#__PURE__*/React.createElement(_DebugPanelItem.DebugPanelItem, {
data: siteVariablesData,
valueKey: "resolved",
idKey: "debugId"
}) : /*#__PURE__*/React.createElement("div", {
style: debugNoData()
}, "None in use"))), !(0, _isEmpty2.default)(cssStyles) && /*#__PURE__*/React.createElement("div", {
style: debugPanel
}, /*#__PURE__*/React.createElement("div", {
style: debugHeader()
}, "HTML Styles"), /*#__PURE__*/React.createElement("div", {
style: {
clear: 'both'
}
}, cssStyles.map(function (l) {
return /*#__PURE__*/React.createElement("pre", {
key: l
}, l);
}))), /*#__PURE__*/React.createElement("div", {
style: {
padding: '50px 0'
}
})));
};
exports.DebugPanel = DebugPanel;
var debugPanelHeader = {
position: 'sticky',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '2px 2px 4px',
top: '0',
background: '#f3f3f3',
zIndex: 1
};
var commonIconStyle = {
display: 'inline-block',
cursor: 'pointer',
color: '#555',
lineHeight: 1,
margin: '0 4px'
};
var debugPanelCloseIcon = Object.assign({}, commonIconStyle, {
fontSize: '20px',
outline: '0',
cursor: 'pointer'
});
var debugPanelArrowIcon = Object.assign({}, commonIconStyle, {
fontSize: '24px',
marginTop: '-4px',
outline: '0'
});
var debugPanelIcon = function debugPanelIcon(left, isLeftActive) {
var _Object$assign;
return Object.assign({}, commonIconStyle, (_Object$assign = {
borderWidth: '2px',
borderStyle: 'solid ',
borderColor: '#555'
}, _Object$assign[left ? 'borderLeftWidth' : 'borderRightWidth'] = '6px', _Object$assign.width = '16px', _Object$assign.height = '14px', _Object$assign), left === isLeftActive && {
borderColor: '#6495ed'
});
};
var debugPanelRoot = function debugPanelRoot(left) {
var _ref;
return _ref = {
position: 'fixed'
}, _ref[left ? 'left' : 'right'] = 0, _ref.top = 0, _ref.zIndex = 999999999, _ref.width = '350px', _ref.height = '100vh', _ref.color = '#313941', _ref.background = '#fff', _ref.lineHeight = 1.1, _ref.fontSize = '12px', _ref.overflowY = 'scroll', _ref[left ? 'borderRight' : 'borderLeft'] = '1px solid rgba(0, 0, 0, 0.2)', _ref.boxShadow = '0 0 8px rgba(0, 0, 0, .1)', _ref;
};
var debugHeaderContainer = function debugHeaderContainer() {
return {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '8px',
margin: '0 -4px 4px',
overflow: 'hidden',
background: '#f3f3f3',
borderTop: '1px solid #d0d0d0',
borderBottom: '1px solid #d0d0d0'
};
};
var debugHeader = function debugHeader() {
return {
fontSize: '14px',
fontWeight: 'bold'
};
};
var debugNoData = function debugNoData() {
return {
padding: '8px',
color: 'rgba(0, 0, 0, 0.75)',
textAlign: 'center',
background: 'rgba(0, 0, 0, 0.05)',
marginBottom: '4px'
};
};
var debugPanelSelectContainer = function debugPanelSelectContainer() {
return {
width: 'auto'
};
};
var debugPanelBody = {
overflowWrap: 'break-word',
wordWrap: 'break-word',
wordBreak: 'break-all',
hyphens: 'auto'
};
var debugPanel = {
padding: '0 4px'
};
//# sourceMappingURL=DebugPanel.js.map