From 1261e676dd76b20a156036161d26bb5c9a9b2eac Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 02:41:11 +0500 Subject: [PATCH 01/28] translation key added --- client/packages/lowcoder-design/src/i18n/design/locales/en.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index 543bb813a..41a857d42 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -26,6 +26,7 @@ export const en = { style: "Style", meetings : "Meeting Settings", data: "Data", + field:'Field' }, passwordInput: { label: "Password:", From b6a4318128e4fc367d4961824540c4b481670d47 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 02:41:27 +0500 Subject: [PATCH 02/28] section names updated --- client/packages/lowcoder-design/src/components/Section.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 64799789f..7c716c541 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -147,5 +147,6 @@ export const sectionNames = { style: trans("prop.style"), labelStyle:trans("prop.labelStyle"), data: trans("prop.data"), - meetings : trans("prop.meetings"), // added by Falk Wolsky + meetings: trans("prop.meetings"), // added by Falk Wolsky + field:trans("prop.field") }; From 1cd164fba20e535d37f88c2d05dfc4ebb57b50c1 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 02:41:54 +0500 Subject: [PATCH 03/28] component styles created --- .../src/comps/controls/styleControlConstants.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 6d0def690..48df6d19a 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -476,6 +476,15 @@ const STYLING_FIELDS_SEQUENCE = [ BORDER_WIDTH, ] +const STYLING_FIELDS_CONTAINER_SEQUENCE = [ + BORDER, + BORDER_STYLE, + MARGIN, + PADDING, + RADIUS, + BORDER_WIDTH, +]; + const FILL = { name: "fill", label: trans("style.fill"), @@ -784,6 +793,11 @@ export const LabelStyle = [ ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter((style) => style.name !== 'radius' && style.name !== 'background') ] +export const ComponentStyle = [ + getStaticBackground(SURFACE_COLOR), + ...STYLING_FIELDS_CONTAINER_SEQUENCE, +] as const; + export const RatingStyle = [ { name: "checked", From e42c53e30e89f5c58f8146f50d241f40d8bb19b1 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 02:42:36 +0500 Subject: [PATCH 04/28] field styles added to input --- .../src/comps/comps/textInputComp/inputComp.tsx | 5 ++++- .../lowcoder/src/comps/controls/labelControl.tsx | 13 +++++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index e7a8698c7..136a05dca 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -1,7 +1,7 @@ import { Input, Section, sectionNames } from "lowcoder-design"; import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; -import { InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants"; +import { ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants"; import { NameConfig, NameConfigPlaceHolder, @@ -53,6 +53,7 @@ const childrenMap = { labelStyle: styleControl(LabelStyle), prefixIcon: IconControl, suffixIcon: IconControl, + field: styleControl(ComponentStyle), }; let InputBasicComp = new UICompBuilder(childrenMap, (props) => { @@ -72,6 +73,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { ), style: props.style, labelStyle: props.labelStyle, + field:props.field, ...validateState, }); }) @@ -102,6 +104,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { <>
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
+
{children.field.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 2d53a2205..b283d4cca 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -21,6 +21,7 @@ type LabelViewProps = Pick; labelStyle?: Record; + field?: Record; }; const StyledStarIcon = styled(StarIcon)` @@ -41,7 +42,15 @@ function getStyle(style: any) { `; } -const LabelViewWrapper = styled.div<{ $style: any }>` +const LabelViewWrapper = styled.div<{ $style: any, field: any }>` +${(props) => { + return ( + props.field && { + ...props.field, + borderRadius: props.field.radius, + } + ); + }} ${(props) => props.$style && getStyle(props.$style)} display: flex; flex-direction: column; @@ -159,7 +168,7 @@ export const LabelControl = (function () { }; return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => ( - + Date: Thu, 18 Apr 2024 02:51:25 +0500 Subject: [PATCH 05/28] field styles added to autocomplae --- .../src/comps/comps/autoCompleteComp/autoCompleteComp.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index ab1a992fa..c0b5cf937 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -3,6 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design"; import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; import { + ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, @@ -87,6 +88,7 @@ const childrenMap = { autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), componentSize: dropdownControl(componentSize, "small"), valueInItems: booleanExposingStateControl("valueInItems"), + field: styleControl(ComponentStyle), }; const getValidate = (value: any): "" | "warning" | "error" | undefined => { @@ -279,7 +281,8 @@ let AutoCompleteCompBase = (function () { ), style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, ...validateState, }); }) @@ -341,6 +344,9 @@ let AutoCompleteCompBase = (function () {
{children.labelStyle.getPropertyView()}
+
+ {children.field.getPropertyView()} +
); }) From e5e22a0117ba4e04b24fc8a8d5922dd7dcfcd5e6 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 02:57:04 +0500 Subject: [PATCH 06/28] field styles added to radio --- .../lowcoder/src/comps/comps/selectInputComp/radioComp.tsx | 3 ++- .../src/comps/comps/selectInputComp/radioCompConstants.tsx | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx index ea3da9755..2269d9f20 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx @@ -104,7 +104,8 @@ let RadioBasicComp = (function () { return props.label({ required: props.required, style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, children: ( , - + field:styleControl(ComponentStyle), ...SelectInputValidationChildren, ...formDataChildren, }; @@ -96,6 +96,7 @@ export const RadioPropertyView = ( <>
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
+
{children.field.getPropertyView()}
)} From cd2470ccab8a47c2d5afa743e9f5dc6555bd191c Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:00:16 +0500 Subject: [PATCH 07/28] field styles added to checkbox --- .../src/comps/comps/selectInputComp/checkboxComp.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index 9ff59edc0..c6dff1004 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -15,7 +15,7 @@ import { } from "./selectInputConstants"; import { formDataChildren } from "../formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { CheckboxStyle, CheckboxStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { CheckboxStyle, CheckboxStyleType, ComponentStyle, LabelStyle } from "comps/controls/styleControlConstants"; import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants"; import { dropdownControl } from "../../controls/dropdownControl"; import { ValueFromOption } from "lowcoder-design"; @@ -140,7 +140,7 @@ let CheckboxBasicComp = (function () { labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), layout: dropdownControl(RadioLayoutOptions, "horizontal"), viewRef: RefControl, - + field:styleControl(ComponentStyle), ...SelectInputValidationChildren, ...formDataChildren, }; @@ -153,6 +153,7 @@ let CheckboxBasicComp = (function () { required: props.required, style: props.style, labelStyle: props.labelStyle, + field:props.field, children: ( Date: Thu, 18 Apr 2024 03:02:32 +0500 Subject: [PATCH 08/28] field styles added to cascader --- .../src/comps/comps/selectInputComp/cascaderComp.tsx | 3 ++- .../src/comps/comps/selectInputComp/cascaderContants.tsx | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index 6a5b9babf..2bfb79f5e 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -21,7 +21,8 @@ let CascaderBasicComp = (function () { return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, children: ( , margin: MarginControl, padding: PaddingControl, + field:styleControl(ComponentStyle) }; export const CascaderPropertyView = ( @@ -79,6 +80,9 @@ export const CascaderPropertyView = (
{children.labelStyle.getPropertyView()}
+
+ {children.field.getPropertyView()} +
)} From 32fcd8e3031440e4efff62ce47df66dd61311911 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:21:03 +0500 Subject: [PATCH 09/28] field style added to number input --- .../comps/comps/numberInputComp/numberInputComp.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index 58e0a3544..07dee4b25 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; import { RefControl } from "../../controls/refControl"; import { styleControl } from "comps/controls/styleControl"; -import { InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { disabledPropertyView, hiddenPropertyView, @@ -260,7 +260,7 @@ const childrenMap = { style: styleControl(InputLikeStyle), labelStyle:styleControl(LabelStyle), prefixIcon: IconControl, - + field:styleControl(ComponentStyle), // validation required: BoolControl, min: UndefinedNumberControl, @@ -381,7 +381,8 @@ let NumberInputTmpComp = (function () { required: props.required, children: , style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, ...validate(props), }); }) @@ -436,6 +437,9 @@ let NumberInputTmpComp = (function () {
{children.labelStyle.getPropertyView()}
+
+ {children.field.getPropertyView()} +
)} From 347d61b51309e044f7f90d9ddffd4f8d1570a512 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:23:32 +0500 Subject: [PATCH 10/28] field style added to passwor --- .../src/comps/comps/textInputComp/passwordComp.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index 19944f019..4b6fe4f14 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -26,7 +26,7 @@ import { import { withMethodExposing } from "../../generators/withMethodExposing"; import { styleControl } from "comps/controls/styleControl"; import styled from "styled-components"; -import { InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { hiddenPropertyView, minLengthPropertyView, @@ -58,7 +58,8 @@ let PasswordTmpComp = (function () { visibilityToggle: BoolControl.DEFAULT_TRUE, prefixIcon: IconControl, style: styleControl(InputLikeStyle), - labelStyle: styleControl(LabelStyle) + labelStyle: styleControl(LabelStyle), + field: styleControl(ComponentStyle) }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); @@ -74,7 +75,8 @@ let PasswordTmpComp = (function () { /> ), style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, ...validateState, }); }) @@ -110,6 +112,7 @@ let PasswordTmpComp = (function () { <>
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
+
{children.field.getPropertyView()}
)} From 1e15dddc3b876d8e5f35b9cc551ef1230f274c98 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:31:31 +0500 Subject: [PATCH 11/28] field styles added to switch --- .../packages/lowcoder/src/comps/comps/switchComp.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 70c6a4379..80c583e02 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -4,7 +4,7 @@ import { booleanExposingStateControl } from "comps/controls/codeStateControl"; import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; import { LabelControl } from "comps/controls/labelControl"; import { styleControl } from "comps/controls/styleControl"; -import { SwitchStyle, SwitchStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { SwitchStyle, SwitchStyleType, LabelStyle, ComponentStyle } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { Section, sectionNames } from "lowcoder-design"; import styled, { css } from "styled-components"; @@ -92,13 +92,14 @@ let SwitchTmpComp = (function () { style: migrateOldData(styleControl(SwitchStyle), fixOldData), labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), viewRef: RefControl, - + field:styleControl(ComponentStyle), ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, children: ( {children.labelStyle.getPropertyView()} +
+ {children.field.getPropertyView()} +
)} From c04c6fbbb3e40886fbac34e2d2b1c0f6a06b22be Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:33:40 +0500 Subject: [PATCH 12/28] field style added to text area --- .../src/comps/comps/textInputComp/textAreaComp.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index b13615682..bfdce7f1c 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -22,7 +22,7 @@ import { import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; import { styleControl } from "comps/controls/styleControl"; import styled from "styled-components"; -import { InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { TextArea } from "components/TextArea"; import { allowClearPropertyView, @@ -72,12 +72,14 @@ let TextAreaTmpComp = (function () { allowClear: BoolControl, autoHeight: withDefault(AutoHeightControl, "fixed"), style: styleControl(InputLikeStyle), - labelStyle: styleControl(LabelStyle) + labelStyle: styleControl(LabelStyle), + field: styleControl(ComponentStyle) }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); return props.label({ required: props.required, + field:props.field, children: (
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
+
{children.field.getPropertyView()}
)} From 2139d97a4a64d69c424635e9b2647d12b3830eee Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:37:19 +0500 Subject: [PATCH 13/28] field style added to tree --- .../lowcoder/src/comps/comps/treeComp/treeComp.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index 753df6688..52a4858b5 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -7,7 +7,7 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; import ReactResizeDetector from "react-resize-detector"; import { StyleConfigType, styleControl } from "comps/controls/styleControl"; -import { LabelStyle, TreeStyle } from "comps/controls/styleControlConstants"; +import { ComponentStyle, LabelStyle, TreeStyle } from "comps/controls/styleControlConstants"; import { LabelControl } from "comps/controls/labelControl"; import { withDefault } from "comps/generators"; import { dropdownControl } from "comps/controls/dropdownControl"; @@ -77,7 +77,8 @@ const childrenMap = { // TODO: more event onEvent: SelectEventHandlerControl, style: styleControl(TreeStyle), - labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)) + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), + field:styleControl(ComponentStyle) }; const TreeCompView = (props: RecordConstructorToView) => { @@ -98,6 +99,7 @@ const TreeCompView = (props: RecordConstructorToView) => { ...selectInputValidate(props), style, labelStyle, + field:props.field, children: ( setHeight(h)}> @@ -184,6 +186,7 @@ let TreeBasicComp = (function () { <>
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
+
{children.field.getPropertyView()}
)} From e9b51429b60d8e0bba3e88d19336a9c2362221ad Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:39:16 +0500 Subject: [PATCH 14/28] field style added to tree select --- .../lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index de15121b3..a0ee69b57 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -6,7 +6,7 @@ import { default as TreeSelect } from "antd/es/tree-select"; import { useEffect } from "react"; import styled from "styled-components"; import { styleControl } from "comps/controls/styleControl"; -import { LabelStyle, TreeSelectStyle, TreeSelectStyleType } from "comps/controls/styleControlConstants"; +import { ComponentStyle, LabelStyle, TreeSelectStyle, TreeSelectStyleType } from "comps/controls/styleControlConstants"; import { LabelControl } from "comps/controls/labelControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { @@ -67,6 +67,7 @@ const childrenMap = { inputValue: stateComp(""), // search value style: styleControl(TreeSelectStyle), labelStyle:styleControl(LabelStyle), + field:styleControl(ComponentStyle), viewRef: RefControl, }; @@ -102,6 +103,7 @@ const TreeCompView = ( ...validateState, style, labelStyle, + field:props.field, children: (
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
+
{children.field.getPropertyView()}
)} From f6222cdfe695240e894e59cbc3d6f3bdcac8fd1c Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:43:59 +0500 Subject: [PATCH 15/28] field style added to date --- .../lowcoder/src/comps/comps/dateComp/dateComp.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 2977a60e2..51073bf86 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { ComponentStyle, DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { withMethodExposing } from "../../generators/withMethodExposing"; import { disabledPropertyView, @@ -76,6 +76,7 @@ const commonChildren = { suffixIcon: withDefault(IconControl, "/icon:regular/calendar"), ...validationChildren, viewRef: RefControl, + field:styleControl(ComponentStyle) }; type CommonChildrenType = RecordConstructorToComp; @@ -166,7 +167,8 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { return props.label({ required: props.required, style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, children: ( {
{children.labelStyle.getPropertyView()}
+
+ {children.field.getPropertyView()} +
)} @@ -319,6 +324,7 @@ export const dateRangeControl = (function () { style: props.style, labelStyle:props.labelStyle, children: children, + field:props.field, ...(startResult.validateStatus !== "success" ? startResult : endResult.validateStatus !== "success" @@ -383,6 +389,9 @@ export const dateRangeControl = (function () {
{children.labelStyle.getPropertyView()}
+
+ {children.field.getPropertyView()} +
)} From c7c8ed8bdd4127b2ad41941469b13bb6151730ca Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:47:04 +0500 Subject: [PATCH 16/28] field added to rating --- client/packages/lowcoder/src/comps/comps/ratingComp.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index df93e688c..d01c60f9b 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; +import { ComponentStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; @@ -45,6 +45,7 @@ const RatingBasicComp = (function () { onEvent: eventHandlerControl(EventOptions), style: migrateOldData(styleControl(RatingStyle), fixOldData), labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), + field:styleControl(ComponentStyle), ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { @@ -66,6 +67,7 @@ const RatingBasicComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, + field:props.field, children: ( {children.labelStyle.getPropertyView()} +
+ {children.field.getPropertyView()} +
)} From 756ba81d0d2fa60842acfda2a1f69bc3ecaa04f7 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:51:53 +0500 Subject: [PATCH 17/28] field style added to signature --- .../lowcoder/src/comps/comps/signatureComp.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx index e4efcc1a5..a0f046c0f 100644 --- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx @@ -11,7 +11,8 @@ import { LabelStyle, SignatureStyleType, widthCalculator, - heightCalculator + heightCalculator, + ComponentStyle } from "comps/controls/styleControlConstants"; import { stateComp, withDefault } from "comps/generators/simpleGenerators"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; @@ -103,7 +104,7 @@ const childrenMap = { showUndo: withDefault(BoolControl, true), showClear: withDefault(BoolControl, true), value: stateComp(""), - + field:styleControl(ComponentStyle), ...formDataChildren, }; @@ -128,7 +129,8 @@ let SignatureTmpComp = (function () { }; return props.label({ style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, children: ( { @@ -228,6 +230,9 @@ let SignatureTmpComp = (function () {
{children.labelStyle.getPropertyView()}
+
+ {children.field.getPropertyView()} +
)} From 0e4bb653b7d19a85e034a9abcf9ef4aebeccdadd Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:54:25 +0500 Subject: [PATCH 18/28] field style added to range --- .../src/comps/comps/numberInputComp/rangeSliderComp.tsx | 1 + .../src/comps/comps/numberInputComp/sliderCompConstants.tsx | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx index 7deb69530..9fc9262d9 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx @@ -16,6 +16,7 @@ const RangeSliderBasicComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, + field:props.field, children: ( { diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index 04d3b7f48..ac4791352 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; import { Section, sectionNames } from "lowcoder-design"; import { RecordConstructorToComp } from "lowcoder-core"; import { styleControl } from "comps/controls/styleControl"; -import { LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants"; +import { ComponentStyle, LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; import { default as Slider } from "antd/es/slider"; import { darkenColor, fadeColor } from "lowcoder-design"; @@ -71,6 +71,7 @@ export const SliderChildren = { labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)), prefixIcon: IconControl, suffixIcon: IconControl, + field:styleControl(ComponentStyle) }; export const SliderPropertyView = ( @@ -101,6 +102,9 @@ export const SliderPropertyView = (
{children.labelStyle.getPropertyView()}
+
+ {children.field.getPropertyView()} +
)} From 5bfc98d9819faa9284dd6ac0e0d88d83dc8c6fe9 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 03:56:30 +0500 Subject: [PATCH 19/28] field style added to slider --- .../lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index af9c81b76..11573dd1a 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -19,7 +19,8 @@ const SliderBasicComp = (function () { return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, children: ( { From 0297f461fb41678c74330639e318114165823ae4 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 11:33:48 +0500 Subject: [PATCH 20/28] field style added to select --- .../src/comps/comps/selectInputComp/selectComp.tsx | 8 +++++--- .../comps/comps/selectInputComp/selectCompConstants.tsx | 7 +++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx index 72483ba3b..12c3b2d1d 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx @@ -1,5 +1,5 @@ import { styleControl } from "comps/controls/styleControl"; -import { LabelStyle, SelectStyle } from "comps/controls/styleControlConstants"; +import { ComponentStyle, LabelStyle, SelectStyle } from "comps/controls/styleControlConstants"; import { trans } from "i18n"; import { stringExposingStateControl } from "../../controls/codeStateControl"; import { UICompBuilder } from "../../generators"; @@ -26,7 +26,8 @@ let SelectBasicComp = (function () { defaultValue: stringExposingStateControl("defaultValue"), value: stringExposingStateControl("value"), style: styleControl(SelectStyle), - labelStyle: styleControl(LabelStyle) + labelStyle: styleControl(LabelStyle), + field: styleControl(ComponentStyle) }; return new UICompBuilder(childrenMap, (props, dispatch) => { const [ @@ -42,7 +43,8 @@ let SelectBasicComp = (function () { return props.label({ required: props.required, style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, children: ( , margin: MarginControl, padding: PaddingControl, + field:styleControl(ComponentStyle), ...SelectInputValidationChildren, ...formDataChildren, }; @@ -291,6 +294,7 @@ export const SelectPropertyView = ( value: { propertyView: (params: ControlParams) => ControlNode }; style: { getPropertyView: () => ControlNode }; labelStyle: { getPropertyView: () => ControlNode }; + field: { getPropertyView: () => ControlNode }; } ) => ( <> @@ -336,6 +340,9 @@ export const SelectPropertyView = (
{children.labelStyle.getPropertyView()}
+
+ {children.field.getPropertyView()} +
)} From 12d5ff4214cd1d8df0c18400fa7e21ce3f801a5d Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Thu, 18 Apr 2024 11:33:59 +0500 Subject: [PATCH 21/28] field style added to multi select --- .../src/comps/comps/selectInputComp/multiSelectComp.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx index 5dc7192da..f496adc46 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx @@ -1,5 +1,5 @@ import { styleControl } from "comps/controls/styleControl"; -import { LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants"; +import { ComponentStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants"; import { trans } from "i18n"; import { arrayStringExposingStateControl } from "../../controls/codeStateControl"; import { UICompBuilder } from "../../generators"; @@ -24,6 +24,7 @@ let MultiSelectBasicComp = (function () { value: arrayStringExposingStateControl("value"), style: styleControl(MultiSelectStyle), labelStyle:styleControl(LabelStyle), + field:styleControl(ComponentStyle), margin: MarginControl, padding: PaddingControl, }; @@ -37,7 +38,8 @@ let MultiSelectBasicComp = (function () { return props.label({ required: props.required, style: props.style, - labelStyle:props.labelStyle, + labelStyle: props.labelStyle, + field:props.field, children: ( Date: Fri, 19 Apr 2024 15:44:17 +0500 Subject: [PATCH 22/28] refactored variable name --- .../src/components/Section.tsx | 3 ++- .../src/i18n/design/locales/en.ts | 3 ++- .../autoCompleteComp/autoCompleteComp.tsx | 24 +++++++++---------- .../src/comps/comps/dateComp/dateComp.tsx | 22 ++++++++--------- .../comps/numberInputComp/numberInputComp.tsx | 14 +++++------ .../comps/numberInputComp/rangeSliderComp.tsx | 4 ++-- .../comps/numberInputComp/sliderComp.tsx | 4 ++-- .../numberInputComp/sliderCompConstants.tsx | 10 ++++---- .../lowcoder/src/comps/comps/ratingComp.tsx | 14 +++++------ .../comps/selectInputComp/cascaderComp.tsx | 5 ++-- .../selectInputComp/cascaderContants.tsx | 11 +++++---- .../comps/selectInputComp/checkboxComp.tsx | 10 ++++---- .../comps/selectInputComp/multiSelectComp.tsx | 8 +++---- .../comps/comps/selectInputComp/radioComp.tsx | 2 +- .../selectInputComp/radioCompConstants.tsx | 8 +++---- .../comps/selectInputComp/selectComp.tsx | 8 +++---- .../selectInputComp/selectCompConstants.tsx | 11 +++++---- .../src/comps/comps/signatureComp.tsx | 17 ++++++------- .../lowcoder/src/comps/comps/switchComp.tsx | 14 +++++------ .../comps/comps/textInputComp/inputComp.tsx | 12 +++++----- .../comps/textInputComp/passwordComp.tsx | 12 +++++----- .../comps/textInputComp/textAreaComp.tsx | 14 +++++------ .../src/comps/comps/treeComp/treeComp.tsx | 14 +++++------ .../comps/comps/treeComp/treeSelectComp.tsx | 12 +++++----- .../src/comps/controls/labelControl.tsx | 23 +++++++++--------- .../comps/controls/styleControlConstants.tsx | 3 ++- 26 files changed, 145 insertions(+), 137 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 7c716c541..f0d2d14d8 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -148,5 +148,6 @@ export const sectionNames = { labelStyle:trans("prop.labelStyle"), data: trans("prop.data"), meetings: trans("prop.meetings"), // added by Falk Wolsky - field:trans("prop.field") + field: trans("prop.field"), + inputFieldStyle:trans("prop.inputFieldStyle") }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index 6dc8131db..b2bd85625 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -27,7 +27,8 @@ export const en = { style: "Style", meetings: "Meeting Settings", data: "Data", - field:'Field' + field: 'Field', + inputFieldStyle:'Input Field Style' }, passwordInput: { label: "Password:", diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index c0b5cf937..ae6fb9457 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -3,7 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design"; import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; import { - ComponentStyle, + InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, @@ -74,7 +74,7 @@ const childrenMap = { ...textInputChildren, viewRef: RefControl, allowClear: BoolControl.DEFAULT_TRUE, - style: styleControl(InputLikeStyle), + style: styleControl(InputFieldStyle), labelStyle:styleControl(LabelStyle), prefixIcon: IconControl, suffixIcon: IconControl, @@ -88,7 +88,7 @@ const childrenMap = { autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), componentSize: dropdownControl(componentSize, "small"), valueInItems: booleanExposingStateControl("valueInItems"), - field: styleControl(ComponentStyle), + inputFieldStyle: styleControl(InputLikeStyle), }; const getValidate = (value: any): "" | "warning" | "error" | undefined => { @@ -157,11 +157,11 @@ let AutoCompleteCompBase = (function () { {children.labelStyle.getPropertyView()} -
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
); diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 51073bf86..2d485b0d9 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { ComponentStyle, DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; import { withMethodExposing } from "../../generators/withMethodExposing"; import { disabledPropertyView, @@ -71,12 +71,12 @@ const commonChildren = { hourStep: RangeControl.closed(1, 24, 1), minuteStep: RangeControl.closed(1, 60, 1), secondStep: RangeControl.closed(1, 60, 1), - style: styleControl(DateTimeStyle), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), suffixIcon: withDefault(IconControl, "/icon:regular/calendar"), ...validationChildren, viewRef: RefControl, - field:styleControl(ComponentStyle) + inputFieldStyle:styleControl(DateTimeStyle) }; type CommonChildrenType = RecordConstructorToComp; @@ -168,12 +168,12 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { required: props.required, style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( disabledTime(props.minTime, props.maxTime)} - $style={props.style} + $style={props.inputFieldStyle} disabled={props.disabled} {...datePickerProps(props)} minDate={props.minDate} @@ -255,8 +255,8 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
{children.labelStyle.getPropertyView()}
-
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
)} @@ -286,7 +286,7 @@ export const dateRangeControl = (function () { const children = ( {children.labelStyle.getPropertyView()}
-
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index 07dee4b25..6f78d16df 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; import { RefControl } from "../../controls/refControl"; import { styleControl } from "comps/controls/styleControl"; -import { ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { disabledPropertyView, hiddenPropertyView, @@ -257,10 +257,10 @@ const childrenMap = { allowNull: BoolControl, onEvent: InputEventHandlerControl, viewRef: RefControl, - style: styleControl(InputLikeStyle), + style: styleControl(InputFieldStyle), labelStyle:styleControl(LabelStyle), prefixIcon: IconControl, - field:styleControl(ComponentStyle), + inputFieldStyle:styleControl(InputLikeStyle), // validation required: BoolControl, min: UndefinedNumberControl, @@ -322,7 +322,7 @@ const CustomInputNumber = (props: RecordConstructorToView) = placeholder={props.placeholder} stringMode={true} precision={props.precision} - $style={props.style} + $style={props.inputFieldStyle} prefix={hasIcon(props.prefixIcon) && props.prefixIcon} onPressEnter={() => { handleFinish(); @@ -382,7 +382,7 @@ let NumberInputTmpComp = (function () { children: , style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, ...validate(props), }); }) @@ -437,8 +437,8 @@ let NumberInputTmpComp = (function () {
{children.labelStyle.getPropertyView()}
-
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx index 9fc9262d9..12c39ad6b 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx @@ -16,7 +16,7 @@ const RangeSliderBasicComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( { @@ -29,7 +29,7 @@ const RangeSliderBasicComp = (function () { {...props} range={true} value={[props.start.value, props.end.value]} - $style={props.style} + $style={props.inputFieldStyle} style={{ margin: 0 }} onChange={([start, end]) => { props.start.onChange(start); diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index 11573dd1a..4a37da1fc 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -20,7 +20,7 @@ const SliderBasicComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( { @@ -32,7 +32,7 @@ const SliderBasicComp = (function () { { diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index ac4791352..6e6a44ac7 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; import { Section, sectionNames } from "lowcoder-design"; import { RecordConstructorToComp } from "lowcoder-core"; import { styleControl } from "comps/controls/styleControl"; -import { ComponentStyle, LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; import { default as Slider } from "antd/es/slider"; import { darkenColor, fadeColor } from "lowcoder-design"; @@ -67,11 +67,11 @@ export const SliderChildren = { label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, - style: styleControl(SliderStyle), + style: styleControl(InputFieldStyle), labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)), prefixIcon: IconControl, suffixIcon: IconControl, - field:styleControl(ComponentStyle) + inputFieldStyle:styleControl(SliderStyle) }; export const SliderPropertyView = ( @@ -102,8 +102,8 @@ export const SliderPropertyView = (
{children.labelStyle.getPropertyView()}
-
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index d01c60f9b..0f095d5a6 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { ComponentStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; @@ -43,9 +43,9 @@ const RatingBasicComp = (function () { allowHalf: BoolControl, disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), - style: migrateOldData(styleControl(RatingStyle), fixOldData), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), - field:styleControl(ComponentStyle), + inputFieldStyle:migrateOldData(styleControl(RatingStyle), fixOldData), ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { @@ -67,7 +67,7 @@ const RatingBasicComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( ), }); @@ -121,8 +121,8 @@ const RatingBasicComp = (function () {
{children.labelStyle.getPropertyView()}
-
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index 2bfb79f5e..87a172c04 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -19,10 +19,11 @@ let CascaderBasicComp = (function () { const childrenMap = CascaderChildren; return new UICompBuilder(childrenMap, (props) => { + console.log("🚀 ~ returnnewUICompBuilder ~ props:", props) return props.label({ style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( props.onEvent("focus")} onBlur={() => props.onEvent("blur")} onChange={(value: (string | number)[]) => { diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index 76d4f12c5..82c004f06 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -6,7 +6,7 @@ import { arrayStringExposingStateControl } from "comps/controls/codeStateControl import { BoolControl } from "comps/controls/boolControl"; import { LabelControl } from "comps/controls/labelControl"; import { styleControl } from "comps/controls/styleControl"; -import { CascaderStyle, ComponentStyle, LabelStyle } from "comps/controls/styleControlConstants"; +import { CascaderStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; import { allowClearPropertyView, disabledPropertyView, @@ -34,19 +34,20 @@ export const CascaderChildren = { onEvent: SelectEventHandlerControl, allowClear: BoolControl, options: JSONObjectArrayControl, - style: styleControl(CascaderStyle), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), showSearch: BoolControl.DEFAULT_TRUE, viewRef: RefControl, margin: MarginControl, padding: PaddingControl, - field:styleControl(ComponentStyle) + inputFieldStyle:styleControl(CascaderStyle) }; export const CascaderPropertyView = ( children: RecordConstructorToComp ) => ( <> + {console.log(children)}
{children.options.propertyView({ label: trans("cascader.options") })} {children.value.propertyView({ label: trans("prop.defaultValue") })} @@ -80,8 +81,8 @@ export const CascaderPropertyView = (
{children.labelStyle.getPropertyView()}
-
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index c6dff1004..c0cc28a7d 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -15,7 +15,7 @@ import { } from "./selectInputConstants"; import { formDataChildren } from "../formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { CheckboxStyle, CheckboxStyleType, ComponentStyle, LabelStyle } from "comps/controls/styleControlConstants"; +import { CheckboxStyle, CheckboxStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants"; import { dropdownControl } from "../../controls/dropdownControl"; import { ValueFromOption } from "lowcoder-design"; @@ -136,11 +136,11 @@ let CheckboxBasicComp = (function () { disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectInputOptionControl, - style: styleControl(CheckboxStyle), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), layout: dropdownControl(RadioLayoutOptions, "horizontal"), viewRef: RefControl, - field:styleControl(ComponentStyle), + inputFieldStyle:styleControl(CheckboxStyle), ...SelectInputValidationChildren, ...formDataChildren, }; @@ -153,13 +153,13 @@ let CheckboxBasicComp = (function () { required: props.required, style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( option.value !== undefined && !option.hidden) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx index f496adc46..94b7b0fd9 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx @@ -1,5 +1,5 @@ import { styleControl } from "comps/controls/styleControl"; -import { ComponentStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants"; import { trans } from "i18n"; import { arrayStringExposingStateControl } from "../../controls/codeStateControl"; import { UICompBuilder } from "../../generators"; @@ -22,9 +22,9 @@ let MultiSelectBasicComp = (function () { ...SelectChildrenMap, defaultValue: arrayStringExposingStateControl("defaultValue", ["1", "2"]), value: arrayStringExposingStateControl("value"), - style: styleControl(MultiSelectStyle), + style: styleControl(InputFieldStyle), labelStyle:styleControl(LabelStyle), - field:styleControl(ComponentStyle), + inputFieldStyle:styleControl(MultiSelectStyle), margin: MarginControl, padding: PaddingControl, }; @@ -39,7 +39,7 @@ let MultiSelectBasicComp = (function () { required: props.required, style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( , - field:styleControl(ComponentStyle), + inputFieldStyle:styleControl(RadioStyle), ...SelectInputValidationChildren, ...formDataChildren, }; @@ -96,7 +96,7 @@ export const RadioPropertyView = ( <>
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
-
{children.field.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx index 12c3b2d1d..4341581e3 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx @@ -1,5 +1,5 @@ import { styleControl } from "comps/controls/styleControl"; -import { ComponentStyle, LabelStyle, SelectStyle } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, LabelStyle, SelectStyle } from "comps/controls/styleControlConstants"; import { trans } from "i18n"; import { stringExposingStateControl } from "../../controls/codeStateControl"; import { UICompBuilder } from "../../generators"; @@ -25,9 +25,9 @@ let SelectBasicComp = (function () { ...SelectChildrenMap, defaultValue: stringExposingStateControl("defaultValue"), value: stringExposingStateControl("value"), - style: styleControl(SelectStyle), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle), - field: styleControl(ComponentStyle) + inputFieldStyle: styleControl(SelectStyle) }; return new UICompBuilder(childrenMap, (props, dispatch) => { const [ @@ -44,7 +44,7 @@ let SelectBasicComp = (function () { required: props.required, style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( , margin: MarginControl, padding: PaddingControl, - field:styleControl(ComponentStyle), + inputFieldStyle:styleControl(SelectStyle), ...SelectInputValidationChildren, ...formDataChildren, }; @@ -294,7 +295,7 @@ export const SelectPropertyView = ( value: { propertyView: (params: ControlParams) => ControlNode }; style: { getPropertyView: () => ControlNode }; labelStyle: { getPropertyView: () => ControlNode }; - field: { getPropertyView: () => ControlNode }; + inputFieldStyle: { getPropertyView: () => ControlNode }; } ) => ( <> @@ -340,8 +341,8 @@ export const SelectPropertyView = (
{children.labelStyle.getPropertyView()}
-
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx index a0f046c0f..d30e35999 100644 --- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx @@ -12,7 +12,8 @@ import { SignatureStyleType, widthCalculator, heightCalculator, - ComponentStyle + + InputFieldStyle } from "comps/controls/styleControlConstants"; import { stateComp, withDefault } from "comps/generators/simpleGenerators"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; @@ -99,12 +100,12 @@ const childrenMap = { tips: withDefault(StringControl, trans("signature.signHere")), onEvent: ChangeEventHandlerControl, label: withDefault(LabelControl, { position: "column", text: "" }), - style: styleControl(SignatureStyle), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle), showUndo: withDefault(BoolControl, true), showClear: withDefault(BoolControl, true), value: stateComp(""), - field:styleControl(ComponentStyle), + inputFieldStyle:styleControl(SignatureStyle), ...formDataChildren, }; @@ -130,7 +131,7 @@ let SignatureTmpComp = (function () { return props.label({ style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( { @@ -142,7 +143,7 @@ let SignatureTmpComp = (function () { onMouseDown={(e) => { e.preventDefault(); }} - $style={props.style} + $style={props.inputFieldStyle} $isEmpty={!props.value && !isBegin} >
@@ -151,7 +152,7 @@ let SignatureTmpComp = (function () { ref={(ref) => { canvas = ref; }} - penColor={props.style.pen} + penColor={props.inputFieldStyle.pen} clearOnResize={false} canvasProps={{ className: "sigCanvas", @@ -230,8 +231,8 @@ let SignatureTmpComp = (function () {
{children.labelStyle.getPropertyView()}
-
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 80c583e02..8b113857f 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -4,7 +4,7 @@ import { booleanExposingStateControl } from "comps/controls/codeStateControl"; import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; import { LabelControl } from "comps/controls/labelControl"; import { styleControl } from "comps/controls/styleControl"; -import { SwitchStyle, SwitchStyleType, LabelStyle, ComponentStyle } from "comps/controls/styleControlConstants"; +import { SwitchStyle, SwitchStyleType, LabelStyle, InputFieldStyle } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { Section, sectionNames } from "lowcoder-design"; import styled, { css } from "styled-components"; @@ -89,19 +89,19 @@ let SwitchTmpComp = (function () { label: LabelControl, onEvent: eventHandlerControl(EventOptions), disabled: BoolCodeControl, - style: migrateOldData(styleControl(SwitchStyle), fixOldData), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), viewRef: RefControl, - field:styleControl(ComponentStyle), + inputFieldStyle:migrateOldData(styleControl(SwitchStyle), fixOldData), ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { return props.label({ style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( - + {children.labelStyle.getPropertyView()}
-
- {children.field.getPropertyView()} +
+ {children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index 136a05dca..bb81449ac 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -1,7 +1,7 @@ import { Input, Section, sectionNames } from "lowcoder-design"; import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; -import { ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants"; import { NameConfig, NameConfigPlaceHolder, @@ -49,11 +49,11 @@ const childrenMap = { viewRef: RefControl, showCount: BoolControl, allowClear: BoolControl, - style: styleControl(InputLikeStyle), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle), prefixIcon: IconControl, suffixIcon: IconControl, - field: styleControl(ComponentStyle), + inputFieldStyle: styleControl(InputLikeStyle), }; let InputBasicComp = new UICompBuilder(childrenMap, (props) => { @@ -66,14 +66,14 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { ref={props.viewRef} showCount={props.showCount} allowClear={props.allowClear} - $style={props.style} + $style={props.inputFieldStyle} prefix={hasIcon(props.prefixIcon) && props.prefixIcon} suffix={hasIcon(props.suffixIcon) && props.suffixIcon} /> ), style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, ...validateState, }); }) @@ -104,7 +104,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { <>
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
-
{children.field.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index 4b6fe4f14..da4e14211 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -26,7 +26,7 @@ import { import { withMethodExposing } from "../../generators/withMethodExposing"; import { styleControl } from "comps/controls/styleControl"; import styled from "styled-components"; -import { ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { hiddenPropertyView, minLengthPropertyView, @@ -57,9 +57,9 @@ let PasswordTmpComp = (function () { validationType: dropdownControl(TextInputValidationOptions, "Regex"), visibilityToggle: BoolControl.DEFAULT_TRUE, prefixIcon: IconControl, - style: styleControl(InputLikeStyle), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle), - field: styleControl(ComponentStyle) + inputFieldStyle: styleControl(InputLikeStyle) }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); @@ -71,12 +71,12 @@ let PasswordTmpComp = (function () { {...inputProps} ref={props.viewRef} visibilityToggle={props.visibilityToggle} - $style={props.style} + $style={props.inputFieldStyle} /> ), style: props.style, labelStyle: props.labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, ...validateState, }); }) @@ -112,7 +112,7 @@ let PasswordTmpComp = (function () { <>
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
-
{children.field.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index bfdce7f1c..b6e4966fb 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -22,7 +22,7 @@ import { import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; import { styleControl } from "comps/controls/styleControl"; import styled from "styled-components"; -import { ComponentStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { TextArea } from "components/TextArea"; import { allowClearPropertyView, @@ -71,23 +71,23 @@ let TextAreaTmpComp = (function () { viewRef: RefControl, allowClear: BoolControl, autoHeight: withDefault(AutoHeightControl, "fixed"), - style: styleControl(InputLikeStyle), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle), - field: styleControl(ComponentStyle) + inputFieldStyle: styleControl(InputLikeStyle) }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); return props.label({ required: props.required, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( - + ), @@ -122,7 +122,7 @@ let TextAreaTmpComp = (function () { <>
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
-
{children.field.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index 52a4858b5..1969bffc2 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -7,7 +7,7 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; import ReactResizeDetector from "react-resize-detector"; import { StyleConfigType, styleControl } from "comps/controls/styleControl"; -import { ComponentStyle, LabelStyle, TreeStyle } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, LabelStyle, TreeStyle } from "comps/controls/styleControlConstants"; import { LabelControl } from "comps/controls/labelControl"; import { withDefault } from "comps/generators"; import { dropdownControl } from "comps/controls/dropdownControl"; @@ -76,9 +76,9 @@ const childrenMap = { label: withDefault(LabelControl, { position: "column" }), // TODO: more event onEvent: SelectEventHandlerControl, - style: styleControl(TreeStyle), + style: styleControl(InputFieldStyle), labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), - field:styleControl(ComponentStyle) + inputFieldStyle:styleControl(TreeStyle) }; const TreeCompView = (props: RecordConstructorToView) => { @@ -99,15 +99,15 @@ const TreeCompView = (props: RecordConstructorToView) => { ...selectInputValidate(props), style, labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: ( setHeight(h)}> - +
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
-
{children.field.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index a0ee69b57..2771d1512 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -6,7 +6,7 @@ import { default as TreeSelect } from "antd/es/tree-select"; import { useEffect } from "react"; import styled from "styled-components"; import { styleControl } from "comps/controls/styleControl"; -import { ComponentStyle, LabelStyle, TreeSelectStyle, TreeSelectStyleType } from "comps/controls/styleControlConstants"; +import { InputFieldStyle, LabelStyle, TreeSelectStyle, TreeSelectStyleType } from "comps/controls/styleControlConstants"; import { LabelControl } from "comps/controls/labelControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { @@ -65,9 +65,9 @@ const childrenMap = { allowClear: BoolControl, showSearch: BoolControl.DEFAULT_TRUE, inputValue: stateComp(""), // search value - style: styleControl(TreeSelectStyle), + style: styleControl(InputFieldStyle), labelStyle:styleControl(LabelStyle), - field:styleControl(ComponentStyle), + inputFieldStyle:styleControl(TreeSelectStyle), viewRef: RefControl, }; @@ -103,12 +103,12 @@ const TreeCompView = ( ...validateState, style, labelStyle, - field:props.field, + inputFieldStyle:props.inputFieldStyle, children: (
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
-
{children.field.getPropertyView()}
+
{children.inputFieldStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index b283d4cca..9aa83bce0 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -22,6 +22,7 @@ type LabelViewProps = Pick; labelStyle?: Record; field?: Record; + inputFieldStyle?: Record; }; const StyledStarIcon = styled(StarIcon)` @@ -42,16 +43,16 @@ function getStyle(style: any) { `; } -const LabelViewWrapper = styled.div<{ $style: any, field: any }>` +const LabelViewWrapper = styled.div<{ $style: any, inputFieldStyle: any }>` ${(props) => { return ( - props.field && { - ...props.field, - borderRadius: props.field.radius, + props.$style && { + ...props.$style, + borderRadius: props.$style.radius, } ); }} - ${(props) => props.$style && getStyle(props.$style)} + ${(props) => props.inputFieldStyle && getStyle(props.inputFieldStyle)} display: flex; flex-direction: column; height: 100%; @@ -168,18 +169,18 @@ export const LabelControl = (function () { }; return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => ( - + @@ -246,7 +247,7 @@ export const LabelControl = (function () { )} - )) +)) .setPropertyViewFn((children) => (
{children.text.propertyView({ label: trans("labelProp.text") })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 2c123a5e5..7d4a7a570 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -793,7 +793,7 @@ export const LabelStyle = [ ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter((style) => style.name !== 'radius' && style.name !== 'background') ] -export const ComponentStyle = [ +export const InputFieldStyle = [ getStaticBackground(SURFACE_COLOR), ...STYLING_FIELDS_CONTAINER_SEQUENCE, ] as const; @@ -1460,6 +1460,7 @@ export const RichTextEditorStyle = [ export type LabelStyleType = StyleConfigType; export type InputLikeStyleType = StyleConfigType; +export type InputFieldStyleType = StyleConfigType; export type ButtonStyleType = StyleConfigType; export type ToggleButtonStyleType = StyleConfigType; export type TextStyleType = StyleConfigType; From f636ffb0197704fc48e82484dc1c5bb8a3a10734 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Sat, 20 Apr 2024 00:38:46 +0500 Subject: [PATCH 23/28] console removeed --- .../lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx | 1 - .../src/comps/comps/selectInputComp/cascaderContants.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index 87a172c04..dc4d83d35 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -19,7 +19,6 @@ let CascaderBasicComp = (function () { const childrenMap = CascaderChildren; return new UICompBuilder(childrenMap, (props) => { - console.log("🚀 ~ returnnewUICompBuilder ~ props:", props) return props.label({ style: props.style, labelStyle: props.labelStyle, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index 82c004f06..f93d44ff7 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -47,7 +47,6 @@ export const CascaderPropertyView = ( children: RecordConstructorToComp ) => ( <> - {console.log(children)}
{children.options.propertyView({ label: trans("cascader.options") })} {children.value.propertyView({ label: trans("prop.defaultValue") })} From 394de1d88496d38f69cb72710339304d963dad4e Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Sat, 20 Apr 2024 00:48:11 +0500 Subject: [PATCH 24/28] border improved --- client/packages/lowcoder/src/comps/controls/labelControl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 9aa83bce0..bdbe6a0ed 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -98,7 +98,7 @@ const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType, $vali text-decoration:${(props) => props.$labelStyle.textDecoration}; font-size:${(props) => props.$labelStyle.textSize}; color:${(props) => !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.label} !important; - ${(props) => `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} + ${(props) => `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} border-radius:${(props) => props.$labelStyle.radius}; padding:${(props) => props.$labelStyle.padding}; margin:${(props) => props.$labelStyle.margin}; From 63bd4e3135cdbfed74416ffc4c2be52329c24a4c Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Sat, 20 Apr 2024 18:15:39 +0500 Subject: [PATCH 25/28] bg color removed --- client/packages/lowcoder-design/src/components/Input.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/packages/lowcoder-design/src/components/Input.tsx b/client/packages/lowcoder-design/src/components/Input.tsx index 7fb9ced59..91f95fab9 100644 --- a/client/packages/lowcoder-design/src/components/Input.tsx +++ b/client/packages/lowcoder-design/src/components/Input.tsx @@ -8,7 +8,6 @@ import { INPUT_DEFAULT_ONCHANGE_DEBOUNCE } from "constants/perf"; export const StyledInput = styled(AntdInput)` width: ${(props) => (props.width ? props.width : "100%")}; - background: #fdfdfd; border: 1px solid ${BorderColor}; border-radius: ${BorderRadius}; padding-left: 12px; From 70cec632a90b770af4082ba8ca59dc514adeab91 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Sat, 20 Apr 2024 18:16:02 +0500 Subject: [PATCH 26/28] date time style updated --- .../packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts | 2 ++ .../lowcoder/src/comps/controls/styleControlConstants.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts index 8e75fbd4a..cdd2f7662 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts @@ -73,6 +73,8 @@ export const getStyle = (style: DateTimeStyleType) => { &:not(.ant-picker-disabled) { border-color: ${style.border}; background-color: ${style.background}; + border-width: ${style.borderWidth}; + border-style: ${style.borderStyle}; input { color: ${style.text}; diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 7d4a7a570..908558a2a 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1140,6 +1140,8 @@ export const DateTimeStyle = [ TEXT, MARGIN, PADDING, + BORDER_STYLE, + BORDER_WIDTH, ...ACCENT_VALIDATE, ] as const; From ba3cd73fc93ae5fdd0aa34e15d6ae3542e3e1705 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Sun, 21 Apr 2024 19:18:29 +0500 Subject: [PATCH 27/28] local styles used --- .../packages/lowcoder-design/src/components/Search.tsx | 10 ++++++++++ .../comps/comps/textInputComp/textInputConstants.tsx | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder-design/src/components/Search.tsx b/client/packages/lowcoder-design/src/components/Search.tsx index 05249e3c1..68d1719ac 100644 --- a/client/packages/lowcoder-design/src/components/Search.tsx +++ b/client/packages/lowcoder-design/src/components/Search.tsx @@ -13,11 +13,21 @@ const SearchInput = styled(Input)` font-size: 13px; user-select: none; overflow: hidden; + background-color: #fdfdfd; + color: #000; &:focus { outline: none; box-shadow: 0 0 0 3px #daecfc; } + &:hover { + background-color: #fdfdfd; + color: #000; + } + &:focus-within { + background-color: #fdfdfd; + color: #000; + } `; const SearchDiv = styled.div<{ error?: boolean }>` height: 32px; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index e0b39b127..f2212358e 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -250,7 +250,7 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) font-style:${style.fontStyle}; text-transform:${style.textTransform}; text-decoration:${style.textDecoration}; - // background-color: ${style.background}; + background-color: ${style.background}; border-color: ${style.border}; &:focus, From c3f9c340f95a277993887899b9a7020a69eea147 Mon Sep 17 00:00:00 2001 From: MenaamAfzal Date: Sun, 21 Apr 2024 20:46:19 +0500 Subject: [PATCH 28/28] bg color updated --- client/packages/lowcoder-design/src/components/customSelect.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder-design/src/components/customSelect.tsx b/client/packages/lowcoder-design/src/components/customSelect.tsx index 7f7ab99fb..f6540aaad 100644 --- a/client/packages/lowcoder-design/src/components/customSelect.tsx +++ b/client/packages/lowcoder-design/src/components/customSelect.tsx @@ -21,6 +21,7 @@ const SelectWrapper = styled.div<{ $border?: boolean }>` height: 100%; align-items: center; margin-right: 8px; + background-color: #fff; .ant-select-selection-item { display: flex;