Skip to content

Commit 4d02140

Browse files
iamfaraniamfaran
committed
Merge branch 'dev' of github.com:lowcoder-org/lowcoder into fix/1849-errors
2 parents a6eb2a9 + d1937a8 commit 4d02140

File tree

9 files changed

+1777
-99
lines changed

9 files changed

+1777
-99
lines changed

‎client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: Disa
5454
&.ant-btn-disabled {
5555
color: ${disabledStyle.disabledText};
5656
background: ${disabledStyle.disabledBackground};
57+
border-color: ${disabledStyle.disabledBorder};
5758
cursor: not-allowed;
5859
}
5960
}

‎client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export function getButtonStyle(buttonStyle: any, disabledStyle: any) {
4848
&.ant-btn-disabled {
4949
color: ${disabledStyle.disabledText};
5050
background: ${disabledStyle.disabledBackground};
51+
border-color: ${disabledStyle.disabledBorder};
5152
cursor: not-allowed;
5253
}
5354
}
@@ -70,15 +71,15 @@ export const Button100 = styled(Button)<{ $buttonStyle?: any; $disabledStyle?: a
7071
`;
7172

7273
export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`
73-
// The button component is disabled but can respond to drag & select events
74-
${(props) =>
75-
props.disabled &&
76-
`
77-
cursor: not-allowed;
78-
button:disabled {
79-
pointer-events: none;
80-
}
81-
`};
74+
${(props) =>
75+
props.disabled
76+
? css`
77+
cursor: not-allowed;
78+
button:disabled {
79+
pointer-events: none;
80+
}
81+
`
82+
: ''};
8283
`;
8384

8485
/**

‎client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,30 @@
1-
import {
2-
BoolCodeControl,
3-
ButtonEventHandlerControl,
4-
InputLikeStyle,
5-
NameConfig,
6-
Section,
7-
UICompBuilder,
8-
hiddenPropertyView,
9-
sectionNames,
10-
showDataLoadingIndicatorsPropertyView,
11-
styleControl,
12-
withExposingConfigs
13-
} from "@lowcoder-ee/index.sdk";
141
import styled from "styled-components";
152
import React, { useContext } from "react";
16-
import { trans } from "i18n";
173
import { Tag } from "antd";
184
import { EditorContext } from "comps/editorState";
195
import { PresetStatusColorTypes } from "antd/es/_util/colors";
206
import { hashToNum } from "util/stringUtils";
217
import { TagsCompOptionsControl } from "comps/controls/optionsControl";
228
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
9+
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
10+
import { ButtonEventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl";
11+
import { InputLikeStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
12+
import { BoolCodeControl } from "@lowcoder-ee/comps/controls/codeControl";
13+
import { UICompBuilder } from "@lowcoder-ee/comps/generators/uiCompBuilder";
14+
import { Section, sectionNames } from "lowcoder-design";
15+
import { NameConfig } from "@lowcoder-ee/comps/generators/withExposing";
16+
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "@lowcoder-ee/comps/utils/propertyUtils";
17+
import { withExposingConfigs } from "@lowcoder-ee/comps/generators/withExposing";
2318

2419
const colors = PresetStatusColorTypes;
2520

2621
// These functions are used for individual tag styling
2722
function getTagColor(tagText : any, tagOptions: any[]) {
2823
const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
2924
if (foundOption) {
30-
if (foundOption.colorType === "preset") {
25+
if (foundOption.colorType === "default") {
26+
return undefined;
27+
} else if (foundOption.colorType === "preset") {
3128
return foundOption.presetColor;
3229
} else if (foundOption.colorType === "custom") {
3330
return undefined;
@@ -40,20 +37,32 @@ function getTagColor(tagText : any, tagOptions: any[]) {
4037

4138
const getTagStyle = (tagText: any, tagOptions: any[], baseStyle: any = {}) => {
4239
const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
40+
4341
if (foundOption) {
42+
// If colorType is "default", use ONLY component styles
43+
if (foundOption.colorType === "default") {
44+
const style: any = { ...baseStyle };
45+
if (baseStyle.borderWidth && baseStyle.border && baseStyle.borderStyle) {
46+
style.border = `${baseStyle.borderWidth} ${baseStyle.borderStyle} ${baseStyle.border}`;
47+
}
48+
return style;
49+
}
50+
4451
const style: any = { ...baseStyle };
4552

4653
if (foundOption.colorType === "custom") {
4754
style.backgroundColor = foundOption.color;
4855
style.color = foundOption.textColor;
49-
style.border = `1px solid ${foundOption.color}`;
5056
}
5157

52-
if (foundOption.border) {
53-
style.borderColor = foundOption.border;
54-
if (!foundOption.colorType || foundOption.colorType !== "custom") {
55-
style.border = `1px solid ${foundOption.border}`;
56-
}
58+
let borderStyle = foundOption.borderStyle || "none";
59+
let borderWidth = foundOption.borderWidth || "0px";
60+
let borderColor = foundOption.border || "none";
61+
62+
if (borderStyle !== "none") {
63+
style.border = `${borderWidth} ${borderStyle} ${borderColor}`;
64+
} else {
65+
style.border = "none";
5766
}
5867

5968
if (foundOption.radius) {
@@ -68,33 +77,36 @@ const getTagStyle = (tagText: any, tagOptions: any[], baseStyle: any = {}) => {
6877
style.padding = foundOption.padding;
6978
}
7079

80+
if (foundOption.width) {
81+
style.width = foundOption.width;
82+
}
83+
7184
return style;
7285
}
73-
return baseStyle;
74-
};
7586

76-
function getTagIcon(tagText: any, tagOptions: any[]) {
77-
const foundOption = tagOptions.find(option => option.label === tagText);
78-
return foundOption ? foundOption.icon : undefined;
79-
}
87+
const style: any = { ...baseStyle };
88+
if (baseStyle.borderWidth && baseStyle.border && baseStyle.borderStyle) {
89+
style.border = `${baseStyle.borderWidth} ${baseStyle.borderStyle} ${baseStyle.border}`;
90+
}
91+
return style;
92+
};
8093

8194
const multiTags = (function () {
8295

83-
const StyledTag = styled(Tag)<{ $style: any, $bordered: boolean, $customStyle: any }>`
96+
const StyledTag = styled(Tag)<{ $style: any, $customStyle: any }>`
8497
display: flex;
8598
justify-content: center;
8699
align-items: center;
87-
width: 100%;
100+
min-width: fit-content;
101+
width: ${(props) => props.$customStyle?.width || 'auto'};
102+
max-width: 100px;
88103
background: ${(props) => props.$customStyle?.backgroundColor || props.$style?.background};
89104
color: ${(props) => props.$customStyle?.color || props.$style?.text};
90105
border-radius: ${(props) => props.$customStyle?.borderRadius || props.$style?.borderRadius};
91-
border: ${(props) => {
92-
if (props.$customStyle?.border) return props.$customStyle.border;
93-
return props.$bordered ? `${props.$style?.borderStyle} ${props.$style?.borderWidth} ${props.$style?.border}` : 'none';
94-
}};
106+
border: ${(props) => props.$customStyle?.border || props.$style?.border || '1px solid #d9d9d9'};
95107
padding: ${(props) => props.$customStyle?.padding || props.$style?.padding};
96108
margin: ${(props) => props.$customStyle?.margin || props.$style?.margin};
97-
font-size: ${(props) => props.$style?.textSize};
109+
font-size: ${(props) => props.$style?.textSize || '8px'};
98110
font-weight: ${(props) => props.$style?.fontWeight};
99111
cursor: pointer;
100112
`;
@@ -109,8 +121,6 @@ const multiTags = (function () {
109121
options: TagsCompOptionsControl,
110122
style: styleControl(InputLikeStyle, 'style'),
111123
onEvent: ButtonEventHandlerControl,
112-
borderless: BoolCodeControl,
113-
enableIndividualStyling: BoolCodeControl,
114124
};
115125

116126
return new UICompBuilder(childrenMap, (props) => {
@@ -120,20 +130,18 @@ const multiTags = (function () {
120130
<StyledTagContainer>
121131
{props.options.map((tag, index) => {
122132

123-
// Use individual styling only if enableIndividualStyling is true
124-
const tagColor = props.enableIndividualStyling ? getTagColor(tag.label, props.options) : undefined;
125-
const tagIcon = props.enableIndividualStyling ? getTagIcon(tag.label, props.options) : tag.icon;
126-
const tagStyle = props.enableIndividualStyling ? getTagStyle(tag.label, props.options, props.style) : {};
133+
const tagColor = getTagColor(tag.label, props.options);
134+
const tagIcon = tag.icon;
135+
const tagStyle = getTagStyle(tag.label, props.options, props.style);
127136

128137
return (
129138
<StyledTag
130139
key={`tag-${index}`}
131140
$style={props.style}
132-
$bordered={!props.borderless}
133141
$customStyle={tagStyle}
134142
icon={tagIcon}
135143
color={tagColor}
136-
onClick={() => handleClickEvent()}
144+
onClick={handleClickEvent}
137145
>
138146
{tag.label}
139147
</StyledTag>
@@ -145,7 +153,7 @@ const multiTags = (function () {
145153
.setPropertyViewFn((children: any) => {
146154
return (
147155
<>
148-
<Section name="Basic">
156+
<Section name={sectionNames.basic}>
149157
{children.options.propertyView({})}
150158
</Section>
151159

@@ -161,11 +169,6 @@ const multiTags = (function () {
161169
useContext(EditorContext).editorModeStatus
162170
) && (
163171
<Section name={sectionNames.style}>
164-
{children.enableIndividualStyling.propertyView({
165-
label: trans("style.individualStyling"),
166-
tooltip: trans("style.individualStylingTooltip")
167-
})}
168-
{children.borderless.propertyView({ label: trans("style.borderless") })}
169172
{children.style.getPropertyView()}
170173
</Section>
171174
)}

‎client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
184184
}, [defaultValue]);
185185

186186
useEffect(() => {
187-
if (!changeRef.current) {
187+
if (!touchRef.current) {
188188
setLocalInputValue(inputValue);
189189
}
190190
}, [inputValue]);

‎client/packages/lowcoder/src/comps/controls/optionsControl.tsx

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ import {
2929
IconRadius,
3030
Option,
3131
WidthIcon,
32-
ImageCompIcon,
3332
CloseEyeIcon,
3433
} from "lowcoder-design";
3534
import styled from "styled-components";
@@ -39,8 +38,8 @@ import { JSONObject, JSONValue } from "util/jsonTypes";
3938
import { ButtonEventHandlerControl } from "./eventHandlerControl";
4039
import { ControlItemCompBuilder } from "comps/generators/controlCompBuilder";
4140
import { ColorControl } from "./colorControl";
42-
import { StringStateControl } from "./codeStateControl";
4341
import { reduceInContext } from "../utils/reduceContext";
42+
import { BorderOuterOutlined } from "@ant-design/icons";
4443

4544
// Tag preset color options
4645
const TAG_PRESET_COLORS = [
@@ -786,17 +785,26 @@ let TagsCompOptions = new MultiCompBuilder(
786785
{
787786
label: StringControl,
788787
icon: IconControl,
789-
colorType: withDefault(dropdownControl([
788+
colorType: dropdownControl([
789+
{ label: "Default", value: "default"},
790790
{ label: trans("style.preset"), value: "preset" },
791791
{ label: trans("style.custom"), value: "custom" },
792-
] as const, "preset"), "preset"),
793-
presetColor: withDefault(dropdownControl(TAG_PRESET_COLORS, "blue"), "blue"),
792+
], "default"),
793+
presetColor: dropdownControl(TAG_PRESET_COLORS, "default"),
794794
color: withDefault(ColorControl, "#1890ff"),
795795
textColor: withDefault(ColorControl, "#ffffff"),
796796
border: withDefault(ColorControl, ""),
797+
borderWidth: withDefault(RadiusControl, ""),
798+
borderStyle: withDefault(dropdownControl([
799+
{ label: "Solid", value: "solid" },
800+
{ label: "Dashed", value: "dashed" },
801+
{ label: "Dotted", value: "dotted" },
802+
{ label: "None", value: "none" },
803+
], "solid"), "solid"),
797804
radius: withDefault(RadiusControl, ""),
798805
margin: withDefault(StringControl, ""),
799806
padding: withDefault(StringControl, ""),
807+
width: withDefault(StringControl, ""),
800808
},
801809
(props) => props
802810
).build();
@@ -809,8 +817,7 @@ TagsCompOptions = class extends TagsCompOptions implements OptionCompProperty {
809817
{this.children.label.propertyView({ label: trans("coloredTagOptionControl.tag") })}
810818
{this.children.icon.propertyView({ label: trans("coloredTagOptionControl.icon") })}
811819
{this.children.colorType.propertyView({
812-
label: trans("style.colorType"),
813-
radioButton: true
820+
label: trans("style.styleOptions")
814821
})}
815822
{colorType === "preset" && this.children.presetColor.propertyView({
816823
label: trans("style.presetColor")
@@ -821,9 +828,17 @@ TagsCompOptions = class extends TagsCompOptions implements OptionCompProperty {
821828
{this.children.textColor.propertyView({ label: trans("style.textColor") })}
822829
</>
823830
)}
831+
{this.children.borderStyle.propertyView({
832+
label: trans('style.borderStyle'),
833+
preInputNode: <StyledIcon as={BorderOuterOutlined} title="" />,
834+
})}
824835
{this.children.border.propertyView({
825836
label: trans('style.border')
826837
})}
838+
{this.children.borderWidth.propertyView({
839+
label: trans('style.borderWidth'),
840+
preInputNode: <StyledIcon as={WidthIcon} title="" />,
841+
})}
827842
{this.children.radius.propertyView({
828843
label: trans('style.borderRadius'),
829844
preInputNode: <StyledIcon as={IconRadius} title="" />,
@@ -839,15 +854,20 @@ TagsCompOptions = class extends TagsCompOptions implements OptionCompProperty {
839854
preInputNode: <StyledIcon as={CompressIcon} title="" />,
840855
placeholder: '3px',
841856
})}
857+
{this.children.width.propertyView({
858+
label: trans('splitLayout.width'),
859+
preInputNode: <StyledIcon as={WidthIcon} title="" />,
860+
placeholder: '100px',
861+
})}
842862
</>
843863
);
844864
}
845865
};
846866

847867
export const TagsCompOptionsControl = optionsControl(TagsCompOptions, {
848868
initOptions: [
849-
{ label: "Option 1", colorType: "preset", presetColor: "blue" },
850-
{ label: "Option 2", colorType: "preset", presetColor: "green" }
869+
{ label: "Option 1", colorType: "default"},
870+
{ label: "Option 2", colorType: "default"}
851871
],
852872
uniqField: "label",
853873
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -476,6 +476,7 @@ export const en = {
476476
// fourth part
477477

478478
"style": {
479+
"styleOptions": "Style Options",
479480
"boxShadowColor": 'Shadow Color',
480481
"boxShadow": 'Box Shadow',
481482
"opacity": 'Opacity',

0 commit comments

Comments
 (0)