Skip to content

Commit a05b625

Browse files
ggbond2077QIQI03
ggbond2077
authored and
QIQI03
committed
1. fix: js query which has deps not execute on page load
2. fix(table) column overflow ellipsis 3. fix(multiBaseComp): fix node's cache when reduce UPDATE_NODE_V2
1 parent b0453f7 commit a05b625

File tree

9 files changed

+97
-52
lines changed

9 files changed

+97
-52
lines changed

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3283,13 +3283,15 @@ function containFields(obj, fields) {
32833283
* type unsafe, users should keep safe by self.
32843284
* pros: this function can support private fields.
32853285
*/
3286-
function setFieldsNoTypeCheck(obj, fields) {
3286+
function setFieldsNoTypeCheck(obj, fields, params) {
32873287
var res = Object.assign(Object.create(Object.getPrototypeOf(obj)), obj);
3288-
Object.keys(res).forEach(function (key) {
3289-
if (key.startsWith(CACHE_PREFIX)) {
3290-
delete res[key];
3291-
}
3292-
});
3288+
if (!(params === null || params === void 0 ? void 0 : params.keepCache)) {
3289+
Object.keys(res).forEach(function (key) {
3290+
if (key.startsWith(CACHE_PREFIX)) {
3291+
delete res[key];
3292+
}
3293+
});
3294+
}
32933295
return Object.assign(res, fields);
32943296
}
32953297

@@ -3416,7 +3418,7 @@ var MultiBaseComp = /** @class */ (function (_super) {
34163418
var cacheKey = CACHE_PREFIX + "REDUCE_UPDATE_NODE";
34173419
// if constructed by the value, just return
34183420
if (this[cacheKey] === value_1) {
3419-
// FIXME: check why this branch is not passed
3421+
// console.info("inside: UPDATE_NODE_V2 cache hit. action: ", action, "\nvalue: ", value, "\nthis: ", this);
34203422
return this;
34213423
}
34223424
var children = _.mapValues(this.children, function (comp, childName) {
@@ -3429,7 +3431,7 @@ var MultiBaseComp = /** @class */ (function (_super) {
34293431
if (shallowEqual(children, this.children) && containFields(this, extraFields)) {
34303432
return this;
34313433
}
3432-
return setFieldsNoTypeCheck(this, __assign((_b = { children: children }, _b[cacheKey] = value_1, _b), extraFields));
3434+
return setFieldsNoTypeCheck(this, __assign((_b = { children: children }, _b[cacheKey] = value_1, _b), extraFields), { keepCache: true });
34333435
}
34343436
case CompActionTypes.CHANGE_VALUE: {
34353437
return this.setChildren(this.parseChildrenFromValue({

‎client/packages/openblocks-core/src/baseComps/multiBaseComp.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import {
88
} from "actions";
99
import { fromRecord, Node } from "eval";
1010
import _ from "lodash";
11+
import log from "loglevel";
1112
import { CACHE_PREFIX } from "util/cacheUtils";
1213
import { JSONValue } from "util/jsonTypes";
1314
import { containFields, setFieldsNoTypeCheck, shallowEqual } from "util/objectUtils";
1415
import { AbstractComp, Comp, CompParams, DispatchType, OptionalNodeType } from "./comp";
15-
import log from "loglevel";
1616

1717
/**
1818
* MultiBaseCompConstructor with abstract function implemented
@@ -134,7 +134,7 @@ export abstract class MultiBaseComp<
134134
const cacheKey = CACHE_PREFIX + "REDUCE_UPDATE_NODE";
135135
// if constructed by the value, just return
136136
if ((this as any)[cacheKey] === value) {
137-
// FIXME: check why this branch is not passed
137+
// console.info("inside: UPDATE_NODE_V2 cache hit. action: ", action, "\nvalue: ", value, "\nthis: ", this);
138138
return this;
139139
}
140140
const children = _.mapValues(this.children, (comp, childName) => {
@@ -147,11 +147,15 @@ export abstract class MultiBaseComp<
147147
if (shallowEqual(children, this.children) && containFields(this, extraFields)) {
148148
return this;
149149
}
150-
return setFieldsNoTypeCheck(this, {
151-
children: children,
152-
[cacheKey]: value,
153-
...extraFields,
154-
});
150+
return setFieldsNoTypeCheck(
151+
this,
152+
{
153+
children: children,
154+
[cacheKey]: value,
155+
...extraFields,
156+
},
157+
{ keepCache: true }
158+
);
155159
}
156160
case CompActionTypes.CHANGE_VALUE: {
157161
return this.setChildren(

‎client/packages/openblocks-core/src/util/objectUtils.ts

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,19 @@ export function setFields<T>(obj: T, fields: Partial<T>) {
9797
* type unsafe, users should keep safe by self.
9898
* pros: this function can support private fields.
9999
*/
100-
export function setFieldsNoTypeCheck<T>(obj: T, fields: Record<string, any>) {
100+
export function setFieldsNoTypeCheck<T>(
101+
obj: T,
102+
fields: Record<string, any>,
103+
params?: { keepCache?: boolean }
104+
) {
101105
const res = Object.assign(Object.create(Object.getPrototypeOf(obj)), obj);
102-
Object.keys(res).forEach((key) => {
103-
if (key.startsWith(CACHE_PREFIX)) {
104-
delete res[key];
105-
}
106-
});
106+
if (!params?.keepCache) {
107+
Object.keys(res).forEach((key) => {
108+
if (key.startsWith(CACHE_PREFIX)) {
109+
delete res[key];
110+
}
111+
});
112+
}
107113
return Object.assign(res, fields) as T;
108114
}
109115

‎client/packages/openblocks/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,18 @@ import { manualOptionsControl } from "comps/controls/optionsControl";
77
import { MultiCompBuilder } from "comps/generators";
88
import { hiddenPropertyView } from "comps/utils/propertyUtils";
99
import { trans } from "i18n";
10+
import styled from "styled-components";
11+
12+
const LinksWrapper = styled.div`
13+
white-space: nowrap;
14+
> a {
15+
margin-right: 8px;
16+
}
17+
18+
> a:last-child {
19+
margin-right: 0;
20+
}
21+
`;
1022

1123
const OptionItem = new MultiCompBuilder(
1224
{
@@ -57,7 +69,7 @@ export const ColumnLinksComp = (function () {
5769
);
5870

5971
return (
60-
<Space>
72+
<LinksWrapper>
6173
{props.options
6274
.filter((o) => !o.hidden)
6375
.slice(0, 3)
@@ -71,7 +83,7 @@ export const ColumnLinksComp = (function () {
7183
<EllipsisOutlined onClick={(e) => e.preventDefault()} />
7284
</Dropdown>
7385
)}
74-
</Space>
86+
</LinksWrapper>
7587
);
7688
},
7789
() => ""

‎client/packages/openblocks/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,7 @@ const childrenMap = {
2222
text: StringControl,
2323
};
2424

25-
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (
26-
props
27-
) => props.text;
25+
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
2826

2927
export const ColumnMarkdownComp = (function () {
3028
return new ColumnTypeCompBuilder(

‎client/packages/openblocks/src/comps/comps/tableComp/column/columnTypeView.tsx

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
22
import styled from "styled-components";
33

44
const ColumnTypeViewWrapper = styled.div`
5-
overflow: hidden;
6-
white-space: nowrap;
7-
text-overflow: ellipsis;
8-
word-break: keep-all;
5+
div {
6+
overflow: hidden;
7+
white-space: nowrap;
8+
text-overflow: ellipsis;
9+
word-break: keep-all;
10+
}
911
`;
1012

1113
const ColumnTypeHoverView = styled.div<{
@@ -17,19 +19,15 @@ const ColumnTypeHoverView = styled.div<{
1719
padding: string;
1820
visible: boolean;
1921
}>`
20-
> * {
21-
max-height: max-content !important;
22-
}
23-
2422
position: absolute;
25-
height: ${(props) => (props.adjustHeight ? props.adjustHeight + "px" : "max-content")};
26-
width: ${(props) => (props.adjustWidth ? props.adjustWidth + "px" : "max-content")};
23+
height: ${(props) => (props.adjustHeight ? `${props.adjustHeight}px` : "max-content")};
24+
width: ${(props) => (props.adjustWidth ? `${props.adjustWidth}px` : "max-content")};
2725
visibility: ${(props) => (props.visible ? "visible" : "hidden")};
28-
min-width: ${(props) => props.minWidth && props.minWidth + 2}px;
26+
min-width: ${(props) => (props.minWidth ? `${props.minWidth}px` : "unset")};
2927
max-height: 150px;
3028
max-width: 300px;
3129
overflow: auto;
32-
background-color: #fafafa;
30+
background: inherit;
3331
z-index: 3;
3432
padding: ${(props) => props.padding};
3533
top: ${(props) => `${props.adjustTop || 0}px`};
@@ -52,6 +50,18 @@ const ColumnTypeHoverView = styled.div<{
5250
}
5351
`;
5452

53+
function childIsOverflow(nodes: HTMLCollection): boolean {
54+
for (let i = 0; i < nodes.length; i++) {
55+
const node = nodes[i];
56+
const overflow = node.clientHeight < node.scrollHeight || node.clientWidth < node.scrollWidth;
57+
if (overflow) {
58+
return true;
59+
}
60+
return childIsOverflow(node.children);
61+
}
62+
return false;
63+
}
64+
5565
export default function ColumnTypeView(props: { children: React.ReactNode }) {
5666
const wrapperRef = useRef<HTMLDivElement>(null);
5767
const hoverViewRef = useRef<HTMLDivElement>(null);
@@ -80,9 +90,11 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
8090
return;
8191
}
8292
const overflow =
83-
wrapperEle.offsetHeight < wrapperEle.scrollHeight ||
84-
wrapperEle.offsetWidth < wrapperEle.scrollWidth;
85-
setHasOverflow(overflow);
93+
wrapperEle.clientHeight < wrapperEle.scrollHeight ||
94+
wrapperEle.clientWidth < wrapperEle.scrollWidth;
95+
if (overflow || childIsOverflow(wrapperEle.children)) {
96+
setHasOverflow(true);
97+
}
8698
}, [isHover]);
8799

88100
useEffect(() => {
@@ -106,8 +118,14 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
106118
}
107119

108120
// actual width and height of the element
109-
const width = Math.min(hoverEle.offsetWidth, tableEle.offsetWidth);
110-
const height = Math.min(hoverEle.offsetHeight, tableEle.offsetHeight);
121+
const width = Math.min(
122+
hoverEle.getBoundingClientRect().width,
123+
tableEle.getBoundingClientRect().width
124+
);
125+
const height = Math.min(
126+
hoverEle.getBoundingClientRect().height,
127+
tableEle.getBoundingClientRect().height
128+
);
111129

112130
let left;
113131
const leftOverflow = tableEle.getBoundingClientRect().x - hoverEle.getBoundingClientRect().x;
@@ -119,7 +137,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
119137
left = leftOverflow;
120138
} else if (rightOverflow < 0) {
121139
// minus one, to avoid flashing scrollbars
122-
left = rightOverflow - 1;
140+
left = rightOverflow;
123141
}
124142

125143
const bottomOverflow =

‎client/packages/openblocks/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import { Badge, Button } from "antd";
22
import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
33
import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
4-
import {
5-
BoolCodeControl,
6-
StringControl,
7-
stringUnionControl,
8-
} from "comps/controls/codeControl";
4+
import { BoolCodeControl, StringControl, stringUnionControl } from "comps/controls/codeControl";
95
import { dropdownControl } from "comps/controls/dropdownControl";
106
import { disabledPropertyView, loadingPropertyView } from "comps/utils/propertyUtils";
117
import { trans } from "i18n";
@@ -15,6 +11,14 @@ export const ColumnValueTooltip = trans("table.columnValueTooltip");
1511

1612
const Button100 = styled(Button)`
1713
width: 100%;
14+
display: inline-flex;
15+
align-items: center;
16+
justify-content: center;
17+
overflow: hidden;
18+
span {
19+
overflow: hidden;
20+
text-overflow: ellipsis;
21+
}
1822
`;
1923

2024
const ButtonTypeOptions = [

‎client/packages/openblocks/src/comps/queries/queryComp.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
} from "openblocks-core";
2020
import { SimpleNameComp } from "comps/comps/simpleNameComp";
2121
import { StringControl } from "comps/controls/codeControl";
22-
import { dropdownControl } from "comps/controls/dropdownControl";
2322
import { eventHandlerControl } from "comps/controls/eventHandlerControl";
2423
import { stateComp, valueComp, withTypeAndChildren, withViewFn } from "comps/generators";
2524
import { list } from "comps/generators/list";
@@ -176,7 +175,9 @@ QueryCompTmp = class extends QueryCompTmp {
176175
if (
177176
action.type === CompActionTypes.UPDATE_NODES_V2 &&
178177
getTriggerType(this) === "automatic" &&
179-
this.children.compType.getView() !== "js"
178+
(this.children.compType.getView() !== "js" ||
179+
(this.children.compType.getView() === "js" &&
180+
this.children.lastQueryStartTime.getView() === -1)) // query which has deps can be executed on page load(first time)
180181
) {
181182
const dependValues = this.children.comp.node()?.dependValues();
182183
const target = this as any;

‎client/packages/openblocks/src/i18n/locales/en.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -594,7 +594,7 @@ export const en = {
594594
uiComp: {
595595
inputCompName: "Input",
596596
inputCompDesc: "Input component",
597-
inputCompKeywords: "",
597+
inputCompKeywords: "text",
598598
textAreaCompName: "Text Area",
599599
textAreaCompDesc: "Text Area component",
600600
textAreaCompKeywords: "",

0 commit comments

Comments
 (0)