multiChanges: feat: query event handler add default

- feat(i18n) trans varible support react node
- feat(layout) flow layout container
- feat: query library result panel draggable
- feat(i18n) trans varible support react node
- refactor(table): optimize exposing displayData
- refactor(table): refactor some DepsConfig to depsConfig in tableComp
- bug fixes

Author: ggbond2077

client/packages/openblocks-core/lib/index.cjs

@@ -7484,10 +7484,14 @@ var Translator = /** @class */ (function () {
         this.messages = Object.assign({}, data, globalMessages);
         this.language = language;
         this.trans = this.trans.bind(this);
+        this.transToNode = this.transToNode.bind(this);
     }
     Translator.prototype.trans = function (key, variables) {
+        return this.transToNode(key, variables).toString();
+    };
+    Translator.prototype.transToNode = function (key, variables) {
         var message = this.getMessage(key);
-        return new IntlMessageFormat(message, i18n.locale).format(variables).toString();
+        return new IntlMessageFormat(message, i18n.locale).format(variables);
     };
     Translator.prototype.getMessage = function (key) {
         var value = this.messages[key];

client/packages/openblocks-core/lib/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import * as react from "react";
 import { ReactNode } from "react";
 
 declare type EvalMethods = Record<string, Record<string, Function>>;
@@ -737,7 +739,7 @@ declare type AddPrefix<T, P extends string> = {
 };
 declare const globalMessages: AddPrefix<{}, "@">;
 declare type GlobalMessageKey = NestedKey<typeof globalMessages>;
-declare type VariableValue = string | number | boolean | Date;
+declare type VariableValue = string | number | boolean | Date | React.ReactNode;
 declare class Translator<Messages extends object> {
   private readonly messages;
   readonly language: string;
@@ -746,6 +748,22 @@ declare class Translator<Messages extends object> {
     key: NestedKey<Messages> | GlobalMessageKey,
     variables?: Record<string, VariableValue>
   ): string;
+  transToNode(
+    key: NestedKey<Messages> | GlobalMessageKey,
+    variables?: Record<string, VariableValue>
+  ):
+    | string
+    | {}
+    | react.ReactElement<any, string | react.JSXElementConstructor<any>>
+    | Iterable<react.ReactNode>
+    | react.ReactPortal
+    | (
+        | string
+        | {}
+        | react.ReactElement<any, string | react.JSXElementConstructor<any>>
+        | Iterable<react.ReactNode>
+        | react.ReactPortal
+      )[];
   private getMessage;
 }
 declare function getI18nObjects<I18nObjects>(fileData: object, filterLocales?: string): I18nObjects;

client/packages/openblocks-core/lib/index.js

@@ -7476,10 +7476,14 @@ var Translator = /** @class */ (function () {
         this.messages = Object.assign({}, data, globalMessages);
         this.language = language;
         this.trans = this.trans.bind(this);
+        this.transToNode = this.transToNode.bind(this);
     }
     Translator.prototype.trans = function (key, variables) {
+        return this.transToNode(key, variables).toString();
+    };
+    Translator.prototype.transToNode = function (key, variables) {
         var message = this.getMessage(key);
-        return new IntlMessageFormat(message, i18n.locale).format(variables).toString();
+        return new IntlMessageFormat(message, i18n.locale).format(variables);
     };
     Translator.prototype.getMessage = function (key) {
         var value = this.messages[key];

client/packages/openblocks-core/src/i18n/index.tsx

@@ -122,7 +122,8 @@ const globalMessages = Object.fromEntries(
 ) as AddPrefix<typeof localeData.en, typeof globalMessageKeyPrefix>;
 
 type GlobalMessageKey = NestedKey<typeof globalMessages>;
-type VariableValue = string | number | boolean | Date;
+type VariableValue = string | number | boolean | Date | React.ReactNode;
+
 export class Translator<Messages extends object> {
   private readonly messages: Messages & typeof globalMessages;
 
@@ -134,14 +135,22 @@ export class Translator<Messages extends object> {
     this.messages = Object.assign({}, data, globalMessages);
     this.language = language;
     this.trans = this.trans.bind(this);
+    this.transToNode = this.transToNode.bind(this);
   }
 
   trans(
     key: NestedKey<Messages> | GlobalMessageKey,
     variables?: Record<string, VariableValue>
   ): string {
+    return this.transToNode(key, variables).toString();
+  }
+
+  transToNode(
+    key: NestedKey<Messages> | GlobalMessageKey,
+    variables?: Record<string, VariableValue>
+  ) {
     const message = this.getMessage(key);
-    return new IntlMessageFormat(message, i18n.locale).format(variables).toString();
+    return new IntlMessageFormat(message, i18n.locale).format(variables);
   }
 
   private getMessage(key: NestedKey<Messages> | GlobalMessageKey) {

client/packages/openblocks/package.json

@@ -92,7 +92,7 @@
     "tern": "^0.24.3",
     "toposort": "^2.0.2",
     "typescript-collections": "^1.3.3",
-    "ua-parser-js": "^1.0.33",
+    "ua-parser-js": "^1.0.2",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.0",
     "weixin-js-sdk": "^1.6.0",

client/packages/openblocks/src/components/resultPanel/BottomResultPanel.tsx

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import Draggable from "react-draggable";
+import * as React from "react";
+import { useContext, useRef, useState } from "react";
+import { EditorContext } from "../../comps/editorState";
+import { Layers } from "constants/Layers";
+import { HeaderWrapper, useResultPanel } from "./index";
+
+const Wrapper = styled.div<{ bottom?: number }>`
+  right: calc(313px + 4px); // FIXME: don't rely on the width of the right panel
+  bottom: ${(props) => (props.bottom ? props.bottom + 4 + "px" : 285 + 4 + "px")};
+  position: fixed;
+  z-index: ${Layers.queryResultPanel};
+
+  display: flex;
+  flex-direction: column;
+  width: 592px;
+  height: fit-content;
+  max-height: 250px;
+  background: #ffffff;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  pointer-events: auto;
+  padding-bottom: 16px;
+`;
+
+interface BottomResultPanelProps {
+  bottom: number;
+}
+
+export const BottomResultPanel = (props: BottomResultPanelProps) => {
+  const { bottom } = props;
+  const editorState = useContext(EditorContext);
+  const showResultComp = editorState.showResultComp();
+  const result = showResultComp?.result();
+
+  const draggableRef = useRef<HTMLDivElement>(null);
+  const [unDraggable, setUnDraggable] = useState(true);
+
+  const [bounds, setBounds] = useState({
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+  });
+
+  const { header, body } = useResultPanel({
+    ...(result ?? { data: "", dataType: "default", success: true }),
+    onClose: () => editorState.setShowResultCompName(undefined),
+  });
+
+  if (!result) {
+    return null;
+  }
+
+  return (
+    <Draggable
+      disabled={unDraggable}
+      bounds={bounds}
+      onStart={(event, uiData) => {
+        const { clientWidth, clientHeight } = window.document.documentElement;
+        const targetRect = draggableRef.current?.getBoundingClientRect();
+        if (!targetRect) {
+          return;
+        }
+        setBounds({
+          left: -targetRect.left + uiData.x,
+          right: clientWidth - (targetRect.right - uiData.x),
+          top: -targetRect.top + uiData.y,
+          bottom: clientHeight - (targetRect.bottom - uiData.y),
+        });
+      }}
+    >
+      <Wrapper bottom={bottom} ref={draggableRef}>
+        <HeaderWrapper
+          onMouseOver={() => setUnDraggable(false)}
+          onMouseOut={() => setUnDraggable(true)}
+        >
+          {header}
+        </HeaderWrapper>
+        {body}
+      </Wrapper>
+    </Draggable>
+  );
+};

client/packages/openblocks/src/components/resultPanel/QueryLibraryResultPanel.tsx

@@ -0,0 +1,81 @@
+import styled from "styled-components";
+import { ResizableBox, ResizeCallbackData } from "react-resizable";
+import { Layers } from "../../constants/Layers";
+import { BottomResComp } from "../../types/bottomRes";
+import * as React from "react";
+import { useState } from "react";
+import { HeaderWrapper, useResultPanel } from "./index";
+
+const StyledResizableBox = styled(ResizableBox)`
+  position: absolute;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  border-top: 1px solid #e1e3eb;
+  z-index: ${Layers.queryResultPanel};
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+
+  .react-resizable-handle {
+    position: absolute;
+    border-top: transparent solid 3px;
+    width: 100%;
+    padding: 0 3px 3px 0;
+    top: 0;
+    cursor: row-resize;
+  }
+`;
+const QueryLibraryResultWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+`;
+const preventDefault = (e: any) => {
+  e.preventDefault();
+};
+const addListener = () => {
+  window.addEventListener("mousedown", preventDefault);
+};
+const removeListener = () => {
+  window.removeEventListener("mousedown", preventDefault);
+};
+export const QueryLibraryResultPanel = (props: { comp: BottomResComp; onClose: () => void }) => {
+  const result = props.comp?.result();
+  const [bottomHeight, setBottomHeight] = useState(360);
+
+  const { header, body } = useResultPanel({
+    ...(result ?? { data: "", dataType: "default", success: true }),
+    onClose: props.onClose,
+  });
+
+  if (!result) {
+    return null;
+  }
+
+  const clientHeight = document.documentElement.clientHeight;
+  const resizeStop = (e: React.SyntheticEvent, data: ResizeCallbackData) => {
+    setBottomHeight(data.size.height);
+    removeListener();
+  };
+
+  return (
+    <StyledResizableBox
+      width={Infinity}
+      height={bottomHeight}
+      resizeHandles={["n"]}
+      minConstraints={[680, 285]}
+      maxConstraints={[Infinity, clientHeight - 48 - 95]}
+      onResizeStart={addListener}
+      onResizeStop={resizeStop}
+    >
+      <QueryLibraryResultWrapper>
+        <HeaderWrapper style={{ cursor: "default" }}>{header}</HeaderWrapper>
+        {body}
+      </QueryLibraryResultWrapper>
+    </StyledResizableBox>
+  );
+};