@fluentui/react-northstar
Version:
A themable React component library.
245 lines (244 loc) • 8.57 kB
JavaScript
import _get from "lodash/get";
import _set from "lodash/set";
import _replace from "lodash/replace";
import _uniq from "lodash/uniq";
import _concat from "lodash/concat";
import _isEmpty from "lodash/isEmpty";
import _isNil from "lodash/isNil";
import * as React from 'react';
import { DebugPanelItem } from './DebugPanelItem';
import { getValues, removeNulls } from './utils';
import { DebugComponentViewer } from './DebugComponentViewer';
export 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 = _isNil(inputDebugData) || _isEmpty(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 = _concat(siteVariablesUsedInComponentVariables, getValues(val, function (val) {
return val.indexOf('siteVariables.') > -1;
}));
});
var uniqUsedSiteVariables = _uniq(siteVariablesUsedInComponentVariables);
var siteVariablesDataWithNulls = debugData.siteVariables.map(function (val) {
return Object.assign({}, val, {
resolved: uniqUsedSiteVariables.reduce(function (acc, next) {
var key = _replace(next, 'siteVariables.', '');
_set(acc, key, _get(val['resolved'], key));
return acc;
}, {})
});
});
var siteVariablesData = siteVariablesDataWithNulls.map(function (val) {
return Object.assign({}, val, {
resolved: 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, {
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"), !_isEmpty(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);
})))), !_isEmpty(debugData.componentStyles) ? /*#__PURE__*/React.createElement(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")), !_isEmpty(debugData.componentVariables) ? /*#__PURE__*/React.createElement(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")), !_isEmpty(siteVariablesData) && !_isEmpty(uniqUsedSiteVariables) ? /*#__PURE__*/React.createElement(DebugPanelItem, {
data: siteVariablesData,
valueKey: "resolved",
idKey: "debugId"
}) : /*#__PURE__*/React.createElement("div", {
style: debugNoData()
}, "None in use"))), !_isEmpty(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'
}
})));
};
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