Copy-Able Data from Components in State Display

FalkWolsky · FalkWolsky · commit 4e5e0b1b266f · 2024-05-25T19:40:17.000+02:00
diff --git a/client/packages/lowcoder/src/pages/editor/LeftContent.tsx b/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
@@ -9,11 +9,11 @@ import {
   LeftClose,
   LeftCommon,
   LeftOpen,
-  PadDiv,
   ScrollBar,
   Tooltip,
   UnfoldIcon,
   UnShow,
+  TacoButton,
 } from "lowcoder-design";
 import React, { ReactNode, useCallback, useContext, useMemo, useState } from "react";
 import { hookCompCategory } from "comps/hooks/hookCompTypes";
@@ -32,13 +32,33 @@ import type { UICompType } from "comps/uiCompRegistry";
 import { CollapseWrapper, DirectoryTreeStyle, Node } from "./styledComponents";
 import { DataNode, EventDataNode } from "antd/es/tree";
 import { isAggregationApp } from "util/appUtils";
+import Modal from "antd/es/modal/Modal";
+import copyToClipboard from "copy-to-clipboard";
 
 const CollapseTitleWrapper = styled.div`
   display: flex;
   width: fit-content;
   max-width: calc(100% - 8px);
 `;
 
+const PadDiv = styled.div`
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:hover .copy-icon {
+    visibility: visible;
+  }
+`;
+
+const CopyIcon = styled(CopyTextButton)`
+  visibility: hidden;
+  margin-left: 8px;
+  color: #1890ff;
+  cursor: pointer;
+`;
+
 function getLen(config: string | boolean | number) {
   if (typeof config === "number") {
     return (config + "").toString().length;
@@ -49,47 +69,48 @@ function getLen(config: string | boolean | number) {
   return 0;
 }
 
-function toDataView(value: any, name: string, desc?: ReactNode) {
+function toDataView(value: any, name: string, desc?: ReactNode, modal?: boolean) {
   const str = typeof value === "function" ? "Function" : safeJSONStringify(value);
   const descRecord: Record<string, ReactNode> = {};
+  const shortenedString = modal === true ? (getLen(str) > 42 ? str.slice(0, 42) + "..." : str) : (getLen(str) > 20 ? str.slice(0, 20) + "..." : str);
   descRecord[name] = desc;
   if (Array.isArray(value)) {
     const dataChild: Record<string, any> = {};
     value.forEach((valueChild, index) => {
       dataChild[index] = valueChild;
     });
     return (
-      <CollapseView name={name} desc={descRecord} data={dataChild} isArray={true} key={name} />
+      <CollapseView name={name} desc={descRecord} data={dataChild} isArray={true} key={name} modal={modal} />
     );
   } else if (_.isPlainObject(value)) {
-    return <CollapseView name={name} desc={descRecord} data={value} key={name} />;
-  }
-
-  return (
-    <PadDiv key={name}>
-      <Tooltip title={desc} placement={"right"}>
-        <Label label={name} />
-        &#8203;
-      </Tooltip>
-
-      <Tooltip
-        title={
-          getLen(str) > 50 ? (
-            <div style={{ display: "flex", wordBreak: "break-all" }}>
-              {getLen(str) > 300 ? str.slice(0, 300) + "..." : str}
-              <CopyTextButton text={value} style={{ color: "#fff", margin: "4px 0 0 6px" }} />
-            </div>
-          ) : null
-        }
-        placement={"right"}
+    return (
+      <CollapseView name={name} desc={descRecord} data={value} key={name} modal={modal}/>
+    );
+  } else {
+    return (
+      <PadDiv 
+        style={{marginLeft: "20px", borderBottom: "1px solid #f0f0f0", height: "32px", display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}
+        key={name}
       >
-        &#8203;
-        <Label color="#FF9816" label={getLen(str) > 50 ? str.slice(0, 50) + "..." : str} />
-      </Tooltip>
-    </PadDiv>
-  );
+        <Tooltip title={desc} placement={"right"}>
+          <Label label={name} /> &#8203;
+        </Tooltip>
+
+        <div style={{ display: "flex", wordBreak: "break-all", textAlign: "right" }}>
+          <span style={{marginRight: "10px"}}>{shortenedString}</span>
+          {getLen(str) > 0 && 
+            <CopyTextButton text={value} style={{ color: "#ccc", marginRight: "0px", marginTop: "4px" }} />
+          }
+        </div>
+        
+      </PadDiv>
+    );
+  }
 }
 
+
+export default toDataView;
+
 function sliceArr(arr: string[]) {
   let preArr: string[] = [];
   let afterArr: string[] = [];
@@ -104,23 +125,23 @@ function sliceArr(arr: string[]) {
   return { preArr, afterArr } as const;
 }
 
-function toData(props: { data: Record<string, any>; desc?: Record<string, ReactNode> }) {
+function toData(props: { data: Record<string, any>; desc?: Record<string, ReactNode>, modal?: boolean}) {
   const totalArr = Object.keys(props.data);
   const sliceFn = sliceArr;
   return (
     <div>
       {totalArr.length < 30 ? (
         totalArr.map((name) => {
-          return toDataView(props.data[name], name, props.desc?.[name]);
+          return toDataView(props.data[name], name, props.desc?.[name], props.modal);
         })
       ) : (
         <>
           {sliceFn(totalArr).preArr.map((name) => {
-            return toDataView(props.data[name], name, props.desc?.[name]);
+            return toDataView(props.data[name], name, props.desc?.[name], props.modal);
           })}
           <UnShow num={totalArr.length - 6} />
           {sliceFn(totalArr).afterArr.map((name) => {
-            return toDataView(props.data[name], name, props.desc?.[name]);
+            return toDataView(props.data[name], name, props.desc?.[name], props.modal);
           })}
         </>
       )}
@@ -137,6 +158,8 @@ const CollapseView = React.memo(
     onClick?: (compName: string) => void;
     isSelected?: boolean;
     isOpen?: boolean;
+    children?: React.ReactNode; // Accept children
+    modal?: boolean;
   }) => {
     const { data = {} } = props;
     const onlyOne = Object.keys(data).length === 1;
@@ -148,47 +171,53 @@ const CollapseView = React.memo(
           {
             key: props.name,
             title: (
-              <Tooltip
-                title={props.desc?.[props.name]}
-                placement={"right"}
-              >
-                <CollapseTitleWrapper onClick={() => props.onClick && props.onClick(props.name)}>
-                  <Title
-                    style={{
-                      whiteSpace: "nowrap",
-                      textOverflow: "ellipsis",
-                      overflow: "hidden",
-                    }}
-                    label={props.name}
-                    hasChild={Object.keys(data).length > 0}
-                  />
-                  <Title
-                    style={{ flexShrink: 0 }}
-                    color="#8B8FA3"
-                    label={`${props.isArray ? "[]" : "{}"} ${trans(
-                      props.isArray
-                        ? onlyOne
-                          ? "leftPanel.propTipArr"
-                          : "leftPanel.propTipsArr"
-                        : onlyOne
-                        ? "leftPanel.propTip"
-                        : "leftPanel.propTips",
-                      {
-                        num: Object.keys(data).length,
-                      }
-                    )}`}
-                  />
-                </CollapseTitleWrapper>
-              </Tooltip>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Tooltip
+                  title={props.desc?.[props.name]}
+                  placement={"right"}
+                >
+                  <CollapseTitleWrapper onClick={() => props.onClick && props.onClick(props.name)}>
+                    <Title
+                      style={{
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                      }}
+                      label={props.name}
+                      hasChild={Object.keys(data).length > 0}
+                    />
+                    <Title
+                      style={{ flexShrink: 0 }}
+                      color="#8B8FA3"
+                      label={`${props.isArray ? "[]" : "{}"} ${trans(
+                        props.isArray
+                          ? onlyOne
+                            ? "leftPanel.propTipArr"
+                            : "leftPanel.propTipsArr"
+                          : onlyOne
+                          ? "leftPanel.propTip"
+                          : "leftPanel.propTips",
+                        {
+                          num: Object.keys(data).length,
+                        }
+                      )}`}
+                    />
+                  </CollapseTitleWrapper>
+                </Tooltip>
+                {Object.keys(data).length > 0 && 
+                  <CopyTextButton text={JSON.stringify(data)} style={{ color: "#aaa", marginRight: "8px"  }} />
+                }
+              </div>
             ),
-            data: toData({ data, desc: props.desc }),
+            data: toData({ data, desc: props.desc, modal: props.modal}),
           },
         ]}
       />
     );
   }
 );
 
+
 interface LeftContentProps {
   uiComp: InstanceType<typeof UIComp>;
 }
@@ -324,13 +353,23 @@ export const LeftContent = (props: LeftContentProps) => {
   const getTreeNode = (node: NodeItem, uiCompInfos: CompInfo[]) => {
     const info = showData.find((item) => item.key === node.key);
     const data = uiCompInfos.find((item) => item.name === node.title);
+
+    const prepareData = (data: Record<string, any>, desc?: Record<string, ReactNode>) => {
+      return (
+        <div>
+          {Object.keys(data).map((name) => {
+            return toDataView(data[name], name, desc?.[name], true);
+          })}
+        </div>
+      );
+    };
+
     return (
-      <Node>
+      <Node key={node.key}>
         <span>
-          <span>{node.title}</span>
-          {data &&
-            !!Object.keys(data.data)?.length &&
-            (info?.show ? (
+          <span>{node.title} </span>
+          {data && !!Object.keys(data.data)?.length && (
+            info?.show ? (
               <Tooltip
                 placement="right"
                 title={trans("leftPanel.collapseTip", { component: node.title })}
@@ -353,7 +392,7 @@ export const LeftContent = (props: LeftContentProps) => {
                     setShowData(newData);
                   }}
                 >
-                  <LeftOpen />
+         
                 </div>
               </Tooltip>
             ) : (
@@ -389,24 +428,29 @@ export const LeftContent = (props: LeftContentProps) => {
                   <LeftClose />
                 </div>
               </Tooltip>
-            ))}
+            )
+          )}
         </span>
         {info?.show && data && (
-          <CollapseWrapper title="" $clientX={info?.clientX} onClick={(e) => e.stopPropagation()}>
-            <ScrollBar style={{ maxHeight: "400px" }}>
-              <CollapseView
-                key={data.name}
-                name={data.name}
-                desc={data.dataDesc}
-                data={data.data}
-                isOpen={true}
-              />
-            </ScrollBar>
-          </CollapseWrapper>
+          <Modal
+            title={data.name}
+            open={info.show}
+            onOk={() => setShowData([])}
+            cancelButtonProps={{ style: { display: 'none' } }}
+            maskClosable={true} // Prevent closing on background click
+          >
+            <div
+              style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', maxHeight: "calc(100vh - 400px)", overflow: "scroll" }}
+              onClick={(e) => e.stopPropagation()} // Prevent closing on clicking inside the modal
+            >
+              {prepareData(data.data, data.dataDesc)}
+            </div>
+          </Modal>
         )}
       </Node>
     );
   };
+  
 
   const getTreeUI = (type: TreeUIKey) => {
     const uiCompInfos = _.sortBy(editorState.uiCompInfoList(), [(x) => x.name]);
@@ -434,15 +478,11 @@ export const LeftContent = (props: LeftContentProps) => {
     return (
       <DirectoryTreeStyle
         treeData={explorerData}
-        // icon={(props: NodeItem) => props.type && (CompStateIcon[props.type] || <LeftCommon />)}
         icon={(props: any) => props.type && (
           <div style={{ margin: '16px 4px 0 -4px'}}> 
             {CompStateIcon[props.type as UICompType] || <LeftCommon />}
           </div>
         )}
-        // switcherIcon={({ expanded }: { expanded: boolean }) =>
-        //   expanded ? <FoldedIcon /> : <UnfoldIcon />
-        // }
         switcherIcon={(props: any) =>
           props.expanded ? <FoldedIcon /> : <UnfoldIcon />
         }
