Skip to content

Commit 01e1c13

Browse files
ggbond2077ggbond2077
committed
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
1 parent 01e0fbf commit 01e1c13

34 files changed

+761
-282
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7484,10 +7484,14 @@ var Translator = /** @class */ (function () {
74847484
this.messages = Object.assign({}, data, globalMessages);
74857485
this.language = language;
74867486
this.trans = this.trans.bind(this);
7487+
this.transToNode = this.transToNode.bind(this);
74877488
}
74887489
Translator.prototype.trans = function (key, variables) {
7490+
return this.transToNode(key, variables).toString();
7491+
};
7492+
Translator.prototype.transToNode = function (key, variables) {
74897493
var message = this.getMessage(key);
7490-
return new IntlMessageFormat(message, i18n.locale).format(variables).toString();
7494+
return new IntlMessageFormat(message, i18n.locale).format(variables);
74917495
};
74927496
Translator.prototype.getMessage = function (key) {
74937497
var value = this.messages[key];

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/// <reference types="react" />
2+
import * as react from "react";
13
import { ReactNode } from "react";
24

35
declare type EvalMethods = Record<string, Record<string, Function>>;
@@ -737,7 +739,7 @@ declare type AddPrefix<T, P extends string> = {
737739
};
738740
declare const globalMessages: AddPrefix<{}, "@">;
739741
declare type GlobalMessageKey = NestedKey<typeof globalMessages>;
740-
declare type VariableValue = string | number | boolean | Date;
742+
declare type VariableValue = string | number | boolean | Date | React.ReactNode;
741743
declare class Translator<Messages extends object> {
742744
private readonly messages;
743745
readonly language: string;
@@ -746,6 +748,22 @@ declare class Translator<Messages extends object> {
746748
key: NestedKey<Messages> | GlobalMessageKey,
747749
variables?: Record<string, VariableValue>
748750
): string;
751+
transToNode(
752+
key: NestedKey<Messages> | GlobalMessageKey,
753+
variables?: Record<string, VariableValue>
754+
):
755+
| string
756+
| {}
757+
| react.ReactElement<any, string | react.JSXElementConstructor<any>>
758+
| Iterable<react.ReactNode>
759+
| react.ReactPortal
760+
| (
761+
| string
762+
| {}
763+
| react.ReactElement<any, string | react.JSXElementConstructor<any>>
764+
| Iterable<react.ReactNode>
765+
| react.ReactPortal
766+
)[];
749767
private getMessage;
750768
}
751769
declare function getI18nObjects<I18nObjects>(fileData: object, filterLocales?: string): I18nObjects;

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7476,10 +7476,14 @@ var Translator = /** @class */ (function () {
74767476
this.messages = Object.assign({}, data, globalMessages);
74777477
this.language = language;
74787478
this.trans = this.trans.bind(this);
7479+
this.transToNode = this.transToNode.bind(this);
74797480
}
74807481
Translator.prototype.trans = function (key, variables) {
7482+
return this.transToNode(key, variables).toString();
7483+
};
7484+
Translator.prototype.transToNode = function (key, variables) {
74817485
var message = this.getMessage(key);
7482-
return new IntlMessageFormat(message, i18n.locale).format(variables).toString();
7486+
return new IntlMessageFormat(message, i18n.locale).format(variables);
74837487
};
74847488
Translator.prototype.getMessage = function (key) {
74857489
var value = this.messages[key];

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,8 @@ const globalMessages = Object.fromEntries(
122122
) as AddPrefix<typeof localeData.en, typeof globalMessageKeyPrefix>;
123123

124124
type GlobalMessageKey = NestedKey<typeof globalMessages>;
125-
type VariableValue = string | number | boolean | Date;
125+
type VariableValue = string | number | boolean | Date | React.ReactNode;
126+
126127
export class Translator<Messages extends object> {
127128
private readonly messages: Messages & typeof globalMessages;
128129

@@ -134,14 +135,22 @@ export class Translator<Messages extends object> {
134135
this.messages = Object.assign({}, data, globalMessages);
135136
this.language = language;
136137
this.trans = this.trans.bind(this);
138+
this.transToNode = this.transToNode.bind(this);
137139
}
138140

139141
trans(
140142
key: NestedKey<Messages> | GlobalMessageKey,
141143
variables?: Record<string, VariableValue>
142144
): string {
145+
return this.transToNode(key, variables).toString();
146+
}
147+
148+
transToNode(
149+
key: NestedKey<Messages> | GlobalMessageKey,
150+
variables?: Record<string, VariableValue>
151+
) {
143152
const message = this.getMessage(key);
144-
return new IntlMessageFormat(message, i18n.locale).format(variables).toString();
153+
return new IntlMessageFormat(message, i18n.locale).format(variables);
145154
}
146155

147156
private getMessage(key: NestedKey<Messages> | GlobalMessageKey) {

‎client/packages/openblocks/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
"tern": "^0.24.3",
9393
"toposort": "^2.0.2",
9494
"typescript-collections": "^1.3.3",
95-
"ua-parser-js": "^1.0.33",
95+
"ua-parser-js": "^1.0.2",
9696
"uuid": "^9.0.0",
9797
"web-vitals": "^2.1.0",
9898
"weixin-js-sdk": "^1.6.0",

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import styled from "styled-components";
2+
import Draggable from "react-draggable";
3+
import * as React from "react";
4+
import { useContext, useRef, useState } from "react";
5+
import { EditorContext } from "../../comps/editorState";
6+
import { Layers } from "constants/Layers";
7+
import { HeaderWrapper, useResultPanel } from "./index";
8+
9+
const Wrapper = styled.div<{ bottom?: number }>`
10+
right: calc(313px + 4px); // FIXME: don't rely on the width of the right panel
11+
bottom: ${(props) => (props.bottom ? props.bottom + 4 + "px" : 285 + 4 + "px")};
12+
position: fixed;
13+
z-index: ${Layers.queryResultPanel};
14+
15+
display: flex;
16+
flex-direction: column;
17+
width: 592px;
18+
height: fit-content;
19+
max-height: 250px;
20+
background: #ffffff;
21+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
22+
border-radius: 8px;
23+
pointer-events: auto;
24+
padding-bottom: 16px;
25+
`;
26+
27+
interface BottomResultPanelProps {
28+
bottom: number;
29+
}
30+
31+
export const BottomResultPanel = (props: BottomResultPanelProps) => {
32+
const { bottom } = props;
33+
const editorState = useContext(EditorContext);
34+
const showResultComp = editorState.showResultComp();
35+
const result = showResultComp?.result();
36+
37+
const draggableRef = useRef<HTMLDivElement>(null);
38+
const [unDraggable, setUnDraggable] = useState(true);
39+
40+
const [bounds, setBounds] = useState({
41+
left: 0,
42+
top: 0,
43+
bottom: 0,
44+
right: 0,
45+
});
46+
47+
const { header, body } = useResultPanel({
48+
...(result ?? { data: "", dataType: "default", success: true }),
49+
onClose: () => editorState.setShowResultCompName(undefined),
50+
});
51+
52+
if (!result) {
53+
return null;
54+
}
55+
56+
return (
57+
<Draggable
58+
disabled={unDraggable}
59+
bounds={bounds}
60+
onStart={(event, uiData) => {
61+
const { clientWidth, clientHeight } = window.document.documentElement;
62+
const targetRect = draggableRef.current?.getBoundingClientRect();
63+
if (!targetRect) {
64+
return;
65+
}
66+
setBounds({
67+
left: -targetRect.left + uiData.x,
68+
right: clientWidth - (targetRect.right - uiData.x),
69+
top: -targetRect.top + uiData.y,
70+
bottom: clientHeight - (targetRect.bottom - uiData.y),
71+
});
72+
}}
73+
>
74+
<Wrapper bottom={bottom} ref={draggableRef}>
75+
<HeaderWrapper
76+
onMouseOver={() => setUnDraggable(false)}
77+
onMouseOut={() => setUnDraggable(true)}
78+
>
79+
{header}
80+
</HeaderWrapper>
81+
{body}
82+
</Wrapper>
83+
</Draggable>
84+
);
85+
};

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import styled from "styled-components";
2+
import { ResizableBox, ResizeCallbackData } from "react-resizable";
3+
import { Layers } from "../../constants/Layers";
4+
import { BottomResComp } from "../../types/bottomRes";
5+
import * as React from "react";
6+
import { useState } from "react";
7+
import { HeaderWrapper, useResultPanel } from "./index";
8+
9+
const StyledResizableBox = styled(ResizableBox)`
10+
position: absolute;
11+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
12+
border-top: 1px solid #e1e3eb;
13+
z-index: ${Layers.queryResultPanel};
14+
width: 100%;
15+
bottom: 0;
16+
left: 0;
17+
border-top-left-radius: 8px;
18+
border-top-right-radius: 8px;
19+
20+
.react-resizable-handle {
21+
position: absolute;
22+
border-top: transparent solid 3px;
23+
width: 100%;
24+
padding: 0 3px 3px 0;
25+
top: 0;
26+
cursor: row-resize;
27+
}
28+
`;
29+
const QueryLibraryResultWrapper = styled.div`
30+
display: flex;
31+
flex-direction: column;
32+
height: 100%;
33+
width: 100%;
34+
border-top-left-radius: 8px;
35+
border-top-right-radius: 8px;
36+
`;
37+
const preventDefault = (e: any) => {
38+
e.preventDefault();
39+
};
40+
const addListener = () => {
41+
window.addEventListener("mousedown", preventDefault);
42+
};
43+
const removeListener = () => {
44+
window.removeEventListener("mousedown", preventDefault);
45+
};
46+
export const QueryLibraryResultPanel = (props: { comp: BottomResComp; onClose: () => void }) => {
47+
const result = props.comp?.result();
48+
const [bottomHeight, setBottomHeight] = useState(360);
49+
50+
const { header, body } = useResultPanel({
51+
...(result ?? { data: "", dataType: "default", success: true }),
52+
onClose: props.onClose,
53+
});
54+
55+
if (!result) {
56+
return null;
57+
}
58+
59+
const clientHeight = document.documentElement.clientHeight;
60+
const resizeStop = (e: React.SyntheticEvent, data: ResizeCallbackData) => {
61+
setBottomHeight(data.size.height);
62+
removeListener();
63+
};
64+
65+
return (
66+
<StyledResizableBox
67+
width={Infinity}
68+
height={bottomHeight}
69+
resizeHandles={["n"]}
70+
minConstraints={[680, 285]}
71+
maxConstraints={[Infinity, clientHeight - 48 - 95]}
72+
onResizeStart={addListener}
73+
onResizeStop={resizeStop}
74+
>
75+
<QueryLibraryResultWrapper>
76+
<HeaderWrapper style={{ cursor: "default" }}>{header}</HeaderWrapper>
77+
{body}
78+
</QueryLibraryResultWrapper>
79+
</StyledResizableBox>
80+
);
81+
};

0 commit comments

Comments
 (0)