[inula-dev-tools]<feat> 信息组件合入
This commit is contained in:
13659257719
parent
8c559f644d
commit
6b59405236
|
|
@ -0,0 +1,279 @@
|
|||
/*
|
||||
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
|
||||
*
|
||||
* openInula is licensed under Mulan PSL v2.
|
||||
* You can use this software according to the terms and conditions of the Mulan PSL v2.
|
||||
* You may obtain a copy of Mulan PSL v2 at:
|
||||
*
|
||||
* http://license.coscl.org.cn/MulanPSL2
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
|
||||
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
|
||||
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
|
||||
* See the Mulan PSL v2 for more details.
|
||||
*/
|
||||
|
||||
@import 'assets.less';
|
||||
|
||||
.infoContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.button {
|
||||
border: none;
|
||||
padding: 0;
|
||||
border-radius: 0.25rem;
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
color: #5f6673;
|
||||
}
|
||||
|
||||
.button :hover {
|
||||
color: #23272f;
|
||||
}
|
||||
|
||||
.componentInfoHead {
|
||||
flex: 0 0 @top-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: @divider-style;
|
||||
|
||||
.name {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 1rem 0 1rem;
|
||||
.text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.eye {
|
||||
flex: 0 0 1rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.25rem;
|
||||
}
|
||||
|
||||
.debug {
|
||||
flex: 0 0 1rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0;
|
||||
}
|
||||
|
||||
.location {
|
||||
flex: 0 0 1rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.componentInfoMain {
|
||||
overflow-y: auto;
|
||||
|
||||
> :last-child {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
> div {
|
||||
border-bottom: @divider-style;
|
||||
}
|
||||
|
||||
.attrContainer {
|
||||
flex: 0 0;
|
||||
|
||||
.attrHead {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
|
||||
.attrType {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.attrCopy {
|
||||
flex: 0 0 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.attrDetail {
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
.attrArrow {
|
||||
color: @arrow-color;
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.attrName {
|
||||
margin-top: 1px;
|
||||
color: @attr-name-color;
|
||||
font-family: @attr-name-font-family;
|
||||
}
|
||||
|
||||
.colon {
|
||||
margin-top: 1px;
|
||||
transform: translateY(-8%);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
&:hover {
|
||||
.operation {
|
||||
visibility: visible;
|
||||
.operationIcon :hover {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: lightskyblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attrValue {
|
||||
width: 26rem;
|
||||
height: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
|
||||
Courier, monospace;
|
||||
&:focus {
|
||||
color: unset;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
.attrValue[data-type='string'] {
|
||||
color: #009906;
|
||||
}
|
||||
.attrValue[data-type='function'] {
|
||||
color: royalblue;
|
||||
}
|
||||
.attrValue[data-type='number'] {
|
||||
color: #ff5722;
|
||||
}
|
||||
.attrValue[data-type='boolean'] {
|
||||
color: #03a9f4;
|
||||
}
|
||||
|
||||
.operation {
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.checkBox {
|
||||
margin: 2px 3px 0 auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.active {
|
||||
display: unset;
|
||||
top: var(--content-top);
|
||||
left: var(--content-left);
|
||||
position: absolute;
|
||||
ul {
|
||||
margin-block-start: 0;
|
||||
padding-inline-start: 0;
|
||||
li {
|
||||
padding: 10px;
|
||||
border-top: 1px lighten(#333, 2%) solid;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0 10px;
|
||||
background: darken(#333, 2%);
|
||||
color: darken(#EEE, 40%);
|
||||
text-align: left;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition-property: all, background-color;
|
||||
transition-duration: 0.2s, 0.4s;
|
||||
|
||||
&:hover, &.selected {
|
||||
background-color: darken(#333, 10%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #03a9f4;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-top: -2px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
&:before {
|
||||
content: url('../svgs/copy.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&:before {
|
||||
content: url('../svgs/storage.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parentsInfo {
|
||||
flex: 1 1 0;
|
||||
|
||||
.parentName {
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.parent {
|
||||
margin-left: 1.4rem;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: @component-name-color;
|
||||
|
||||
&:hover {
|
||||
background-color: @select-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,435 @@
|
|||
/*
|
||||
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
|
||||
*
|
||||
* openInula is licensed under Mulan PSL v2.
|
||||
* You can use this software according to the terms and conditions of the Mulan PSL v2.
|
||||
* You may obtain a copy of Mulan PSL v2 at:
|
||||
*
|
||||
* http://license.coscl.org.cn/MulanPSL2
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
|
||||
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
|
||||
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
|
||||
* See the Mulan PSL v2 for more details.
|
||||
*/
|
||||
|
||||
import styles from './ComponentInfo.less';
|
||||
import Eye from '../svgs/Eye';
|
||||
import Debug from '../svgs/Debug';
|
||||
import Location from '../svgs/Location';
|
||||
import Triangle from '../svgs/Triangle';
|
||||
import { memo, useContext, useEffect, useState, useRef, useMemo, createRef } from 'openinula';
|
||||
import { IData } from './VTree';
|
||||
import { buildAttrModifyData, IAttr } from '../parser/parseAttr';
|
||||
import { postMessageToBackground } from '../panelConnection';
|
||||
import { CopyToConsole, InspectDom, LogComponentData, ModifyAttrs, StorageValue } from '../utils/constants';
|
||||
import type { Source } from '../../../inula/src/renderer/Types';
|
||||
import ViewSourceContext from '../utils/ViewSource';
|
||||
import PickElementContext from '../utils/PickElement';
|
||||
import Operation from '../svgs/Operation';
|
||||
|
||||
type IComponentInfo = {
|
||||
name: string;
|
||||
attrs: {
|
||||
parsedProps?: IAttr[];
|
||||
parsedState?: IAttr[];
|
||||
parsedHooks?: IAttr[];
|
||||
};
|
||||
parents: IData[];
|
||||
id: number;
|
||||
source?: Source;
|
||||
onClickParent: (item: IData) => void;
|
||||
};
|
||||
|
||||
const ComponentAttr = memo(function ComponentAttr({
|
||||
attrsName,
|
||||
attrsType,
|
||||
attrs,
|
||||
id,
|
||||
dropdownRef,
|
||||
}: {
|
||||
attrsName: string;
|
||||
attrsType: string;
|
||||
attrs: IAttr[];
|
||||
id: number;
|
||||
dropdownRef: null | HTMLElement;
|
||||
}) {
|
||||
const [editableAttrs, setEditableAttrs] = useState(attrs);
|
||||
const [expandNodes, setExpandNodes] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setEditableAttrs(attrs);
|
||||
}, [attrs]);
|
||||
|
||||
const handleCollapse = (item: IAttr) => {
|
||||
const nodes = [...expandNodes];
|
||||
const expandItem = `${item.name}_${editableAttrs.indexOf(item)}`;
|
||||
const i = nodes.indexOf(expandItem);
|
||||
if (i === -1) {
|
||||
nodes.push(expandItem);
|
||||
} else {
|
||||
nodes.splice(i, 1);
|
||||
}
|
||||
setExpandNodes(nodes);
|
||||
};
|
||||
|
||||
// props 展示的 key: value 中的 value 值
|
||||
const getShowName = item => {
|
||||
let retStr;
|
||||
if (item === undefined) {
|
||||
retStr = String(item);
|
||||
} else if (typeof item === 'number') {
|
||||
retStr = item;
|
||||
} else if (typeof item === 'string') {
|
||||
retStr = item.endsWith('>') ? `<${item}` : item;
|
||||
} else {
|
||||
retStr = `"${item}"`;
|
||||
}
|
||||
return retStr;
|
||||
};
|
||||
|
||||
/**
|
||||
* 拿到 props 或 hooks 在 VNode 里的路径
|
||||
*
|
||||
* @param {Array<IAttr>} editableAttrs 所有 props 与 hooks 的值
|
||||
* @param {number} index 此值在 editableAttrs 的下标位置
|
||||
* @param {string} attrsType 此值属于 props 还是 hooks
|
||||
* @return {Array} 值在 vNode 里的路径
|
||||
*/
|
||||
const getPath = (editableAttrs: IAttr[], index: number, attrsType: string): Array<string | number> => {
|
||||
const path: Array<string | number> = [];
|
||||
let local = editableAttrs[index].indentation;
|
||||
if (local === 1) {
|
||||
path.push(attrsType === 'Hooks' ? editableAttrs[index].hIndex : editableAttrs[index].name);
|
||||
} else {
|
||||
let location = local;
|
||||
let id = index;
|
||||
while (location > 0) {
|
||||
// local === 1 时处于 vNode.hooks 的子元素最外层
|
||||
if (location < local || id === index || local === 1) {
|
||||
if (local === 1) {
|
||||
attrsType === 'Hooks'
|
||||
? path.unshift(editableAttrs[id + 1].hIndex, 'state')
|
||||
: path.unshift(editableAttrs[id + 1].name);
|
||||
break;
|
||||
} else {
|
||||
if (editableAttrs[id]?.indentation === 1) {
|
||||
if (editableAttrs[id]?.name === 'State') {
|
||||
path.unshift('stateValue');
|
||||
}
|
||||
if (editableAttrs[id]?.name === 'Ref') {
|
||||
path.unshift('current');
|
||||
}
|
||||
} else {
|
||||
path.unshift(editableAttrs[id].name);
|
||||
}
|
||||
}
|
||||
// 跳过同级
|
||||
local = location;
|
||||
}
|
||||
location = id >= 1 ? editableAttrs[id - 1].indentation : -1;
|
||||
id = -1;
|
||||
}
|
||||
}
|
||||
return path;
|
||||
};
|
||||
|
||||
const showAttr = [];
|
||||
let currentIndentation = null;
|
||||
|
||||
// 为每一行数据添加一个 ref
|
||||
const refsById = useMemo(() => {
|
||||
const refs = {};
|
||||
editableAttrs.forEach((item, index) => {
|
||||
refs[index] = createRef();
|
||||
});
|
||||
return refs;
|
||||
}, [editableAttrs]);
|
||||
|
||||
editableAttrs.forEach((item, index) => {
|
||||
const operationRef = refsById[index];
|
||||
const indentation = item.indentation;
|
||||
if (currentIndentation !== null) {
|
||||
if (indentation > currentIndentation) {
|
||||
return;
|
||||
} else {
|
||||
currentIndentation = null;
|
||||
}
|
||||
}
|
||||
const nextItem = editableAttrs[index + 1];
|
||||
const hasChild = nextItem ? nextItem.indentation - item.indentation > 0 : false;
|
||||
const isCollapsed = !expandNodes.includes(`${item.name}_${index}`);
|
||||
|
||||
// 按钮点击事件
|
||||
const operationClick = (e: Event, operationRef: any) => {
|
||||
// 防止点击按钮触发展开或者合起数据
|
||||
e.stopPropagation();
|
||||
if (operationRef.current) {
|
||||
const operationRect = operationRef.current.getBoundingClientRect();
|
||||
// 19.2 为图标按钮高度，85 为弹框高度的一半
|
||||
dropdownRef.style.setProperty('--content-top', `${operationRect.top + 19.2}px`);
|
||||
dropdownRef.style.setProperty('--content-left', `${operationRect.left - 85}px`);
|
||||
}
|
||||
dropdownRef.classList.toggle(styles['active']);
|
||||
const attrInfo = {
|
||||
id: { id },
|
||||
itemName: item.name,
|
||||
attrsName: attrsName,
|
||||
path: getPath(editableAttrs, index, attrsName),
|
||||
};
|
||||
(dropdownRef as any).attrInfo = attrInfo;
|
||||
console.log(dropdownRef);
|
||||
};
|
||||
|
||||
showAttr.push(
|
||||
<div
|
||||
className={styles.info}
|
||||
style={{ paddingLeft: item.indentation * 10 }}
|
||||
key={index}
|
||||
onclick={() => handleCollapse(item)}
|
||||
>
|
||||
<span className={styles.attrArrow}>{hasChild && <Triangle director={isCollapsed ? 'right' : 'down'} />}</span>
|
||||
<span className={styles.attrName}>{`${item.name}`}</span>
|
||||
<div className={styles.colon}>{':'}</div>
|
||||
{item.type === 'string' || item.type === 'number' || item.type === 'undefined' || item.type === 'null' ? (
|
||||
<>
|
||||
<input
|
||||
value={getShowName(item.value)}
|
||||
data-type={item.type}
|
||||
className={styles.attrValue}
|
||||
onChange={event => {
|
||||
const nextAttrs = [...editableAttrs];
|
||||
const nextItem = { ...item };
|
||||
nextItem.value = event.target.value;
|
||||
nextAttrs[index] = nextItem;
|
||||
setEditableAttrs(nextAttrs);
|
||||
}}
|
||||
onKeyUp={event => {
|
||||
const value = (event.target as HTMLInputElement).value;
|
||||
if (event.key === 'Enter') {
|
||||
if (isDev) {
|
||||
console.log('post attr change', value);
|
||||
} else {
|
||||
const data = buildAttrModifyData(attrsType, attrs, value, item, index, id);
|
||||
postMessageToBackground(ModifyAttrs, data);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className={styles.operation} ref={operationRef}>
|
||||
<span className={styles.operationIcon} onclick={event => operationClick(event, operationRef)}>
|
||||
<Operation />
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
) : item.type === 'boolean' ? (
|
||||
<>
|
||||
<span data-type={item.type} className={styles.attrValue}>
|
||||
{item.value.toString()}
|
||||
</span>
|
||||
<input
|
||||
type={'checkbox'}
|
||||
checked={item.value}
|
||||
className={styles.checkBox}
|
||||
onChange={event => {
|
||||
const nextAttrs = [...editableAttrs];
|
||||
const nextItem = { ...item };
|
||||
nextItem.value = event.target.checked;
|
||||
nextAttrs[index] = nextItem;
|
||||
setEditableAttrs(nextAttrs);
|
||||
if (!isDev) {
|
||||
const data = buildAttrModifyData(attrsType, attrs, nextItem.value, item, index, id);
|
||||
postMessageToBackground(ModifyAttrs, data);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span data-type={item.type} className={styles.attrValue}>
|
||||
{item.value}
|
||||
</span>
|
||||
<div className={styles.operation} ref={operationRef}>
|
||||
<span className={styles.operationIcon} onClick={event => operationClick(event, operationRef)}>
|
||||
<Operation />
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
if (isCollapsed) {
|
||||
currentIndentation = indentation;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={styles.attrContainer}>
|
||||
<div className={styles.attrHead}>
|
||||
<span className={styles.attrType}>{attrsName}</span>
|
||||
</div>
|
||||
<div className={styles.attrDetail}>{showAttr}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
function ComponentInfo({ name, attrs, parents, id, source, onClickParent }: IComponentInfo) {
|
||||
const view = useContext(ViewSourceContext) as any;
|
||||
const viewSource = view.viewSourceFunction.viewSource;
|
||||
|
||||
const pick = useContext(PickElementContext) as any;
|
||||
const inspectVNode = pick.pickElementFunction.inspectVNode;
|
||||
const dropdownRef = useRef<null | HTMLElement>(null);
|
||||
|
||||
const doViewSource = (id: number) => {
|
||||
postMessageToBackground(InspectDom, { id });
|
||||
setTimeout(function () {
|
||||
inspectVNode();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const doInspectDom = (id: number) => {
|
||||
postMessageToBackground(InspectDom, { id });
|
||||
setTimeout(function () {
|
||||
inspectVNode();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const sourceFormatted = (fileName: string, lineNumber: number) => {
|
||||
const pathWithoutLastName = /^(.*)[\\/]/;
|
||||
|
||||
let realName = fileName.replace(pathWithoutLastName, '');
|
||||
if (/^index\./.test(realName)) {
|
||||
const fileNameMatch = fileName.match(pathWithoutLastName);
|
||||
if (fileNameMatch) {
|
||||
const pathBeforeName = fileNameMatch[1];
|
||||
if (pathBeforeName) {
|
||||
const folderName = pathBeforeName.replace(pathWithoutLastName, '');
|
||||
realName = folderName + '/' + realName;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return `${realName}:${lineNumber}`;
|
||||
};
|
||||
|
||||
const copyToConsole = (itemName: string | number, attrsName: string, path: Array<string | number>) => {
|
||||
postMessageToBackground(CopyToConsole, { id, itemName, attrsName, path });
|
||||
dropdownRef.current.classList.toggle(styles['active']);
|
||||
};
|
||||
|
||||
const storeVariable = (attrsName: string, path: Array<string | number>) => {
|
||||
postMessageToBackground(StorageValue, { id, attrsName, path });
|
||||
dropdownRef.current.classList.toggle(styles['active']);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.infoContainer}>
|
||||
<div className={styles.componentInfoHead}>
|
||||
{name && (
|
||||
<>
|
||||
<div className={styles.name}>
|
||||
<div className={styles.text}>{name}</div>
|
||||
</div>
|
||||
|
||||
<button className={styles.button}>
|
||||
<span
|
||||
className={styles.eye}
|
||||
title={'Inspect dom element'}
|
||||
onClick={() => {
|
||||
doInspectDom(id);
|
||||
}}
|
||||
>
|
||||
<Eye />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button className={styles.button} disabled={false}>
|
||||
<span
|
||||
className={styles.location}
|
||||
onClick={() => {
|
||||
doViewSource(id);
|
||||
}}
|
||||
title={'View source for this element'}
|
||||
>
|
||||
<Location />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button className={styles.button}>
|
||||
<span
|
||||
className={styles.debug}
|
||||
title={'Log this component data'}
|
||||
onClick={() => {
|
||||
postMessageToBackground(LogComponentData, id);
|
||||
}}
|
||||
>
|
||||
<Debug />
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.componentInfoMain}>
|
||||
{Object.keys(attrs).map(attrsType => {
|
||||
const parsedAttrs = attrs[attrsType];
|
||||
if (parsedAttrs && parsedAttrs.length !== 0) {
|
||||
const attrsName = attrsType.slice(6); // parsedState => State
|
||||
return (
|
||||
<ComponentAttr
|
||||
attrsName={attrsName}
|
||||
attrsType={attrsType}
|
||||
attrs={parsedAttrs}
|
||||
id={id}
|
||||
dropdownRef={dropdownRef.current}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
<div className={styles.parentsInfo}>
|
||||
{name && (
|
||||
<div>
|
||||
<div className={styles.parentName}>Parents</div>
|
||||
{parents.map(item => (
|
||||
<button className={styles.parent} onClick={() => onClickParent(item)}>
|
||||
{`<${item.name.itemName}>`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.parentsInfo}>
|
||||
{source && (
|
||||
<>
|
||||
<div>source: {''}</div>
|
||||
<div style={{ marginLeft: '1rem' }}>{sourceFormatted(source.fileName, source.lineNumber)}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div ref={dropdownRef} className={styles.dropdown}>
|
||||
<ul>
|
||||
<li
|
||||
onClick={() =>
|
||||
copyToConsole(
|
||||
(dropdownRef.current as any).attrInfo.itemName,
|
||||
(dropdownRef.current as any).attrInfo.attrsName,
|
||||
(dropdownRef.current as any).attrInfo.path
|
||||
)
|
||||
}
|
||||
>
|
||||
<b>Copy value to console</b>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => storeVariable((dropdownRef.current as any).attrInfo.attrsName, (dropdownRef.current as any).attrInfo.path)}
|
||||
>
|
||||
<b>Store as global variable</b>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(ComponentInfo);
|
||||
Loading…
Reference in New Issue