Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0c99982

Browse files
Imiss-U1025Imiss-U1025
committed
Merge branch 'feature-viewer3' of https://github.com/Imiss-U1025/lowcoder into feature-viewer3
2 parents ac488ed + 42a9daf commit 0c99982

File tree

251 files changed

+2380
-16689
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

251 files changed

+2380
-16689
lines changed

‎viewer/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"devDependencies": {
2525
"@babel/preset-env": "^7.20.2",
2626
"@babel/preset-typescript": "^7.18.6",
27-
"@rollup/plugin-typescript": "^8.5.0",
27+
"@rollup/plugin-typescript": "^12.1.0",
2828
"@testing-library/jest-dom": "^5.16.5",
2929
"@types/file-saver": "^2.0.5",
3030
"@types/jest": "^29.2.2",
@@ -83,7 +83,7 @@
8383
"react-countup": "^6.5.3",
8484
"react-player": "^2.11.0",
8585
"resize-observer-polyfill": "^1.5.1",
86-
"rollup": "^4.13.0",
86+
"rollup": "^4.22.5",
8787
"simplebar": "^6.2.5",
8888
"tui-image-editor": "^3.15.3"
8989
}

‎viewer/packages/lowcoder-core/lib/index.d.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,6 @@ type DispatchType = (action: CompAction) => void;
377377
interface Comp<ViewReturn = any, DataType extends JSONValue = JSONValue, NodeType extends OptionalNodeType = OptionalNodeType> {
378378
dispatch: DispatchType;
379379
getView(): ViewReturn;
380-
getPropertyView(): ReactNode;
381380
reduce(action: CompAction): this;
382381
node(): NodeType;
383382
toJsonValue(): DataType;
@@ -392,7 +391,6 @@ declare abstract class AbstractComp<ViewReturn = any, DataType extends JSONValue
392391
dispatch: DispatchType;
393392
constructor(params: CompParams);
394393
abstract getView(): ViewReturn;
395-
abstract getPropertyView(): ReactNode;
396394
abstract toJsonValue(): DataType;
397395
abstract reduce(_action: CompAction): this;
398396
abstract nodeWithoutCache(): NodeType;

‎viewer/packages/lowcoder-core/src/baseComps/comp.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { changeValueAction, ChangeValueAction, CompAction, CompActionTypes } from "actions";
2-
import { Node } from "eval";
3-
import { ReactNode } from "react";
4-
import { memo } from "util/cacheUtils";
5-
import { JSONValue } from "util/jsonTypes";
6-
import { setFieldsNoTypeCheck } from "util/objectUtils";
1+
import {changeValueAction, ChangeValueAction, CompAction} from "actions";
2+
import {Node} from "eval";
3+
import {memo} from "util/cacheUtils";
4+
import {JSONValue} from "util/jsonTypes";
5+
import {setFieldsNoTypeCheck} from "util/objectUtils";
76

87
export type OptionalNodeType = Node<unknown> | undefined;
98
export type DispatchType = (action: CompAction) => void;
@@ -19,8 +18,6 @@ export interface Comp<
1918

2019
getView(): ViewReturn;
2120

22-
getPropertyView(): ReactNode;
23-
2421
reduce(action: CompAction): this;
2522

2623
node(): NodeType;
@@ -50,8 +47,6 @@ export abstract class AbstractComp<
5047

5148
abstract getView(): ViewReturn;
5249

53-
abstract getPropertyView(): ReactNode;
54-
5550
abstract toJsonValue(): DataType;
5651

5752
abstract reduce(_action: CompAction): this;

‎viewer/packages/lowcoder-design/src/components/control.tsx

Lines changed: 2 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -1,178 +1,4 @@
1-
import { ToolTipLabel } from "./toolTip";
2-
import styled, { css } from "styled-components";
3-
import React, {
4-
PropsWithChildren,
5-
ReactElement,
6-
ReactNode,
7-
useContext,
8-
useEffect,
9-
useState,
10-
} from "react";
11-
12-
type ControlLayout = "horizontal" | "vertical"; // set propertyView's layout, default horizontal;
13-
type ControlPlacement = "bottom" | "right" | "modal"; // set propertyView's position, default right;
14-
15-
// place common comps of control comps
16-
17-
const Wrapper = styled.div<{
18-
$layout: ControlLayout;
19-
$placement: ControlPlacement;
20-
}>`
21-
width: 100%;
22-
${(props) => {
23-
switch (props.$layout) {
24-
case "horizontal":
25-
return css`
26-
display: flex;
27-
flex-direction: row;
28-
align-items: ${props.$placement === "bottom" ? "baseline" : "center"};
29-
justify-content: space-between;
30-
`;
31-
case "vertical":
32-
return css`
33-
display: flex;
34-
flex-direction: column;
35-
gap: 8px;
36-
margin-top: 4px;
37-
38-
&:first-child {
39-
margin: 0;
40-
}
41-
`;
42-
default:
43-
return css``;
44-
}
45-
}}
46-
`;
47-
48-
function getWidth(placement: ControlPlacement) {
49-
switch (placement) {
50-
case "right":
51-
return 96;
52-
case "bottom":
53-
return 112;
54-
default:
55-
return 136;
56-
}
57-
}
58-
59-
const LabelWrapper = styled.div<{
60-
$layout: ControlLayout;
61-
$placement: ControlPlacement;
62-
$labelEllipsis?: boolean;
63-
}>`
64-
${(props) => {
65-
switch (props.$layout) {
66-
case "horizontal":
67-
return css`
68-
flex: 0 0 ${getWidth(props.$placement)}px;
69-
`;
70-
case "vertical":
71-
return css`
72-
display: block;
73-
`;
74-
}
75-
}}
76-
${(props) => {
77-
if (props.$labelEllipsis && props.$layout === "horizontal") {
78-
return css`
79-
.tooltipLabel {
80-
width: ${getWidth(props.$placement)}px;
81-
padding-right: 2px;
82-
text-overflow: ellipsis;
83-
overflow: hidden;
84-
white-space: nowrap;
85-
}
86-
`;
87-
}
88-
}}
89-
`;
90-
const ChildrenWrapper = styled.div<{ $layout: ControlLayout }>`
91-
min-width: 0;
92-
${(props) => {
93-
switch (props.$layout) {
94-
case "horizontal":
95-
return `
96-
flex:1 1 auto;
97-
`;
98-
case "vertical":
99-
return css`
100-
display: inline;
101-
`;
102-
}
103-
}}
104-
`;
105-
106-
const LastNode = styled.div`
107-
margin-left: 8px;
108-
display: inline-flex;
109-
align-items: center;
110-
111-
.ant-select-selection-item {
112-
width: 40px;
113-
}
114-
`;
115-
116-
interface ControlPropertyViewWrapperProps {
117-
key?: string;
118-
label?: ReactNode;
119-
tooltip?: ReactNode;
120-
width?: string;
121-
layout?: ControlLayout;
122-
labelEllipsis?: boolean;
123-
placement?: ControlPlacement;
124-
lastNode?: ReactNode;
125-
preInputNode?: ReactNode;
126-
childrenWrapperStyle?: React.CSSProperties;
127-
labelTooltipOverlayInnerStyle?: React.CSSProperties;
128-
extraChildren?: ReactNode;
129-
labelStyle?: React.CSSProperties;
130-
}
131-
132-
export const ControlPropertyViewWrapper = (
133-
props: PropsWithChildren<ControlPropertyViewWrapperProps>
134-
) => {
135-
const {
136-
tooltip,
137-
label,
138-
layout = "horizontal",
139-
placement = "right",
140-
childrenWrapperStyle,
141-
labelEllipsis,
142-
preInputNode,
143-
children,
144-
extraChildren,
145-
labelTooltipOverlayInnerStyle,
146-
lastNode,
147-
labelStyle,
148-
} = props;
149-
150-
return (
151-
<Wrapper $layout={layout} $placement={placement}>
152-
{label && (
153-
<LabelWrapper
154-
$layout={layout}
155-
$placement={placement}
156-
$labelEllipsis={labelEllipsis}
157-
style={labelStyle}
158-
>
159-
<ToolTipLabel
160-
title={tooltip}
161-
label={label}
162-
overlayInnerStyle={labelTooltipOverlayInnerStyle}
163-
/>
164-
</LabelWrapper>
165-
)}
166-
{preInputNode}
167-
{/* margin and padding are calculated differently so they're made equal */}
168-
<ChildrenWrapper style={{...childrenWrapperStyle,marginLeft:label==='Margin'||label==='Padding'?'6px':'0px'}} $layout={layout}>
169-
{children}
170-
{extraChildren}
171-
</ChildrenWrapper>
172-
{lastNode && <LastNode>{lastNode}</LastNode>}
173-
</Wrapper>
174-
);
175-
};
1+
import React, {ReactElement, ReactNode, useContext, useEffect, useState,} from "react";
1762

1773
export const SearchTextContext = React.createContext("");
1784

@@ -266,10 +92,4 @@ export function controlItem(data: ControlItemData, propertyView: ReactElement):
26692
</ControlItemWrapper>
26793
);
26894
return { ...item, __control__: true };
269-
}
270-
271-
// ControlPropertyViewWrapper to ControlItem
272-
export function wrapperToControlItem(controlPropertyViewWrapper: ReactElement) {
273-
const { label } = controlPropertyViewWrapper.props as ControlPropertyViewWrapperProps;
274-
return controlItem({ filterText: label }, controlPropertyViewWrapper);
275-
}
95+
}

