Browse Source

#64 feat: Console component supports rendering link and object

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

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

@ -32,10 +32,18 @@
height: 1rem; height: 1rem;
} }
.logText { .logContent {
margin-left: 8px; margin-left: 8px;
min-height: 18px; min-height: 18px;
padding: 0.4rem 1.5rem 0.4rem 0px; padding: 0.4rem 1.5rem 0.4rem 0px;
word-break: break-all;
:global {
.react-json-view {
display: inline-block;
vertical-align: top;
}
}
} }
} }
} }

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

@ -16,6 +16,7 @@ import {
ClearOutlined, ClearOutlined,
FilterOutlined FilterOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import JsonView from 'react-json-view';
import { Button, Input, Select, Tabs } from 'antd'; import { Button, Input, Select, Tabs } from 'antd';
interface ILog { interface ILog {
@ -24,7 +25,15 @@ interface ILog {
strVal: string; strVal: string;
} }
const linkRegex = /((?:www|https?:)+[^\s]+)/g;
const Helper = { const Helper = {
isLink(value: string) {
return linkRegex.test(value);
},
extractLinks(value: string) {
return value.split(linkRegex);
},
isPlainObject(value: any): boolean { isPlainObject(value: any): boolean {
return typeof value === 'object' && value !== null; return typeof value === 'object' && value !== null;
}, },
@ -77,6 +86,81 @@ const hijackMap: { [key: string]: any } = {
} }
} }
const LogLine: React.FC<ILog> = (props) => {
const { type, data } = props;
const renderLink = (data: string) => {
return <a href={data} target={'_blank'}>{data}</a>
};
const renderText = (data: any) => {
if(typeof data !== 'string') {
return data;
} else {
const arr = data.split(linkRegex);
return arr.map((str, index) => {
return (
<span key={index}>
{Helper.isLink(str) ? renderLink(str) : str}
</span>
);
})
}
};
const renderJson = (data: Object) => {
return (
<JsonView
name={null}
indentWidth={2}
theme={'monokai'}
collapsed={false}
enableClipboard={false}
displayDataTypes={false}
displayObjectSize={false}
src={data}
/>
);
};
const {
icon,
textColor,
bgColor,
borderColor
} = hijackMap[type];
const logLineStyle = {
color: textColor,
backgroundColor: bgColor,
borderTopColor: borderColor,
borderBottomColor: borderColor
};
return (
<div className={styles.logLine} style={logLineStyle}>
{icon}
<div className={styles.logContent}>
{data.map((item: any, index: number) => {
let content = null;
if (Helper.isPlainObject(item)) {
content = renderJson(item);
} else {
content = renderText(item);
}
const marginLeft = index === 0 ? 0 : 6;
return (
<span key={index} style={{ marginLeft }}>
{content}
</span>
);
})}
</div>
</div>
);
};
const MyConsole: React.FC = () => { const MyConsole: React.FC = () => {
const [filter, setFilter] = useState(''); const [filter, setFilter] = useState('');
const [level, setLevel] = useState('all'); const [level, setLevel] = useState('all');
@ -166,24 +250,9 @@ const MyConsole: React.FC = () => {
const renderLogPanel = (logList: ILog[]) => { const renderLogPanel = (logList: ILog[]) => {
return ( return (
<div className={styles.logPanel}> <div className={styles.logPanel}>
{logList.map((log: ILog, index: number) => { {logList.map((log: ILog, index: number) => (
const { icon, textColor, bgColor, borderColor } = hijackMap[log.type]; <LogLine key={index} {...log} />
const logLineStyle = { ))}
color: textColor,
backgroundColor: bgColor,
borderTopColor: borderColor,
borderBottomColor: borderColor
};
// TODO: use react-json-view to render object
return (
<div key={index} className={styles.logLine} style={logLineStyle}>
{icon}
<div className={styles.logText}>
{log.strVal}
</div>
</div>
);
})}
</div> </div>
); );
}; };

Loading…
Cancel
Save