@redux-devtools/rtk-query-monitor
Version:
rtk-query monitor for Redux DevTools
145 lines (144 loc) • 5.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _selectors = require("../selectors");
var _reducers = require("../reducers");
var _QueryList = require("../components/QueryList");
var _QueryForm = require("../components/QueryForm");
var _QueryPreview = require("./QueryPreview");
var _react2 = require("@emotion/react");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
class RtkQueryInspector extends _react.PureComponent {
inspectorRef = (() => /*#__PURE__*/(0, _react.createRef)())();
isWideIntervalRef = null;
constructor(props) {
super(props);
this.state = {
isWideLayout: true,
selectorsSource: (0, _selectors.computeSelectorSource)(props, null)
};
}
static wideLayout = 600;
static getDerivedStateFromProps(props, state) {
const selectorsSource = (0, _selectors.computeSelectorSource)(props, state.selectorsSource);
if (selectorsSource !== state.selectorsSource) {
return {
selectorsSource
};
}
return null;
}
selectors = (() => (0, _selectors.createInspectorSelectors)())();
updateSizeMode = () => {
if (this.inspectorRef.current) {
const isWideLayout = this.inspectorRef.current.offsetWidth >= RtkQueryInspector.wideLayout;
if (isWideLayout !== this.state.isWideLayout) {
this.setState({
isWideLayout
});
}
}
};
componentDidMount() {
this.updateSizeMode();
this.isWideIntervalRef = setInterval(this.updateSizeMode, 300);
}
componentWillUnmount() {
if (this.isWideIntervalRef) {
clearTimeout(this.isWideIntervalRef);
}
}
handleQueryFormValuesChange = values => {
this.props.dispatch((0, _reducers.changeQueryFormValues)(values));
};
handleSelectQuery = queryInfo => {
this.props.dispatch((0, _reducers.selectQueryKey)(queryInfo));
};
handleTabChange = tab => {
this.props.dispatch((0, _reducers.selectedPreviewTab)(tab));
};
render() {
const {
selectorsSource,
isWideLayout
} = this.state;
const allVisibleRtkResourceInfos = this.selectors.selectAllVisbileQueries(selectorsSource);
const currentResInfo = this.selectors.selectCurrentQueryInfo(selectorsSource);
const apiStates = this.selectors.selectApiStates(selectorsSource);
const hasNoApi = apiStates == null;
const searchQueryRegex = this.selectors.selectSearchQueryRegex(selectorsSource);
return (0, _react2.jsx)("div", {
ref: this.inspectorRef,
"data-wide-layout": +this.state.isWideLayout,
css: theme => ({
display: 'flex',
flexFlow: 'column nowrap',
overflow: 'hidden',
width: '100%',
height: '100%',
fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
fontSize: '12px',
WebkitFontSmoothing: 'antialiased',
lineHeight: '1.5em',
backgroundColor: theme.BACKGROUND_COLOR,
color: theme.TEXT_COLOR,
'&[data-wide-layout="1"]': {
flexFlow: 'row nowrap'
}
})
}, (0, _react2.jsx)("div", {
css: theme => ({
display: 'flex',
flex: '0 0 auto',
height: '50%',
width: '100%',
borderColor: theme.TAB_BORDER_COLOR,
'&[data-wide-layout="0"]': {
borderBottomWidth: 1,
borderStyle: 'solid'
},
'&[data-wide-layout="1"]': {
height: '100%',
width: '44%',
borderRightWidth: 1,
borderStyle: 'solid'
},
flexFlow: 'column nowrap',
'& > form': {
flex: '0 0 auto',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
borderColor: theme.LIST_BORDER_COLOR
},
'& > ul': {
flex: '1 1 auto',
overflowX: 'hidden',
overflowY: 'auto',
maxHeight: 'calc(100% - 70px)'
}
}),
"data-wide-layout": +this.state.isWideLayout
}, (0, _react2.jsx)(_QueryForm.QueryForm, {
searchQueryRegex: searchQueryRegex,
values: selectorsSource.monitorState.queryForm.values,
onFormValuesChange: this.handleQueryFormValuesChange
}), (0, _react2.jsx)(_QueryList.QueryList, {
onSelectQuery: this.handleSelectQuery,
resInfos: allVisibleRtkResourceInfos,
selectedQueryKey: selectorsSource.monitorState.selectedQueryKey
})), (0, _react2.jsx)(_QueryPreview.QueryPreview, {
selectorsSource: this.state.selectorsSource,
selectors: this.selectors,
resInfo: currentResInfo,
selectedTab: selectorsSource.monitorState.selectedPreviewTab,
onTabChange: this.handleTabChange,
isWideLayout: isWideLayout,
hasNoApis: hasNoApi
}));
}
}
var _default = exports.default = RtkQueryInspector;