‎viewer/packages/lowcoder-design/src/components/query.tsx

Lines changed: 4 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,6 @@
1-
import styled, { css } from "styled-components";
2-
import { default as Alert } from "antd/es/alert";
3-
import { ReactNode } from "react";
4-
import { AlertProps } from "antd/es/alert";
5-
import { ToolTipLabel } from "./toolTip";
6-
import { DocLink } from "components/ExternalLink";
7-
8-
export const QueryPropertyViewWrapper = styled.div`
9-
display: flex;
10-
padding-bottom: 72px;
11-
gap: 20px;
12-
flex-wrap: wrap;
13-
`;
14-
15-
const QueryAlertWrapper = styled.div`
16-
height: 32px;
17-
width: 100%;
18-
position: absolute;
19-
bottom: 0;
20-
21-
.ant-alert-error {
22-
border: none;
23-
background: #fff3f1;
24-
}
25-
26-
.ant-alert-icon {
27-
margin-right: 8px;
28-
margin-left: 16px;
29-
}
30-
31-
.ant-alert {
32-
padding: 0;
33-
}
34-
35-
.ant-alert-message {
36-
font-size: 13px;
37-
color: #333333;
38-
line-height: 32px;
39-
}
40-
`;
41-
42-
export const QueryAlert = (props: AlertProps) => (
43-
<QueryAlertWrapper>
44-
<Alert type={"error"} showIcon={true} {...props} />
45-
</QueryAlertWrapper>
46-
);
47-
48-
export const QuerySectionWrapper = styled.div`
49-
display: flex;
50-
flex-wrap: nowrap;
51-
flex-direction: column;
52-
width: 100%;
53-
gap: 8px;
54-
flex-grow: 1;
55-
`;
56-
57-
export const QueryConfigWrapper = styled.div<{ $width?: string }>`
58-
display: flex;
59-
width: ${(props) => props.$width ?? "100%"};
60-
align-items: flex-start;
61-
flex-wrap: nowrap;
62-
`;
1+
import styled from "styled-components";
2+
import {ReactNode} from "react";
3+
import {ToolTipLabel} from "./toolTip";
634

