Fix linting

This commit is contained in:
Zalmoxisus 2018-12-21 23:54:04 +02:00
parent 45ac42d3a6
commit c212547f63
15 changed files with 1521 additions and 216 deletions

View File

@ -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",

View File

@ -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>

View File

@ -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;

View File

@ -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>
); );

View File

@ -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 && ': '}

View File

@ -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;

View File

@ -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>
); );
} }

View File

@ -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

View File

@ -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;

View File

@ -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;

View File

@ -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 />
); );
} }

View File

@ -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;

View File

@ -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;

View File

@ -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 {

1407
yarn.lock

File diff suppressed because it is too large Load Diff