mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-27 00:19:55 +03:00
Fix linting
This commit is contained in:
parent
45ac42d3a6
commit
c212547f63
|
@ -32,9 +32,9 @@
|
||||||
"base16": "^1.0.0",
|
"base16": "^1.0.0",
|
||||||
"chokidar": "^1.6.1",
|
"chokidar": "^1.6.1",
|
||||||
"clean-webpack-plugin": "^0.1.8",
|
"clean-webpack-plugin": "^0.1.8",
|
||||||
"eslint": "^3.9.1",
|
"eslint": "^4.0.0",
|
||||||
"eslint-loader": "^1.2.1",
|
"eslint-loader": "^1.2.1",
|
||||||
"eslint-plugin-babel": "^3.1.0",
|
"eslint-plugin-babel": "^4.0.0",
|
||||||
"eslint-plugin-react": "^6.6.0",
|
"eslint-plugin-react": "^6.6.0",
|
||||||
"export-files-webpack-plugin": "0.0.1",
|
"export-files-webpack-plugin": "0.0.1",
|
||||||
"html-webpack-plugin": "^2.8.1",
|
"html-webpack-plugin": "^2.8.1",
|
||||||
|
|
|
@ -77,8 +77,8 @@ export default class ActionList extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { styling, actions, actionIds, isWideLayout, onToggleAction, skippedActionIds,
|
const { styling, actions, actionIds, isWideLayout, onToggleAction, skippedActionIds,
|
||||||
selectedActionId, startActionId, onSelect, onSearch, searchValue, currentActionId,
|
selectedActionId, startActionId, onSelect, onSearch, searchValue, currentActionId,
|
||||||
hideMainButtons, hideActionButtons, onCommit, onSweep, onJumpToState } = this.props;
|
hideMainButtons, hideActionButtons, onCommit, onSweep, onJumpToState } = this.props;
|
||||||
const lowerSearchValue = searchValue && searchValue.toLowerCase();
|
const lowerSearchValue = searchValue && searchValue.toLowerCase();
|
||||||
const filteredActionIds = searchValue ? actionIds.filter(
|
const filteredActionIds = searchValue ? actionIds.filter(
|
||||||
id => actions[id].action.type.toLowerCase().indexOf(lowerSearchValue) !== -1
|
id => actions[id].action.type.toLowerCase().indexOf(lowerSearchValue) !== -1
|
||||||
|
@ -86,36 +86,36 @@ export default class ActionList extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key='actionList'
|
<div key='actionList'
|
||||||
{...styling(['actionList', isWideLayout && 'actionListWide'], isWideLayout)}>
|
{...styling(['actionList', isWideLayout && 'actionListWide'], isWideLayout)}>
|
||||||
<ActionListHeader styling={styling}
|
<ActionListHeader styling={styling}
|
||||||
onSearch={onSearch}
|
onSearch={onSearch}
|
||||||
onCommit={onCommit}
|
onCommit={onCommit}
|
||||||
onSweep={onSweep}
|
onSweep={onSweep}
|
||||||
hideMainButtons={hideMainButtons}
|
hideMainButtons={hideMainButtons}
|
||||||
hasSkippedActions={skippedActionIds.length > 0}
|
hasSkippedActions={skippedActionIds.length > 0}
|
||||||
hasStagedActions={actionIds.length > 1} />
|
hasStagedActions={actionIds.length > 1} />
|
||||||
<div {...styling('actionListRows')} ref={this.getRef}>
|
<div {...styling('actionListRows')} ref={this.getRef}>
|
||||||
{filteredActionIds.map(actionId =>
|
{filteredActionIds.map(actionId =>
|
||||||
<ActionListRow key={actionId}
|
(<ActionListRow key={actionId}
|
||||||
styling={styling}
|
styling={styling}
|
||||||
actionId={actionId}
|
actionId={actionId}
|
||||||
isInitAction={!actionId}
|
isInitAction={!actionId}
|
||||||
isSelected={
|
isSelected={
|
||||||
startActionId !== null &&
|
startActionId !== null &&
|
||||||
actionId >= startActionId && actionId <= selectedActionId ||
|
actionId >= startActionId && actionId <= selectedActionId ||
|
||||||
actionId === selectedActionId
|
actionId === selectedActionId
|
||||||
}
|
}
|
||||||
isInFuture={
|
isInFuture={
|
||||||
actionIds.indexOf(actionId) > actionIds.indexOf(currentActionId)
|
actionIds.indexOf(actionId) > actionIds.indexOf(currentActionId)
|
||||||
}
|
}
|
||||||
onSelect={(e) => onSelect(e, actionId)}
|
onSelect={(e) => onSelect(e, actionId)}
|
||||||
timestamps={getTimestamps(actions, actionIds, actionId)}
|
timestamps={getTimestamps(actions, actionIds, actionId)}
|
||||||
action={actions[actionId].action}
|
action={actions[actionId].action}
|
||||||
onToggleClick={() => onToggleAction(actionId)}
|
onToggleClick={() => onToggleAction(actionId)}
|
||||||
onJumpClick={() => onJumpToState(actionId)}
|
onJumpClick={() => onJumpToState(actionId)}
|
||||||
onCommitClick={() => onCommit(actionId)}
|
onCommitClick={() => onCommit(actionId)}
|
||||||
hideActionButtons={hideActionButtons}
|
hideActionButtons={hideActionButtons}
|
||||||
isSkipped={skippedActionIds.indexOf(actionId) !== -1} />
|
isSkipped={skippedActionIds.indexOf(actionId) !== -1} />)
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -8,20 +8,20 @@ const getActiveButtons = (hasSkippedActions) => [
|
||||||
|
|
||||||
const ActionListHeader =
|
const ActionListHeader =
|
||||||
({
|
({
|
||||||
styling, onSearch, hasSkippedActions, hasStagedActions, onCommit, onSweep, hideMainButtons
|
styling, onSearch, hasSkippedActions, hasStagedActions, onCommit, onSweep, hideMainButtons
|
||||||
}) =>
|
}) =>
|
||||||
<div {...styling('actionListHeader')}>
|
(<div {...styling('actionListHeader')}>
|
||||||
<input
|
<input
|
||||||
{...styling('actionListHeaderSearch')}
|
{...styling('actionListHeaderSearch')}
|
||||||
onChange={e => onSearch(e.target.value)}
|
onChange={e => onSearch(e.target.value)}
|
||||||
placeholder='filter...'
|
placeholder='filter...'
|
||||||
/>
|
/>
|
||||||
{!hideMainButtons &&
|
{!hideMainButtons &&
|
||||||
<div {...styling('actionListHeaderWrapper')}>
|
<div {...styling('actionListHeaderWrapper')}>
|
||||||
<RightSlider shown={hasStagedActions} styling={styling}>
|
<RightSlider shown={hasStagedActions} styling={styling}>
|
||||||
<div {...styling('actionListHeaderSelector')}>
|
<div {...styling('actionListHeaderSelector')}>
|
||||||
{getActiveButtons(hasSkippedActions).map(btn =>
|
{getActiveButtons(hasSkippedActions).map(btn =>
|
||||||
<div
|
(<div
|
||||||
key={btn}
|
key={btn}
|
||||||
onClick={() => ({
|
onClick={() => ({
|
||||||
Commit: onCommit,
|
Commit: onCommit,
|
||||||
|
@ -31,13 +31,13 @@ const ActionListHeader =
|
||||||
'selectorButton',
|
'selectorButton',
|
||||||
'selectorButtonSmall'], false, true)}
|
'selectorButtonSmall'], false, true)}
|
||||||
>
|
>
|
||||||
{btn}
|
{btn}
|
||||||
</div>
|
</div>)
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</RightSlider>
|
</RightSlider>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>;
|
</div>);
|
||||||
|
|
||||||
export default ActionListHeader;
|
export default ActionListHeader;
|
||||||
|
|
|
@ -28,7 +28,7 @@ export default class ActionListRow extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { styling, isSelected, action, actionId, isInitAction, onSelect,
|
const { styling, isSelected, action, actionId, isInitAction, onSelect,
|
||||||
timestamps, isSkipped, isInFuture, hideActionButtons } = this.props;
|
timestamps, isSkipped, isInFuture, hideActionButtons } = this.props;
|
||||||
const { hover } = this.state;
|
const { hover } = this.state;
|
||||||
const timeDelta = timestamps.current - timestamps.previous;
|
const timeDelta = timestamps.current - timestamps.previous;
|
||||||
const showButtons = hover && !isInitAction || isSkipped;
|
const showButtons = hover && !isInitAction || isSkipped;
|
||||||
|
@ -43,50 +43,50 @@ export default class ActionListRow extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div onClick={onSelect}
|
<div onClick={onSelect}
|
||||||
onMouseEnter={!hideActionButtons && this.handleMouseEnter}
|
onMouseEnter={!hideActionButtons && this.handleMouseEnter}
|
||||||
onMouseLeave={!hideActionButtons && this.handleMouseLeave}
|
onMouseLeave={!hideActionButtons && this.handleMouseLeave}
|
||||||
onMouseDown={this.handleMouseDown}
|
onMouseDown={this.handleMouseDown}
|
||||||
onMouseUp={this.handleMouseEnter}
|
onMouseUp={this.handleMouseEnter}
|
||||||
data-id={actionId}
|
data-id={actionId}
|
||||||
{...styling([
|
{...styling([
|
||||||
'actionListItem',
|
'actionListItem',
|
||||||
isSelected && 'actionListItemSelected',
|
isSelected && 'actionListItemSelected',
|
||||||
isSkipped && 'actionListItemSkipped',
|
isSkipped && 'actionListItemSkipped',
|
||||||
isInFuture && 'actionListFromFuture'
|
isInFuture && 'actionListFromFuture'
|
||||||
], isSelected, action)}>
|
], isSelected, action)}>
|
||||||
<div {...styling(['actionListItemName', isSkipped && 'actionListItemNameSkipped'])}>
|
<div {...styling(['actionListItemName', isSkipped && 'actionListItemNameSkipped'])}>
|
||||||
{actionType}
|
{actionType}
|
||||||
</div>
|
</div>
|
||||||
{hideActionButtons ?
|
{hideActionButtons ?
|
||||||
<RightSlider styling={styling} shown>
|
<RightSlider styling={styling} shown>
|
||||||
<div {...styling('actionListItemTime')}>
|
|
||||||
{timeDelta === 0 ? '+00:00:00' :
|
|
||||||
dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
|
|
||||||
</div>
|
|
||||||
</RightSlider>
|
|
||||||
:
|
|
||||||
<div {...styling('actionListItemButtons')}>
|
|
||||||
<RightSlider styling={styling} shown={!showButtons} rotate>
|
|
||||||
<div {...styling('actionListItemTime')}>
|
<div {...styling('actionListItemTime')}>
|
||||||
{timeDelta === 0 ? '+00:00:00' :
|
{timeDelta === 0 ? '+00:00:00' :
|
||||||
dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
|
dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
|
||||||
</div>
|
</div>
|
||||||
</RightSlider>
|
</RightSlider>
|
||||||
<RightSlider styling={styling} shown={showButtons} rotate>
|
:
|
||||||
<div {...styling('actionListItemSelector')}>
|
<div {...styling('actionListItemButtons')}>
|
||||||
{[BUTTON_JUMP, BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
|
<RightSlider styling={styling} shown={!showButtons} rotate>
|
||||||
|
<div {...styling('actionListItemTime')}>
|
||||||
|
{timeDelta === 0 ? '+00:00:00' :
|
||||||
|
dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
|
||||||
|
</div>
|
||||||
|
</RightSlider>
|
||||||
|
<RightSlider styling={styling} shown={showButtons} rotate>
|
||||||
|
<div {...styling('actionListItemSelector')}>
|
||||||
|
{[BUTTON_JUMP, BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
|
||||||
<div key={btn}
|
<div key={btn}
|
||||||
onClick={this.handleButtonClick.bind(this, btn)}
|
onClick={this.handleButtonClick.bind(this, btn)}
|
||||||
{...styling([
|
{...styling([
|
||||||
'selectorButton',
|
'selectorButton',
|
||||||
isButtonSelected(btn) && 'selectorButtonSelected',
|
isButtonSelected(btn) && 'selectorButtonSelected',
|
||||||
'selectorButtonSmall'], isButtonSelected(btn), true)}>
|
'selectorButtonSmall'], isButtonSelected(btn), true)}>
|
||||||
{btn}
|
{btn}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</RightSlider>
|
</RightSlider>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -82,10 +82,10 @@ class ActionPreview extends Component {
|
||||||
{key}
|
{key}
|
||||||
</span>
|
</span>
|
||||||
<span {...styling('treeItemPin')}
|
<span {...styling('treeItemPin')}
|
||||||
onClick={() => onInspectPath([
|
onClick={() => onInspectPath([
|
||||||
...inspectedPath.slice(0, inspectedPath.length - 1),
|
...inspectedPath.slice(0, inspectedPath.length - 1),
|
||||||
...[key, ...rest].reverse()
|
...[key, ...rest].reverse()
|
||||||
])}>
|
])}>
|
||||||
{'(pin)'}
|
{'(pin)'}
|
||||||
</span>
|
</span>
|
||||||
{!expanded && ': '}
|
{!expanded && ': '}
|
||||||
|
|
|
@ -2,39 +2,39 @@ import React from 'react';
|
||||||
|
|
||||||
const ActionPreviewHeader =
|
const ActionPreviewHeader =
|
||||||
({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) =>
|
({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) =>
|
||||||
<div key='previewHeader' {...styling('previewHeader')}>
|
(<div key='previewHeader' {...styling('previewHeader')}>
|
||||||
<div {...styling('tabSelector')}>
|
<div {...styling('tabSelector')}>
|
||||||
{tabs.map(tab =>
|
{tabs.map(tab =>
|
||||||
<div onClick={() => onSelectTab(tab.name)}
|
(<div onClick={() => onSelectTab(tab.name)}
|
||||||
key={tab.name}
|
key={tab.name}
|
||||||
{...styling([
|
{...styling([
|
||||||
'selectorButton',
|
'selectorButton',
|
||||||
tab.name === tabName && 'selectorButtonSelected'
|
tab.name === tabName && 'selectorButtonSelected'
|
||||||
], tab.name === tabName)}>
|
], tab.name === tabName)}>
|
||||||
{tab.name}
|
{tab.name}
|
||||||
</div>
|
</div>)
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div {...styling('inspectedPath')}>
|
<div {...styling('inspectedPath')}>
|
||||||
{inspectedPath.length ?
|
{inspectedPath.length ?
|
||||||
<span {...styling('inspectedPathKey')}>
|
<span {...styling('inspectedPathKey')}>
|
||||||
<a onClick={() => onInspectPath([])}
|
<a onClick={() => onInspectPath([])}
|
||||||
{...styling('inspectedPathKeyLink')}>
|
{...styling('inspectedPathKeyLink')}>
|
||||||
{tabName}
|
{tabName}
|
||||||
</a>
|
</a>
|
||||||
</span> : tabName
|
</span> : tabName
|
||||||
}
|
}
|
||||||
{inspectedPath.map((key, idx) =>
|
{inspectedPath.map((key, idx) =>
|
||||||
idx === inspectedPath.length - 1 ? <span key={key}>{key}</span> :
|
idx === inspectedPath.length - 1 ? <span key={key}>{key}</span> :
|
||||||
<span key={key}
|
<span key={key}
|
||||||
{...styling('inspectedPathKey')}>
|
{...styling('inspectedPathKey')}>
|
||||||
<a onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
|
<a onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
|
||||||
{...styling('inspectedPathKeyLink')}>
|
{...styling('inspectedPathKeyLink')}>
|
||||||
{key}
|
{key}
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</div>);
|
||||||
|
|
||||||
export default ActionPreviewHeader;
|
export default ActionPreviewHeader;
|
||||||
|
|
|
@ -32,7 +32,7 @@ function getFromState(actionIndex, stagedActionIds, computedStates, monitorState
|
||||||
|
|
||||||
function createIntermediateState(props, monitorState) {
|
function createIntermediateState(props, monitorState) {
|
||||||
const { supportImmutable, computedStates, stagedActionIds,
|
const { supportImmutable, computedStates, stagedActionIds,
|
||||||
actionsById: actions, diffObjectHash, diffPropertyFilter } = props;
|
actionsById: actions, diffObjectHash, diffPropertyFilter } = props;
|
||||||
const { inspectedStatePath, inspectedActionPath } = monitorState;
|
const { inspectedStatePath, inspectedActionPath } = monitorState;
|
||||||
const currentActionId = getCurrentActionId(props, monitorState);
|
const currentActionId = getCurrentActionId(props, monitorState);
|
||||||
const currentAction = actions[currentActionId] && actions[currentActionId].action;
|
const currentAction = actions[currentActionId] && actions[currentActionId].action;
|
||||||
|
@ -171,31 +171,31 @@ export default class DevtoolsInspector extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key='inspector'
|
<div key='inspector'
|
||||||
ref='inspector'
|
ref='inspector'
|
||||||
{...styling(['inspector', isWideLayout && 'inspectorWide'], isWideLayout)}>
|
{...styling(['inspector', isWideLayout && 'inspectorWide'], isWideLayout)}>
|
||||||
<ActionList {...{
|
<ActionList {...{
|
||||||
actions, actionIds, isWideLayout, searchValue, selectedActionId, startActionId,
|
actions, actionIds, isWideLayout, searchValue, selectedActionId, startActionId,
|
||||||
skippedActionIds, draggableActions, hideMainButtons, hideActionButtons, styling
|
skippedActionIds, draggableActions, hideMainButtons, hideActionButtons, styling
|
||||||
}}
|
}}
|
||||||
onSearch={this.handleSearch}
|
onSearch={this.handleSearch}
|
||||||
onSelect={this.handleSelectAction}
|
onSelect={this.handleSelectAction}
|
||||||
onToggleAction={this.handleToggleAction}
|
onToggleAction={this.handleToggleAction}
|
||||||
onJumpToState={this.handleJumpToState}
|
onJumpToState={this.handleJumpToState}
|
||||||
onCommit={this.handleCommit}
|
onCommit={this.handleCommit}
|
||||||
onSweep={this.handleSweep}
|
onSweep={this.handleSweep}
|
||||||
onReorderAction={this.handleReorderAction}
|
onReorderAction={this.handleReorderAction}
|
||||||
currentActionId={actionIds[currentStateIndex]}
|
currentActionId={actionIds[currentStateIndex]}
|
||||||
lastActionId={getLastActionId(this.props)} />
|
lastActionId={getLastActionId(this.props)} />
|
||||||
<ActionPreview {...{
|
<ActionPreview {...{
|
||||||
base16Theme, invertTheme, isWideLayout, tabs, tabName, delta, error, nextState,
|
base16Theme, invertTheme, isWideLayout, tabs, tabName, delta, error, nextState,
|
||||||
computedStates, action, actions, selectedActionId, startActionId, dataTypeKey
|
computedStates, action, actions, selectedActionId, startActionId, dataTypeKey
|
||||||
}}
|
}}
|
||||||
monitorState={this.props.monitorState}
|
monitorState={this.props.monitorState}
|
||||||
updateMonitorState={this.updateMonitorState}
|
updateMonitorState={this.updateMonitorState}
|
||||||
styling={styling}
|
styling={styling}
|
||||||
onInspectPath={this.handleInspectPath.bind(this, inspectedPathType)}
|
onInspectPath={this.handleInspectPath.bind(this, inspectedPathType)}
|
||||||
inspectedPath={monitorState[inspectedPathType]}
|
inspectedPath={monitorState[inspectedPathType]}
|
||||||
onSelectTab={this.handleSelectTab} />
|
onSelectTab={this.handleSelectTab} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
|
|
||||||
const RightSlider = ({ styling, shown, children, rotate }) =>
|
const RightSlider = ({ styling, shown, children, rotate }) =>
|
||||||
<div {...styling([
|
(<div {...styling([
|
||||||
'rightSlider',
|
'rightSlider',
|
||||||
shown && 'rightSliderShown',
|
shown && 'rightSliderShown',
|
||||||
rotate && 'rightSliderRotate',
|
rotate && 'rightSliderRotate',
|
||||||
rotate && shown && 'rightSliderRotateShown'
|
rotate && shown && 'rightSliderRotateShown'
|
||||||
])}>
|
])}>
|
||||||
{children}
|
{children}
|
||||||
</div>;
|
</div>);
|
||||||
|
|
||||||
RightSlider.propTypes = {
|
RightSlider.propTypes = {
|
||||||
shown: PropTypes.bool
|
shown: PropTypes.bool
|
||||||
|
|
|
@ -6,13 +6,13 @@ import getJsonTreeTheme from './getJsonTreeTheme';
|
||||||
const ActionTab = ({
|
const ActionTab = ({
|
||||||
action, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout
|
action, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout
|
||||||
}) =>
|
}) =>
|
||||||
<JSONTree
|
(<JSONTree
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
theme={getJsonTreeTheme(base16Theme)}
|
theme={getJsonTreeTheme(base16Theme)}
|
||||||
data={action}
|
data={action}
|
||||||
getItemString={(type, data) => getItemString(styling, type, data, dataTypeKey, isWideLayout)}
|
getItemString={(type, data) => getItemString(styling, type, data, dataTypeKey, isWideLayout)}
|
||||||
invertTheme={invertTheme}
|
invertTheme={invertTheme}
|
||||||
hideRoot
|
hideRoot
|
||||||
/>;
|
/>);
|
||||||
|
|
||||||
export default ActionTab;
|
export default ActionTab;
|
||||||
|
|
|
@ -2,8 +2,8 @@ import React from 'react';
|
||||||
import JSONDiff from './JSONDiff';
|
import JSONDiff from './JSONDiff';
|
||||||
|
|
||||||
const DiffTab = ({ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }) =>
|
const DiffTab = ({ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }) =>
|
||||||
<JSONDiff
|
(<JSONDiff
|
||||||
{...{ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }}
|
{...{ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }}
|
||||||
/>;
|
/>);
|
||||||
|
|
||||||
export default DiffTab;
|
export default DiffTab;
|
||||||
|
|
|
@ -70,14 +70,14 @@ export default class JSONDiff extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<JSONTree {...props}
|
<JSONTree {...props}
|
||||||
theme={getJsonTreeTheme(base16Theme)}
|
theme={getJsonTreeTheme(base16Theme)}
|
||||||
data={this.state.data}
|
data={this.state.data}
|
||||||
getItemString={this.getItemString}
|
getItemString={this.getItemString}
|
||||||
valueRenderer={this.valueRenderer}
|
valueRenderer={this.valueRenderer}
|
||||||
postprocessValue={prepareDelta}
|
postprocessValue={prepareDelta}
|
||||||
isCustomNode={Array.isArray}
|
isCustomNode={Array.isArray}
|
||||||
shouldExpandNode={expandFirstLevel}
|
shouldExpandNode={expandFirstLevel}
|
||||||
hideRoot />
|
hideRoot />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,13 +6,13 @@ import getJsonTreeTheme from './getJsonTreeTheme';
|
||||||
const StateTab = ({
|
const StateTab = ({
|
||||||
nextState, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout
|
nextState, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout
|
||||||
}) =>
|
}) =>
|
||||||
<JSONTree
|
(<JSONTree
|
||||||
labelRenderer={labelRenderer}
|
labelRenderer={labelRenderer}
|
||||||
theme={getJsonTreeTheme(base16Theme)}
|
theme={getJsonTreeTheme(base16Theme)}
|
||||||
data={nextState}
|
data={nextState}
|
||||||
getItemString={(type, data) => getItemString(styling, type, data, dataTypeKey, isWideLayout)}
|
getItemString={(type, data) => getItemString(styling, type, data, dataTypeKey, isWideLayout)}
|
||||||
invertTheme={invertTheme}
|
invertTheme={invertTheme}
|
||||||
hideRoot
|
hideRoot
|
||||||
/>;
|
/>);
|
||||||
|
|
||||||
export default StateTab;
|
export default StateTab;
|
||||||
|
|
|
@ -61,10 +61,10 @@ function getText(type, data, isWideLayout, isDiff) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const getItemString = (styling, type, data, dataTypeKey, isWideLayout, isDiff) =>
|
const getItemString = (styling, type, data, dataTypeKey, isWideLayout, isDiff) =>
|
||||||
<span {...styling('treeItemHint')}>
|
(<span {...styling('treeItemHint')}>
|
||||||
{data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
|
{data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
|
||||||
{dataTypeKey && data[dataTypeKey] ? data[dataTypeKey] + ' ' : ''}
|
{dataTypeKey && data[dataTypeKey] ? data[dataTypeKey] + ' ' : ''}
|
||||||
{getText(type, data, isWideLayout, isDiff)}
|
{getText(type, data, isWideLayout, isDiff)}
|
||||||
</span>;
|
</span>);
|
||||||
|
|
||||||
export default getItemString;
|
export default getItemString;
|
||||||
|
|
|
@ -16,24 +16,24 @@ function iterateToKey(obj, key) { // maybe there's a better way, dunno
|
||||||
|
|
||||||
export default function getInspectedState(state, path, convertImmutable) {
|
export default function getInspectedState(state, path, convertImmutable) {
|
||||||
state = path && path.length ?
|
state = path && path.length ?
|
||||||
{
|
{
|
||||||
[path[path.length - 1]]: path.reduce(
|
[path[path.length - 1]]: path.reduce(
|
||||||
(s, key) => {
|
(s, key) => {
|
||||||
if (!s) {
|
if (!s) {
|
||||||
return s;
|
return s;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (Iterable.isAssociative(s)) {
|
if (Iterable.isAssociative(s)) {
|
||||||
return s.get(key);
|
return s.get(key);
|
||||||
} else if (isIterable(s)) {
|
} else if (isIterable(s)) {
|
||||||
return iterateToKey(s, key);
|
return iterateToKey(s, key);
|
||||||
}
|
}
|
||||||
|
|
||||||
return s[key];
|
return s[key];
|
||||||
},
|
},
|
||||||
state
|
state
|
||||||
)
|
)
|
||||||
} : state;
|
} : state;
|
||||||
|
|
||||||
if (convertImmutable) {
|
if (convertImmutable) {
|
||||||
try {
|
try {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user