645
const QueryConfigLabelWrapper = styled.div`
656
width: 112px;
@@ -91,63 +32,4 @@ export const QueryConfigLabel = (props: QueryConfigLabelProps) => (
9132
}
9233
/>
9334
</QueryConfigLabelWrapper>
94-
);
95-
96-
export const QueryConfigItemWrapper = styled.div<{ direction?: "row" | "column" }>`
97-
min-width: 0;
98-
flex-grow: 1;
99-
${(props) => {
100-
if (props.direction === "row") {
101-
return css`
102-
min-width: 0;
103-
display: flex;
104-
align-items: center;
105-
`;
106-
}
107-
}}
108-
`;
109-
110-
type TutorialStyle = "dropdownRight" | "begin";
111-
112-
const TutorialButtonWrapper = styled.div<{ $styleName: TutorialStyle }>`
113-
height: 100%;
114-
display: flex;
115-
align-items: center;
116-
${(props) => {
117-
if (props.$styleName === "dropdownRight") {
118-
return css`
119-
padding-left: 8px;
120-
width: 264px;
121-
flex-grow: 1;
122-
`;
123-
}
124-
}}
125-
`;
126-
127-
export const QueryTutorialButton = ({
128-
label,
129-
url,
130-
styleName,
131-
}: {
132-
label: string;
133-
url?: string;
134-
styleName: "dropdownRight" | "begin";
135-
}) =>
136-
url ? (
137-
<TutorialButtonWrapper $styleName={styleName}>
138-
<DocLink href={url}>{label}</DocLink>
139-
</TutorialButtonWrapper>
140-
) : (
141-
<></>
142-
);
143-
144-
export const TriggerTypeStyled = styled.div`
145-
> div > div:nth-of-type(2) {
146-
> div {
147-
width: 100%;
148-
}
149-
::after {
150-
display: none;
151-
}
152-
}
153-
`;
35+
);

0 commit comments

Comments
 (0)