mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-22 22:19:48 +03:00
stash
This commit is contained in:
Nathan Bierema
parent
639bfffa3e
commit
8b3cebc1cd
|
|
@ -14,12 +14,15 @@
|
|||
"@typescript-eslint/parser": "^3.9.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.1.0",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"eslint": "^7.6.0",
|
||||
"eslint-config-prettier": "^6.11.0",
|
||||
"eslint-plugin-babel": "^5.3.1",
|
||||
"eslint-plugin-jest": "^23.20.0",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"eslint-plugin-react": "^7.20.5",
|
||||
"html-webpack-plugin": "^4.3.0",
|
||||
"jest": "^26.2.2",
|
||||
"lerna": "^3.22.1",
|
||||
"prettier": "^2.0.5",
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ const mergeStylings = (
|
|||
|
||||
const getStylingByKeys = (
|
||||
mergedStyling: StylingConfig,
|
||||
keys: string | string[],
|
||||
keys: (string | false) | (string | false)[],
|
||||
...args: any[]
|
||||
): Styling => {
|
||||
if (keys === null) {
|
||||
|
|
@ -153,7 +153,9 @@ const getStylingByKeys = (
|
|||
keys = [keys];
|
||||
}
|
||||
|
||||
const styles = keys.map((key) => mergedStyling[key]).filter(Boolean);
|
||||
const styles = keys
|
||||
.map((key) => mergedStyling[key as string])
|
||||
.filter(Boolean);
|
||||
|
||||
const props = styles.reduce(
|
||||
(obj, s) => {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,6 @@ export type StylingConfig = {
|
|||
export type Theme = string | Base16Theme | StylingConfig;
|
||||
|
||||
export type StylingFunction = (
|
||||
keys: string | string[],
|
||||
keys: (string | false) | (string | false)[],
|
||||
...rest: any[]
|
||||
) => Styling;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Component } from 'react';
|
||||
import { hot } from 'react-hot-loader/root';
|
||||
import React, { Component } from 'react';
|
||||
import Button from 'react-bootstrap/Button';
|
||||
import Form from 'react-bootstrap/Form';
|
||||
import { BsX } from 'react-icons/bs';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"js"
|
||||
},
|
||||
"include": ["webpack.config.ts"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
{
|
||||
"presets": ["@babel/preset-env", "@babel/preset-react"],
|
||||
"plugins": [
|
||||
"@babel/plugin-transform-runtime",
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
"@babel/plugin-proposal-export-default-from",
|
||||
"@babel/plugin-proposal-do-expressions"
|
||||
]
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-react",
|
||||
"@babel/preset-typescript"
|
||||
],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
||||
|
|
|
|||
1
packages/redux-devtools-inspector/.eslintignore
Normal file
1
packages/redux-devtools-inspector/.eslintignore
Normal file
|
|
@ -0,0 +1 @@
|
|||
lib
|
||||
29
packages/redux-devtools-inspector/.eslintrc.js
Normal file
29
packages/redux-devtools-inspector/.eslintrc.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
module.exports = {
|
||||
extends: '../../.eslintrc',
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.ts', '*.tsx'],
|
||||
extends: '../../eslintrc.ts.react.base.json',
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ['./tsconfig.json'],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['demo/**/*.ts', 'demo/**/*.tsx'],
|
||||
extends: '../../eslintrc.ts.react.base.json',
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ['./demo/tsconfig.json'],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['webpack.config.ts'],
|
||||
extends: '../../eslintrc.ts.base.json',
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ['./tsconfig.webpack.json'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
static
|
||||
src
|
||||
demo
|
||||
.*
|
||||
webpack.config.js
|
||||
index.html
|
||||
*.gif
|
||||
*.png
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import '@babel/polyfill';
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import DemoApp from './DemoApp';
|
||||
|
|
|
|||
4
packages/redux-devtools-inspector/demo/tsconfig.json
Normal file
4
packages/redux-devtools-inspector/demo/tsconfig.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.react.base.json",
|
||||
"include": ["../src", "src"]
|
||||
}
|
||||
3
packages/redux-devtools-inspector/jest.config.js
Normal file
3
packages/redux-devtools-inspector/jest.config.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
preset: 'ts-jest',
|
||||
};
|
||||
|
|
@ -2,70 +2,42 @@
|
|||
"name": "redux-devtools-inspector",
|
||||
"version": "0.13.1",
|
||||
"description": "Redux DevTools Diff Monitor",
|
||||
"scripts": {
|
||||
"build": "npm run build:lib",
|
||||
"build:lib": "cross-env NODE_ENV=production babel src --out-dir lib",
|
||||
"build:demo": "cross-env NODE_ENV=production webpack -p",
|
||||
"stats": "webpack --profile --json > stats.json",
|
||||
"start": "webpack-dev-server",
|
||||
"lint": "eslint --ext .jsx,.js --max-warnings 0 src",
|
||||
"preversion": "npm run lint",
|
||||
"version": "npm run build:demo && git add -A .",
|
||||
"postversion": "git push",
|
||||
"prepare": "npm run build:lib",
|
||||
"prepublishOnly": "npm run build:lib",
|
||||
"gh": "git subtree push --prefix demo/dist origin gh-pages"
|
||||
},
|
||||
"main": "lib/index.js",
|
||||
"repository": {
|
||||
"url": "https://github.com/reduxjs/redux-devtools"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.10.5",
|
||||
"@babel/core": "^7.11.1",
|
||||
"@babel/plugin-proposal-class-properties": "^7.10.4",
|
||||
"@babel/plugin-proposal-do-expressions": "^7.10.4",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.10.4",
|
||||
"@babel/plugin-transform-runtime": "^7.11.0",
|
||||
"@babel/polyfill": "^7.10.4",
|
||||
"@babel/preset-env": "^7.11.0",
|
||||
"@babel/preset-react": "^7.10.4",
|
||||
"babel-loader": "^8.1.0",
|
||||
"base16": "^1.0.0",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"connected-react-router": "^6.8.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"history": "^4.10.1",
|
||||
"html-webpack-plugin": "^4.3.0",
|
||||
"immutable": "^4.0.0-rc.12",
|
||||
"lodash.isequalwith": "^4.4.0",
|
||||
"lodash.shuffle": "^4.2.0",
|
||||
"react": "^16.13.1",
|
||||
"react-bootstrap": "^1.3.0",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-redux": "^7.2.1",
|
||||
"react-router": "^5.2.0",
|
||||
"react-transform-hmr": "^1.0.4",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools": "^3.6.1",
|
||||
"redux-devtools-dock-monitor": "^1.1.4",
|
||||
"redux-logger": "^3.0.6",
|
||||
"seamless-immutable": "^7.1.4",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.3.0",
|
||||
"react-dom": "^16.3.0"
|
||||
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector",
|
||||
"bugs": {
|
||||
"url": "https://github.com/reduxjs/redux-devtools/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Alexander <alexkuz@gmail.com> (http://kuzya.org/)",
|
||||
"contributors": [
|
||||
"Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)"
|
||||
],
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"lib",
|
||||
"src"
|
||||
],
|
||||
"main": "lib/index.js",
|
||||
"types": "lib/index.d.ts",
|
||||
"repository": {
|
||||
"url": "https://github.com/reduxjs/redux-devtools"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"stats": "webpack --profile --json > stats.json",
|
||||
"build:demo": "NODE_ENV=production webpack -p",
|
||||
"build": "npm run build:types && npm run build:js",
|
||||
"build:types": "tsc --emitDeclarationOnly",
|
||||
"build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
|
||||
"clean": "rimraf lib",
|
||||
"lint": "eslint . --ext .ts,.tsx",
|
||||
"lint:fix": "eslint . --ext .ts,.tsx --fix",
|
||||
"type-check": "tsc --noEmit",
|
||||
"type-check:watch": "npm run type-check -- --watch",
|
||||
"preversion": "npm run type-check && npm run lint",
|
||||
"prepublishOnly": "npm run clean && npm run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-runtime": "^6.26.0",
|
||||
"@types/dragula": "^3.7.0",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"dateformat": "^3.0.3",
|
||||
"hex-rgba": "^1.0.2",
|
||||
"javascript-stringify": "^2.0.1",
|
||||
|
|
@ -77,7 +49,33 @@
|
|||
"react-base16-styling": "^0.7.0",
|
||||
"react-dragula": "^1.1.17",
|
||||
"react-json-tree": "^0.12.1",
|
||||
"react-pure-render": "^1.0.2",
|
||||
"redux-devtools-themes": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/dateformat": "^3.0.1",
|
||||
"@types/lodash.debounce": "^4.0.6",
|
||||
"@types/react": "^16.9.46",
|
||||
"@types/react-dragula": "^1.1.0",
|
||||
"base16": "^1.0.0",
|
||||
"connected-react-router": "^6.8.0",
|
||||
"history": "^4.10.1",
|
||||
"immutable": "^4.0.0-rc.12",
|
||||
"lodash.isequalwith": "^4.4.0",
|
||||
"lodash.shuffle": "^4.2.0",
|
||||
"react": "^16.13.1",
|
||||
"react-bootstrap": "^1.3.0",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-redux": "^7.2.1",
|
||||
"react-router": "^5.2.0",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools": "^3.6.1",
|
||||
"redux-devtools-dock-monitor": "^1.1.4",
|
||||
"redux-logger": "^3.0.6",
|
||||
"seamless-immutable": "^7.1.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.3.18",
|
||||
"react": "^16.3.0",
|
||||
"redux": "^3.4.0 || ^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"import": true
|
||||
}
|
||||
|
|
@ -1,10 +1,17 @@
|
|||
import React, { Component } from 'react';
|
||||
import React, { PureComponent, RefCallback } from 'react';
|
||||
import { Drake } from 'dragula';
|
||||
import dragula from 'react-dragula';
|
||||
import { Action } from 'redux';
|
||||
import { PerformAction } from 'redux-devtools';
|
||||
import { StylingFunction } from 'react-base16-styling';
|
||||
import ActionListRow from './ActionListRow';
|
||||
import ActionListHeader from './ActionListHeader';
|
||||
import shouldPureComponentUpdate from 'react-pure-render/function';
|
||||
|
||||
function getTimestamps(actions, actionIds, actionId) {
|
||||
function getTimestamps<A extends Action<unknown>>(
|
||||
actions: { [actionId: number]: PerformAction<A> },
|
||||
actionIds: number[],
|
||||
actionId: number
|
||||
) {
|
||||
const idx = actionIds.indexOf(actionId);
|
||||
const prevActionId = actionIds[idx - 1];
|
||||
|
||||
|
|
@ -14,10 +21,37 @@ function getTimestamps(actions, actionIds, actionId) {
|
|||
};
|
||||
}
|
||||
|
||||
export default class ActionList extends Component {
|
||||
shouldComponentUpdate = shouldPureComponentUpdate;
|
||||
interface Props<A extends Action<unknown>> {
|
||||
actions: { [actionId: number]: PerformAction<A> };
|
||||
actionIds: number[];
|
||||
isWideLayout: boolean;
|
||||
searchValue: string | undefined;
|
||||
selectedActionId: number | null;
|
||||
startActionId: number | null;
|
||||
skippedActionIds: number[];
|
||||
draggableActions: boolean;
|
||||
hideMainButtons: boolean | undefined;
|
||||
hideActionButtons: boolean | undefined;
|
||||
styling: StylingFunction;
|
||||
onSearch: (value: string) => void;
|
||||
onSelect: (e: React.MouseEvent<HTMLDivElement>, actionId: number) => void;
|
||||
onToggleAction: (actionId: number) => void;
|
||||
onJumpToState: (actionId: number) => void;
|
||||
onCommit: () => void;
|
||||
onSweep: () => void;
|
||||
onReorderAction: (actionId: number, beforeActionId: number) => void;
|
||||
currentActionId: number;
|
||||
lastActionId: number;
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
export default class ActionList<
|
||||
A extends Action<unknown>
|
||||
> extends PureComponent<Props<A>> {
|
||||
node?: HTMLDivElement | null;
|
||||
scrollDown?: boolean;
|
||||
drake?: Drake;
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps: Props<A>) {
|
||||
const node = this.node;
|
||||
if (!node) {
|
||||
this.scrollDown = true;
|
||||
|
|
@ -35,22 +69,22 @@ export default class ActionList extends Component {
|
|||
this.scrollToBottom();
|
||||
|
||||
if (!this.props.draggableActions) return;
|
||||
const container = this.node;
|
||||
const container = this.node!;
|
||||
this.drake = dragula([container], {
|
||||
copy: false,
|
||||
copySortSource: false,
|
||||
mirrorContainer: container,
|
||||
accepts: (el, target, source, sibling) =>
|
||||
!sibling || parseInt(sibling.getAttribute('data-id')),
|
||||
!sibling || !!parseInt(sibling.getAttribute('data-id')!),
|
||||
moves: (el, source, handle) =>
|
||||
parseInt(el.getAttribute('data-id')) &&
|
||||
handle.className.indexOf('selectorButton') !== 0,
|
||||
!!parseInt(el!.getAttribute('data-id')!) &&
|
||||
handle!.className.indexOf('selectorButton') !== 0,
|
||||
}).on('drop', (el, target, source, sibling) => {
|
||||
let beforeActionId = this.props.actionIds.length;
|
||||
if (sibling && sibling.className.indexOf('gu-mirror') === -1) {
|
||||
beforeActionId = parseInt(sibling.getAttribute('data-id'));
|
||||
beforeActionId = parseInt(sibling.getAttribute('data-id')!);
|
||||
}
|
||||
const actionId = parseInt(el.getAttribute('data-id'));
|
||||
const actionId = parseInt(el.getAttribute('data-id')!);
|
||||
this.props.onReorderAction(actionId, beforeActionId);
|
||||
});
|
||||
}
|
||||
|
|
@ -69,7 +103,7 @@ export default class ActionList extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
getRef = (node) => {
|
||||
getRef: RefCallback<HTMLDivElement> = (node) => {
|
||||
this.node = node;
|
||||
};
|
||||
|
||||
|
|
@ -97,8 +131,9 @@ export default class ActionList extends Component {
|
|||
const filteredActionIds = searchValue
|
||||
? actionIds.filter(
|
||||
(id) =>
|
||||
actions[id].action.type.toLowerCase().indexOf(lowerSearchValue) !==
|
||||
-1
|
||||
(actions[id].action.type as string)
|
||||
.toLowerCase()
|
||||
.indexOf(lowerSearchValue as string) !== -1
|
||||
)
|
||||
: actionIds;
|
||||
|
||||
|
|
@ -1,15 +1,40 @@
|
|||
import React, { Component } from 'react';
|
||||
import { PropTypes } from 'prop-types';
|
||||
import shouldPureComponentUpdate from 'react-pure-render/function';
|
||||
import React, { MouseEvent, MouseEventHandler, PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import dateformat from 'dateformat';
|
||||
import debounce from 'lodash.debounce';
|
||||
import { StylingFunction } from 'react-base16-styling';
|
||||
import { Action } from 'redux';
|
||||
import RightSlider from './RightSlider';
|
||||
|
||||
const BUTTON_SKIP = 'Skip';
|
||||
const BUTTON_JUMP = 'Jump';
|
||||
|
||||
export default class ActionListRow extends Component {
|
||||
state = { hover: false };
|
||||
type Button = typeof BUTTON_SKIP | typeof BUTTON_JUMP;
|
||||
|
||||
interface Props<A extends Action<unknown>> {
|
||||
styling: StylingFunction;
|
||||
actionId: number;
|
||||
isInitAction: boolean;
|
||||
isSelected: boolean;
|
||||
isInFuture: boolean;
|
||||
onSelect: MouseEventHandler<HTMLDivElement>;
|
||||
timestamps: { current: number; previous: number };
|
||||
action: A;
|
||||
onToggleClick: () => void;
|
||||
onJumpClick: () => void;
|
||||
onCommitClick: () => void;
|
||||
hideActionButtons: boolean | undefined;
|
||||
isSkipped: boolean;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hover: boolean;
|
||||
}
|
||||
|
||||
export default class ActionListRow<
|
||||
A extends Action<unknown>
|
||||
> extends PureComponent<Props<A>, State> {
|
||||
state: State = { hover: false };
|
||||
|
||||
static propTypes = {
|
||||
styling: PropTypes.func.isRequired,
|
||||
|
|
@ -25,8 +50,6 @@ export default class ActionListRow extends Component {
|
|||
isSkipped: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
shouldComponentUpdate = shouldPureComponentUpdate;
|
||||
|
||||
render() {
|
||||
const {
|
||||
styling,
|
||||
|
|
@ -44,18 +67,26 @@ export default class ActionListRow extends Component {
|
|||
const timeDelta = timestamps.current - timestamps.previous;
|
||||
const showButtons = (hover && !isInitAction) || isSkipped;
|
||||
|
||||
const isButtonSelected = (btn) => btn === BUTTON_SKIP && isSkipped;
|
||||
const isButtonSelected = (btn: Button) => btn === BUTTON_SKIP && isSkipped;
|
||||
|
||||
let actionType = action.type;
|
||||
if (typeof actionType === 'undefined') actionType = '<UNDEFINED>';
|
||||
else if (actionType === null) actionType = '<NULL>';
|
||||
else actionType = actionType.toString() || '<EMPTY>';
|
||||
else actionType = (actionType as string).toString() || '<EMPTY>';
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onSelect}
|
||||
onMouseEnter={!hideActionButtons && this.handleMouseEnter}
|
||||
onMouseLeave={!hideActionButtons && this.handleMouseLeave}
|
||||
onMouseEnter={
|
||||
(!hideActionButtons && this.handleMouseEnter) as MouseEventHandler<
|
||||
HTMLDivElement
|
||||
>
|
||||
}
|
||||
onMouseLeave={
|
||||
(!hideActionButtons && this.handleMouseLeave) as MouseEventHandler<
|
||||
HTMLDivElement
|
||||
>
|
||||
}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
onMouseUp={this.handleMouseEnter}
|
||||
data-id={actionId}
|
||||
|
|
@ -76,7 +107,7 @@ export default class ActionListRow extends Component {
|
|||
isSkipped && 'actionListItemNameSkipped',
|
||||
])}
|
||||
>
|
||||
{actionType}
|
||||
{actionType as string}
|
||||
</div>
|
||||
{hideActionButtons ? (
|
||||
<RightSlider styling={styling} shown>
|
||||
|
|
@ -103,12 +134,12 @@ export default class ActionListRow extends Component {
|
|||
</RightSlider>
|
||||
<RightSlider styling={styling} shown={showButtons} rotate>
|
||||
<div {...styling('actionListItemSelector')}>
|
||||
{[BUTTON_JUMP, BUTTON_SKIP].map(
|
||||
{([BUTTON_JUMP, BUTTON_SKIP] as const).map(
|
||||
(btn) =>
|
||||
(!isInitAction || btn !== BUTTON_SKIP) && (
|
||||
<div
|
||||
key={btn}
|
||||
onClick={this.handleButtonClick.bind(this, btn)}
|
||||
onClick={(e) => this.handleButtonClick(btn, e)}
|
||||
{...styling(
|
||||
[
|
||||
'selectorButton',
|
||||
|
|
@ -131,7 +162,7 @@ export default class ActionListRow extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
handleButtonClick(btn, e) {
|
||||
handleButtonClick(btn: Button, e: MouseEvent<HTMLDivElement>) {
|
||||
e.stopPropagation();
|
||||
|
||||
switch (btn) {
|
||||
|
|
@ -144,8 +175,8 @@ export default class ActionListRow extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
handleMouseEnter = (e) => {
|
||||
if (this.hover) return;
|
||||
handleMouseEnter = (e: MouseEvent<HTMLDivElement>) => {
|
||||
if (this.state.hover) return;
|
||||
this.handleMouseLeave.cancel();
|
||||
this.handleMouseEnterDebounced(e.buttons);
|
||||
};
|
||||
|
|
@ -160,8 +191,13 @@ export default class ActionListRow extends Component {
|
|||
if (this.state.hover) this.setState({ hover: false });
|
||||
}, 100);
|
||||
|
||||
handleMouseDown = (e) => {
|
||||
if (e.target.className.indexOf('selectorButton') === 0) return;
|
||||
handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
|
||||
if (
|
||||
((e.target as unknown) as { className: string[] }).className.indexOf(
|
||||
'selectorButton'
|
||||
) === 0
|
||||
)
|
||||
return;
|
||||
this.handleMouseLeave();
|
||||
};
|
||||
}
|
||||
|
|
@ -1,18 +1,30 @@
|
|||
import React, { Component } from 'react';
|
||||
import { PropTypes } from 'prop-types';
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Base16Theme } from 'redux-devtools-themes';
|
||||
import {
|
||||
getBase16Theme,
|
||||
invertTheme,
|
||||
StylingFunction,
|
||||
} from 'react-base16-styling';
|
||||
import { ActionCreators, LiftedAction, LiftedState } from 'redux-devtools';
|
||||
import { Action, Dispatch } from 'redux';
|
||||
import { Delta, DiffContext } from 'jsondiffpatch';
|
||||
import {
|
||||
createStylingFromTheme,
|
||||
base16Themes,
|
||||
} from './utils/createStylingFromTheme';
|
||||
import shouldPureComponentUpdate from 'react-pure-render/function';
|
||||
import ActionList from './ActionList';
|
||||
import ActionPreview from './ActionPreview';
|
||||
import getInspectedState from './utils/getInspectedState';
|
||||
import createDiffPatcher from './createDiffPatcher';
|
||||
import { getBase16Theme, invertTheme } from 'react-base16-styling';
|
||||
import { reducer, updateMonitorState } from './redux';
|
||||
import { ActionCreators } from 'redux-devtools';
|
||||
import {
|
||||
DevtoolsInspectorAction,
|
||||
DevtoolsInspectorState,
|
||||
reducer,
|
||||
updateMonitorState,
|
||||
} from './redux';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
const {
|
||||
commit,
|
||||
sweep,
|
||||
|
|
@ -22,21 +34,26 @@ const {
|
|||
reorderAction,
|
||||
} = ActionCreators;
|
||||
|
||||
function getLastActionId(props) {
|
||||
function getLastActionId<S, A extends Action<unknown>>(
|
||||
props: DevtoolsInspectorProps<S, A>
|
||||
) {
|
||||
return props.stagedActionIds[props.stagedActionIds.length - 1];
|
||||
}
|
||||
|
||||
function getCurrentActionId(props, monitorState) {
|
||||
function getCurrentActionId<S, A extends Action<unknown>>(
|
||||
props: DevtoolsInspectorProps<S, A>,
|
||||
monitorState: DevtoolsInspectorState
|
||||
) {
|
||||
return monitorState.selectedActionId === null
|
||||
? props.stagedActionIds[props.currentStateIndex]
|
||||
: monitorState.selectedActionId;
|
||||
}
|
||||
|
||||
function getFromState(
|
||||
actionIndex,
|
||||
stagedActionIds,
|
||||
computedStates,
|
||||
monitorState
|
||||
function getFromState<S>(
|
||||
actionIndex: number,
|
||||
stagedActionIds: number[],
|
||||
computedStates: { state: S; error?: string }[],
|
||||
monitorState: DevtoolsInspectorState
|
||||
) {
|
||||
const { startActionId } = monitorState;
|
||||
if (startActionId === null) {
|
||||
|
|
@ -47,7 +64,10 @@ function getFromState(
|
|||
return computedStates[fromStateIdx];
|
||||
}
|
||||
|
||||
function createIntermediateState(props, monitorState) {
|
||||
function createIntermediateState<S, A extends Action<unknown>>(
|
||||
props: DevtoolsInspectorProps<S, A>,
|
||||
monitorState: DevtoolsInspectorState
|
||||
) {
|
||||
const {
|
||||
supportImmutable,
|
||||
computedStates,
|
||||
|
|
@ -97,8 +117,10 @@ function createIntermediateState(props, monitorState) {
|
|||
};
|
||||
}
|
||||
|
||||
function createThemeState(props) {
|
||||
const base16Theme = getBase16Theme(props.theme, base16Themes);
|
||||
function createThemeState<S, A extends Action<unknown>>(
|
||||
props: DevtoolsInspectorProps<S, A>
|
||||
) {
|
||||
const base16Theme = getBase16Theme(props.theme, base16Themes)!;
|
||||
|
||||
const theme = props.invertTheme ? invertTheme(props.theme) : props.theme;
|
||||
const styling = createStylingFromTheme(theme);
|
||||
|
|
@ -106,15 +128,43 @@ function createThemeState(props) {
|
|||
return { base16Theme, styling };
|
||||
}
|
||||
|
||||
export default class DevtoolsInspector extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
...createIntermediateState(props, props.monitorState),
|
||||
isWideLayout: false,
|
||||
themeState: createThemeState(props),
|
||||
};
|
||||
}
|
||||
export interface DevtoolsInspectorProps<S, A extends Action<unknown>>
|
||||
extends LiftedState<S, A, DevtoolsInspectorState> {
|
||||
dispatch: Dispatch<
|
||||
DevtoolsInspectorAction | LiftedAction<S, A, DevtoolsInspectorState>
|
||||
>;
|
||||
preserveScrollTop?: boolean;
|
||||
draggableActions: boolean;
|
||||
select: (state: S) => unknown;
|
||||
theme: keyof typeof base16Themes | Base16Theme;
|
||||
supportImmutable: boolean;
|
||||
diffObjectHash?: (item: unknown, index: number) => string;
|
||||
diffPropertyFilter?: (name: string, context: DiffContext) => boolean;
|
||||
hideMainButtons?: boolean;
|
||||
hideActionButtons?: boolean;
|
||||
invertTheme: boolean;
|
||||
dataTypeKey?: string;
|
||||
tabs: unknown;
|
||||
}
|
||||
|
||||
interface State<S, A extends Action<unknown>> {
|
||||
delta: Delta | null | undefined | false;
|
||||
nextState: S;
|
||||
action: A;
|
||||
error: string | undefined;
|
||||
isWideLayout: boolean;
|
||||
themeState: { base16Theme: Base16Theme; styling: StylingFunction };
|
||||
}
|
||||
|
||||
export default class DevtoolsInspector<
|
||||
S,
|
||||
A extends Action<unknown>
|
||||
> extends PureComponent<DevtoolsInspectorProps<S, A>, State<S, A>> {
|
||||
state: State<S, A> = {
|
||||
...createIntermediateState(this.props, this.props.monitorState),
|
||||
isWideLayout: false,
|
||||
themeState: createThemeState(this.props),
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func,
|
||||
|
|
@ -127,7 +177,6 @@ export default class DevtoolsInspector extends Component {
|
|||
}),
|
||||
preserveScrollTop: PropTypes.bool,
|
||||
draggableActions: PropTypes.bool,
|
||||
stagedActions: PropTypes.array,
|
||||
select: PropTypes.func.isRequired,
|
||||
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
||||
supportImmutable: PropTypes.bool,
|
||||
|
|
@ -144,38 +193,42 @@ export default class DevtoolsInspector extends Component {
|
|||
static update = reducer;
|
||||
|
||||
static defaultProps = {
|
||||
select: (state) => state,
|
||||
select: (state: unknown) => state,
|
||||
supportImmutable: false,
|
||||
draggableActions: true,
|
||||
theme: 'inspector',
|
||||
invertTheme: true,
|
||||
};
|
||||
|
||||
shouldComponentUpdate = shouldPureComponentUpdate;
|
||||
updateSizeTimeout?: number;
|
||||
inspectorRef?: HTMLDivElement | null;
|
||||
|
||||
componentDidMount() {
|
||||
this.updateSizeMode();
|
||||
this.updateSizeTimeout = setInterval(this.updateSizeMode.bind(this), 150);
|
||||
this.updateSizeTimeout = window.setInterval(
|
||||
this.updateSizeMode.bind(this),
|
||||
150
|
||||
);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.updateSizeTimeout);
|
||||
}
|
||||
|
||||
updateMonitorState = (monitorState) => {
|
||||
updateMonitorState = (monitorState: Partial<DevtoolsInspectorState>) => {
|
||||
this.props.dispatch(updateMonitorState(monitorState));
|
||||
};
|
||||
|
||||
updateSizeMode() {
|
||||
const isWideLayout = this.inspectorRef.offsetWidth > 500;
|
||||
const isWideLayout = this.inspectorRef!.offsetWidth > 500;
|
||||
|
||||
if (isWideLayout !== this.state.isWideLayout) {
|
||||
this.setState({ isWideLayout });
|
||||
}
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
let nextMonitorState = nextProps.monitorState;
|
||||
UNSAFE_componentWillReceiveProps(nextProps: DevtoolsInspectorProps<S, A>) {
|
||||
const nextMonitorState = nextProps.monitorState;
|
||||
const monitorState = this.props.monitorState;
|
||||
|
||||
if (
|
||||
|
|
@ -199,7 +252,7 @@ export default class DevtoolsInspector extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
inspectorCreateRef = (node) => {
|
||||
inspectorCreateRef: React.RefCallback<HTMLDivElement> = (node) => {
|
||||
this.inspectorRef = node;
|
||||
};
|
||||
|
||||
|
|
@ -297,11 +350,11 @@ export default class DevtoolsInspector extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
handleToggleAction = (actionId) => {
|
||||
handleToggleAction = (actionId: number) => {
|
||||
this.props.dispatch(toggleAction(actionId));
|
||||
};
|
||||
|
||||
handleJumpToState = (actionId) => {
|
||||
handleJumpToState = (actionId: number) => {
|
||||
if (jumpToAction) {
|
||||
this.props.dispatch(jumpToAction(actionId));
|
||||
} else {
|
||||
|
|
@ -311,7 +364,7 @@ export default class DevtoolsInspector extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
handleReorderAction = (actionId, beforeActionId) => {
|
||||
handleReorderAction = (actionId: number, beforeActionId: number) => {
|
||||
if (reorderAction)
|
||||
this.props.dispatch(reorderAction(actionId, beforeActionId));
|
||||
};
|
||||
|
|
@ -324,11 +377,14 @@ export default class DevtoolsInspector extends Component {
|
|||
this.props.dispatch(sweep());
|
||||
};
|
||||
|
||||
handleSearch = (val) => {
|
||||
handleSearch = (val: string) => {
|
||||
this.updateMonitorState({ searchValue: val });
|
||||
};
|
||||
|
||||
handleSelectAction = (e, actionId) => {
|
||||
handleSelectAction = (
|
||||
e: React.MouseEvent<HTMLDivElement>,
|
||||
actionId: number
|
||||
) => {
|
||||
const { monitorState } = this.props;
|
||||
let startActionId;
|
||||
let selectedActionId;
|
||||
|
|
@ -367,11 +423,14 @@ export default class DevtoolsInspector extends Component {
|
|||
this.updateMonitorState({ startActionId, selectedActionId });
|
||||
};
|
||||
|
||||
handleInspectPath = (pathType, path) => {
|
||||
handleInspectPath = (
|
||||
pathType: 'inspectedActionPath' | 'inspectedStatePath',
|
||||
path: (string | number)[]
|
||||
) => {
|
||||
this.updateMonitorState({ [pathType]: path });
|
||||
};
|
||||
|
||||
handleSelectTab = (tabName) => {
|
||||
handleSelectTab = (tabName: string) => {
|
||||
this.updateMonitorState({ tabName });
|
||||
};
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { PropTypes } from 'prop-types';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const RightSlider = ({ styling, shown, children, rotate }) => (
|
||||
<div
|
||||
7
packages/redux-devtools-inspector/tsconfig.json
Normal file
7
packages/redux-devtools-inspector/tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"extends": "../../tsconfig.react.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
4
packages/redux-devtools-inspector/tsconfig.webpack.json
Normal file
4
packages/redux-devtools-inspector/tsconfig.webpack.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"include": ["webpack.config.ts"]
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
import * as path from 'path';
|
||||
import * as webpack from 'webpack';
|
||||
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const pkg = require('./package.json');
|
||||
|
||||
var pkg = require('./package.json');
|
||||
|
||||
var isProduction = process.env.NODE_ENV === 'production';
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
module.exports = {
|
||||
mode: process.env.NODE_ENV || 'development',
|
||||
40
yarn.lock
40
yarn.lock
|
|
@ -3082,6 +3082,16 @@
|
|||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/dateformat@^3.0.1":
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/dateformat/-/dateformat-3.0.1.tgz#98d747a2e5e9a56070c6bf14e27bff56204e34cc"
|
||||
integrity sha512-KlPPdikagvL6ELjWsljbyDIPzNCeliYkqRpI+zea99vBBbCIA5JNshZAwQKTON139c87y9qvTFVgkFd14rtS4g==
|
||||
|
||||
"@types/dragula@*", "@types/dragula@^3.7.0":
|
||||
version "3.7.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/dragula/-/dragula-3.7.0.tgz#62178f21c3896ab9823a33d08ed844ab9af496af"
|
||||
integrity sha512-Scr3lQ7pDmwic+I4qrzDEIfPVGUhc/qo8S0VJJ9v5pzTyIIJzAXrnFajjsMSL8J84VERIkZUh7wH6wYEisY+TA==
|
||||
|
||||
"@types/eslint-visitor-keys@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
|
||||
|
|
@ -3291,6 +3301,13 @@
|
|||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-dragula@^1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dragula/-/react-dragula-1.1.0.tgz#c7a6840891c52aa5007a8f8b87b31985fbc3c5b2"
|
||||
integrity sha512-wgRIVV2jo/Gria1PK3K26II7gfRD3VTcMfPYhL0CuIApSeon7xjBTj8Xs8Ln+Vbb/FuRKWfUaJXmF4R3KUGntA==
|
||||
dependencies:
|
||||
"@types/dragula" "*"
|
||||
|
||||
"@types/react-native@*":
|
||||
version "0.63.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.8.tgz#73ec087122c64c309eeaf150b565b8d755f0fb1f"
|
||||
|
|
@ -10861,7 +10878,7 @@ lodash.uniq@^4.5.0:
|
|||
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
|
||||
|
||||
lodash@^4.0.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, lodash@^4.8.0:
|
||||
lodash@^4.0.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0:
|
||||
version "4.17.19"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
|
||||
integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
|
||||
|
|
@ -13233,11 +13250,6 @@ react-color@^2.14.1:
|
|||
reactcss "^1.2.0"
|
||||
tinycolor2 "^1.4.1"
|
||||
|
||||
react-deep-force-update@^1.0.0:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz#3d2ae45c2c9040cbb1772be52f8ea1ade6ca2ee1"
|
||||
integrity sha512-WUSQJ4P/wWcusaH+zZmbECOk7H5N2pOIl0vzheeornkIMhu+qrNdGFm0bDZLCb0hSF0jf/kH1SgkNGfBdTc4wA==
|
||||
|
||||
react-dev-utils@^6.1.0:
|
||||
version "6.1.1"
|
||||
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-6.1.1.tgz#a07e3e8923c4609d9f27e5af5207e3ca20724895"
|
||||
|
|
@ -13399,14 +13411,6 @@ react-overlays@^4.1.0:
|
|||
uncontrollable "^7.0.0"
|
||||
warning "^4.0.3"
|
||||
|
||||
react-proxy@^1.1.7:
|
||||
version "1.1.8"
|
||||
resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
|
||||
integrity sha1-nb/Z2SdSjDqp9ETkVYw3gwq4wmo=
|
||||
dependencies:
|
||||
lodash "^4.6.1"
|
||||
react-deep-force-update "^1.0.0"
|
||||
|
||||
react-pure-render@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-pure-render/-/react-pure-render-1.0.2.tgz#9d8a928c7f2c37513c2d064e57b3e3c356e9fabb"
|
||||
|
|
@ -13482,14 +13486,6 @@ react-textarea-autosize@^7.0.4:
|
|||
"@babel/runtime" "^7.1.2"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
react-transform-hmr@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
|
||||
integrity sha1-4aQL0Krvxy6N/Xp82gmvhQZjl7s=
|
||||
dependencies:
|
||||
global "^4.3.0"
|
||||
react-proxy "^1.1.7"
|
||||
|
||||
react-transition-group@^2.0.0:
|
||||
version "2.9.0"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user