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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy