Browse Source

feat: add tool bar for Console component

master
smallstonesk 4 years ago
parent
commit
b84f7fb046
  1. 10
      packages/core/src/components/console/index.module.less
  2. 98
      packages/core/src/components/console/index.tsx

10
packages/core/src/components/console/index.module.less

@ -39,4 +39,14 @@
} }
} }
} }
.toolBar {
display: flex;
flex-direction: row;
.levels {
margin-left: 4px;
width: 150px;
}
}
} }

98
packages/core/src/components/console/index.tsx

@ -1,6 +1,9 @@
import React, { import React, {
useRef,
useState, useState,
useEffect useEffect,
useCallback,
ChangeEvent
} from 'react'; } from 'react';
import styles from './index.module.less'; import styles from './index.module.less';
@ -9,17 +12,31 @@ import {
InfoCircleOutlined, InfoCircleOutlined,
WarningOutlined, WarningOutlined,
BugOutlined, BugOutlined,
CloseCircleOutlined CloseCircleOutlined,
ClearOutlined,
FilterOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Tabs } from 'antd'; import { Button, Input, Select, Tabs } from 'antd';
interface ILog { interface ILog {
type: string; type: string;
data: any[]; data: any[];
strVal: string;
} }
const isPlainObject = (value: any): boolean => { const Helper = {
return typeof value === 'object' && value !== null; isPlainObject(value: any): boolean {
return typeof value === 'object' && value !== null;
},
getArgsToString(args: any[]): string {
return args.map(o => {
if (Helper.isPlainObject(o)) {
return JSON.stringify(o);
} else {
return o;
}
}).join(' ');
}
} }
const hijackMap: { [key: string]: any } = { const hijackMap: { [key: string]: any } = {
@ -61,7 +78,10 @@ const hijackMap: { [key: string]: any } = {
} }
const MyConsole: React.FC = () => { const MyConsole: React.FC = () => {
const [filter, setFilter] = useState('');
const [level, setLevel] = useState('all');
const [logList, setLogList] = useState<ILog[]>([]); const [logList, setLogList] = useState<ILog[]>([]);
const cache = useRef<{ allLogs: ILog[] }>({ allLogs: [] });
useEffect(() => { useEffect(() => {
hijackConsole(); hijackConsole();
@ -70,12 +90,32 @@ const MyConsole: React.FC = () => {
}; };
}, [logList]); }, [logList]);
useEffect(() => {
const filteredLogs = cache.current.allLogs
.filter(log => {
if (level === 'all') {
return true;
} else {
return log.type === level;
}
})
.filter(log => {
return log.strVal.indexOf(filter) > -1;
});
setLogList(filteredLogs);
}, [filter, level]);
const hijackConsole = () => { const hijackConsole = () => {
Object.keys(hijackMap).forEach(method => { Object.keys(hijackMap).forEach(method => {
// @ts-ignore // @ts-ignore
window.console[method] = (...args: any[]) => { window.console[method] = (...args: any[]) => {
hijackMap[method].originMethod(...args); hijackMap[method].originMethod(...args);
setLogList([...logList, { type: method, data: args }]); cache.current.allLogs = logList.concat({
type: method,
data: args,
strVal: Helper.getArgsToString(args)
});
setLogList(cache.current.allLogs);
}; };
}); });
} }
@ -87,7 +127,42 @@ const MyConsole: React.FC = () => {
}); });
}; };
// 根据不同console类型展示不同的样式 const onChangeFilter = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
setFilter(evt.target.value);
}, []);
const onChangeLevel = useCallback((level: string) => {
setLevel(level);
}, []);
const onClickClear = useCallback(() => {
setLogList([]);
cache.current.allLogs = [];
}, []);
const renderToolBar = () => {
return (
<div className={styles.toolBar}>
<Input
allowClear={true}
placeholder={'过滤'}
prefix={<FilterOutlined />}
onChange={onChangeFilter}
/>
<Select className={styles.levels} defaultValue={'all'} onChange={onChangeLevel}>
{['all', 'info', 'warn', 'error', 'debug'].map(method => (
<Select.Option key={method} value={method}>
{method}
</Select.Option>
))}
</Select>
<Button type={'link'} onClick={onClickClear}>
<ClearOutlined />
</Button>
</div>
);
};
const renderLogPanel = (logList: ILog[]) => { const renderLogPanel = (logList: ILog[]) => {
return ( return (
<div className={styles.logPanel}> <div className={styles.logPanel}>
@ -99,26 +174,23 @@ const MyConsole: React.FC = () => {
borderTopColor: borderColor, borderTopColor: borderColor,
borderBottomColor: borderColor borderBottomColor: borderColor
}; };
const showText = log.data.map(o => {
return isPlainObject(o) ? JSON.stringify(log.data, null, 2) : o;
}).join(' ');
// TODO: use react-json-view to render object // TODO: use react-json-view to render object
return ( return (
<div key={index} className={styles.logLine} style={logLineStyle}> <div key={index} className={styles.logLine} style={logLineStyle}>
{icon} {icon}
<div className={styles.logText}> <div className={styles.logText}>
{showText} {log.strVal}
</div> </div>
</div> </div>
); );
})} })}
</div> </div>
); );
} };
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Tabs type={'card'}> <Tabs type={'card'} tabBarExtraContent={renderToolBar()}>
<Tabs.TabPane tab={'控制台'} key={'log'}> <Tabs.TabPane tab={'控制台'} key={'log'}>
{renderLogPanel(logList)} {renderLogPanel(logList)}
</Tabs.TabPane> </Tabs.TabPane>

Loading…
Cancel
Save