From ba7c5f763bea92c03791cabf9d327c8a6927320d Mon Sep 17 00:00:00 2001 From: sylenien Date: Fri, 23 Sep 2022 14:02:07 +0200 Subject: [PATCH] change(ui): fix margins --- .../components/Session_/Storage/Storage.js | 517 ++++++++++-------- 1 file changed, 284 insertions(+), 233 deletions(-) diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js index 95d97325f..605fcb446 100644 --- a/frontend/app/components/Session_/Storage/Storage.js +++ b/frontend/app/components/Session_/Storage/Storage.js @@ -2,11 +2,11 @@ import React from 'react'; import { connect } from 'react-redux'; import { hideHint } from 'Duck/components/player'; import { - connectPlayer, - selectStorageType, - STORAGE_TYPES, - selectStorageListNow, - selectStorageList, + connectPlayer, + selectStorageType, + STORAGE_TYPES, + selectStorageListNow, + selectStorageList, } from 'Player/store'; import { JSONTree, NoContent } from 'UI'; import { formatMs } from 'App/date'; @@ -22,266 +22,317 @@ import stl from './storage.module.css'; // const TABS = [ DIFF, STATE ].map(tab => ({ text: tab, key: tab })); function getActionsName(type) { - switch(type) { - case STORAGE_TYPES.MOBX: - return "MUTATIONS"; - case STORAGE_TYPES.VUEX: - return "MUTATIONS"; - default: - return "ACTIONS"; - } + switch (type) { + case STORAGE_TYPES.MOBX: + return 'MUTATIONS'; + case STORAGE_TYPES.VUEX: + return 'MUTATIONS'; + default: + return 'ACTIONS'; + } } -const PATH_BGS = ['255, 173, 173', '202, 255, 191', '155, 246, 255','255, 198, 255','160, 196, 255', '251, 248, 204', '253, 228, 207', '255, 207, 210', '241, 192, 232', '207, 186, 240', '163, 196, 243', '144, 219, 244', '142, 236, 245', '152, 245, 225', '185, 251, 192'] +const PATH_BGS = [ + '255, 173, 173', + '202, 255, 191', + '155, 246, 255', + '255, 198, 255', + '160, 196, 255', + '251, 248, 204', + '253, 228, 207', + '255, 207, 210', + '241, 192, 232', + '207, 186, 240', + '163, 196, 243', + '144, 219, 244', + '142, 236, 245', + '152, 245, 225', + '185, 251, 192', +]; -const buildBg = (shade) => `rgba(${shade}, 0.15)` +const buildBg = (shade) => `rgba(${shade}, 0.15)`; -@connectPlayer(state => ({ - type: selectStorageType(state), - list: selectStorageList(state), - listNow: selectStorageListNow(state), +@connectPlayer((state) => ({ + type: selectStorageType(state), + list: selectStorageList(state), + listNow: selectStorageListNow(state), })) -@connect(state => ({ - hintIsHidden: state.getIn(['components', 'player', 'hiddenHints', 'storage']), -}), { - hideHint -}) +@connect( + (state) => ({ + hintIsHidden: state.getIn(['components', 'player', 'hiddenHints', 'storage']), + }), + { + hideHint, + } +) //@withEnumToggle('activeTab', 'setActiveTab', DIFF) export default class Storage extends React.PureComponent { - pathShades = {} + pathShades = {}; - lastBtnRef = React.createRef() + lastBtnRef = React.createRef(); - focusNextButton() { - if (this.lastBtnRef.current) { - this.lastBtnRef.current.focus(); - } - } + focusNextButton() { + if (this.lastBtnRef.current) { + this.lastBtnRef.current.focus(); + } + } - componentDidMount() { - this.focusNextButton(); - } + componentDidMount() { + this.focusNextButton(); + } - componentDidUpdate(prevProps) { - if (prevProps.listNow.length !== this.props.listNow.length) { - this.focusNextButton(); - } - } + componentDidUpdate(prevProps) { + if (prevProps.listNow.length !== this.props.listNow.length) { + this.focusNextButton(); + } + } - renderDiff(item, prevItem) { - if (!prevItem) { - // we don't have state before first action - return ( -
- ) - } + renderDiff(item, prevItem) { + if (!prevItem) { + // we don't have state before first action + return
; + } - const stateDiff = diff(prevItem.state, item.state) + const stateDiff = diff(prevItem.state, item.state); - if (!stateDiff) { - return
No diff
- } + if (!stateDiff) { + return ( +
+ {' '} + No diff{' '} +
+ ); + } - return ( -
- {stateDiff.map((d, i) => this.renderDiffs(d, i))} -
- ); - } + return ( +
+ {stateDiff.map((d, i) => this.renderDiffs(d, i))} +
+ ); + } - renderDiffs(diff, i) { - const oldValue = diff.item ? JSON.stringify(diff.item.lhs) : JSON.stringify(diff.lhs) - const newValue = diff.item ? JSON.stringify(diff.item.rhs) : JSON.stringify(diff.rhs) - const [path, pathRoot] = this.createPathAndBg(diff) + renderDiffs(diff, i) { + const oldValue = diff.item ? JSON.stringify(diff.item.lhs) : JSON.stringify(diff.lhs); + const newValue = diff.item ? JSON.stringify(diff.item.rhs) : JSON.stringify(diff.rhs); + const [path, pathRoot] = this.createPathAndBg(diff); - console.log(this.pathShades[pathRoot]) - return ( -
- - {path} - {': '} - - - { oldValue || 'undefined' } - - {' -> '} - - { newValue || 'undefined'} - -
- ) - } + console.log(this.pathShades[pathRoot]); + return ( +
+ + {path} + {': '} + + {oldValue || 'undefined'} + {' -> '} + + {newValue || 'undefined'} + +
+ ); + } - createPathAndBg = (diff) => { - let path = []; - let pathRoot; + createPathAndBg = (diff) => { + let path = []; + let pathRoot; - if (diff.path) { - path = path.concat(diff.path); - pathRoot = diff.path[0] - if (!this.pathShades[pathRoot]) { - const randomShade = PATH_BGS[Math.floor(Math.random() * PATH_BGS.length)]; - this.pathShades[pathRoot] = buildBg(randomShade) - } - } - if (typeof(diff.index) !== 'undefined') { - path.push(diff.index); - } + if (diff.path) { + path = path.concat(diff.path); + pathRoot = diff.path[0]; + if (!this.pathShades[pathRoot]) { + const randomShade = PATH_BGS[Math.floor(Math.random() * PATH_BGS.length)]; + this.pathShades[pathRoot] = buildBg(randomShade); + } + } + if (typeof diff.index !== 'undefined') { + path.push(diff.index); + } - const pathStr = path.length ? path.join('.') : ''; - return [pathStr, pathRoot] -} + const pathStr = path.length ? path.join('.') : ''; + return [pathStr, pathRoot]; + }; - ensureString(actionType) { - if (typeof actionType === 'string') return actionType; - return "UNKNOWN"; - } + ensureString(actionType) { + if (typeof actionType === 'string') return actionType; + return 'UNKNOWN'; + } - goNext = () => { - const { list, listNow } = this.props; - jump(list[ listNow.length ].time, list[ listNow.length ]._index); - } + goNext = () => { + const { list, listNow } = this.props; + jump(list[listNow.length].time, list[listNow.length]._index); + }; + renderTab() { + const { listNow } = this.props; + if (listNow.length === 0) { + return 'Not initialized'; //? + } + return ; + } - renderTab () { - const { listNow } = this.props; - if (listNow.length === 0) { - return "Not initialized"; //? - } - return ; - } + renderItem(item, i, prevItem) { + const { type, listNow, list } = this.props; + let src; + let name; - renderItem(item, i, prevItem) { - const { type, listNow, list } = this.props; - let src; - let name; + switch (type) { + case STORAGE_TYPES.REDUX: + case STORAGE_TYPES.NGRX: + src = item.action; + name = src && src.type; + break; + case STORAGE_TYPES.VUEX: + src = item.mutation; + name = src && src.type; + break; + case STORAGE_TYPES.MOBX: + src = item.payload; + name = `@${item.type} ${src && src.type}`; + break; + case STORAGE_TYPES.ZUSTAND: + src = null; + name = item.mutation.join(''); + } - switch(type) { - case STORAGE_TYPES.REDUX: - case STORAGE_TYPES.NGRX: - src = item.action; - name = src && src.type; - break; - case STORAGE_TYPES.VUEX: - src = item.mutation; - name = src && src.type; - break; - case STORAGE_TYPES.MOBX: - src = item.payload; - name = `@${item.type} ${src && src.type}`; - break; - case STORAGE_TYPES.ZUSTAND: - src = null; - name = item.mutation.join('') - } + return ( +
+ {src === null ? ( +
{name}
+ ) : ( + <> + {this.renderDiff(item, prevItem)} +
+ +
+ + )} +
+ {i + 1 < listNow.length && ( + + )} + {i + 1 === listNow.length && i + 1 < list.length && ( + + )} + {typeof item.duration === 'number' && ( +
{formatMs(item.duration)}
+ )} +
+
+ ); + } - return ( -
- {src === null ? ( -
{name}
- ) : ( - <> - {this.renderDiff(item, prevItem)} -
- -
- - )} -
- { i + 1 < listNow.length && - - } - { i + 1 === listNow.length && i + 1 < list.length && - - } - { typeof item.duration === 'number' && -
- { formatMs(item.duration) } -
- } -
-
- ); - } + render() { + const { type, listNow, list, hintIsHidden } = this.props; - render() { - const { - type, - listNow, - list, - hintIsHidden, - } = this.props; - - const showStore = type !== STORAGE_TYPES.MOBX; - return ( - - - { list.length > 0 && -
- { showStore && -

- {"STORE"} -

- } -

- {getActionsName(type)} -

-
- } - - - + + {list.length > 0 && ( +
+ {showStore &&

{'STORE'}

} +

{getActionsName(type)}

+
+ )} + + + - {'Inspect your application state while you’re replaying your users sessions. OpenReplay supports '} - Redux{', '} - VueX{', '} - Pinia{', '} - Zustand{', '} - MobX{' and '} - NgRx. -

- + { + 'Inspect your application state while you’re replaying your users sessions. OpenReplay supports ' + } + + Redux + + {', '} + + VueX + + {', '} + + Pinia + + {', '} + + Zustand + + {', '} + + MobX + + {' and '} + + NgRx + + . +
+
+ - : null + ) : null } size="small" - show={ listNow.length === 0 } + show={listNow.length === 0} > - { showStore && -
- { listNow.length === 0 - ?
{ "Empty state." }
- : this.renderTab() - } -
- } -
- - { listNow.map((item, i) => this.renderItem(item, i, i > 0 ? listNow[i - 1] : undefined)) } - -
- - - - ); - } + {showStore && ( +
+ {listNow.length === 0 ? ( +
+ {'Empty state.'} +
+ ) : ( + this.renderTab() + )} +
+ )} +
+ + {listNow.map((item, i) => + this.renderItem(item, i, i > 0 ? listNow[i - 1] : undefined) + )} + +
+ + + + ); + } }